前端学习（六）
我的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task1_6_1title>
<link rel="stylesheet" href="D:\work\task1_6_1.css">
head>
<body class="body ">
<div class="page">
<div class="head">
<p class="title">ife.baidu.comp>
<p class="date">2016.03p>
div>
<div class="line1">div>
<div class="img">
<img src="D:\work\image\6_1.png">
div>
<div class="line2">
<p class="text1">ABOUTp>
<p class="text2">TECHNOLOGEp>
<p class="text3">About technologe about technologe about technologep>
<p class="text4">700p>
<p class="text5">3.2p>
<p class="text6">CSSp>
<p class="text7">csscsscsscsscsscssp>
div>
<div class="main">
<div class="part1">
<p class="what">Whatp>
<p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端p>
div>
<div class="part2">
<p class="when">Whenp>
<p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端p>
div>
<div class="part3">
<p class="how">Howp>
<p class="font2">前端前端前端前端前<br/>前端前端前端前端前端前<br/>前端前端前端p>
<br/>
<p class="font3">What--------<span>40%span>p>
<p class="font3">What--------<span>30%span>p>
<p class="font3">What--------<span>30%span>p>
div>
div>
<div class="title1">
<div class="left">
<p class="font4"><span>THEspan> TECHNOLOGE<br/>OF FRONTp>
<p class="font5">前端技术领域p>
<div class="line3">div>
<div class="content">
<p class="first"><span>前span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
<img class="img2" src="D:\work\image\3.png"/>
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端p>
<p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前p>
<p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端p>
div>
div>
<div class="right">
<img class="img3" src="D:\work\image\2.png"/>
<div class="title2">
<div class="title3">
<p class="text8"><span>前端技术span>前端技术前端技术p>
div>
div>
<div class="content2">
<ul class="con_box">
<li><span class="tri">span>前端前端前端前端前端前端.......................<span class="toright">前端span>li>
<li><span class="tri">span>前端前端......................................<span class="toright">前端前span>li>
<li><span class="tri">span>前端前端前端前端前端前端前端...................<span class="toright">前端span>li>
ul>
<div class="red">
<span class="zero">0span>
<div class="line4">
<p class="let">ONE TWO p>
<p class="let">THREE FOUR FIVEp>
<p class="word">hello world hello worldp>
<p class="word">hello worldp>
div>
div>
<div class="hello">
<p><span class="lquote">“span>world hello worldp>
<p>hello world hello worldp>
<p>hello world hello worldp>
<p>hello world hello world p>
<p>hello world hello world p>
<p>hello world<span class="rquote">”span>p>
div>
div>
div>
div>
<div class="foot">
<p>ife.bai.comp>
div>
div>
body>
html>//task1_6_1.css
.body{
background-color: #ccc;
}
.page{
width: 980px;
height: 1386px;
background-color: white;
position: absolute;
top:30px;
left: 50%;
margin-left: -490px;
}
.head{
width: 110px;
height: 61px;
position: absolute;
top:0px;
left:44px;
background-color: #dc143c;
}
.title{
font-family: Simhei;
font-size: 12px;
position:absolute;
top:30px;
right: 15px;
color: #ffffff
}
.date{
font-family: Simhei;
font-size: 12px;
color:#cc0000;
position: absolute;
top:35px;
left:850px;
}
.line1{
width: 892px;
border-top: 2px solid #938e8c;
margin:0 auto;
margin-top: 61px;
}
.img{
width: 641px;
height: 301px;
margin: 30px 44px 30px 44px;
float:left;
}
.line2{
width: 203px;
border-top: 2px solid #cc8091;
margin:30px 44px 0px 0px;
float: right
}
.text1{
font-family: Microsoft Yahei;
font-size: 24px;
color: #000000;
text-decoration: underline;
margin:10px 0px 0px 0px;
}
.text1:first-letter{
font-size:28px;
}
.text2{
font-family: Microsoft Yahei;
font-size: 24px;
color: #000000;
text-decoration: underline;
margin:0px;
}
.text2:first-letter{
font-size: 28px;
}
.text3{
font-family: Simkai;
font-size: 12px;
color: #000000;
margin: 0px 0px 10px 0px;
}
.text4{
font-family: Microsoft Yahei;
font-size: 116px;
color: #75b86b;
font-style: oblique;
margin: -20px 0px 0px -20px;
}
.text5{
font-family: Microsoft Yahei;
font-size: 55px;
color: #cc8091;
margin: -10px;
position: relative;
top:-10px;
left: 0px;
}
.text6{
font-family: Microsoft Yahei;
font-size: 21px;
color: #cc8091;
position:relative;
top: -70px;
left: 70px;
}
.text7{
font-family: Microsoft Yahei;
font-size: 12px;
color: #cc8091;
position: relative;
top:-95px;
left: 70px;
}
.main{
width: 641px;
margin: 364px 0px 0px 44px;
}
.part1{
width: 216px;
position: absolute;
left: 44px;
}
.what{
font-family: Microsoft Yahei;
font-size: 16px;
font-weight: bold;
text-decoration: underline;
color: #418c59;
margin: 0;
}
.font1{
font-family: SimSun;
font-size:12px;
color: #767777;
margin-top:16px;
line-height: 1.5;
}
.part2{
position: relative;
width: 204px;
margin: 0 200px 0 258px ;
}
.when{
font-family: Microsoft Yahei;
font-size: 16px;
font-weight: bold;
text-decoration: underline;
color: #d2994f;
margin: 0;
}
.part3{
width: 161px;
position: absolute;
left:540px;
top:426px;
}
.how{
font-family: Microsoft Yahei;
font-size: 16px;
font-weight: bold;
text-decoration: underline;
color: #cc7680;
margin: 0;
}
.font2{
font-family: SimSun;
font-size:12px;
color: #767777;
margin-top:16px;
line-height: 1.5;
}
.font3{
font-family: Microsoft Yahei;
font-size:12px;
color: #767777;
margin:8px 0px;
}
.font3 span{
color: #cd4a48;
font-style: italic;
opacity:0.7;
}
.title1{
width: 892px;
margin:0 auto;
}
.left{
width: 415px;
position: relative;
top:40px;
}
.font4{
font-family: Simhei;
font-size: 42px;
color:#11456b;
font-weight: bold;
margin:0;
line-height: 1;
}
.font4 span{
font-size: 72px;
color: #f5e327;
font-style: oblique;
}
.font5{
font-family: Simhei;
font-size: 33px;
color:#11456b;
font-weight: bold;
margin-top:16px;
}
.line3{
width: 415px;
margin: -20px 0 0 0;
border-top: 2px solid #11456b;
}
.content{
width: 415px;
font-family: SimSun;
font-size: 12px;
color: #767777;
line-height: 16px;
float: left;
left: 44px;
}
.first{
margin: 30px 0 0 0;
}
/*首字下沉*/
.first span{
font-family: Microsoft Yahei;
font-size: 70px;
color: #f5e327;
float: left;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
}
.img2{
width: 150px;
height: 260px;
float: right;
margin: 5px 0px 5px 5px;
}
.p1{
margin: 0;
}
.p2{
text-indent: 2em;
margin: 0;
}
.right{
width: 485px;
position: relative;
left: 420px;
top:-580px;
}
.img3{
width: 458px;
height: 275px;
margin-left: 30px;
}
.content2{
background-color: #f5f5dc;
width: 459px;
height: 318px;
position: relative;
top:-60px;
left: 30px;
}
.title2{
width: 458px;
height: 61px;
position: relative;
background-color: black;
opacity: 0.5;
top:-75px;
left: 30px;
}
.title3{
width: 900px;
height: 44px;
position: relative;
left: 40px;
top:10px;
border-left: 3px solid #72b16a;
}
.text8{
font-family: Microsoft Yahei;
font-size: 12px;
font-style: oblique;
color:#72b16a;
letter-spacing: 140%;
}
.text8 span{
font-size: 26px;
font-style: normal;
color: #ffffff;
padding:10px;
}
.con_box{
padding:20px;
list-style: none;
}
.con_box li{
width: 434px;;
margin-bottom: 20px;
font: 16px "宋体";
color: #5a5b5b;
float: left;
}
.tri{
display: inline-block;
margin: 0 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #10456b;
}
.toright{
padding-top: 5px;
float: right;
font-size: 12px;
font-style: oblique;
}
.red{
width: 260px;
height: 160px;
position: absolute;
background-color: #dc143c;
top:160px;
}
.zero{
font-family: Microsoft Yahei;
font-size: 110px;
color: #ffffff;
margin: 0 auto;
margin-left: 10px;
}
.line4{
width: 150px;
height: 86px;
position: relative;
left: 80px;
top:-110px;
border-left:2px solid #ffffff;
}
.let{
font-family: Simhei;
font-size: 21px;
font-style: oblique;
color: #ffffff;
margin:0 10px 10px 10px;
}
.word{
font-family: Simhei;
font-size: 12px;
color: #ffffff;
margin:0 10px 3px 10px;
}
.hello{
position: relative;
left:270px;
top: 20px;
}
.hello p{
font-family: Simhei;
font-size: 14px;
font-style: oblique;
color: #5a5b5b;
margin-top:8px;
margin-bottom:8px;
}
.lquote{
font-size: 72px;
color: #d45d5c;
float: left;
margin-top: -10px;
margin-left: -50px;
margin-right: 15px;
margin-bottom: -50px;
}
.rquote{
font-size: 72px;
color: #d45d5c;
float: right;
margin-top: -10px;
margin-right:300px;
margin-bottom: -50px;
}
.foot{
width: 892px;
margin: 0 auto;
border-top: 1px solid #938e8c;
position: relative;
top:-610px;
}
.foot p{
font-family: Simhei;
font-size: 12px;
color: #d45d5c;
float: right;
margin-top:0px;
}问题：试图缩放网页截图，结果全乱了。。。。？？。。。