• 在线
    咨询
  • 关注
    微信
  • 预约
    建站
  • 您所在的位置:首页 > 建站知识 > 网站建设资料 > 正文

    网站建设基础知识2.7:DIV+CSS布局代码实现页头布局

    作者:南昌网络公司 来源:原创 日期:2015-5-8 8:49:44 人气:130 标签:网站建设 基础知识

    电子系网站主页采用上、中、下结构布局,分别对应于页头、正文区、页脚,采用“DIV+CSS”布局方法实现。页头的布局包含3部分:标志动画、导航栏、欢迎条,使用3div标签实现。现在网页中至上而下依次插入3个互不嵌套的div标签,其ID分别为:headernav1nav2,对应的CSS样式如下:

    #header {

    height:120px;

    }

    #nav1 {

    background-image:url(img/ad_daohang1.gif);

    height:29px;

    }

    #nav2 {

    line-height:23px;

    background-image:url(img/ad_daohang2.gif);

    height:23px;

    }

    说明:

    ①定义CSS样式时应先选中需定义CSS样式的Div标签,可直接在编辑界面上用鼠标点击Div标签的边框,或者通过标签选择器进行。

    ②如果定义的CSS样式只是本网页使用,而不再使用于本网站中的其它网页,则可在“新建CSS规则”对话框中选择“仅对该文档”

    否则,应选择“新建样式表文件”,然后在随后的对话框中输入要保存的样式表文件名和保存路径:


    ③选择器类型(即CSS样式类型)中的“类(可应用于任何标签)”选项用于网页中有多个标签需使用同一样式的情况,此时样式名自行命名,并以“.”开头(缺省时系统会自动加上的)。当网页中某个标签需要应用该样式时,需通过属性面板进行应用才能看到样式的效果。

       而“标签(重新定义特定标签的外观)”选项用于给网页中特定的标签定义样式,此时样式名只能从下方的下拉列表中选择(也可自行输入标签名,但输入错误的标签名后所定义的样式没有任何意义,也不能应用于任何网页元素),标签样式不需通过属性面板应用,它会自动作用于对应的标签。

    “高级(ID、伪类选择器等)”选项用于给网页中有特定ID标识的标签、多个嵌套的类、标签或ID标识定义样式,或者给超链接的4种状态分别定义样式。ID样式名以“#”开头,它也是自动起作用,无需通过属性面板应用。给多个嵌套的类、标签或ID标识定义样式时以空格分隔开各个名称。

    ④定义CSS样式属性时,尽量做到简单、到位,即尽量不要重复定义已经继承或存在的属性,以免重复定义错了造成前后矛盾,即使不矛盾,也会影响日后对这些属性值的维护,除非某个属性需要重新设置新值。比如,定义了body标签的宽度为760px,而nav1nav2 2个标签上下放置在body中,其宽度自然也是760px,就无需再定义nav1nav2的宽度属性了。

    ⑤与内容无关的图片应设置成背景图片,使“表现与内容相分离”。


    网站建设资料

    联系我们

    联系地址:南昌市北京西路437号江西师范大学

    联系电话:0791-88626667

    客户经理:+(86)139 0709 1599(邓经理)

    客户QQ:8675405(ca88.com)  14967782(ca88.com)

    技术QQ:707917799(ca88.com)

    关注我们

    我们的成功离不开各位朋友的关注,通过以下方式可以关注我们!

    南昌ca88.com网络

    • 版权所有:南昌ca88.com网络官方网站
    • 网站备案:赣ICP备13008082号-4
    • 站长统计:
    <友情连结> 西安木牛能源技术服务有限公司/ 无锡市明杨新能源有限公司/ 云端科技官网/ MidiBuddy/ 新浪博客/