前端项目实战——polo360

目录

性能优化：

效果图片

​

Html代码片段

CSS代码片段

---

心得：

• 设置段落div的时候要看清框架的大致内容，不然容易造成各种的问题，高度塌陷等问题
• 设置行高清楚浏览器的默认格式，防止高度不齐
• 起名的时候根据内容位置等特殊的值起名
• 解决高度塌问题。clearfix：after clear：before 加一张空的表解决。见前文
• 为整个页面设置固定的宽度，高度让页面撑开
• chrome浏览器中最小的字体只支持12px
• 注意相对定位和绝对定位的问题 position
• 注意细节，随时调整，在网页中调整到合适的位置，然后找出对应的值改
• 注意元素是块元素还是内联元素
• 注意伪类设置超链接的格式
• 区分内外边距
• 最重的是细心

项目

1. 需求分析（前端页面的设计） 1/3
2. 写代码   1/6
3. 测试   ---性能测试（不考虑业务逻辑，只考虑速度，测试高并发的状态 ），1/2

性能优化：

把Demo所有的没用的文件都删除，压缩。

图片整合技术（拼接）：雪碧图：背景图--修改偏移量。

效果图片

 

Html代码片段

	
		
		
		
		
		
	
	
		

			
			

				

					HOME
					
back to home
				
				

					PRODUCTS
					
What we have for you
				
				

					SERVICES
					
Things we do
				
				

					 BLOG
					
Follow our updates
				
				

					CONTACT
					
Ways to reach us
				
			
			

				
					
				
			
		
              
		

			
			

				
				
				
				
				
				
			
		
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit
			

				
Perfect Logic
				
All you want your website to do.
				

					
					
					
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
					Learn More
				
			
			
			

				
Complete Solution
				
A tool anything and everything you
				

					
					
					
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				
					Learn More
			
			

				
Uber Culture
				
Fresh. Modern and ready for future
				

					
					
					
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
					Learn More
				
			
		
		
      	

      		 
      		

      			
Social Connection
      			
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      			

      				 
      				 
      				
      				 
      				 
      			
      			
NewsLetter
      			
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      			
      			

      				
      				
      				Subscribe
      			
      		
      		

      			
Contact
      			
      			

      				
      				
      				
      				Send it
      			
      		
      		

      			
New updates
      			
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      			
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      			
 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
      			Visit our Blog
      		
      		
      	
      	
      	

      		

      			
Copyright 2010. Studio VIVROCKS. All Rights Reserved.
      			
Site Powered by Wordpress. Design and Developed by VIVROCKS.
      			
Home  |About  |Products |Services  |Contact 
      			
Privacy Policy | Terms of use
      			
      		
      	
	

CSS代码片段

