地址 www.sunjinglei.com/index.html
html代码
/*reset*/
body,div,ul,li,a,p{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
/*页面的背景*/
body{
background:url(../images/16sucai.jpg);
background-repeat:repeat;}
.top{
height:10px;
background:#000000;}
.top1{
height:30px;
width:940px;
background:#000000;
padding:0px 10px;
margin:0 auto;
overflow:hidden;
}
#b{
font-family:"Tahoma";
font-size:16px;
color:#FFFFFF;
display:inline;
}
#b1{
font-family:"Tahoma";
font-size:14px;
color:#FFFFFF;
display:inline;
background:#000000;
flaot:right;
margin-left:490px;
}
.top2{
margin: 20px auto 0;
width: 960px;
overflow:hidden;
}
#top2a{
display:inline;
}
#top2b{
margin-left:300px;
display:inline;
margin-top:10px;
margin-right:26px;
}
.top2b1,.top2b2,.top2b3,.top2b4{
display:inline;
margin-left:20px;}
.back{
position:relative;}
.back span{
position:absolute;
font-family:"ÐÂËÎÌå";
color:#FFFFFF;
font-size:20px;
left:0;
top:0;
}
.back1{
margin:20px auto 0px;
position:relative;
padding-top:218px;
padding-left: 198px;
z-index:-4;
}
.pa{
margin-left:850px;
}
.tupian{
margin-left:30px;}
.tupian div{
display:inline;}
/*nav*/
.nav{
float: right;
height: 80px;
position: relative;
bottom: -12px;
color: #ffffff;
}
.nav li{
float: left;
margin-right: 42px;
position: relative;
font-size: 18px;
font-family: Tahoma;
color: #ffffff;
}
.nav a{
display: block;
}
.nav>li>a{
height: 32px;
}
.nav li a span{
position: absolute;
top: 22px;
left: 0;
font-size: 11px;
font-family: Arial;
}
.nav-inner{
margin-top: 38px;
/*display: none;*/
height: 0;
overflow: hidden;
position: absolute;
transition: all 1s;
}
.nav-inner li{
float: none;
margin-left: 0;
}
.nav-inner>li a{
display: block;
width: 184px;
padding: 8px 0 10px 10px;
background: #eee;
opacity: .8;
border-top: 1px solid #cacac8;
font-size: 10px;
transition: background 2s;
transition: border-radius 2s;
}
.nav>li:hover .nav-inner{
height: 236px;
}
.nav-inner>li a:hover{
background: blue;
border-radius: 20px;
}
.nav-inner1>li a:hover{
background: blue;
border-radius: 20px;
}
a:visited{
text-decoration: none;
color: #000000;
}
a:link{
color:#000000;
text-decoration: none;
}
a:hover{
color:#000000;
text-decoration: none;
};
.titt-button{
width:960px;
margin:0 auto;
}
.titt{
width:635px;
height:146px;
word-wrap: break-word;
position: absolute;
background:#CCCCCC;
display:inline;
opacity:.8;
margin-top: -120px;
}
.button{
margin-top:98px;
margin-left:800px;
}
.leftbutton{
margin-right:30px;
}
.ways{
width:960px;
height:260px;
margin:196px;
margin:16px auto 0;
overflow:hidden;
}
.weixin,.new,.computer,.styles{
padding-top:22px;
width:228px;
height:237px;
background:#D8D9D9;
text-align:center;
}
.new,.computer,.styles{
float:right;
margin-top:-258px;
}
.computer,.styles{
margin-right:15px;
}
.styles{
margin-left:10px;
}
.computer{
background:#25252C;
}
.weixin,.new,.computer,.styles p{
font-family:Tahoma;
}
.welcome{
width:960px;
height:30px;
background:#D8D9D9;
margin:40px auto 0;
padding-top:13px;
padding-left:10px;
}
.shitu{
width:974px;
height:260px;
margin:40px auto 0;
overflow:hidden;
}
.shitu2,.shitu3,.shitu4{
float:right;
margin-top:-238px;
}
.shitu3{
margin-right:250px;
}
.shitu4{
margin-right:492px;
}
.shitu1,.shitu2,.shitu3,.shitu4 p{
font-family:Arial;
}
.shitu1,.shitu2,.shitu3,.shitu4{
width:230px;
}
.up{
width:974px;
height:50px;
margin:40px auto 0;
text-align:center;
}
.other{
width:auto;
height:360px;
background:#1c1c20;
padding-top:30px;
}
.other p{
color:#FFFFFF;
font-family:Tahoma;
}
.other-inner{
width:960px;
margin:0 auto;
overflow:hidden;
}
.oth-in1{
width:320px;
overflow:hidden;
}
.oth-in2{
width:230px;
}
.oth-in3{
width:261px;
}
.oth-in1>p{
font-family:Arial;
font-size:14pt;
}
.moreView{
clear:both;
width:76px;
height:25px;
background:url(../images/back_14.jpg) no-repeat;
text-align:center;
margin-top:188px;
margin-left:125px;
font-size:6pt;
font-family:Tahoma;
color:#FFFFFF;
padding-right:5px;
padding:2px;
}
div.moreView a{
display: block;
width: 76px;
text-align: center;
border: 0 solid /*!important*/;
color:#ffffff;
}
.post,.send{
float:right;
margin-top:-259px;
}
.send{
margin-right:559px;
width:0px;
}
.send-in{
width:110px;
}
.post>p{
font-size:14pt;
}
.email1{
height:38px;
width:221px;
background:url(../images/back_03.jpg) no-repeat;
margin-top:27px;
}
.email2{
height:38px;
width:221px;
background:url(../images/back_03.jpg) no-repeat;
}
.massage{
height:113px;
width:221px;
background:url(../images/back_07.jpg) no-repeat;
}
.sendmassage{
height:29px;
width:128px;
background:url(../images/back_11.jpg) no-repeat;
margin-left:48px;
}
.email1,.email2,.massage p{
font-size:8pt;
}
.email1,.email2,.massage{
line-height:34px;
padding-left:11px;
}
.sendmassage{
padding-left:27px;
font-size:10pt;
line-height:30px;
margin-top:18px;
}
.post{
width:273px;
font-size:5pt;
}
.post1{
width:170px;
float:right;
}
.postphoto1{
display:inline;
}
.post-in{
margin-top:8px;
overflow:hidden;
}
.butto{
height:20px;
background:#121212;
color:#FFFFFF;
margin-top:-16px;
font-family:Arial;
font-size:12pt;
}
.butto-in{
width:960px;
margin:0 auto;
}
.botto a{
color:#FFFFFF;
}
.oth-in1 a{
display:block;
box-shadow:0 0 1px #303030;
border:2px solid #454545;
float:right;
overflow:hidden;
}
.oth-in1 img{
opacity:0.5;
width:76px;
height:76px;
}
.oth-in1 img:hover{
opacity:1;
}
/*copyright*/
.copyright{
font-size: 10px;
line-height:1.5;
}
.butto-nav{
float: right;
}
.butto-nav:after{
content:'020';
clear:both;
zoom:1;
}
.butto-nav li{
float:right;
margin-top:-16px;
margin-right:15px;
}
.butto-nav li a{
color:#EEE;
font-size:10px;
}
css代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=t=utf-8" />
<title>网页</title>
<link href="css/style.css" rel="stylesheet" >
<body>
<!--顶部-->
<div class="top"></div>
<div class="top1">
<div id="b">This is a notafication bar.</div>
<div id="b1">SOCIALIZE WTHUS:
<a href="#"><img src="images/16_03.png" width="20" height="20" alt=""></a>
<a href="#"><img src="images/16_05.png" width="20" height="20" alt=""></a>
<a href="#"><img src="images/16_07.png" width="20" height="20" alt=""></a>
<a href="#"><img src="images/sucai.jpg" width="20" height="20" alt=""></a>
<a href="#"><img src="images/16_09.png" width="20" height="20" alt=""></a>
</div>
</div>
<!--nav导航。二级导航-->
<div class="top2">
<div id="top2a" class="logo"><img src="images/logo.png" width="202" height="62" alt=""></div>
<ul class="nav">
<li> <a href="#">HOME <span>BackHome</span></a></li>
<li>
<a href="#">FEATURES <span>Ourbestproducts</span></a>
<ul class="nav-inner">
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
</ul>
</li>
<li> <a href="#">PORTFOILO<span>Ourstuffondisplay</span></a>
<ul class="nav-inner">
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="#">BLOG<span>Ournews</span></a>
<ul class="nav-inner">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
</ul>
</li>
<li><a href="#">CONTACT<span>Dropusanote</span></a>
<ul class="nav-inner">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
</ul>
</li>
</ul>
</div>
<div class="back1" style="background:url(images/16sucai_201506030850_02.png) repeat-x;width:auto;height:auto;">
<div class="titt-button">
<div class="titt">
</div>
<div class="button">
<img class="leftbutton" src="images/16_51.png" width="53" height="53">
<img src="images/16_48.png" width="53" height="53">
</div>
</div>
</div>
<div class="ways">
<div class="weixin">
<img src="images/16sucai_201506030850_03.png" width="66" height="63">
<p style="color:#000000;">BUILT IN SHORTCODES</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet </p>
</div>
<div class="new">
<img src="images/16sucai_201506030850_10.jpg" width="46" height="60">
<p style="color:#000000;">ADVANCED OPTIONS</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet </p>
</div>
<div class="computer">
<img src="images/16sucai_201506030850_08.png" width="66" height="63">
<p style="color:#FFFFFF;">ADVANCED OPTIONS</p>
<p style="color:#FFFFFF;font-size:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam nonummy nibh euismod tincidunt ut laoreet </p>
</div>
<div class="styles">
<img src="images/new.jpg" width="66" height="63">
<p style="color:#000000;">TWO PORTFOLIO STYLES</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam nonummy nibh euismod tincidunt ut laoreet </p>
</div>
</div>
<div class="welcome">
<span style="font-style:italic;font-family:Tahoma;font-size:6pt;">Welcome to Ridial - a minimailstic</span>
<span style="font-family:Tahoma;"> WordPress Theme.</span>
<span style="font-style:italic;font-family:Tahoma;font-size:6pt;">This is a short line that bast describes your site.</span>
</div>
<div class="shitu">
<div class="shitu1">
<img src="images/shitu01.jpg">
<div><img src="images/yinying_03.jpg"></div>
<p style="color:#000000;">BUILT IN SHORDES</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet iam.</p>
</div>
<div class="shitu2">
<img src="images/shitu02.jpg">
<div><img src="images/yinying_03.jpg"></div>
<p style="color:#000000;">BLOG POST NUMBER 1</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet iam.</p>
</div>
<div class="shitu3">
<img src="images/shitu03.jpg">
<div><img src="images/yinying_03.jpg"></div>
<p style="color:#000000;">BLOG POST NUMBER 2</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet iam.</p>
</div>
<div class="shitu4">
<img src="images/shitu04.jpg">
<div><img src="images/yinying_03.jpg"></div>
<p style="color:#000000;">BLOG POST NUMBER 3</p>
<p style="color:#000000;font-size:10px;">Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet iam.</p>
</div>
</div>
<div class="up">
<img src="images/up.jpg">
</div>
<div class="other">
<div class="other-inner">
<div class="oth-in1">
<p>FLICKR GALLERY</p>
<p style="font-family:Arial;font-size:8pt;">Hover to highlight images. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p><!--图片大小相同--> <a href="#" target="_black" rel="nofollow"><img src="images/tupian1.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian2.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian3.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian4.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian5.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian6.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian7.jpg"></a>
<a href="#" target="_black" rel="nofollow"><img src="images/tupian8.jpg"></a>
<div class="moreView">
<a href="#">ViewMore</a>
</div>
</div>
<div class="post">
<p>LATEST POSTS</p>
<div class="post-in">
<div class="postphoto1">
<img src="images/post1.jpg">
</div>
<div class="post1">
<p style="font-size:12pt;color:#388CB0;">This is a sample Post 1</p>
<p class="posttext">Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh...</p>
</div>
<img src="images/fengexian.jpg">
</div>
<div class="post-in">
<div class="postphoto1">
<img src="images/post2.jpg">
</div>
<div class="post1">
<p style="font-size:12pt;color:#388CB0;">This is a sample Post 1</p>
<p class="posttext">Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh...</p>
</div>
<img src="images/fengexian.jpg">
</div>
<div class="post-in">
<div class="postphoto1">
<img src="images/post3.jpg">
</div>
<div class="post1">
<p style="font-size:12pt;color:#388CB0;">This is a sample Post 1</p>
<p class="posttext">Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh...</p>
</div>
<img src="images/fengexian.jpg">
</div>
</div>
<div class="send">
<p class="send-in">GET IN TOUCH</p>
<div class="email1">
<p>Email (required)</p>
</div>
<div class="email2">
<p>Email (required)</p>
</div>
<div class="massage">
<p>Message (required)</p>
</div>
<div class="sendmassage">
<a href="#"><p>Send Message</p></a>
</div>
</div>
</div>
</div>
<div class="butto">
<div class="butto-in">
<p class="copyright">© 2012 PremiumCoding | powered by ReliableWebHosting</p>
<ul class="butto-nav">
<li><a href="">FORUM</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">FEATURES</a></li>
<li><a href="">HOME</a></li>
</ul>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
