前端系列之CSS（布局案例）
效果图：
hmtl文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS网页布局title>
<link href="css/index.css" rel="stylesheet">
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.png">
<div class="topLayer">div>
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFEdiv>
<button>LOOK MORE >button>
div>
div>
<div class="middle">
<div class="m-top">
<div class="commImg weiImg">
<img src="image/wb.png">
<div class="comm">MACROLOGYdiv>
div>
<div class="commImg chart">
<img src="image/wx.png">
<div class="comm">WCHARdiv>
div>
<div class="commImg qq">
<img src="image/qq.png">
<div class="comm">QQdiv>
div>
div>
<div class="clear">div>
<div class="m-middle">
"I want to give goods 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.png">
<div class="des1">Cool Imagediv>
<div class="des2">Record The Picturediv>
div>
<div class="m-com">
<img src="image/03-02.png">
<div class="des1">Cool Imagediv>
<div class="des2">Record The Picturediv>
div>
<div class="m-com">
<img src="image/03-03.png">
<div class="des1">Cool Imagediv>
<div class="des2">Record The Picturediv>
div>
div>
div>
<div class="clear">div>
<div class="bottom">
<div class="content">
<div class="title">FROM THE PHOTO ALBUMdiv>
<div class="pic-content">
<dl>
<dt><img src="image/04-01.png">dt>
<dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.dd>
dl>
<dl>
<dt><img src="image/04-02.png">dt>
<dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.dd>
dl>
div>
<div class="clear">div>
div>
div>
div>
<div class="footer">div>
body>
html>index.css文件
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 50px;
}
.header img {
width: 150px;
height: 42px;
padding-left: 50px;
padding-top: 8px;
}
.header .logo {
float: left;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 50px;
}
.header .nav ul li {
float: left;
list-style: none;
width: 40px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bolder;
color: #7d7d7d;
}
.main .top {
width: 100%;
height: 300px;
}
.main .top img {
width: 100%;
height: 300px;
}
.main .topLayer {
position: absolute;
/*绝对定位*/
top: 54px;
left: 0;
background-color: #000;
width: 100%;
height: 300px;
opacity: 0.5;
/*透明度*/
}
.main .topLayer-top {
width: 500px;
height: 200px;
position: absolute;
top: 200px;
margin-top: -95px;
z-index: 2;
/*因为遮罩层也是脱离文档流的，所以要在这里设置相对高一些的层级*/
right: 50%;
margin-right: -250px;
}
.main .topLayer-top .word {
padding-top: 50px;
color: #ffffff;
font-size: 45px;
font-weight: bolder;
/*字体加粗*/
text-align: center;
font-family: "Microsoft Sans Serif";
}
.main .topLayer-top button {
width: 200px;
height: 30px;
margin-top: 25px;
color: #ffffff;
background-color: #f5704f;
font-family: "Microsoft Sans Serif";
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 .commImg {
float: left;
width: 33.3%;
padding-top: 50px;
text-align: center;
}
.main .middle .m-top .commImg img {
width: 100px;
height: 100px;
}
.main .middle .m-top .commImg .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-size: 20px;
font-weight: bold;
font-size: 20px;
}
.main .middle .m-bottom .m-com img {
width: 310px;
height: 260px;
}
.main .middle .m-bottom .m-com .des1 {
color: #7D7C7F;
padding-top: 20px;
}
.main .middle .m-bottom .m-com .des2 {
padding-top: 10px;
color: #bdbdbc;
}
.main .bottom{
background-color: #F9F9F9;
}
.main .bottom .content{
width: 1000px;
margin: 0 auto;
}
.main .bottom .content .title{
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;
}