CSS的简单练习

最新推荐文章于 2024-10-02 23:02:51 发布

枫叶-

最新推荐文章于 2024-10-02 23:02:51 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/zhangtaoloving/article/details/40247347

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.Div{
width: 1050px;
height: 580px;
/*background-color: red;*/
margin: auto;
margin-top: 20px;
border: 1px solid;
}
.div1{
width: 1050px;
height: 130px;
background: #F8F8F8;

}
.div1-1{
width: 132px;
height: 26px;
border-radius: 20px;
color: #fff;
background: #565455;
font-family: Arial;
cursor:pointer;
float: right;
font-weight: bold;
text-align: center;
line-height: 26px;
font-size: 12px;
margin-top: 10px;

}
.div1-1-1{
display: block;
width: 19px;
height: 19px;
border-radius: 100%;
color: white;
background: #353535;
line-height: 19px;
float: right;
margin-right: 5px;
margin-top: 3px;
}
.div1-2{
clear: right;
width: 250px;
height: 130px;
font-family: Arial;
float: left;
}
.div1-2>img{
margin-top: 10px;
margin-left: 10px;
}
.div1-2>h1{
margin-top:-10px;
margin-left: 5px;
padding: 0px;
}
.div1-2>h5{
margin-left: 7px;
margin-top: -25px;

}
.div1-3{

width: 700px;
margin-top: 40px;
float:right;
font-size: 14px;
font-family: ARIAL;
}
.a6{
float: left;
}
.a1{
float: left;
margin-top: 8px;
margin-left: 10px;
color: #6D6465;
}
.a2{
float: left;
margin-top: 8px;
margin-left: 15px;
color: #6D6465;
}
.a7{
float: left;
}
.a3{
float: left;
margin-left: 2px;
margin-top: 8px;
color: #6D6465;
}
.a4{
float: left;
margin-left: 14px;
margin-top: 8px;
color: #3CB1E7;
}
.a5{
float: left;
margin-left: 18px;
margin-top: 8px;
}
.a8{
float: right;
}

.div1-3>span{
cursor: pointer;
}
.div2{
width: 990px;
height: 390px;
/* background-color: blue;*/
padding: 30px;
}
.div2-1{
width: 681px;
height: 339px;
/* background: green;*/
float: left;
}
.div2-1-1{
width: 681px;
height: 282px;
background-image: url(4.jpg);
border: 0px;
float: left;
}

