第一个Web前端

原创 2015年11月19日 22:30:37

地址 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>



版权声明:本文为博主原创文章,未经博主允许不得转载。

web前端之html从零开始(一)-----第一个html

第一个Html,编码格式要写,否则会出现乱码。 我的第一个Html页面
  • qq939782569
  • qq939782569
  • 2017年02月22日 09:30
  • 572

web前端之路 第一个脚印

工作已经两年了,在公司经历过许多,本人也不甚上进,感觉都是用到啥学点什么东西,一直没有真正定位自己的角色,也没有去深入学习一门技术。总是在遇到问题,或者项目需要的时候临阵磨枪去搜索相关文章,直接复制粘...
  • hanchayi
  • hanchayi
  • 2016年03月14日 13:48
  • 141

WEB前端HTML第一个网页

源代码: music 小情歌 作者:苏打绿 歌词:这是一首简单的小情歌,唱出我们心头的白鸽。我想我很快乐,当有你的温柔,脚边的空气散了。你知道就算大雨让整座城市跌倒...
  • lihua20120827
  • lihua20120827
  • 2017年10月28日 11:44
  • 69

我的第一个web前端博客

今天第一次写博客,刚注册了号。作为一个前端菜鸡,港真的我也不知道都要写些什么,设置头像上传了半年也没成功,想想还是先写博客吧,毕竟今天是高考第一天。要是有写的不好的地方还请含蓄表达,因为我喜欢听好话。...
  • domunweb
  • domunweb
  • 2017年06月07日 20:59
  • 448

web前端 | 一条“不归路” - 学习路线

本文属于职业解惑系列,读完此文要么生,要么死。要么充满斗志,要么颓废放弃。没错,此文的观点可以让你极端,但极端的选择,完全取决于你个人!付出就有回报,做好现在,技术只是为了改变生活!—— 小北哥哥好的...
  • xllily_11
  • xllily_11
  • 2016年08月15日 10:39
  • 26195

腾讯web前端笔试题及个人答案

每道题都有答案,大多数答案亲测正确。 简答题 1.js中“5”+4=?     答案:54 2.js中void(0)=?     答案:undefined 3.js中NaN*4=?     答...
  • u013705728
  • u013705728
  • 2015年05月22日 11:30
  • 6283

Web前端实践经验总结

最近用了不少业余时间,在加强Web前端。有个很大的感触就是,web前端比较麻烦,主要是布局和样式。最主要的原因,还是之前实践得比较少,熟能生巧,不得不服啊。   自己从头开始写布局和css太费心思了,...
  • FansUnion
  • FansUnion
  • 2015年01月17日 20:37
  • 3281

web前端html+css基础 项目实例

三毛                                       设为首页                   收藏本站                      时间2016年3月1...
  • qq_16103331
  • qq_16103331
  • 2016年03月02日 21:39
  • 11774

web 前端入坑第一篇:web前端到底是什么?有前途吗

web前端到底是什么?某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS ...
  • xllily_11
  • xllily_11
  • 2016年08月01日 14:49
  • 44538

web前端知识点整理

一,html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1....
  • wcr19910118
  • wcr19910118
  • 2014年12月19日 00:02
  • 367
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第一个Web前端
举报原因:
原因补充:

(最多只允许输入30个字)