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

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

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

    细化正文区右栏

    1)在id=right”的div中插入2个互不嵌套的从上至下排列div标签,其id分别为righttoprightbottom,以备显示本系简介、新闻通知等,对应的样式为:

    #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中插入1div标签,以便制作“更多”的效果,其idnewsmore,对应的样式为:

    #right #righttop #newsmore {

          float:right;

          margin-right:5px;

          margin-bottom:5px;

    }

    3)在id=rightbottom”的div中插入2个互不嵌套的从上至下排列div标签,以便制作选项卡效果(分别用于选项卡标题、选项卡内容显示),其id分别为adMenuadContent,对应的样式为:

    #right #rightbottom #adMenu {

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

          background-repeat:no-repeat;

          height:28px;

    }

    #right #rightbottom #adContent {

          height:136px;

          margin-top:8px;

    }

    4)效果如下:

    2-19 主页的正文区右栏布局效果图

    5)在id=adContent”的div中插入3个互不嵌套的从上至下排列div标签,以便存放3个选项卡所对应的内容,其id分别为adList1adList2adList3,对应的样式采用局部套用方法分别定义为:

     <divid="adList1" style="display:block">此处显示  id "adList1" 的内容</div>

     <divid="adList2" style="display:none">此处显示  id "adList2" 的内容</div>

     <divid="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/ 新浪博客/