2-2 百度首页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2-2 百度首页相关的知识，希望对你有一定的参考价值。
百度首页
上图：当前webstorm的文件目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
<!--javascript:void(0) 等于#-->
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">登录</a>
<a href="#">设置</a>
<a href="#" class="more-product">更多产品</a>
</div>
<!--主要内容-->
<div id="content">
<div class="logo">
<img src="images/logo_white_ee663702.png">
</div>
<div class="search">
<input type="text" value="">
<a href="#">百度一下</a>
</div>
<div class="dom">
<img src="images/d_1.png">
<img src="images/d_2.png">
<img src="images/d_3.png">
<img src="images/d_4.png">
</div>
<div class="dom">
<img src="images/d_5.png">
<img src="images/d_6.png">
<img src="images/d_7.png">
<img src="images/d_8.png">
</div>
</div>
<!--尾部-->
<div id="footer">
<p class="footer-top">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
</p>
<p class="footer-bottom">
?2019 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号 <a href="#">京公网安备11000002000001号</a>
<img src="images/copy_rignt_24.png">
</p>
</div>
</body>
</html>代码：index.html文件中的代码
/*所有标签*/
* {
margin: 0; /*外边距为0*/
padding: 0; /*内边距为0*/
}
a{
color: black;
}
body{
font-size: 13px;
background: url("../images/bg.jpg");
background-size: cover; /*背景图片拉伸*/
}
#header a{
margin-right: 7px;
font-size: 15px;
font-weight: bolder;
color: white;
}
/*复合属性*/
#header a.more-product {
display: inline-block; /*改为行内-会计标签来修改宽度和高度*/
background-color: #3ac0ff;
color: white;
width: 80px;
height: 26px;
text-align: center; /*垂直居中*/
line-height: 26px; /*与height一样高，就是水平居中*/
text-decoration: none; /*去掉下划线*/
font-weight: normal; /*不加粗*/
}
/*头部*/
#header{
background-color: rgba(0,0,0,0.2); /*透明背景*/
text-align: right; /*靠右*/
margin: 0px 9px 30px 0px; /*调整外边距*/
height: 38px;
line-height: 38px; /*垂直居中*/
}
/*主要内容*/
#content{
/*background-color: green;*/
}
#content .search{
/*background-color: cornflowerblue;*/
width: 600px; /*设置宽度方便设置居中*/
margin: 0 auto; /*块级标签居中*/
}
#content .search input{
width: 500px;
height: 33px;
padding: 5px; /*防止输入的文字太贴近边框，设置其内边距*/
box-sizing: border-box; /*设置内边距会导致盒子变大，所以此处保持盒子大小不变，向内缩紧*/
}
#content .search input:focus{
outline: none; /*点击输入框的时候，会变色，此处将边框默认颜色取消*/
border: 1px solid #3385ff; /*设置新的颜色*/
}
#content .search{
margin-bottom: 60px; /*设置外边距下面，与下面的标签保持间距*/
}
#content .search a{
display: inline-block; /*改为行内-会计标签来修改宽度和高度*/
background-color: #3ac0ff;
color: white;
width: 100px;
height: 33px;
text-align: center; /*垂直居中*/
line-height: 33px; /*与height一样高，就是水平居中*/
text-decoration: none; /*去掉下划线*/
font-weight: normal; /*不加粗*/
float: right; /*浮动在父标签的右边*/
}
#content .logo{
text-align: center;
}
#content .logo img{
width: 270px;
height: 129px;
}
#content .dom{
text-align: center;
margin: 5px;
}
#content .dom img:hover{
/*设置不透明度*/
opacity: 0.7; /*将鼠标放在图标的焦点时，图片会有一定透明效果*/
}
#content .dom img{
width: 150px;
}
/*尾部*/
#footer{
margin-top: 120px;
text-align: center;
}
#footer p{
margin-top: 10px;
}
#footer p.footer-top a{
margin: 0 5px;
}
代码：index.css文件中的设计代码
上图：设计完成的百度首页效果
以上是关于2-2 百度首页的主要内容，如果未能解决你的问题，请参考以下文章