开发者学堂课程【零基础学前端 HTML+CSS：搜索区域】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5154
搜索区域
内容介绍
一、图片页上方的阴影效果
二、搜索框的样式
三、在搜索框中加入 logo
四、文本框的设计
一、图片页上方的阴影效果
可以在设计图上面看见顶部有一个阴影的效果，但是还未完成程序设置的设计图上面顶部是空白的 。如果想要在设计图上看见顶部有阴影的效果那就需要在程序代码中加入 box- shadow ；设计图如下：
那 box- shadow 需要在哪个代码区域加入？
答：找到代码区域的 nav，并且在 css 文件中的 nav 代码区域加入 box- shadow。
#nav {
width: 100%;
min-width: 960px;
max-width: 1920px;
background-color: #ffffff;
height :60px;
box- shadow:0px 0px 4px 2px rgb(0,0,0)
}
//或者可用“ rgba“的形式：box- shadow:0px 0px 4px 2px rgba(0,0,0，0.5) ，0.5相当于一个半透明，0px 是横坐标，0px 是纵坐标，横纵坐标为零表示不允许横坐标和纵坐标出现。羽化值为 4px、 blue；2px 是位置信息
刷新之后可以看到在上边框具有阴影效果。如下图所示：
加入该程序之前
加入该程序之后
二、搜索框的样式
1、在 index.html 中的程序代码
</div>
<div id="nav-s">搜索</div>
<div id=“main"> 主区域</div>
<div id="dianping">点评</div>
<div id="foot"> 底部信息</div>
<body>
2、搜索框的位置：
首先需要知道搜索框的尺寸：732 和 236。
那么在写样式的时候首先就要写出#nav-s { 。
#nav-s {//这就是搜索框的样式代码；
width: 732px ; //固定宽度 732px
height:236px ; //高度 236px
background-color: rgba(0,0,0,0.6) ;
//背景颜色，明显看的可以看出搜索框是一个半透明的状态，所以在写背景颜色 background-color 的时候就不能再写一个普通的黑色，需要写一个 rgba 的 background-color 的颜色，0.6 的透明度；在设计图中可以看到透明度为 60%，换算的到页面就是 0.6。
border-radius: 5px ;
//搜索框的边框，是一个圆角的边框；css3 中的特效；
margin: 122px auto ；
//搜索文本框的上下左右位置；上下是 122px ；左右是自动的 auto 数值；具体的数可以进行调整，因为每个位置是有区别的；
}
该程序结束后，搜索框的样式大致制作完成，因为效果图的可能没有直接的导出，所以和图像的具体位置有细微区别，可以在之后的代码中进行调整，搜索框样式如下图所示：
三、在搜索框中加入 logo
</div>
<div id="nav-s">
//将 标题“二 ，1、” 中的搜索变为“ nav-s ”
<div><img src="images/logo. png”> </div>
// png 为透明的图，如果网页运行效果不对则说明是图片的问题。
<form action=“#”>
//文本框；form 本身是一块元素；下图白框可以明确的知道是一个搜索，是一根检索的按钮，在之后的代码中需要做成一个 input 的文本框，此时将之前所学到的 HTML 代码的概念又引出了。
<input type=“text”>
//文本的类型 text，刷新之后可以看到搜索页面出现一个白框；
<input type=“submit”>
//搜索文本框右边的内容，刷新之后可以看到搜索页面白框的旁边出现“提交”的字样；
<form>
<div>
<div id=“main">主区域</div>
<div id="dianping">点评</div>
<div id="foot">底部信息</div>
<body>
刷新之后的样式如图所示：
PNG 其实就是透明的一幅图画，该图像导出时就是透明的，比如说当插入一个图像时是一个白底的图片，那就说明插入的图片有问题。
注意：大型网站上面导出的图像是一般是 PNG，让设计人员导出图像时一定要选择透明的图像，这样 PNG 的效果更好；
四、文本框的设计
1、在 index.html 中的程序代码
</div>
<div id="nav-s">
<div><img src="images/logo. png”></div><br>
//< br >的作用是换行，将文字“快租客唯快不破”和下方文本框之间距离变大
//注意：如果是在一个程序中频率较低的使用 <br>，可以快速的帮助程序员解决在程序设计中遇到的较为复杂的问题，如果在使用 <br> 之后效果较好可以选择使用 <br>，但是不建议在很多程序中都去使用 <br> 进行换行，更优的方法是使用“padding”去调整页面位置。
<form action=“#”> //文本框
<input type=“text” class=“ser”>
//为文本框创建一个 class 的命名；比如说在 nav-s 文件下的“ser”搜索；
<input type=“submit”class=“ser-sbumit”>
//此时是 ser 文件下的 submit ；
<form>
<div>
2、在 css.css 中的代码设计
搜索页面“文本框”的设计代码（更改为下图椭圆红色边框的区域）
#nav-s { //这就是搜索框的样式代码；
width: 732px ;//宽度
height:236px ; //高度
background-color: rgba(0,0,0,0.6) ;
//背景颜色，明显看的可以看出搜索框是一个半透明的状态，所以在写背景颜色 background-color 的时候就不能再写一个普通的黑色，需要写一个 rgba 的 background-color 的颜色，0.6 的透明度；
border-radius: 5px ;
//搜索框的边框，是一个圆角的边框；css3 中的特效；
margin: 100px auto ；
//搜索文本框的上下左右位置；
上下是 122 px ；左右是自动的 auto 数值；具体的数可以进行调整，因为每个位置是有区别的；
margin: 100px auto；
//此时更改的区域是文字“快租客”和灰黑色边框之间的距离；
padding-top：10px；
}
.ser{
// ser 是一个用类标记的，所以需要用到 “.”。
width:500px; //文本框的宽度。
height :50px; //文本框的高度。
//此时在刷屏之后可以看到文本框页面宽、高合适，程序设计正确；
font-size：20px；//文字的大小，使文字变大。
border-radius: 5px; //文本框的四角变为“圆角”。
border: none;
//将文本框的四周的边框去掉。因为默认的表单文本框四周是具有边框的，在页面设计上并不美观且与设计图并不相似，所以在程序设计中加入一个“none”将边框去除。
//刷新之后效果如下图所示：
3、搜索页面文本框右方的“提交”设计
（更改为下图圆形红色边框的区域）
.ser-sbumit{ //文本框右边的“提交”；
width:50px ;
height :50px ;
//“提交”的宽和高分别都是 50 像素 ；
background-color ：#FDCA00
//文本框右边的“提交”的颜色 ；
border: none;
//将“提交”框的四周的边框去掉。因为默认的表单四周是具有边框的，在页面设计上并不美观且与设计图并不相似，所以在程序设计中需要加入一个“none”将边框去除。
//“提交”的位置将会在之后的代码中仔细的讲解；
border-radius: 5px;
//文本框右边的“提交”的圆角 ；
}
//刷新之后效果如下图所示：
