目录
心得：
- 设置段落div的时候要看清框架的大致内容，不然容易造成各种的问题，高度塌陷等问题
- 设置行高清楚浏览器的默认格式，防止高度不齐
- 起名的时候根据内容位置等特殊的值起名
- 解决高度塌问题。clearfix：after clear：before 加一张空的表解决。见前文
- 为整个页面设置固定的宽度，高度让页面撑开
- chrome浏览器中最小的字体只支持12px
- 注意相对定位和绝对定位的问题 position
- 注意细节，随时调整，在网页中调整到合适的位置，然后找出对应的值改
- 注意元素是块元素还是内联元素
- 注意伪类设置超链接的格式
- 区分内外边距
- 最重的是细心
项目
- 需求分析（前端页面的设计） 1/3
- 写代码 1/6
- 测试 ---性能测试（不考虑业务逻辑，只考虑速度，测试高并发的状态 ），1/2
性能优化：
把Demo所有的没用的文件都删除，压缩。
图片整合技术（拼接）：雪碧图：背景图--修改偏移量。
效果图片
Html代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>polo360</title>
<link rel="stylesheet" type = "text/css" = ""href="css/reset.css" />
<link rel="stylesheet" href="css/pageindex.css" />
</head>
<body>
<div class="header w">
<ul class = "nav">
<li>
<a href="#">HOME</a>
<p>back to home</p>
</li>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
</li>
<li>
<a href="#">SERVICES</a>
<p>Things we do</p>
</li>
<li>
<a href="#"> BLOG</a>
<p>Follow our updates</p>
</li>
<li>
<a href="#">CONTACT</a>
<p>Ways to reach us</p>
</li>
</ul>
<div class="logo">
<a href="#" title="好的网站">
<img src="img/logo-bj.png" alt="网站的logo" />
</a>
</div>
</div>
<!--结束
-->
<div class="banner w">
<img src="img/banner/polobjmiddle.png" />
<div class="pointerDiv">
<a href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!--content开始-->
<div class="content w clearfix" ">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<div class="pl">
<h2>Perfect Logic</h2>
<p id="p1 ">All you want your website to do.</p>
<div class="imgdiv">
<img src="img/pic1.png" alt="tu1" />
</div>
<p class="p2">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.</p>
<a class="lm">Learn More</a>
</div>
<div class="cs">
<h2>Complete Solution</h2>
<p>A tool anything and everything you</p>
<div class="imgdiv">
<img src="img/pic2.jpg" alt="tu2" />
</div>
<p class="p2">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.</p>
<a class="lm">Learn More</a>
</div>
<div class="uc">
<h2>Uber Culture</h2>
<p>Fresh. Modern and ready for future</p>
<div class="imgdiv">
<img src="img/pic3.jpg" alt="tu3" />
</div>
<p class="p2">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.</p>
<a class="lm">Learn More</a>
</div>
</div>
<!--contact
-->
<div class="contact w clearfix" >
<!--创建三栏的div-->
<div class="sc">
<h2>Social Connection</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<div class="icon">
<a href="#"> <img src="img/rss.png"/></a>
<a href="#"> <img src="img/fb.png"/></a>
<a href="#"><img src="img/tw.png" /></a>
<a href="#"> <img src="img/yt.png"/></a>
<a href="#"> <img src="img/in.png"/></a>
</div>
<h2 class="nl">NewsLetter</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<form action="#">
<input class="text" type="text" placeholder="your email address"/><!--placeholder来提示文字(水印)-->
<button class="btn1">Subscribe</button>
</form>
</div>
<div class="co">
<h2>Contact</h2>
<!--表单-->
<form action="#">
<input class="text" type="text" placeholder="your name"/><!--placeholder来提示文字(水印)-->
<input class="text" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder=" message"></textarea>
<button class="btn1">Send it</button>
</form>
</div>
<div class="nu">
<h2>New updates</h2>
<p > <img src="img/1.gif"/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p > <img src="img/2.gif"/>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<p class="no-margin"> <img src="img/3.gif"/>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
<button class="btn1">Visit our Blog</button>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="w">
<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
<p><a href="#">Home</a> |<a href="#">About</a> |<a href="#">Products</a> |<a href="#">Services </a> |<a href="#">Contact</a> </p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
</div>
</div>
</body>
</html>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;
}
扫一扫
1393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
