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

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

    作者:南昌网络公司 来源: 日期:2015-5-22 14:23:34 人气:153 标签:网站建设 基础知识

    在正文区下方插入div标签,其id为footer,对应的CSS样式如下:
    #footer {
       height: 70px;
       clear: left;
       margin-top: 5px;
    }
    说明:
       若想清除前一个div标签的浮动属性对当前div标签的影响,应该定义“清除”属性(clear)。
    细化页头
    在id=“nav1”的div中插入3个互不嵌套的从左至右排列div标签(id为date1、date2、title),以备显示日期和导航标题,其对应的CSS样式为:
    #nav1 #date1 {
       text-align: center;
       line-height: 29px;
       color: #FFFFFF;
       background-image: url(img/ad_daohang3.gif);
       background-repeat: repeat-x;
       width: 200px;
       float: left;
    }
    #nav1 #date2 {
       background-image: url(img/ad_daohang4.gif);
       width: 28px;
       height: 29px;
       float: left;
    }
    #nav1 #title {
       text-align: center;
       height: 29px;
       float: right;
    }
       效果如下:

    图2-17 主页的页头布局效果图
    说明:
    ①要使文本内容在行中垂直居中,可定义行高属性。
    ②背景图片如果比要填充的区域小,默认时是从左至右、从上至下平铺的,类似于住房装修时铺地面砖的效果,因此,如果只想在X方向或Y方向平铺,或只想显示1次,应该定义相应的“重复”属性。
    细化正文区左栏
    (1)在id=“left”的div中插入3个互不嵌套的从上至下排列div标签,其class名均为leftnav,以备显示注册登录表单、系部风采动画、兄弟系部链接,其对应的class样式为:
    #left .leftnav {
       height: 120px;
    }
    (2)在各个标签中插入标题信息(使用属性面板上的标题1、标题2、标题3、标题4、标题5、标题6之一),并定义CSS样式:
    #left .leftnav h4 {
       font-size: 12px;
       font-weight: 500;
       line-height: 25px;
       background-image: url(img/ad_daohang5.gif);
       letter-spacing: 5px;
       text-align: center;
    }
    说明:HTML中提供了6级标题(h1、h2、h3、h4、h5、h6),它常用来强调段落要表现的内容。每级标题的字符大小并没有一个实际上的固定值,它是由浏览器所决定的,为标题定义的级别只决定了标题之间的相对大小。设置标题方法:将插入点放置到要设置标题的段落(p标签)中,从属性面板上的“格式”(Format)下拉列表中选择相应的标题。
    注意:“预先格式化的”指保持文本中的空格、回车等。
    技巧:可用组合键“Ctrl+相应的标题级别数”来快速设置标题,例如,Ctrl+2设置为标题2等。
       
    说明:
       ①如果多个标签需要使用相同的CSS样式效果,应尽量定义成class(类)样式,从而减少了样式的重复定义。注意,class(类)样式名以“.”开头。另一种解决办法是:仍然给插入的3个标签取不同的名字,例如login、fengcai、link,但在定义样式时采用“,”分隔开各个以“#”开头的样式名,而样式定义参数共用:
    #left #login ,  #left #fengcai ,  #left #link {
       height: 120px;
    }
    ②由于段落类标签p、h1、h2、h3、h4、h5、h6、ul、ol、li以及form等会在标签所对应的网页元素前后保留一定的空余空间(相当于1行高度),如果不需要这些空余空间,应定义标签样式去掉前后多余的空间,可使用CSS样式面板定义样式或直接在代码视图中输入如下代码:
    p,h1,h2,h3,h4,h5,h6,ul,ol,li,form{
       margin:0;
       padding:0;
    }
    细化正文区右栏
    (1)在id=“right”的div中插入2个互不嵌套的从上至下排列div标签,其id分别为righttop、rightbottom,以备显示本系简介、新闻通知等,对应的样式为:
    #right #righttop {
       background-image: url(img/ad_daohang5.gif);
       background-repeat: repeat-x;
       height: 180px;
       margin-top: 3px;
       border: 1px solid #FF6600;
    }
    #right #rightbottom {
       background-image: url(img/ad_daohang5.gif);
       background-repeat: repeat-x;
       height: 172px;
       margin-top: 5px;
       border: 1px solid #FF6600;
    }
    (2)在id=“righttop”的div中插入1个div标签,以便制作“更多…”的效果,其id为newsmore,对应的样式为:
    #right #righttop #newsmore {
       float: right;
       margin-right: 5px;
       margin-bottom: 5px;
    }
    (3)在id=“rightbottom”的div中插入2个互不嵌套的从上至下排列div标签,以便制作选项卡效果(分别用于选项卡标题、选项卡内容显示),其id分别为adMenu、adContent,对应的样式为:
    #right #rightbottom #adMenu {
       background-image: url(img/ad_news2.gif);
       background-repeat: no-repeat;
       height: 28px;
    }
    #right #rightbottom #adContent {
       height: 136px;
       margin-top: 8px;
    }
       
       (5)在id=“adContent”的div中插入3个互不嵌套的从上至下排列div标签,以便存放3个选项卡所对应的内容,其id分别为adList1、adList2、adList3,对应的样式采用局部套用方法分别定义为:
     <div id="adList1" style="display:block">此处显示  id "adList1" 的内容</div>
     <div id="adList2" style="display:none">此处显示  id "adList2" 的内容</div>
     <div id="adList3" style="display:none">此处显示  id "adList3" 的内容</div>
    这样定义,使得在浏览器中一打开网页就只显示第1个选项卡的内容,而其余2个选项卡隐藏。

    网站建设资料

    联系我们

    联系地址:南昌市北京西路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/ 新浪博客/