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

    网站建设基础知识2.12:DIV+CSS布局代码之第2章知识巩固

    作者:南昌网络公司 来源: 日期:2015-11-8 16:32:21 人气:104 标签:网站建设 基础知识

    【巩固与拓展】

    1.在“泰职院”站点根目录下新建泰职院网站主页index.html,并运用本章所学的知识和技能对主页进行布局,该主页分为页头、正文区、页脚3个部分,所需素材请参考现有网站(http://www.tzpc.edu.cn)进行搜集整理。

    2.在网页中使用CSS3种方式

    1)链接外部.CSS文件

    通常在</head>前有如下代码:

    <link rel="stylesheet" href="dzx.css"type="text/css">

    2)嵌入引用

    通常在</head>前有如下代码:

    <style type="text/css">

    <!--

    .text {  font-family: "方正舒体"}

    td { font-size: 24px; font-style: italic }

    #title {  font-size: 16px;font-style: italic}

    a:hover {  font-size: 36px}

    @import url(dzx.css);    //导入

    -->

    </style>

    其中,@import”相当于将dzx.css中全部内容装入进来。而用“<link …>”时则不然,只有网页中用到有关的CSS样式时才真正链接。

    3)局部套用

    作为HTML标签的属性进行定义使用,如<div style=display:block></div>

    注意点:

    1)当上述3种方式在某一网页中同时使用并出现样式定义冲突时,比如均给p标签定义了样式,则优先级为:按照在网页中定义的先后顺序由低到高。

    2若想让选择器样式a:visiteda:linka:hovera:active与类样式同时使用,可定义为:a.special:visited{color:red},此时只能应用于超链接上。引用时用:<a class=special href=index.html>返回</a>

    3同一个样式名可多次定义,最终该样式内容是将每个同名样式中的内容合并,若发生冲突则以后来定义的内容为准。

    4在包含CSS的网页中,常用divspan标签来分割文档内容,使其成为独立的一块,并在该标签中应用样式。divhrtablep等被称为块元素,即凡有该标签的地方,会在前后自动换行,除非定义的浮动属性(float),而span被称为行内元素,前后不自动换行。span诞生较晚,在HTML4.0中诞生。

    3.“Div+CSS”使用技巧

    (1)自定义CSS样式可以以# . 开头(后者尤其适用于多处用到同一个样式时)。为了可重复使用CSS样式,最好定义在外部样式表文件中。

    (2)在定义样式时,如果先选择div标签,再使用“CSS样式”面板上的“+”定义,就无需再取名了。

    (3)在修改样式时,如果先选择div标签,再使用“CSS样式”面板上的“正在”选项卡(适用于修改),则可在选项卡下方立即显示该样式的属性,此时可直接修改。

    (4)在设计视图下水平排列各个divfloat:leftfloat:right属性。即第1divCSS属性为float:left,则同级的第2div将排列在第1div右侧,此时若不想让第2div排列在右侧,可定义第2divCSS属性为clear:leftboth。若此时第2div又有float:left,则同级的第3div将排列在第2div右侧。

    (5)常使用列表、标题、段落显示内容(其实相当于div),很少使用表格,与内容无关的图片尽量设置成背景。各个标题均可自行定义字号等属性。

    (6)定义的级联标签样式(如#header #left{clear:left;} #header  .comm{clear:left;})适用嵌套标签(不要求紧紧相连)。

    (7)定义边界(margin)和填充(padding)时按顺时针方向(上、右、下、左)设置各条边的参数,如 margin2px 4px 2px 4px;如果上下或左右2条边相同,则可合并为margin2px 4px

    (8)各个样式定义中有重复较多的属性和值时应尽量合并,以便产生更加简洁的代码,然后再定义那些不重复的属性和值。如:

    #header,#footer{width:760px;font-family:宋体; float:left;}

    #header{ font-size:14px;}

    #footer{font-size:12px;text-align:center;}

    (9)当某一标签的CSS属性设置成display:block 时类似于div标签了,此时可灵活设置marginpadding,这在导航栏中很有用。

    【归纳总结】

    Div+CSS是当前非常流行的布局排版方法,它的优点很多,尤其符合WEB2.0标准。本章我们通过具体网页的实际布局学习了Div+CSS布局方法以及CSS的定义使用方法,重点要掌握DIVCSS的结合使用。今后还要通过不断的实践掌握Div+CSS使用技巧。

    【分析与思考】

    1.根据本章所布局的页面,你认为哪些CSS样式参数比较常用?

    2.为什么要定义p,h1,h2,h3,h4,h5,h6,ul,ol,li,form{margin:0;padding:0;}

    3.如何布局正文区包括3栏的网页?


    相关阅读
    • 没有资料
    网站建设资料

    联系我们

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

    联系电话:0791-88626667

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

    客户QQ:8675405(圣川)  14967782(圣川)

    技术QQ:707917799(圣川)

    关注我们

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

    南昌圣川网络

    • 版权所有:南昌圣川网络官方网站
    • 网站备案:赣ICP备13008082号-4
    • 站长统计: