POLO360练习
代码部分
1.首先导入reset.css文件夹来去除基本的样式，性能比*{padding:opx;margin:0px;
}好。
2.处理IE6图片透明问题在body中
清除div img a h1的透明问题；
3. 
关于左边设置外边距还是内边距问题，首先width=940px，若设置padding则撑开原先的定义好的宽度，到时候需要重新定义宽度，所有用margin。
4. title作用：鼠标移入到图片就会有提示文字。 alt：描述这张图片
5. 导航条
-
浮动在块元素div下边时，不会与块元素齐平，解决方法是，将块元素与导航条的html代码换一下位置，再浮动。
6. 直接设置字体样式 font: bold 14px Georgia;
7. 去除下划线 text-decoration:none; →underline
8. 设置左边框 border-left: 1px #d6d6d6 dotted; dotted→dashed
9. 定义了一个.w{width:940px} , 要用时直接
10.图片需要变换的需要独立建一个img文件夹 img→新建→目录
11.background: url(…/img/bd-bg.png) no-repeat bottom center; 图片不重复，底部，居中；
12.多个 行内元素设置成块元素 dispaly:inline-block; 此方法默认左右边距 ，第二种方法：设置浮动；
10. 相对定位：position: relative 不会脱离文档流，就会占一个位置
绝对定位：position：absolute； 相对于body定位，所以在绝对定位div的父元素开启相对定位，则相对于父元素定位，然后设置top和left来设定位置。
11 文本居中： text-align: center;
12 padding: 6px 0px 20px 0px; 分别表示： 上：6px 右：0px 下：20px 左：0px；
13 一旦涉及到浮动，注意有没有高端坍塌问题 ：.
.clearfix:after,
.clearfix:after{
content: “”;
display: table;
clear: both;
}
兼容IE6高度塌陷
.cleatfix{
zoom:1;
};
11. 字体大小12px ，行高40px： font:12px/40px
12. 首行缩进一个字 text-indenx：1em；
13. 文本域； resize:none;去除文本域中的伸缩性功能
14. 去除滚动条：overflow:auto;
15. 去除边框： border：none；
16. 为了兼容各个浏览器布局更美观整齐，左右盒子内容能对齐，先把系统默认内边距和外边距设置为0px；
17.在文本框或者文本域中可通过placeholder=“your name”提供指示文字 在IE8及以下不兼容，只能使用js实现。
17. font-size:0px 设置字体大小为0，可以去除空格，使多个图片紧挨在一起。避免出现图标另起一行。
18. 方法一：设置样式时，如果子元素有些样式一样，我们可以设置父元素.子元素样式，然后用同一个class名称去继承父元素.子元素的样式，此时还可以修改继承后子元素的样式。
方法二：因为同一个父元素，可以开启定位让元素对齐；
19.
为了是文字围绕图片，让图片浮动，当文字与图片位置不符，设置行高。
20. 查找元素功能：css3参考手册→Ctrl+F cursor元素光标选择器：cursor：Pointer是一个小手；
21.
有√的是生效了，去掉勾可以用来调试代码。
22. 在IE6中处理双倍边距的bug，display：inline；
margin-left:100px; float:left 在IE6中会向右移200px 在其他浏览器中只移100px
23. 压缩Css代码，生成一行代码把多余的代码删除，使浏览器流畅：JsCssZip.exe→选中css文件夹→加载→压缩→
24.
1、 制作雪碧图：选图片时，只能背景图能做雪碧图，宽高都固定的，img图片引入的时候引入一整张图片
方法：图片引入ps→图像→画布大小→定位→把图片拉进来→
通过它来拖动图片位置→文件存储web所用格式
2. 在css文件夹引入雪碧图，然后设置位置，background:url"" no-repeat -27px 0px; 不重复，水平方向-27px 垂直方向0px
ps切图
1、 截一个像素的图作为背景图，样式→固定大小→图像 →裁剪→文件→存储为web所用格式→存储到img下。
2、 
来晒选图层。
3、 
查看字体
查看字体颜色
4、 
选中图层，Alt+图标位置，留下你要选的图层，过滤掉不要的图层
素材
*
*代码部分
body{
background: url(img/xia) repeat-x;
}
.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: 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;
}
.nav p{
color: #b7b7b7；
font: 11px tahoma;
}
.banner{
height: 356px；
background: url(…/img/banner-bg.png) no-repeat bottom center;
position: relative;
}
.pointerDiv{
position: absolute;
top: 314px;
left: 15px;
}
.pointerDiv a{
float: left;
width: 17px;
height: 17px;
margin-left: 4px;
background:url(…/img/sprite.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background:url(…/img/sprite.png) no-repeat -27px 0px;
}
.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;
}
.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu{
float: left;
width: 300px;
}
.content .cs , .contact .co {
margin: 0 20px;
}
.content h2{
color: #11719e;
font: 21px Georgia;
}
.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/sprite.png) no-repeat 0px -70px;
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;
_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;
_background-attachment: fixed;
border: none;
overflow: auto;
resize: none;
padding: 10px;
margin: 0;
}
.contact .btn{
width: 163px;
height: 32px;
background: url(…/img/sprite.png) no-repeat 0px -27px;
border: none;
padding: 0;
margin: 11px 0px 23px;
color: white;
font: 13px Georgia;
text-align: left;
text-indent: 1em;
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{
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;
_margin-top: 18px;
margin-bottom: 0px;
}
/设置è�”ç³»æ �å�³ä¾§/
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
_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;
}
.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;
display: inline;
}
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
Learn More
Complete Solution
A tool anything and everything you can think
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
News 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.
