HTML+CSS的项目练习
效果图：
HTML代码：
<html>
<head>
<meta charset="utf-8" />
<title>polo360练习title>
<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 do.p>
<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 praesentiump>
<div class="icon">
<a href="#"><img src="img/pic/fy.jpg"/>a>
<a href="#"><img src="img/pic/f.jpg"/>a>
<a href="#"><img src="img/pic/in.jpg"/>a>
<a href="#"><img src="img/pic/yt.jpg"/>a>
<a href="#"><img src="img/pic/t.jpg"/>a>
div>
<h2 class="nl">Newsletterh2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentiump>
<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.jpg"/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p>
<p>
<img src="img/pic/2.jpg"/>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
p>
<p class="no-margin">
<img src="img/pic/3.jpg"/>
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>
CSS代码：
/*
* 在这里编辑主页样式
*/
/*设置body*/
body{
/*设置背景图片水平方向平铺*/
background: url(../img/bd-bg.png) repeat-x;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*设置一个上内边距*/
padding-top: 37px;
/*设置一个下内边距*/
padding-bottom: 46px;
}
/*设置logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*向右浮动*/
float: right;
/*设置一个上外边距*/
margin-top: 20px;
}
.nav li{
/*向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0 8px 10px;
/*设置左边框*/
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/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;
}
/*设置超链接的hover*/
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/*设置content部分*/
h1{
/*设置文本居中*/
text-align: center;
font:bold 24px Georgia;
/*设置上内边距*/
padding: 6px 0 20px 0;
background: url(../img/line.png) no-repeat bottom center;
margin-bottom: 38px;
}
/*中间的三个div*/
.content .pl,.content .cs,.content .uc,
.contact .sc,.contact .co,.contact .nu{
/*向左浮动*/
float: left;
width: 300px;
}
.content .cs,.contact .co{
margin: 0 20px;
}
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
.content h2{
color: #11719e;
font: 21px Georgia ;
text-align: left;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片背景*/
.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/pic/btn1.png);
text-decoration: none;
color: #016999;
font: 12px/40px helvetica;
/*设置文字缩进*/
text-indent: 1em;
margin-bottom: 35px;
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
background: url(../img/pic/txt.png) no-repeat;
/*单独为IE6设置一个背景不随元素滚动*/
_background-attachment: fixed;
/*去除默认边框*/
border: none;
/*去除内外边距*/
padding: 0 10px;
margin: 0px 0px 16px 0px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/pic/tarea.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/pic/btn2.png) no-repeat;
border: none;
/*去除内外边距*/
padding: 0;
margin: 11px 0px 23px 0px;
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 0 10px 0;
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: 4px;
}
/*设置左侧联系框的第二个标题*/
.sc .nl{
font: bold 18px "gill sans mt";
/*设置内边距*/
padding: 32px 0px 10px 0px;
}
/*设置左侧表单项*/
.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 img{
float: left;
margin-right: 8px;
}
.nu .btn{
_margin-left: -1em;
}
.nu .no-margin{
margin-bottom: 0px;
}
/*设置底部*/
.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{
text-decoration: underline;
color: yellowgreen;
}
.footer .copy{
float: right;
/*处理双倍边距的bug*/
display: inline;
}
.footer .w{
padding-top: 18px;
}
.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 8px;
}
注意：
- id class 和文件的命名规范：
- 命名时尽量使用英文，如果不会可以使用拼音，但是不要引文拼音混用
- 命名格式：
①驼峰命名法，首字母小写，每个单词的开头字母大写，例子：helloWorld
②也可以所有的字母都小写单词之间使用_或-连接，例子：aa-bb-cc
- 在文本框和文本域中可以通过
placeholder来提示文字（水印），这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS - 在chrome浏览器中字体最小支持到12px，1-11px都显示为12px
- IE6的双倍边距bug：
- 在IE6中，当为一个左浮动的元素设置做左外边距，或者为一个向右浮动的元素设置右外边距时， 这个外边距将会是设置值的2倍。
- 添加一个样式来解决IE6的双倍边距问题：
对于一个浮动元素来说设置display: inline;没有任何意义，但是该属性可以解决IE6的双倍边距问题
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
float: left;
display: inline;
background-color: red;
margin-left: 100px;
}
style>
head>
<body>
<div class="box1">div>
body>
html>