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

    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
     
     在CODE上查看代码片派生到我的代码片
    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><a href="#">首页</a></li>  
    17.                 <li><a href="#">家用电器</a></li>  
    18.                 <li><a href="#">手机数码</a></li>  
    19.                 <li><a href="#">日用百货</a></li>  
    20.                 <li><a href="#">书籍</a></li>  
    21.                 <li><a href="#">帮助中心</a></li>  
    22.                 <li><a href="#">免费开店</a></li>  
    23.                 <li><a 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{   
            980px;
            margin: 0px auto;/*div居中显示*/
        }
        /*顶部div样式*/
        #header{
            /*设置div的背景图片*/
            background-image: url(images/h_bg.jpg);
            height: 132px;
        }
        /*网站logo DIV样式*/
        #logo{
            290px;
            height: 98px;
        }
        /*导航主菜单DIV样式*/
        #menu{
            height: 32px;
        }
        /*无序列表与列表项消除间距*/
        ul, li{
            margin: 0px;
            padding: 0px;
        }
        /*列表项样式*/
        #menu li{
            float: left; /*所有列表项水平排列*/
            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;
            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 {   

         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
     
     在CODE上查看代码片派生到我的代码片
    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{
            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并排显示*/
            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局部结构用在什么地方？
  • 相关阅读:
    Qt操作xml文件（增删改功能）
    Qt解析xml
    Qt中使用DOM解析XML文件或者字符串二（实例）
    Qt中使用DOM解析XML文件或者字符串（实例）
    QThread 实用技巧、误区----但文档中没有提到
    事件循环与线程 二
    事件循环与线程 一
    第一讲 递归
    Ubuntu 建立桌面快捷方式
    Codeforces554B:Ohana Cleans Up
  • 原文地址：https://www.cnblogs.com/jing1617/p/6323416.html
Copyright © 2020-2023  润新知