综合演练:Baidu Home Page</p>
2.1 技术点
- box-sizing:让padding向内,占用内容的尺寸
<p>content-box，border和padding不计算入width之内</p>
<p>padding-box，padding计算入width内</p>
<p>border-box，border和padding计算入width之内，其实就是怪异模式了~</p>
- float:让标签左浮动 右浮动
- display:改变标签的类型:参考网址：http://www.baidu.com
- background: url("../images/bg.jpg") /设置背景/
- background-size: cover; /设置背景的尺寸/
- text-decoration: none; /去除下划线/
- font-weight: bolder; /加粗/
- vertical-align: middle; /图片居中/
2.2 风格切换
- 静态实现
- 动态实现
需求
<p>html</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<!--导入外部的样式-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#" class="no-weight">登录</a>
<a href="#" class="no-weight">设置</a>
<a href="#" class="more-product">更多产品</a>
</div>
<!--中间内容-->
<div id="main">
<!-- logo-->
<div class="img-logo">
</div>
<!-- 搜索-->
<div class="search">
<input name="quick-search">
<a>百度一下</a>
</div>
<!--默认导航-->
<div class="normal-search">
</div>
<div class="normal-search">
</div>
</div>
<!--尾部-->
<div id="footer">
<div class="footer-header">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
</div>
<div class="footer-header">
©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号
</div>
</div>
</body>
</html>
<p>css</p>
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
/*设置背景*/
background: url("../images/bg.jpg");
/*设置背景的尺寸*/
background-size: cover;
}
/*头部*/
#header{
background-color: rgba(0,0,0,0.2);
height: 44px;
line-height: 44px;
/*右对齐*/
text-align: right;
/*设置上下间距*/
margin: 0 0 50px 0;
}
#header a{
margin-right: 8px;
color: white;
/*加粗*/
font-weight: bolder;
font-family: 'Arial';
}
#header a.no-weight{
font-weight: normal;
}
#header a.more-product{
background-color: #3385ff;
color: white;
/*去除下划线*/
text-decoration: none;
padding: 4px;
}
/*中间内容*/
#main{
/*background-color: red;*/
}
#main .img-logo{
text-align: center;
}
#main .img-logo img{
width: 270px;
height: 129px;
}
#main .search{
background-color: red;
/*块级---水平居中*/
width: 600px;
height: 35px;
margin:0 auto 20px;
}
#main .search input{
width: 500px;
height: 100%;
box-sizing: border-box;
padding-left: 10px;
border:1px solid #e8e8e8;
}
#main .search input:focus{
outline: none;
border:1px solid #3385ff;
}
#main .search a{
background-color: #3385ff;
color: white;
/*去除下划线*/
text-decoration: none;
/*改变标签的类型*/
display: inline-block;
width: 100px;
height: 100%;
/*浮动*/
float: right;
/*水平-垂直居中*/
text-align: center;
line-height: 35px;
}
#main .normal-search{
text-align: center;
margin-bottom: 15px;
}
#main .normal-search img{
width: 110px;
margin: 0 10px;
border-radius: 5px;
/*box-shadow: 0 0 2px yellow;*/
}
#main .normal-search img:hover{
opacity: 0.5;
}
/*尾部*/
#footer{
position: fixed;
bottom: 0;
/*background-color: red;*/
width: 100%;
height: 60px;
text-align: center;
}
#footer .footer-header{
margin-bottom: 8px;
}
#footer .footer-header a{
margin:0 5px;
}
网友评论