body{
	background:url(../img/111111bj.png) repeat-x;

	
}
.clearfix:before,/*解决高度塌陷问题*/
.clearfix:after
{
	content: "";
	display: table;
	clear: both;
	
}
.clearfix{
	zoom: 1;
}
.w{/*固定元素的宽度和居中*/
	width: 940px;
	margin: 0 auto;
}
.header{
	
	padding-top: 37px;
	padding-bottom: 46px;
}
.logo{
	margin-left: 15px;
}
.nav{
	float: right;
	margin-top:22px ;
}
.nav li{
	float: left;
	padding: 0px 10px 0px 10px;
	border-left:1px #d6d6d6 solid;
	list-style: none;
}
.nav a{
	font: bold 14px Georgia;
	color: #666;
	text-decoration: none;
}
.nav a:hover {
	color: #a1a1a1;
	text-decoration: underline;
}
.nav p{
	color: #b7b7b7;
	font: 11px Tahoma;/*在chrome浏览器中,最小只支持12px.*/
}
.banner{
	background: url(../img/banner/bannerYY.png) no-repeat bottom center;
	height: 356px;	
	position: relative;/*开启相对定位*/
}
.pointerDiv{/*开启绝对定位*/
	position: absolute;
	top: 314px;
	left: 15px;
}
.pointerDiv a{
	float: left;
	width: 17px;
	height: 17px;
	margin-left: 4px;
	background:url(../img/banner/button.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover
{ 
	background:url(../img/banner/bluebutton.png) no-repeat;
}
.content h1{
	text-align: center;/*文字居中*/
	font: bold 24px Georgia;
	padding: 6px 0px 20px 0px;	
	background: url(../img/line.png) no-repeat bottom center;
	margin-bottom: 38px;
}

.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu
{
	float:left;
	width: 300px;
}
.content .cs , .contact .co
{
	margin: 0px 20px;
}
.content h2{
	color: #11719e;
	font:Georgia 21px;
}
.content .p1{
	color: #8c8c8c;
	font: 12px Helvetica;
}
.content .imgdiv{
	width: 299px;
	height: 190px;
	margin: 16px 0px 10px 0px;
	background: url(../img/img-bj.png) no-repeat;
	text-align: center;/*水平居中*/
	padding-top: 12px;
}
.content .p2{
	height: 92px;
	color: #3e3e3e;
	font: 13px Helvetica;
	/*word-spacing: 2px;*/
}
.contact{
	background: url(../img/line.png) no-repeat top center;
	
}
.content .lm{
	display: block;/*块元素*/
	width: 163px;
	height: 40px;
	background: url(../img/btn1.png) no-repeat 0px ; 
	text-decoration: none;/*下划线*/
	color: #016999;
	font: 12px/40px Helvetica;
	text-indent: 1em;/*文字缩进*/
	margin-bottom: 35px;
} 

.contact .text{
	width: 276px;
	height: 33px;
	line-height: 33px;
	background: url(../img/input.png) no-repeat;
	border: none;
	padding: 0px 10px ;/*去除默认的内边距*/
	margin: 0px 0px 16px ;
	
}
.contact .tarea{
	width: 276px;
	height: 107px;
	background: url(../img/textarea.png) no-repeat;
	border: none;
	overflow: auto;/*去除滚动条*/
	resize: none;/*设置文本域不能调整大小*/
	padding: 10px;/*去除默认的内外边距*/
	margin: 0;
}
.contact .btn1{
	width: 163px;
	height: 32px;
	background:url(../img/btn2.png) no-repeat;
	border: none;
	padding: 0;/*去除默认的内外边距*/
	margin: 11px 0px 23px;
	color: white;
	font: 13px georgia;
	text-align: left;
	text-indent: 3em;
	cursor: pointer;/*设置鼠标点击的样式*/
}
.contact h2{
	color: #444;
	font: georgia 18px/1 ;
	border-bottom: 1px dashed #d3d3d3;
	padding: 44px 0px 10px 0px;
	margin-bottom: 15px;
}
.sc .p1{
	color: #444444;
	font: 12px/1  Helvetica;
}
.sc .icon{
	font-size: 0;
	margin-top:0px ;
}
.sc .icon a{
	margin-right:6px ;
	
}
.sc .nl{
	font: 18px/1 bolder "gill sans mt";
	
	padding: 0px 0px 9px 0px ;
	margin-bottom: 0px;
}
.sc .text{
	
	margin-bottom: 0;
}
.nu img{
	float: left;
	margin-right: 8px;
}
.nu p{
	color: #444444;
	font: 12px/1  Helvetica;
	height: 58px;
	
	border-bottom:1px dashed #D3D3D3 ;
	margin-bottom: 14px;
	padding-bottom: 9px;
}
.nu .btn2{
	margin-top: 0px;
}
.nu .no-margin{
	margin-bottom: 0px;
}
.footer{
	
	height: 173px;
	background: #333;
	border-top: 10px #4c4c4c solid;
}
.footer a , p{
	color: #999;
	font: 11px Helvetica;
	text-decoration: none;/*去除下划线*/
	
}
.footer .w{
	padding: 18px ;
}
.footer .copy{
	float: right;
}
.footer P{
	margin-left: 8px;
	margin-right: 23px;
	margin-bottom: 10px;
}
.footer a:hover{
	color: honeydew;
	text-decoration: underline;
}
.footer a:active{
	color: darkcyan;
}