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

    网站建设基础知识2.11:DIV+CSS布局代码实现细化正文区左栏

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

    细化正文区左栏

    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级标题(h1h2h3h4h5h6),它常用来强调段落要表现的内容。每级标题的字符大小并没有一个实际上的固定值,它是由浏览器所决定的,为标题定义的级别只决定了标题之间的相对大小。设置标题方法:将插入点放置到要设置标题的段落(p标签)中,从属性面板上的“格式”(Format)下拉列表中选择相应的标题。

    注意:“预先格式化的”指保持文本中的空格、回车等。

    技巧:可用组合键“Ctrl+相应的标题级别数”来快速设置标题,例如,Ctrl+2设置为标题2等。

    3)效果如下:

    2-18 主页的正文区左栏布局效果图

    说明:

    ①如果多个标签需要使用相同的CSS样式效果,应尽量定义成class(类)样式,从而减少了样式的重复定义。注意,class(类)样式名以“.”开头。另一种解决办法是:仍然给插入的3个标签取不同的名字,例如loginfengcailink,但在定义样式时采用“,”分隔开各个以“#”开头的样式名,而样式定义参数共用:

    #left #login ,  #left #fengcai ,  #left #link {

          height:120px;

    }

    ②由于段落类标签ph1h2h3h4h5h6ulolli以及form等会在标签所对应的网页元素前后保留一定的空余空间(相当于1行高度),如果不需要这些空余空间,应定义标签样式去掉前后多余的空间,可使用CSS样式面板定义样式或直接在代码视图中输入如下代码:

    p,h1,h2,h3,h4,h5,h6,ul,ol,li,form{

          margin:0;

          padding:0;

    }


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

    联系我们

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