前端项目实战——polo360
目录
性能优化：
效果图片
Html代码片段
CSS代码片段
心得：
- 设置段落div的时候要看清框架的大致内容，不然容易造成各种的问题，高度塌陷等问题
- 设置行高清楚浏览器的默认格式，防止高度不齐
- 起名的时候根据内容位置等特殊的值起名
- 解决高度塌问题。clearfix：after clear：before 加一张空的表解决。见前文
- 为整个页面设置固定的宽度，高度让页面撑开
- chrome浏览器中最小的字体只支持12px
- 注意相对定位和绝对定位的问题 position
- 注意细节，随时调整，在网页中调整到合适的位置，然后找出对应的值改
- 注意元素是块元素还是内联元素
- 注意伪类设置超链接的格式
- 区分内外边距
- 最重的是细心
项目
- 需求分析（前端页面的设计） 1/3
- 写代码 1/6
- 测试 ---性能测试（不考虑业务逻辑，只考虑速度，测试高并发的状态 ），1/2
性能优化：
把Demo所有的没用的文件都删除，压缩。
图片整合技术（拼接）：雪碧图：背景图--修改偏移量。
效果图片
Html代码片段
polo360
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
Contact
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.
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;
}