关闭

第一个Web前端

111人阅读 评论(0) 收藏 举报
分类:

地址 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">&copy; 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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2140次
    • 积分:144
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
    最新评论