/*初始化*/
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
text-decoration: none;
color: #050505;
display: inline-block;
}
input {
border: 0;
box-sizing: border-box; /*width不包括padding和border*/
}
body {
background-color: #f3f5f7; /* 整个页面的背景色 */
}
/*页面头部分*/
header {
height: 100px;
overflow: hidden; /*发生塌陷在父级盒子添加overflow: hidden;*/
}
nav {
height: 42px;
width: 1366px;
margin: 30px auto 0px;
}
/*logo部分*/
.logo {
float: left;
}
/*navbar部分*/
.navbar {
float: left;
margin-left: 65px;
height: 42px;
line-height: 42px; /* 写在父亲里就不用给每个li写了*/
}
.navbar li {
/*height: 42px;
line-height: 42px; 行高可以继承，所以这两句话给父亲也是相同的效果*/
padding: 0px 18px; /* padding一般不要给上下，只给左右*/
float: left;
}
.navbar li a:hover {
border-bottom: 2px solid #00a4ff;
}
/*搜索栏部分*/
.search {
width: 410px; /*360+50*/
height: 38px;
border: 1px solid #00a4ff;
float: left;
}
.search input[type=text] { /*属性选择器*/
width: 360px;
height: 38px;
float: left;
padding-left: 20px;
}
.search input[type=submit] {
width: 50px;
height: 38px;
background-color: #00a4ff;
/*background-image: url(images/search_06.png);
background-repeat: no-repeat; 背景平铺为background-repeat，background-attachment为附着
background-position: center center;*/
/*background: #00a4ff url(images/search_06.png) no-repeat center center;*/
float: left;
/*这里 因为a和input为行内块元素 它们之间在行内排列时是有空隙的，而用浮动则不会有空隙*/
}
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
