抱歉,这几天有点忙,部门开季度大会。。。今天来继续填坑。
前三篇我们已经介绍了HTML、CSS的一些知识,相信大家已经迫不及待想实际运用一下了。OK,今天我们来写一个Demo,模仿百度首页写一个静态的页面,后面学了JS,还可以加一些动态的东西。话不多说,上代码。
首先我们打开WebStorm,新建一个工程,先创建一个index.html文件,作为主文件:
然后需要用到css文件,那就创建一个,最后是在外面创建一个文件夹来存放,这样便于管理:
准备工作完成了,下面直接看代码吧:
html部分代码:
<!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/bd_logo.png">-->
<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="foot">
<p class="foot-top">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
</p>
<p class="foot-bottom">
@2017 Baidu <a href="#">使用百度必读</a> 意见反馈
<img src="images/copy_rignt_24.png">
</p>
</div>
</body>
</html>
a, p, div, img, input, body, head, title {
padding: 0;
margin: 0;
}
a{
color: black;
}
body {
font-size: 13px;
/*背景图片*/
background: url("../images/bg.jpg");
}
/*头部*/
#header {
background: rgba(0, 0, 0, 0.2);
text-align: right;
margin: 0px 0px 30px 0;
height: 38px;
line-height: 38px;
}
#header a {
margin-right: 7px;
font-weight: bolder;
font-size: 15px;
color: white;
}
#header a.more-Product {
background: #3385ff;
color: white;
display: inline-block;
height: 28px;
width: 80px;
text-align: center;
line-height: 28px;
text-decoration: none;
font-weight: normal;
}
/*主要内容*/
#content{
/*background: green;*/
}
#content .logo {
text-align: center;
}
#content .logo img{
width: 270px;
height: 129px;
}
#content .search {
/*background: blue;*/
width: 600px;
height: 33px;
/*块级元素居中*/
margin: 0 auto;
}
#content .search input {
width: 500px;
height: 33px;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ddd;
}
#content .search a {
background: #3385ff;
color: white;
display: inline-block;
height: 33px;
width: 100px;
text-align: center;
line-height: 33px;
text-decoration: none;
font-weight: normal;
float: right;
}
/*伪类 获取焦点时 去除边框蓝色*/
#content .search input:focus {
outline: none;
border: 1px solid #3385ff;
}
#content .dom {
margin-top: 30px;
text-align: center;
}
#content .dom img {
width: 150px;
margin: 5px;
}
#content .dom img:hover {
/*设置不透明度*/
opacity: 0.7;
}
/*尾部*/
#foot{
/*background: yellow;*/
margin-top: 120px;
text-align: center;
}
#foot p {
margin-top: 10px;
}
#foot p a {
color: blue;
}
#foot p.foot-top a {
margin: 0px 5px;
}
最后运行的效果如下:
通过这个小Demo,可以把之前学到的基础知识综合的使用起来。OK,后面学完js再来做一些炫酷的东西。
代码可以在我的github找到 传送门。