.div2-1-1-2{
font-weight: bolder;
color: #343434;
font-family: Arial;
margin-left: 30px;
margin-top: 35px;
font-size: 40px;
}
.div2-1-1-1{
color: #343434;
font-weight: 100;
font-family: Arial;
margin-left: 30px;
margin-top: -20px;
font-size: 28px;
}
.b1{
color: #343434;
margin-left: 500px;
margin-top: -50px;
font-style: italic;
font-size: 20px;
}
.c1,.c3,.c5{
color: #C8665B;
font-weight: bolder;
}
.c2,.c4,.c6{
font-size: 12px;
font-family: Arial;
color: #373737;
font-weight: bold;
}
.A1{
margin-left: 30px;
margin-top: 40px;
cursor: pointer;
}
.A2{
margin-left: 220px;
margin-top: -18px;
cursor: pointer;
}
.A3{
margin-left: 30px;
margin-top: 20px;
cursor: pointer;
}
.div2-1-2{
width: 661px;
height: 36px;
background: #333333;
float: left;
line-height: 18px;
padding: 10px;
}
.C1{
font-size: 13px;
color: white;
font-family: Arial;

}
.C2{
font-size: 14px;
color: white;
font-family: Arial;
}
.C3{
font-size: 14px;
color: #AAB1B8;
font-family: Arial;
}
.div2-2{
width: 275px;
height: 360px;
/*background-color:black;*/
float: right;
padding-left: 30px;
}
.div2-2-1{
width: 250px;
height: 56px;
background-color: white;
border-top: 1px dotted;
border-bottom: 1px dotted #DBDBDB;
cursor: pointer;
}
.div2-2-2{
width: 250px;
height: 242px;
border-bottom:1px dotted #DBDBDB;
line-height: 15px;

}
ul{
list-style-image:url(5.jpg);
padding-left: 24px;
cursor: pointer;

}
li{
font-family: arial;
font-size: 14px;
color: #6B6A68;
}
li:hover{
color: orange;
}
.div2-2-3{
float: left;
width: 142px;
height: 32px;
margin-top: -60px;
margin-left: 30px;
text-align: center;
cursor: pointer;
color: white;
font-family: Arial;
line-height: 32px;
border-radius:30px;

background: -webkit-gradient(linear, 0% 100%, 100% 100%,from(#0391D1), color-stop(0.5,#A8E2E6),to(#0391D1));

}
.div2-1-4{
float: left;
width: 114px;
height: 8px;
/*background:red;*/
margin-top: -60px;
margin-left: 44px;
border-radius: 20px;
background: -webkit-gradient(linear, 100% 0%, 100% 100%,from(#24C0E8), color-stop(0.5,white),to(#24C0E8));

}
.div2-2>h3{
font-size: 20px;
color: #34222E;
font-family:Arial;
}
.sp1{
font-size:14px;
color: #34222E;
font-family:Arial;
}
.sp2{
float: left;
font-size:14px;
color: #34222E;
font-family:Arial;
margin-top: 5px;

}
.div2-3{
width: 136px;
height: 24px;
text-align: center;
line-height: 24px;
color: #61675B;
font-family:arial;
float: right;
margin-top: 5px;
margin-right: 60px;
}
.div2-4{
width: 687px;
height: 40px;
line-height: 40px;
font-family: Arial;
font-size: 20px;
color: #312360;
border-bottom:1px dotted #DBDBDB;
float: left;
}
.div2-5{
width: 200px;
height: 34px;
font-size: 20px;
font-family: arial;
color: #1F2921;
margin-left: 700px;
margin-top: -10px;
float: left;
}
</style>
</head>
<body>
<div class="Div">
<div class="div1">

<div class="div1-2">
<img src="1.jpg">
<h1>DreamTemplate</h1>
<h5>Premium Website Temp lates</h5>
</div>
<div class="div1-1">
Members Area
<span class="div1-1-1">></span>
</div>
<div class="div1-3">
<img src="2.jpg" class="a6">
<span class="a1">VIEW NEW TEMPLATES</span>
<span class="a2">CATEGORIES</span>
<img src="3.jpg" class="a7">
<span class="a3"> SUBSCRIPTION PLAN</span>
<span class="a4">SIGNUP NOW</span>
<span class="a5">CONTACT</span>
<img src="3.jpg" class="a8">
</div>
</div>
<div class="div2">
<div class="div2-1">
<div class="div2-1-1">
<h1 class="div2-1-1-2">7500+WEB TEMPLATES</h1>
<h1 class="div2-1-1-1">UNLIMITED DOWNLOADS FOR $59.<h4 class="b1">95</h4></h1>
<div class="A1">
<span class="c1">+</span>
<span class="c2">NO PER PRODUCT FEES</span>
</div>
<div class="A2">
<span class="c3">+</span>
<span class="c4">ONE FULL YEAR SUBSCRIPTION</span>
</div>
<div class="A3">
<SPAN class="c5">+</SPAN>
<span class="c6">USE OUR TEMPLATES FOR YOUR DESIGN CLIENTS (50 MAX)</span>
</div>
</div>

<div class="div2-2-3">
MORE INFO
</div>
<div class="div2-1-4">

</div>
<div class="div2-1-2">
<span class="C1">Access The #1 Premium Website Templates Subscription Store For $59.95 Save $20</span><br/>
<span class="C2">Limited Time Offer Expires:</span>
<span class="C3">October 15, 2014 @ 11.55pm CST.</span>
</div>

</div>
<div class="div2-2">
<h3>Categories</h3>
<div class="div2-2-1">
<span class="sp1">> VIEW All Templates(10343)</span>
<span class="sp2">> Search Templates</span>
</div>
<div class="div2-2-2">
<ul>
<li>CSS TEMPLATES</li>
<li>PRO WEB SITE TEMPLATES </li>
<li>WEB SITE TEMPLATES </li>
<li>FLASH TEMPLATES</li>
<li>FLASH CSS TEMPLATES</li>
<li>PHOTO GALLERY TEMPLATES</li>
<li>WORD TEMPLATES</li>
<li>CORPORATE TEMPLATES</li>
<li>POWERPOINT TEMPLATES</li>
<li>FREE WEB SITE TEMPLATES</li>
</ul>

</div>
</div>
<div class="div2-3">
<select>
<option>Sort Most Popular</option>
</select>
</div>
<div class="div2-4">CSS Templates</div>
<div class="div2-5">Premium Users:</div>
</div>
</div>
</body>
</html>