您的位置：首页 > Web前端 > CSS

HTML/CSS基础知识实战

2018-01-22 13:03 741 查看

前一段时间学了HTML和CSS的知识，今天有时间赶紧将学到的知识综合起来写个好看的界面。整体

界面效果如下：

整体分为头部、中部、底部，需要使用到例如浮动、浮动的清除、遮罩层、水平垂直居中等基础知识。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo">
<img src="image/logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="top">
<img src="image/1.jpeg"/>
</div>
<!--遮罩层-->
<div class="topLayer"></div>
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFE&l
12b1c
t;/div>
<button>LOOK MORE ></button>
</div>
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png"/>
<div class="comm">Microblog</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png"/>
<div class="comm">Wechat</div>
</div>
<div class="commen qq">
<img src="image/QQ.png"/>
<div class="comm">QQ</div>
</div>
<div class="clear"></div><!--清除浮动-->
</div>
<div class="m-middle">
"I want to give good things to record down,<br>
after the recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg">
<div class="m-com-word">Cool Image</div>
<div class="m-com-word">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg">
<div class="m-com-word">Great Picture</div>
<div class="m-com-word">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg">
<div class="m-com-word">Cool Image</div>
<div class="m-com-word">Record The Picture</div>
</div>
<div class="clear"></div><!--清除浮动-->
</div>
</div>
<div class="bottom">
<div class="content">
<div class="title">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<!--图文混排固定使用标签 dt是图片 dd是文字描述-->
<dl>
<dt><img src="image/04-01.jpg"/></dt>
<dd class="word">Life is like a book, just read more and more
refined, more write more carefully. When read,
mind open, all things have been indifferent to
heart. Life is the precipitation.</dd>
</dl>
<dl>
<dt><img src="image/04-02.jpg"/></dt>
<dd class="word">Life is like a cup of tea, let people lead a
person to endless aftertastes. You again good
taste, it will always have a different taste,
different people will have different taste more.</dd>
</dl>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>

css文件

*{
padding: 0;
margin:0;
}
.header{
width: 100%;
height: 100px;
}
.header  img{
width:300px;
height: 85px;
padding-left:100px;
padding-top: 8px;

}
.header .logo {
float: left;
}
.header .nav {
float: right;
}
.header .nav ul {
margin-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
width: 80px;
height: 100px;
line-height:100px;
font-size:15px ;
font-weight: bolder;
color: #7D7D7D;
}
.main .top{
width: 100%;
height: 600px;
}
.main .top img{
width: 100%;
height: 600px;
}
.main .topLayer{
position: absolute;
top: 100px;
left: 0;
background-color:#000;
width: 100%;
height: 600px;
opacity: 0.5;
}
.main .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top:400px;
margin-top: -150px;
z-index: 2;
right:50% ;
margin-right: -250px;
}
.main .topLayer-top .word{
padding-top: 100px;
color: #fff;
font-size: 45px;
font-weight: bolder;
text-align: center;
font-family: "微软雅黑";
}
.main .topLayer-top button{
width:200px;
height: 60px;
margin-top: 50px;
color: #fff;
background-color:#F5704F ;
font-family: "微软雅黑";
text-align: center;
font-weight: bolder;
font-size: 14px;
border-radius:8px ;
margin-left: 150px;
}
.main .middle{
width: 1000px;
margin: 0 auto;
}
.main .middle .m-top .commen{
float:left;
width: 33.3%;
padding-top: 50px;
text-align: center;
}
.main .middle .m-top .commen img{
width: 100px;
height:100px;
}
.main .middle .m-top .commen .comm{
font-size: 20px;
color:#7D7C7F;
font-weight: bold;
padding-top: 20px;
}
.main .middle .m-middle{
font-size: 22px;
color: #E19796;
font-weight: bold;
padding-top: 50px;
font-style:italic;
text-align: center;
padding-bottom: 50px;
}
.clear{
clear: both;
}
.main .middle .m-bottom .m-com{
float: left;
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.main .middle .m-bottom .m-com img {
width:310px;
height: 260px;
}
.main .middle .m-bottom .des1{
color:#7D7D7F;
padding-top: 20px;
}
.main .middle .m-bottom .des2 {
padding-top: 10px;
color: #BDBDBC;
}
.main .bottom {
background-color: #F9F9F9;
}
.main .bottom .content {
width:1000px ;
margin: 0 auto;
}
.main .bottom .content .titile{
text-align: center;
font-size: 20px;
font-weight: bold;
color: #7D7C7F;
font-family: "微软雅黑";
padding-top:50px;
padding-bottom: 50px;
}
.main .bottom .content .pic-content dl {
float: left;
width:470px;
margin: 10px 12px;
}
.main .bottom .content .pic-content dl img {
width:470px;
height: 460px;

}
.main .bottom .content .pic-content dl .word {
padding-top:20px;
font-size: 20px;
font-weight: bold;
color:#7D7C7F;
padding-bottom: 50px;
}
.footer{
width: 100%;
height: 100px;
background-color: #292C35;
color: #ffffff;
text-align: center;
line-height: 100px;
font-family: "微软雅黑";
font-size: 15px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航