《淘宝项目开发笔记四》
今天接着前天笔记三的写，今天是要完成如下內容：
同样先分析框架结构：理清父级子级，如下图所示：
以下重点的html+css分析一下：后面有完整的代码。
`/* 头部搜索 /
#headSearch{
background-color: #fff;
padding: 24px 0 10px 0;
height: 87px;
}
#headSearch h1 a{
/ 属性变成块级元素
1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
二、行内元素和块级元素转换
display:block; (字面意思表现形式设为块级元素)
display:inline; (字面意思表现形式设为行内元素)
三、inline-block
inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。 /
display: block;
/ background是集合属性包含background-image/size/color/repeat /
background: url("…/images/logo.png") center no-repeat;
width: 190px;
height: 58px;
margin-top: 8px;
/ 首行缩进 /
text-indent: -9999px;
overflow: hidden;
}
/ #headSearch h1{
font-size: 2em;
font-weight: bold;
} */
#headSearch .code img{
width: 62px;
height: 62px;
}
#headSearch .code {
width: 72px;
height: 86px;
border: 1px solid #eee;
position: relative;
margin-right: 110px;
text-align: center;
}
#headSearch .close{
position: absolute;
left: -16px;
top: -1px;
width: 14px;
height: 14px;
line-height: 14px;
font-size: 14px;
border: 1px solid #eee;
color:black;
/* 鼠标显示一只小手 */
cursor: pointer;
}
#headSearch .search{
width: 630px;
margin: 0 auto;
}
/* searchtab数据 */
#headSearch .searchTab{
height: 22px;
padding-left:17px;
}
#headSearch .searchTab li{
float: left;
width: 36px;
line-height: 22px;
margin-right: 4px;
text-align: center;
color: #f40;
cursor: pointer;
}
#headSearch .searchTab li:hover{
background-color: #ffeee5;
}
#headSearch .searchTab li.active{
color: #fff;
font-weight: bold;
/* 渐变色设置 */
background-image: linear-gradient(to right,#ff9000,#ff5000);
/*滤镜，模糊 渐变色ie6 ie8 都可以用 /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffff9000’, endColorstr=’#ffff5000’, GradientType=1);
/ 倒圆角 */
border-radius: 6px 6px 0 0;
}
#headSearch .searchContent{
height: 40px;
}
#headSearch .searchBox{
width: 554px;
height: 40px;
/IE盒模型/
box-sizing: border-box;
border: 2px solid #ff5000;
border-right: none;
/设置圆角，各个圆角/
border-radius: 20px 0 0 20px;
/透出隐藏/
overflow: hidden;
/相对定位/
position: relative;
}
#headSearch .searchBox input{
width: 490px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
text-indent: 10px;
position: absolute;
z-index: 2;
background-color: transparent; /* 透明，为了能够看到后面的文字 */
}
#headSearch .placeholder{
position: absolute;
top: 6px;
left: 14px;
}
#headSearch .placeholder span{
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .imgSearch{
font-size: 28px;
color: #9c9c9c;
position: absolute;
right: 20px;
top: -2px;
cursor: pointer;
}
#headSearch .searchContent button{
width: 74px;
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #fff;
border: none;
background-image: linear-gradient(to right,#ff9000,#ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffff9000’, endColorstr=’#ffff5000’, GradientType=1);
border-radius: 0 20px 20px 0;
}
#headSearch .hotKey{
height: 25px;
line-height: 25px;
}
#headSearch .hotKey a:hover{
color: #f50;
}`
