首页 > 代码库 > 10.16 作业
10.16 作业
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.a{
margin-left: 50px;
width: 1052px;
height: 581px;
}
.a1{
width: 1052px;
height: 128px;
background-color: #F8F8F8;
position: relative;
}
.a1-1{
width: 200px;
height: 128px;
float: left;
}
.zt{
font-size: 30px;
cursor: pointer;
}
.zt:hover{
color: blue;
}
.zt1{
font-size: 10px;
font-family: arial;
cursor: pointer;
}
.zt1:hover{
color: green;
}
.a1-2{
width: 852px;
height: 128px;
float: left;
}
.b{
width: 852px;
height: 50px;
}
.tp{
margin-top: 10px;
margin-left: 700px;
width: 150px;
height: 30px;
background-color: #4F4F4F;
border-radius:30px;
}
.bzt{
padding-left: 20px;
padding-top: 5px;
font-size: 15px;
font-family: arial;
color: white;
font-weight: 700;
text-align: center;
cursor:pointer;
float: left;
}
.bzt:hover{
color: red;
}
.b1{
width: 852px;
height: 78px;
}
.b2-1{
margin-left: 100px;
width: 350px;
height: 78px;
float: left;
}
.b1zt1{
margin-top: 30px;
margin-left: 20px;
font-size: 10px;
font-family: arial;
color: #7E7567;
font-weight: 700;
float: left;
cursor:pointer;
}
.b1zt1:hover{
color: #34A2EC;
}
.b2-2{
width: 402px;
height: 78px;
float: left;
}
.a2{
padding: 24px 32px;
width: 1020px;
height: 429px;
border: 1px groove;
}
.a2-1{
width: 680px;
height: 427px;
border-bottom: 1px dotted #D8D8D8;
float: left;
}
.c1-1{
width: 680px;
height: 280px;
background:
-webkit-linear-gradient(360deg,#D6D6D6,#F7F7F7,#D1D1D1);
}
.c1-1-1{
padding-top: 30px;
padding-left: 25px;
font-size: 30px;
font-family: arial;
font-weight: 800;
color: #292929;
}
.c1-1-2{
padding-left: 25px;
font-size: 30px;
font-family: arial;
font-weight: 200;
color: #292929;
}
.c1-1-3{
padding-left: 25px;
padding-top: 30px;
font-size: 10px;
font-family: arial;
font-weight: 600;
color: #292929;
float: left;
}
.c1-1-4{
margin-top: 70px;
margin-left: 25px;
width: 120px;
height: 30px;
border-radius: 30px;
background:
-webkit-linear-gradient(360deg,#0272BB 1px,#C3EAF5,#0272BB 118px);
}
.c4{
margin-left: 10px;
padding-top: 5px;
width: 100px;
height: 5px;
border-radius: 5px;
background:
-webkit-linear-gradient(-90deg,#0272BB 1%,#BBE5F3,#C3F2FD);
}
.c5{
padding-left: 17px;
font-size: 20px;
font-weight: 600;
color: white;
cursor: pointer;
}
.c5:hover{
color: #000;
}
.c1-2{
width: 680px;
height: 55px;
background-color: #333333;
}
.c1-2zt{
padding: 5px;
padding-left: 30px;
font-size: 15px;
font-weight: 700;
color: white;
line-height: 20px;
}
.c1-3{
width: 680px;
height: 92px;
}
.xlk{
padding-left: 500px;
}
.c1-3zt{
padding-top: 55px;
font-family: arial;
}
.a2-2{
margin-left: 32px;
width: 308px;
height: 427px;
float: left;
}
.d1{
width: 308px;
height: 115px;
}
.d1-1{
width: 308px;
height: 60px;
border-bottom: 1px dotted #D8D8D8;
}
.d1-2{
width: 308px;
height: 54px;
border-bottom: 1px dotted #D8D8D8;
}
.d1-2zt{
padding-top: 10px;
font-size: 10px;
font-family: arial;
font-weight: 500;
color: #7D6587;
}
.d2{
width: 308px;
height: 262px;
border-bottom: 1px dotted #D8D8D8;
}
.d2-1{
width: 308px;
height: 25px;
float: left;
}
.d2-1zt{
font-size: 15px;
font-weight: 500;
font-family: arial;
color: #64645C;
cursor: pointer;
}
.d2-1zt:hover{
color: red;
}
.d3{
width: 308px;
height:50px;
}
.d3-1{
padding-top: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="a">
<div class="a1">
<div class="a1-1">
<img src="http://www.mamicode.com/1.jpg">
<div class="zt">DreamTemplate</div>
<div class="zt1">Premium Website Templates</div>
</div>
<div class="a1-2">
<div class="b">
<div class="tp">
<div class="bzt">
Menbers area </div>
<div>
<img src="http://www.mamicode.com/0.jpg" style="padding-top:7px;">
</div>
</div>
</div>
<div class="b1">
<div class="b2-1">
<div style="padding-top:25px;cursor:pointer;float:left;">
<img src="http://www.mamicode.com/5.jpg">
</div>
<div class="b1zt1">VIEW NEW TEMPLATES
</div>
<div class="b1zt1">
CATEGORIES</div>
<div style="padding-top:25px;padding-left:10px;cursor:pointer;float:left;">
<img src="http://www.mamicode.com/2.jpg" ></div>
</div>
<div class="b2-2">
<div class="b1zt1">SUBSCRIPTION PLAN</div>
<div class="b1zt1">SIGNUP NOW</div>
<div class="b1zt1">CONTACT</div>
<div ><img src="http://www.mamicode.com/2.jpg" style="padding-top:25px;margin-left:30px;cursor:pointer;"></div>
</div>
</div>
</div>
</div>
<div class="a2">
<div class="a2-1">
<div class="c1-1">
<div class="c1-1-1">7500+WEB TEMPLATES</div>
<div class="c1-1-2">UNLIMITED DOWNLOADS FOR $59.95</div>
<div class="c1-1-3">
<div style="color:red;font-size:10px;float:left;">+</div>NO PER PRODUCT FEES
</div>
<div class="c1-1-3">
<div style="color:red;font-size:10px;float:left;">+</div>ONE FULL YEAR SUBSCRIPTION
</div>
<div class="c1-1-4">
<div class="c4"></div>
<div class="c5">MOREINFO</div>
</div>
</div>
<div class="c1-2">
<div class="c1-2zt">
Access The #1 Premium Website Subscription Store For $59.95 Save $20<br>Limited Time Offer Expires:<span style="font-size:15px;color:#B3ACA5;">October 15,2014 @11.055pm CST.</span> </div>
</div>
<div class="c1-3">
<div class="xlk">
<select style="cursor:pointer;">
<option>Sort MostPopular</option>
<option>Sort MostPo</option>
</select></div>
<div class="c1-3zt">CSS Templates</div>
</div>
</div>
<div class="a2-2">
<div class="d1">
<div class="d1-1">
<div style="font-size:25px;line-height:40px;">Categories</div></div>
<div class="d1-2">
<div class="d1-2zt">>View All Templates<span style="font-size:10px;color:#AEAB9A">(10343)</span></div>
<div class="d1-2zt">>Searchtemplates</div>
</div>
</div>
<div class="d2">
<div class="d2-1" style="margin-top:15px;">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">CSS TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">PRO WEBS SITE TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">WEB SITE TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">FLASH TEMPLA TES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">FLASH CSS TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">PHOTO GALLERY TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">WORO TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">CORPORATE IDENTITY</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">POWERPOINT TEMPLATES</span>
</div>
<div class="d2-1">
<img src="http://www.mamicode.com/3.jpg" style="float:left;">
<span class="d2-1zt">FREE WEB SITE TEMPLATES</span>
</div>
</div>
<div class="d3">
<div class="d3-1">Premium Users:</div>
</div>
</div>
</div>
</div>
</body>
</html>
10.16 作业