一个假期过了，也有一段时间没写博客了。这开学之后还是要练一练，不然又生疏了。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="../css/任务6.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="waiweikuangzi">
<div class="pageshang">
<div class="top"><img src="../Images/任务6-左上配图红色.jpg" id="left-top-redImage"><span>2016.03</span></div>
<div class="header">
<img class="Images" src="../Images/任务6-左上大图.jpg">
<div class="header-image-zhezhao-left"></div>
<div class="header-image-zhezhao-right"></div>
<div class="header-right">
<p class="header-right-wenzi-1">About<br>TECHNOLOGE</p>
<p class="header-right-wenzi-2">About technology About technology About technology</p>
<p class="header-right-wenzi-3">700</p>
<p class="header-right-wenzi-4">
<span id="header-right-wenzi-4-1">css</span>
<span id="header-right-wenzi-4-2">css</span>
<span id="header-right-wenzi-4-3">csscsscss</span>
</p>
</div>
</div>
<div class="main">
<div class="main-left">
<p id="main-left-what-title">What</p>
<p id="main-left-what-container">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
</p>
</div>
<div class="main-center">
<p id="main-center-when-title">When</p>
<p id="main-center-when-container">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端</p>
</div>
<div class="main-right">
<p id="main-right-how-title">How</p>
<p id="main-right-how-container-1">
前端前端前端前端前</br>
端前端前端前端前端端</br>
前端前端前端前</p>
<p class="main-right-how-container-2">
<p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">40%</span></p>
<p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">30%</span></p>
<p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">30%</span></p>
</p>
</div>
</div>
</div>
<div class="pagexia">
<div class="wenzhnag3">
<div class="wenzhang3-title">
<span class="wenzhang3-title-1">The</span>
<span class="wenzhang3-title-2">TECHNOLOGY OF FRONT</span><br>
<span class="wenzhang3-title-3">前端技术领域</span>
</div>
<div class="wenzhang3-container">
<p>
<span class="wenzhang3-container-1">前</span>
<span class="wenzhang3-container-2">
端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
端前端前端前端前端前端前端前端前端前端前端前前端前端前端前前端
前端前端前端前端前端前端前端前端前端
</span>
</p>
<p>
<span class="wenzhang3-container-2">
<img src="../Images/任务6-配图三.jpg" class="peitu3">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
</span>
<div class="suojin">
<span class="wenzhang3-container-2">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
</span>
</div>
<div class="suojin">
<span class="wenzhang3-container-2">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
</span>
</div>
</p>
</div>
</div>
<div class="wenzhang4">
<div class="peitu2">
<div class="peitu2-zhezhao">
<div class="peitu2-wenzi-biankuang">
<span class="peitu2-wenzi-zuo">前端技术</span>
<span class="peitu2-wenzi-you">前端技术前端技术</span>
</div>
</div>
</div>
<div class="wenzhang4-xia">
<div class="wenzhang4-xia-1">
<p class="wenzhang4-xia-1-juzi1"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
<span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
<span class="wenzhang4-xia-1-wenziyou">前端</span>
</p>
<p class="wenzhang4-xia-1-juzi2"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
<span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
<span class="wenzhang4-xia-1-wenziyou">前端</span>
</p>
<p class="wenzhang4-xia-1-juzi3"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
<span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
<span class="wenzhang4-xia-1-wenziyou">前端</span>
</p>
</div>
<div class="wenzhang4-xia-2-zuo">
<div id="wenzhang4-xia-2-zuo-1">0</div>
<div id="wenzhang4-xia-2-zuo-2">
<span id="wenzhang4-xia-2-zuo-2-wenzishang">ONE TWO<br>THREE FOUR FIVE</span>
<span id="wenzhang4-xia-2-zuo-2-wenzixia">hello world hello world<br> <br>hello world</span>
</div>
</div>
<div class="wenzhang4-xia-2-you">
<p>
<span class="yinhao-zuo">“</span>
<span class="wenzhang4-xia-2-you-wenzi">
hello world hello<br>
world hello world hello world hello world
hello world hello world hello world hello world
hello world hello world
</span>
<span class="yinhao-you">”</span>
</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-xiabiao">ife.baidu.com</div>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
height: 1386px;
980px;
}
.waiweikuangzi{
892px;
margin-left: 300px;
margin-right: 100px;
}
.top{
border-bottom: 2px solid #938e8c;
}
task-list .task-content{display:block;padding:5px;background:#fff;-webkit-box-shadow:0 0 2px #949494;box-shadow:0 0 2px #949494}
#left-top-redImage{
110px;
height: 61px;
margin-bottom: -5px;
}
.top>span{
color: #d45d5c;
float: right;
font-size: 12px;
margin-top: 47px;
}
/************************************************header*******************************************************/
.header{
892px;
}
.header>.Images{
display: block;
641px;
height: 301px;
padding-top: 40px;
float: left;
padding-bottom: 40px;
}
.header-image-zhezhao-left{
position: absolute;
191px;
height: 301px;
background-color: green;
opacity: 0.3;
left: 300px;
top:103px;
}
.header-image-zhezhao-right{
position: absolute;
191px;
height: 301px;
background-color: green;
opacity: 0.3;
left: 748px;
top:103px;
}
.header-right{
float: right;
203px;
height:301px;
border-top: 2px solid #cc8091;
margin-top: 40px;
}
.header-right-wenzi-1{
font-family: "Microsoft YaHei";
font-size: 24px;
color: #000000;
margin-top: 10px;
text-decoration: underline;
}
.header-right-wenzi-2{
font-family: "KaiTi";
font-size: 12px;
color: #676767;
margin-top: 10px;
}
.header-right-wenzi-3{
font-size: 116px;
color: #75b86b;
font-family: "Microsoft YaHei";
text-decoration: underline;
font-style: italic;
}
.header-right-wenzi-4{
margin-top: -20px;
}
#header-right-wenzi-4-1{
font-size: 55px;
color: #cc8091;
font-family: "Microsoft YaHei";
}
#header-right-wenzi-4-2{
font-size: 21px;
color: #cc8091;
font-family: "Microsoft YaHei";
position: relative;
top: -20px;
}
#header-right-wenzi-4-3{
font-size: 12px;
color: #cc8091;
font-family: "Microsoft YaHei";
position: relative;
left: -35px;
}
/*****************************************MAIN***********************************/
.main{
641px;
}
.main-left{
float: left;
padding-right: 30px;
}
#main-left-what-title{
font-size: 16px;
color: #418c59;
font-family: "Microsoft YaHei";
font-weight: bold;
text-decoration: underline;
}
#main-left-what-container{
padding-top: 16px;
font-size: 12px;
color: #767777;
font-family:SimSun-ExtB;
230px;
line-height: 16px;
}
.main-center{
205px;
float: left;
}
#main-center-when-title{
font-size: 16px;
color: #d2994f;
font-weight: bold;
text-decoration: underline;
}
#main-center-when-container{
font-size: 12px;
color: #231815;
font-family: "Microsoft YaHei";
line-height: 16px;
opacity: 0.7;
padding-top: 16px;
}
.main-right{
130px;
float: left;
padding-left: 30px;
}
#main-right-how-title{
font-size: 16px;
color: #cc7680;
font-weight: bold;
text-decoration: underline;
}
#main-right-how-container-1{
padding-top: 16px;
font-size: 12px;
color:#231815;
font-family: "Microsoft YaHei";
line-height: 16px;
}
.main-right-how-container-2{
padding-top: 20px;
}
.main-right-how-container-2-1{
line-height: 16px;
font-size: 12px;
color:#231815;
}
.main-right-how-container-2-2{
font-size: 12px;
color: #cd4a48;
font-family: "Microsoft YaHei";
font-style: italic;
line-height: 26px;
opacity:0.7;
}
/*文章三*/
.wenzhnag3{
415px;
}
.wenzhang3-title{
415px;
border-bottom:2px solid RGB(17,69,108);
}
.wenzhang3-title-1{
font-size: 72px;
color: #f5e327;
font-family: SimHei;
font-weight: bold;
font-style: italic;
}
.wenzhang3-title-2{
font-size: 42px;
color: #11456b;
font-family: SimHei;
font-weight: bold;
line-height: 16px;
}
.wenzhang3-title-3{
font-size: 33px;
color: #11456b;
font-family: SimHei;
font-weight: bold;
}
.wenzhang3-container{
}
.wenzhang3-container-1{
font-size: 70px;
color:#f5e327;
font-family: "Microsoft YaHei";
float: left;
}
.wenzhang3-container-2{
font-size: 12px;
color: #767777;
font-family: SimSun;
line-height: 16px;
}
.peitu3{
float: right;
padding-left: 25px;
padding-bottom: 15px;
padding-top: 18px;
}
.suojin{
text-indent: 2em;
}
.wenzhang4{
float: right;
}
.peitu2{
background-image: url("../Images/任务6-配图2.jpg");
background-repeat: inherit;
458px;
height: 275px;
position: relative;
top: -615px;
background-size: 458px 275px;
}
.peitu2-zhezhao{
position: absolute;
top: 210px;
455px;
height: 61px;
overflow: hidden;
background: black ;
opacity: 0.5;
}
.peitu2-wenzi-biankuang{
border-left: 3px #72b16a solid;
height: 44px;
position: relative;
left: 40px;
top: 10px;
}
.peitu2-wenzi-zuo{
font-size: 26px;
color: #ffffff;
font-family: "Microsoft YaHei";
padding-left: 15px;
}
.peitu2-wenzi-you{
font-size: 12px;
color: #72b16a;
font-style: italic;
font-family: "Microsoft YaHei";
letter-spacing: 1px;
}
.wenzhang4-xia{
459px;
height: 318px;
background-color: RGB(238,238,214);
position: relative;
top: -590px;
}
.wenzhang4-xia-1{}
.wenzhang4-xia-1-juzi1{
padding: 30px 20px 10px 30px;
}
.wenzhang4-xia-1-juzi2{
padding: 10px 20px 10px 30px;
}
.wenzhang4-xia-1-juzi3{
padding: 10px 20px 15px 30px;
}
.wenzhang4-xia-1-sanjiaoxing{
0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 14px solid red;
position: relative;
top: -16px;
left: -10px;
}
.wenzhang4-xia-1-wenzizuo{
font-size: 16px;
color: #5a5b5b;
font-family: SimSun;
text-align: left;
}
.wenzhang4-xia-1-wenziyou{
font-size: 16px;
color: #5a5b5b;
font-family: SimSun;
text-align: right;
}
.wenzhang4-xia-2-zuo{
background-color: rgb(213,93,92);
260px;
height: 160px;
}
#wenzhang4-xia-2-zuo-1{
font-size: 110px;
color: #ffffff;
font-family: "Microsoft YaHei";
padding: 15px 5px 30px 10px;
}
#wenzhang4-xia-2-zuo-2{
border-left: 2px solid #ffffff;
height: 86px;
position: relative;
left: 80px;
top: -144px;
}
#wenzhang4-xia-2-zuo-2-wenzishang{
font-size: 21px;
color: #ffffff;
font-family: SimHei;
font-style: italic;
padding-left: 5px;
float: left;
line-height: 24px;
}
#wenzhang4-xia-2-zuo-2-wenzixia{
font-size: 12px;
color: #ffffff;
font-family: SimHei;
line-height: 6px;
padding-left: 10px;
padding-top: 5px;
float: left;
}
.wenzhang4-xia-2-you{
position: relative;
left: 300px;
top:-300px;
199px;
height: 160px;
}
.yinhao-zuo{
font-size: 72px;
color: #d45d5c;
font-family: SimHei;
position: relative;
float: left;
left: -70px;
top: 50px;
}
.yinhao-you{
font-size: 72px;
color: #d45d5c;
font-family: SimHei;
float: right;
position: relative;
top:-20px;
left: -15px;
}
.wenzhang4-xia-2-you-wenzi{
float: right;
text-align: left;
font-size: 14px;
color: #5a5b5b;
font-family: SimHei;
font-style: italic;
line-height: 16px;
position: relative;
top: -10px;
left: -25px;
text-indent: 2em;
}
.footer{
892px;
border-bottom: 1px solid #938e8c;
position: relative;
top: 40px;
}
.footer-xiabiao{
font-size: 12px;
color: #d45d5c;
font-family: SimHei;
float: right;
position: relative;
left: 455px;
top: 5px;
}
这里是材料图片：
这里说一下，学东西的时候除了要平时多练，还要注意看书，最好是多看看一些官方文档，之后再自己练一遍，这样帮助会比较大。2017-09-28 16:30:09