前端 polo-360
id class 和文件的命名规范
-
命名时尽量使用英文，不会可以使用拼音，但是不要英文和拼音混用
-
命名格式
- 驼峰 helloWorld
- 下划线或- hello_world
reset.css
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
body>
html>
固定大小截图
logo
选择图层 方便使用辅助线截图
<div class="header w">
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
导航条
选择图片中的文字
方法1
方法2
查看图片中文字样式
取颜色
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
banner
裁切图片
图像—> 裁切
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
content
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
height: 3000px;
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
联系栏中间
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
<div class="contact w clearfix">
<div class="sc">
div>
<div class="co">
<h2>Contacth2>
<form action="#">
<input class="txt" type="text" placeholder="your name"/>
<input class="txt" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder="message">textarea>
<button class="btn">Send itbutton>
form>
div>
<div class="nu">
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
height: 3000px;
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu
{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏的高度和背景颜色，等会删*/
.contact .sc, .contact .co, .contact .nu{
height: 500px;
/*background-color: yellow;*/
}
/*设置联系栏中的表单项*/
.contact .txt{
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: 114px;
background: url(../img/textarea.png) no-repeat;
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize: none;
/*去除默认内外边距*/
padding: 10px;
margin: 0;
}
.contact .btn{
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: 1em;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px georgia;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
/*设置内边距*/
padding: 44px 0px 10px;
/*设置下外边距*/
margin-bottom: 15px;
}
联系栏左侧
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connectionh2>
<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/in.png" />a>
<a href="#"><img src="img/yt.png" />a>
<a href="#"><img src="img/tw.png" />a>
div>
<h2 class="nl">Newsletterh2>
<p class="p1">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
p>
<form action="#">
<input class="txt" type="text" placeholder="your email address"/>
<button class="btn">Send itbutton>
form>
div>
<div class="co">
<h2>Contacth2>
<form action="#">
<input class="txt" type="text" placeholder="your name"/>
<input class="txt" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder="message">textarea>
<button class="btn">Send itbutton>
form>
div>
<div class="nu">
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
height: 3000px;
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu
{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏的高度和背景颜色，等会删*/
.contact .sc, .contact .co, .contact .nu{
height: 500px;
/*background-color: yellow;*/
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
/*设置背景图片*/
background: url(../img/input.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
/*去除默认边框*/
border: none;
/*去除默认的内边距*/
padding: 0px 10px;
margin: 0px 0px 16px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/textarea.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize: none;
/*去除默认内外边距*/
padding: 10px;
margin: 0;
}
.contact .btn{
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: 1em;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px/1 georgia;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
/*设置内边距*/
padding: 44px 0px 10px;
/*设置下外边距*/
margin-bottom: 15px;
}
/*设置联系栏左侧*/
.sc .p1{
color: #444;
font: 12px/1 helvetica;
}
/*设置小图标*/
.sc .icon{
/*设置字体大小为0,去除空格*/
font-size: 0;
/*设置上外边距*/
margin-top: 4px;
}
.sc .icon a{
margin-right: 6px;
}
/*设置左侧第二个标题*/
.sc .nl{
font: bold 18px/1 "gill sans mt";
/*设置内边距*/
padding: 34px 0px 10px;
}
/*设置左侧表单项*/
.sc .txt{
margin-top: 15px;
/*为IE6设置上外边距*/
_margin-top: 18px;
margin-bottom: 0px;
}
联系栏右侧
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connectionh2>
<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/in.png" />a>
<a href="#"><img src="img/yt.png" />a>
<a href="#"><img src="img/tw.png" />a>
div>
<h2 class="nl">Newsletterh2>
<p class="p1">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
p>
<form action="#">
<input class="txt" type="text" placeholder="your email address"/>
<button class="btn">Subscribebutton>
form>
div>
<div class="co">
<h2>Contacth2>
<form action="#">
<input class="txt" type="text" placeholder="your name"/>
<input class="txt" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder="message">textarea>
<button class="btn">Send itbutton>
form>
div>
<div class="nu">
<h2>News Updatesh2>
<p>
<img src="img/pic/1.gif" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p>
<p class="no-margin">
<img src="img/pic/2.gif" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
p>
<p>
<img src="img/pic/3.gif" />
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
p>
<button class="btn">Visit our Blogbutton>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
height: 3000px;
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu
{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏的高度和背景颜色，等会删*/
.contact .sc, .contact .co, .contact .nu{
height: 500px;
/*background-color: yellow;*/
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
/*设置背景图片*/
background: url(../img/input.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
/*去除默认边框*/
border: none;
/*去除默认的内边距*/
padding: 0px 10px;
margin: 0px 0px 16px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/textarea.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize: none;
/*去除默认内外边距*/
padding: 10px;
margin: 0;
}
.contact .btn{
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: 1em;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px/1 georgia;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
/*设置内边距*/
padding: 44px 0px 10px;
/*设置下外边距*/
margin-bottom: 15px;
}
/*设置联系栏左侧*/
.sc .p1{
color: #444;
font: 12px/1 helvetica;
}
/*设置小图标*/
.sc .icon{
/*设置字体大小为0,去除空格*/
font-size: 0;
/*设置上外边距*/
margin-top: 4px;
}
.sc .icon a{
margin-right: 6px;
}
/*设置左侧第二个标题*/
.sc .nl{
font: bold 18px/1 "gill sans mt";
/*设置内边距*/
padding: 34px 0px 10px;
}
/*设置左侧表单项*/
.sc .txt{
margin-top: 15px;
/*为IE6设置上外边距*/
_margin-top: 18px;
margin-bottom: 0px;
}
/*设置联系栏右侧*/
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
/*单独为IE6设置高度*/
_height: 60px;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
margin-bottom: 14px;
padding-bottom: 9px;
}
.nu .no-margin{
margin-bottom: 0px;
}
.nu img{
float: left;
margin-right: 8px;
}
底部
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connectionh2>
<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/in.png" />a>
<a href="#"><img src="img/yt.png" />a>
<a href="#"><img src="img/tw.png" />a>
div>
<h2 class="nl">Newsletterh2>
<p class="p1">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
p>
<form action="#">
<input class="txt" type="text" placeholder="your email address"/>
<button class="btn">Subscribebutton>
form>
div>
<div class="co">
<h2>Contacth2>
<form action="#">
<input class="txt" type="text" placeholder="your name"/>
<input class="txt" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder="message">textarea>
<button class="btn">Send itbutton>
form>
div>
<div class="nu">
<h2>News Updatesh2>
<p>
<img src="img/pic/1.gif" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p>
<p class="no-margin">
<img src="img/pic/2.gif" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
p>
<p>
<img src="img/pic/3.gif" />
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
p>
<button class="btn">Visit our Blogbutton>
div>
div>
<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="#">Homea> | <a href="#">Abouta> | <a href="#">Productsa> | <a href="#">Servicesa> | <a href="#">Contacta>p>
<p><a href="#">Privacy Policya> | <a href="#">Terms of usea>p>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
/*height: 3000px;*/
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu
{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
/*设置背景图片*/
background: url(../img/input.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
/*去除默认边框*/
border: none;
/*去除默认的内边距*/
padding: 0px 10px;
margin: 0px 0px 16px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/textarea.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize: none;
/*去除默认内外边距*/
padding: 10px;
margin: 0;
}
.contact .btn{
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: 1em;
/*cursor可以设置鼠标指针的样式*/
cursor: pointer;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px/1 georgia;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
/*设置内边距*/
padding: 44px 0px 10px;
/*设置下外边距*/
margin-bottom: 15px;
}
/*设置联系栏左侧*/
.sc .p1{
color: #444;
font: 12px/1 helvetica;
}
/*设置小图标*/
.sc .icon{
/*设置字体大小为0,去除空格*/
font-size: 0;
/*设置上外边距*/
margin-top: 4px;
}
.sc .icon a{
margin-right: 6px;
}
/*设置左侧第二个标题*/
.sc .nl{
font: bold 18px/1 "gill sans mt";
/*设置内边距*/
padding: 34px 0px 10px;
}
/*设置左侧表单项*/
.sc .txt{
margin-top: 15px;
/*为IE6设置上外边距*/
_margin-top: 18px;
margin-bottom: 0px;
}
/*设置联系栏右侧*/
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
/*单独为IE6设置高度*/
_height: 60px;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
margin-bottom: 14px;
padding-bottom: 9px;
}
.nu .no-margin{
margin-bottom: 0px;
}
.nu img{
float: left;
margin-right: 8px;
}
/*设置底部*/
.footer{
height: 173px;
background: #333;
/*设置上边框*/
border-top: 10px solid #4c4c4c;
}
/*设置底部文字样式*/
.footer a, .footer p{
color: #999;
font: 11px helvetica;
text-decoration: none;
}
/*设置a元素hover*/
.footer a:hover{
color: #cccaca;
text-decoration: underline;
}
.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 6px;
}
.footer .w{
padding-top: 18px;
}
.footer .copy{
float: right;
}
修复IE6bug后代码
index.html
<html>
<head>
<meta charset="utf-8" />
<title>POLO360title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常好的网站">
<img src="img/logo.png" alt="网站的logo" />
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner01.png" alt="这是一个图片" />
<div class="pointerDiv">
<a href="#">a>
<a class="active" href="#">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to dop>
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩" />
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" href="#">Learn Morea>
div>
<div class="cs">
<h2>Complete Solutionh2>
<p class="p1">A tool anything and everything you can thinkp>
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩" />
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" href="#">Learn Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">Fresh. Modern and ready for futurep>
<div class="imgDiv">
<img src="img/pic/pic3.jpg" alt="大绿球" />
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" href="#">Learn Morea>
div>
div>
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connectionh2>
<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/in.png" />a>
<a href="#"><img src="img/yt.png" />a>
<a href="#"><img src="img/tw.png" />a>
div>
<h2 class="nl">Newsletterh2>
<p class="p1">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
p>
<form action="#">
<input class="txt" type="text" placeholder="your email address"/>
<button class="btn">Subscribebutton>
form>
div>
<div class="co">
<h2>Contacth2>
<form action="#">
<input class="txt" type="text" placeholder="your name"/>
<input class="txt" type="text" placeholder="your email address"/>
<textarea class="tarea" placeholder="message">textarea>
<button class="btn">Send itbutton>
form>
div>
<div class="nu">
<h2>News Updatesh2>
<p>
<img src="img/pic/1.gif" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p>
<p class="no-margin">
<img src="img/pic/2.gif" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
p>
<p>
<img src="img/pic/3.gif" />
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
p>
<button class="btn">Visit our Blogbutton>
div>
div>
<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="#">Homea> | <a href="#">Abouta> | <a href="#">Productsa> | <a href="#">Servicesa> | <a href="#">Contacta>p>
<p><a href="#">Privacy Policya> | <a href="#">Terms of usea>p>
div>
div>
body>
html>
page-index.css
/*设置body*/
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
/*height: 3000px;*/
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*background-color: #bfa;*/
/*设置上内边距*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 22px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
/*设置导航条中的超链接*/
.nav a{
color: #666;
font: bold 14px Georgia;
/*去除下划线*/
text-decoration: none;
}
/*设置超链接移入效果*/
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/*设置导航条中的小标题
在chrome浏览器中字体最小支持到12px
1-11px都显示为12px
* */
.nav p{
color: #b7b7b7;
font: 11px tahoma;
}
/*设置banner*/
.banner{
height: 356px;
/*设置背景*/
background: url(../img/banner-bg.png) no-repeat bottom center;
/*开启一个相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*为导航点定位*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
text-align: center;
font: bold 24px Georgia;
/*设置内边距*/
padding: 6px 0 20px 0;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl, .content .cs, .content .uc,
.contact .sc, .contact .co, .contact .nu
{
/*向左浮动*/
float: left;
width: 300px;
/*height: 100px;*/
/*background-color: yellow;*/
}
/*给div添加左右外边距*/
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 16px 0px 10px 0px;
/*设置水平居中*/
text-align: center;
/*设置上内边距*/
padding-top: 12px;
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px helvetica;
word-spacing: 2px;
}
/*设置按钮的样式*/
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(../img/btn1.png) no-repeat;
/*设置无下划线*/
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
/*设置背景图片*/
background: url(../img/input.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
/*去除默认边框*/
border: none;
/*去除默认的内边距*/
padding: 0px 10px;
margin: 0px 0px 16px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/textarea.png) no-repeat;
/*单独为IE6设置背景不随元素滚动*/
_background-attachment: fixed;
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize: none;
/*去除默认内外边距*/
padding: 10px;
margin: 0;
}
.contact .btn{
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: 1em;
/*cursor可以设置鼠标指针的样式*/
cursor: pointer;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px/1 georgia;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
/*设置内边距*/
padding: 44px 0px 10px;
/*设置下外边距*/
margin-bottom: 15px;
}
/*设置联系栏左侧*/
.sc .p1{
color: #444;
font: 12px/1 helvetica;
}
/*设置小图标*/
.sc .icon{
/*设置字体大小为0,去除空格*/
font-size: 0;
/*设置上外边距*/
margin-top: 4px;
}
.sc .icon a{
margin-right: 6px;
}
/*设置左侧第二个标题*/
.sc .nl{
font: bold 18px/1 "gill sans mt";
/*设置内边距*/
padding: 34px 0px 10px;
}
/*设置左侧表单项*/
.sc .txt{
margin-top: 15px;
/*为IE6设置上外边距*/
_margin-top: 18px;
margin-bottom: 0px;
}
/*设置联系栏右侧*/
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
/*单独为IE6设置高度*/
_height: 60px;
/*设置下边框*/
border-bottom: 1px dashed #d3d3d3;
margin-bottom: 14px;
padding-bottom: 9px;
}
.nu .no-margin{
margin-bottom: 0px;
}
.nu img{
float: left;
margin-right: 8px;
}
.nu .btn{
_margin-left: -1em;
}
/*设置底部*/
.footer{
height: 173px;
background: #333;
/*设置上边框*/
border-top: 10px solid #4c4c4c;
}
/*设置底部文字样式*/
.footer a, .footer p{
color: #999;
font: 11px helvetica;
text-decoration: none;
}
/*设置a元素hover*/
.footer a:hover{
color: #cccaca;
text-decoration: underline;
}
.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 6px;
}
.footer .w{
padding-top: 18px;
}
.footer .copy{
float: right;
/*处理IE6双倍边距的bug*/
display: inline;
}
附：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*IE6的双倍边距bug
在IE6中，当为一个向左浮动的元素设置左外边距
或者为一个向右浮动的元素设置右外边距时
这个外边距将会是设置的值的2倍
* */
.box1{
width: 100px;
height: 100px;
float: left;
/*添加一个样式来解决ie6的双倍边距问题
对于一个浮动元素来设置display: inline没有意义
但是该属性可以解决IE6的双倍边距
* */
display: inline;
background-color: red;
margin-left: 100px;
}
style>
head>
<body>
<div class="box1">div>
body>
html>