案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用CSS编程实战案例，做一个搜索框。用户可以使用搜索框搜索内容。

案例演示

运行代码后在浏览器打开新的界面，用户可以触发搜索框并在里面输入内容。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<!-- div标签作为搜索框的外框 -->
<div id="outerFrame">
  <!-- img标签插入图片 -->
  <img src="p/放大镜.png" alt="" class="inside img">
  <!-- input标签输入框供用户输入数据 -->
  <input type="text" class="inside input">
</div>

然后再让我们来看核心的CSS核心代码，CSS代码为HTML标签框架增加样式，使界面更美观。

*{
  /* 消除默认样式 */
  padding: 0px;
  margin: 0px;
}
body{
  background-color: black;
}
/* id选择器对div标签设置 */
#outerFrame{
  /* 设置边框 */
  border: 5px solid rgb(212, 255, 0);
  /* 绝对定位 */
  position: absolute;
  /* 左边上边外边框边距 */
  margin-top: 250px;
  margin-left: 500px;
  /* 阴影设置 */
  box-shadow: 2px 2px 10px #b18520;
  /* 背景色 */
  background-color: white;
}
#outerFrame,.input,.img{
/* 圆角边框 */
border-radius: 35px;
}
.inside{
/* border: 1px solid green; */
}
.img,.input{
/* 属性设置元素的垂直对齐方式。 */
vertical-align:middle;
}
.img{
/* 设置宽高 */
width: 50px;
height: 50px;
margin-left: 10px;
}
.input{
width: 350px;
height: 50px;
/* 不显示边框 */
outline: none;
border: none;
/* 输入内容的字体大小 */
font-size: 30px;
padding-left: 20px;
margin-left: -17px;
}

记得关注我，每天学习一点点

你觉得这个案例都可以应用在什么场景下？

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。