网页布局与html样式

分类 html

网页布局与html样式


一、网页布局步骤细化


1、在“当前版面”分出几个相对独立的区块(区块只分两种情况:纵向与横向);

2、如果分出的是纵向区块,则每一个区块写出一个div就可以了(因为div本身就是自占一行的,则自然每个div就是一个纵向的区块了);

3、如果分成的是横向区块,则:

    a)同样每个区块首先写出一个div,且每个div都进行浮动(通常是一左一右,或两左一右,或一边倒);

    b)设置各个div需要的宽度及相关区域(padding,border,margin),但总和不超过当前父盒子的宽度;

    c)有必要也设置各自高度,以及颜色背景或边框,以出现明显的视觉效果,这样有助于排错;

    d)使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子

            i.在父盒子内部最后位置添加一个用于清除浮动的空div(<div style=”clear:both”></div>),

            ii.对父盒子使用overflow:hidden;

            iii.对父盒子设置一个固定的高度——适用于内部盒子高度固定的情况。

4、在上述每个分出的区块中,又当做“当前版面”做同样的分析与设计(重复1-3步)


二、html样式清除(css初始化)


html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。

最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。

比如很多标签有初始的margin,或padding,或字的大小或粗细,斜体等等效果,则我们使用一些css设置将这些初始表现全部“清空”,比如:

*{
    font-size:12px;
    margin:0;
    padding:0;
    font-weight:normal;
    font-style:normal;
    list-style-type:none;
}

这样之后,所有的每个标签所需要的表现,都需要我们自己来使用css设置。

实际应用中,我们一般都是使用一个通用的css文件来完成此工作


三、样式分类


1,行内样式:

<标签名 其他标签属性…….  style=”css属性1:值1;css属性2:值2; ……  ” >内容部分</标签名>

只对当前标签有效:通常不推荐使用,或偶尔临时使用。

2,页内样式:

<style>
    选择器1{ ….. }
    选择器2{ ….. }
     。。。。。。。。
</style>

只对当前网页有效:常见。

3,外部样式:

css文件中:
    选择器1{ ….. }
    选择器2{ ….. }
     。。。。。。。。
网页文件中:

<link rel="stylesheet" type="text/css" href="css文件路径url" />

对所有引入该css的网页有效:常见。