网页设计:html布局学习1

一、重置CSS样式表
第一种方式
* {margin:0px; padding:0px;}
    
现在众多的设计师发现，这行代码虽然简单，但却让网页解析太慢，呵呵，当然了，自己是业余的，不用太在意。
于是出现了几种CSS重置方法：

第二种方式
NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
释出自己用来重置CSS样式表的方法

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}
    
这个方法适用于大多数的网页设计。

第三种方式
一部分人追求彻底抹去浏览器影响

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, font, 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 {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del { text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
第四种方式
还有今天sofish提到的Yahoo的YUI提供的CSS重置文件

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

这些，没有谁好谁坏一分，大多数设计师并不推荐第一种方法，因为我国的抄袭美德，现在搜索到的CSS网页设计技巧，第一位却一定是这个。

二、连接外部css样式

<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >（这是外部样式的形式）

三、背景设置问题

body{ background:#000 url="images/bg.jpg" no-repeat;}

四、垂直居中

	1.单行：只需要设置一下div的height和line-height相同就能够实现当行的居中

	2.多行：表格中的属性vertical-align:middle；其中必须设置高度才能够垂直居中

    3.多行2：使用padding-top和padding-buttom的设置实现，但是必须设置height为auto

     4.图片居中：div中使用图片居中来实现设置center的值来实现

五、字体颜色

	color属性就能够设置字体颜色
六、首行缩进

	 text-indent:2em 实现  

七、字体font-family 

font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。