码迷,mamicode.com
首页 > Web开发 > 详细

【转载】CSS + DIV 实现局部布局

时间:2017-01-20 19:05:23      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:链接   tracking   oat   导入   bar   高亮   flow   图片   技术分享   

HTML CSS + DIV实现局部布局

 

1、本章教大家掌握2种布局方式:


    1)顶部导航菜单布局,效果图:   

 

技术分享

 

    2)购物版块布局,效果图:


    技术分享

2、技术目标:
使用div + ul-li实现导航菜单布局
    使用div + dl-dt-dd实现购物版块布局

3、一般的局部布局无非采用如下的技术:
    1)div + ul(ol)-li:用于分类导航或菜单等场合
    2)div + dl-dt-dd:用于图文混编场合
    3)table-tr-td:用于图文布局或显示数据的场合
    4)form + table-tr-td:用于布局表单的场合

4、div + ul-li 布局方式,一般在如下场合使用:
        1)产品的分类导航栏
        2)导航菜单
        3)实现TAB切换效果

5、制作首页的导航主菜单:


    5.1)布局结构分析,如图:
    技术分享
   

    结构代码(完整版):

 

 

Html代码 技术分享 技术分享技术分享
  1. <!DOCTYPE html PUBLIC 
  2.      "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"
  4. <html xmlns="http://www.w3.org/1999/xhtml"
  5. <head
  6.     <title>首页</title
  7.     <!-- main.css为外部样式文件名 --> 
  8.     <link href="css/main.css"rel="stylesheet"type="text/css"/> 
  9. </head
  10. <body
  11. <div id="panel">        
  12.     <div id="header"
  13.         <divid="logo"></div
  14.         <divid="menu"
  15.             <ul
  16.                 <li><ahref="#">首页</a></li
  17.                 <li><ahref="#">家用电器</a></li
  18.                 <li><ahref="#">手机数码</a></li
  19.                 <li><ahref="#">日用百货</a></li
  20.                 <li><ahref="#">书籍</a></li
  21.                 <li><ahref="#">帮助中心</a></li
  22.                 <li><ahref="#">免费开店</a></li
  23.                 <li><ahref="#">全球咨询</a></li
  24.             </ul
  25.         </div
  26.     </div>        
  27. </div
  28. </body
  29. </html
[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC  
  2.      "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.     <title>首页</title>  
  7.     <!-- main.css为外部样式文件名 -->  
  8.     <link href="css/main.css" rel="stylesheet" type="text/css" />  
  9. </head>  
  10. <body>  
  11. <div id="panel">         
  12.     <div id="header">  
  13.         <div id="logo"></div>  
  14.         <div id="menu">  
  15.             <ul>  
  16.                 <li><href="#">首页</a></li>  
  17.                 <li><href="#">家用电器</a></li>  
  18.                 <li><href="#">手机数码</a></li>  
  19.                 <li><href="#">日用百货</a></li>  
  20.                 <li><href="#">书籍</a></li>  
  21.                 <li><href="#">帮助中心</a></li>  
  22.                 <li><href="#">免费开店</a></li>  
  23.                 <li><href="#">全球咨询</a></li>  
  24.             </ul>  
  25.         </div>  
  26.     </div>         
  27. </div>  
  28. </body>  
  29. </html>  

 

    5.2)CSS样式分析(main.css文件代码):  

 

    /*注意:案例中使用的图片在页面下方提供有下载*/
    /*在开发阶段,为div加入边框,便于调整和判断div的位置*/

    div{
        border: 1px solid blue;
    }
    body{
        margin: 0px;
        padding: 0px;
    }
    /*主面板div样式*/
    #panel{   
        width: 980px;
        margin: 0px auto;/*div居中显示*/
    }
    /*顶部div样式*/
    #header{
        /*设置div的背景图片*/
        background-image: url(images/h_bg.jpg);
        height: 132px;
    }
    /*网站logo DIV样式*/
    #logo{
        width: 290px;
        height: 98px;
    }
    /*导航主菜单DIV样式*/
    #menu{
        height: 32px;
    }
    /*无序列表与列表项消除间距*/
    ul, li{
        margin: 0px;
        padding: 0px;
    }
    /*列表项样式*/
    #menu li{
        float: left; /*所有列表项水平排列*/
        width: 84px;
        height: 32px;
        text-align: center;
        list-style:none; /*去掉列表项的样式(小圆点)*/
        line-height: 32px;/*行高*/
        font-weight: bold;/*字体加粗*/
        font-size: 13px;
    }
   /*超链接样式*/
    #menu a, #menu a:hover{
        color: #333333; /*深灰色*/
        text-decoration: none;/*去下划线*/
        height: 32px;
        width: 84px;
        /*
        将a标签设置为"块级呈现",当鼠标移动到
        a标签上时便于呈现出全尺寸的高亮背景图片
        */

        display: block;
    }
    /*当鼠标移动到a标签上时的样式*/
    #menu a:hover{
        background-image: url(images/nav_bg.png);
        background-repeat: no-repeat;/*背景图片不平铺*/
        background-position: center center;/*背景图片水平、垂直居中*/
    }


6、各种选择器的使用方式、常用符号如下:


    符号    示例代码                                  说明
===========================================
    空格    div ul { list-style:none; }         选择div标签内的ul标签
    ,         div, ul { text-align:center; }    选择div标签和ul标签
    #       #tagId { color:red; }               选择id属性值为tagId的标签
    .         .tagbd{border:1px;}               选择class属性值为menuBg的标签
    :         a:hover { #ff0; }                    伪类,选择鼠标移动到上方的a标签
    
    选择器的组合

组合 示例代码 说明 
li.

li .tagClass {   

     width:28px; } 

选择li标签内class属性值为tagClass的标签
div#

div #tagId{

text-align:center;}

