百度前端技术学院练习-任务6
2018-06-24 01:54:54来源：未知 阅读 ()
一个假期过了，也有一段时间没写博客了。这开学之后还是要练一练，不然又生疏了。
<!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;
width: 980px;
}
.waiweikuangzi{
width: 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{
width: 110px;
height: 61px;
margin-bottom: -5px;
}
.top>span{
color: #d45d5c;
float: right;
font-size: 12px;
margin-top: 47px;
}
/************************************************header*******************************************************/
.header{
width: 892px;
}
.header>.Images{
display: block;
width: 641px;
height: 301px;
padding-top: 40px;
float: left;
padding-bottom: 40px;
}
.header-image-zhezhao-left{
position: absolute;
width: 191px;
height: 301px;
background-color: green;
opacity: 0.3;
left: 300px;
top:103px;
}
.header-image-zhezhao-right{
position: absolute;
width: 191px;
height: 301px;
background-color: green;
opacity: 0.3;
left: 748px;
top:103px;
}
.header-right{
float: right;
width: 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{
width: 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;
width: 230px;
line-height: 16px;
}
.main-center{
width: 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{
width: 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{
width: 415px;
}
.wenzhang3-title{
width: 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;
width: 458px;
height: 275px;
position: relative;
top: -615px;
background-size: 458px 275px;
}
.peitu2-zhezhao{
position: absolute;
top: 210px;
width: 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{
width: 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{
width: 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);
width: 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;
width: 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{
width: 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
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签