选择div标签内id属性值为tagId的标签
# .

#tagId .tagbd{

    border:1px;}

选择id属性值为tagId的标签内,

class属性为tagbd的标签

# . ,

#tid1 .tc1, #tid2 .tc2{

      height:26px;

选择id属性值为tid1的标签内,

class属性值为tc1的标签,以及id属性

值为tid2的标签内,class属性值为tc2的标签

    
7、div + dl-dt-dd局部布局,一般在如下场合使用:
    图文混排
    
8、制作购物版块:
    8.1)布局结构分析,如图:
    技术分享
    
    结构代码(完整版): 

Html代码 技术分享 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. <head
  5.     <title>购物版块演示</title
  6.     <!-- 导入外部样式style.css--> 
  7.     <link href="style.css"rel="stylesheet"type="text/css"/> 
  8. </head
  9. <body
  10. <div id="shopping"
  11.     <dl
  12.         <dt><imgsrc="images/1.jpg"/></dt
  13.         <dd>时尚产品1</dd
  14.     </dl
  15.     <dl
  16.         <dt><imgsrc="images/2.jpg"/></dt
  17.         <dd>时尚产品2</dd
  18.     </dl
  19.     <dl
  20.         <dt><imgsrc="images/3.jpg"/></dt
  21.         <dd>时尚产品3</dd
  22.     </dl
  23.     <dl
  24.         <dt><imgsrc="images/4.jpg"/></dt
  25.         <dd>时尚产品4</dd
  26.     </dl
  27.     <dl
  28.         <dt><imgsrc="images/5.jpg"/></dt
  29.         <dd>时尚产品5</dd
  30.     </dl
  31.     <dl
  32.         <dt><imgsrc="images/6.jpg"/></dt
  33.         <dd>时尚产品6</dd
  34.     </dl
  35.     <dl
  36.         <dt><imgsrc="images/7.jpg"/></dt
  37.         <dd>时尚产品7</dd
  38.     </dl
  39.     <dl
  40.         <dt><imgsrc="images/8.jpg"/></dt
  41.         <dd>时尚产品8</dd
  42.     </dl
  43.     <dl
  44.         <dt><imgsrc="images/9.jpg"/></dt
  45.         <dd>时尚产品9</dd
  46.     </dl
  47. </div
  48. </body
  49. </html
[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>购物版块演示</title>  
  6.     <!-- 导入外部样式style.css-->  
  7.     <link href="style.css" rel="stylesheet" type="text/css" />  
  8. </head>  
  9. <body>  
  10. <div id="shopping">  
  11.     <dl>  
  12.         <dt><img src="images/1.jpg" /></dt>  
  13.         <dd>时尚产品1</dd>  
  14.     </dl>  
  15.     <dl>  
  16.         <dt><img src="images/2.jpg" /></dt>  
  17.         <dd>时尚产品2</dd>  
  18.     </dl>  
  19.     <dl>  
  20.         <dt><img src="images/3.jpg" /></dt>  
  21.         <dd>时尚产品3</dd>  
  22.     </dl>  
  23.     <dl>  
  24.         <dt><img src="images/4.jpg" /></dt>  
  25.         <dd>时尚产品4</dd>  
  26.     </dl>  
  27.     <dl>  
  28.         <dt><img src="images/5.jpg" /></dt>  
  29.         <dd>时尚产品5</dd>  
  30.     </dl>  
  31.     <dl>  
  32.         <dt><img src="images/6.jpg" /></dt>  
  33.         <dd>时尚产品6</dd>  
  34.     </dl>  
  35.     <dl>  
  36.         <dt><img src="images/7.jpg" /></dt>  
  37.         <dd>时尚产品7</dd>  
  38.     </dl>  
  39.     <dl>  
  40.         <dt><img src="images/8.jpg" /></dt>  
  41.         <dd>时尚产品8</dd>  
  42.     </dl>  
  43.     <dl>  
  44.         <dt><img src="images/9.jpg" /></dt>  
  45.         <dd>时尚产品9</dd>  
  46.     </dl>  
  47. </div>  
  48. </body>  
  49. </html>  

  

 

    8.2)CSS样式分析(style.css文件代码):

   /*注意:案例中使用的图片在页面下方提供有下载*/
    /*购物版块div样式*/

    #shopping{
        width: 504px;
        height: 390px;
        margin: 0px auto;
        background-image: url(images/bg.gif);
        background-repeat: no-repeat;
        padding: 40px 10px 10px 15px;
        overflow: hidden;/*div内容超出部分隐藏*/
    }
    /*消除dl dt dd之间的间距*/
    dl, dt, dd{
        margin: 0px;
        padding: 0px;
    }
    /*dl样式*/
    dl{
        float: left;/*将所有dl并排显示*/
        width: 160px;
    }
    /*dt样式(商品的图片放在dt内)*/
    dt{
        height: 95px;
        text-align: center;
        /*内容垂直居中,只对具有valign属性的标签有效*/
        vertical-align: middle;
    }
    /*dd样式(商品的文字放在dd内)*/
    dd{
        height:40px;
        text-align:center;
    }

 

9、总结:
    典型的局部结构包括哪几个?
    div + ul-li局部结构用在什么地方?
    div + dl-dt-dd局部结构用在什么地方?

【转载】CSS + DIV 实现局部布局

标签:链接   tracking   oat   导入   bar   高亮   flow   图片   技术分享   

原文地址:http://www.cnblogs.com/jing1617/p/6323416.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!