• HTML CSS + DIV实现局部布局

    HTML 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.         <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> 
    [html] view plaincopy
    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><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> 
    [html] view plaincopy
    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局部结构用在什么地方？

    HTML CSS + DIV实现整体布局

    1、技术目标：

    • 开发符合W3C标准的Web页面
    • 理解盒子模型
    • 实现DIV+CSS整体布局

    2、什么是W3C标准？

        W3C：World Wide Web Consortium，万维网联盟
        W3C的职能：负责制定和维护Web行业标准
        W3C标准包括一系列的标准：

    • HTML内容方面：XHTML
    • 样式美化方面：CSS 
    • 结构文档访问方面：DOM
    • 页面交互方面：ECMAScript
    • ……等等


    3、W3C倡导的Web结构要符合以下要求：

    • XHTML负责内容组织
    • CSS负责页面样式


    4、符合W3C规范页面的结构：
       

    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.         <metahttp-equiv="Content-Type"content="text/html; 
    6.                 charset=gb2312"/> 
    7.         <title>无标题文档</title> 
    8.     </head> 
    9.     <body> 
    10.             ......页面内容部分 
    11.     </body> 
    12.     </html> 
    [html] view plaincopy
    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.         <meta http-equiv="Content-Type" content="text/html;  
    6.                 charset=gb2312" />  
    7.         <title>无标题文档</title>  
    8.     </head>  
    9.     <body>  
    10.             ......页面内容部分  
    11.     </body>  
    12.     </html>  

    5、XHTML基本规范

    1. 标签名和属性名称必须小写
    2. HTML标签必须关闭
    3. 属性值必须用引号括起来
    4. 标签必须正确嵌套
    5. 文档必须拥有一个根元素，所有的XHTML元素必须嵌套于<html>根元素中
    6. 属性不能简写，如：

                           <input checked="checked" />
                           <input readonly="readonly" />
                           <option selected="selected" />

    6、页面开发需要注意的地方：

    • 不要使用淘汰的标签：<b>、<font>、<marquee>等，可参考官方文档(http://www.w3c.org)
    • < img />标签的alt属性：为图片增加alt属性
    • 样式和内容分离：将样式和结构分离，不使用行类样式
    • 表单的name和id：表单及表单元素要求设置name和id属性
    • 使用CSS + DIV布局
    • 页面的浏览器兼容性


    7、为什么需要盒子模型？

        网页可以看成由一个个"盒子"组成，如图：
       

        由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
        中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
        的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

    8、盒子模型的相关属性

    • margin（外边距/边界）
    • border（边框）
    • padding（内边距/填充 ）

         我们看图理解一下各属性作用：

        

         以上属性又分为上、右、下、左四个方向
        
         问题：页面元素的宽度width、高度height如何计算？
         答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
         比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

    9、盒模型的层次关系

        我们通过一个经典的盒模型3D立体结构图来理解，如图：
       

         从上往下看，层次关系如下：

         第1层：盒子的边框(border)，
         第2层：元素的内容(content)、内边距(padding)
         第3层：背景图(background-image)
         第4层：背景色(background-color)
         第5层：盒子的外边距(margin)

         从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
         图将在背景色的上方显示

    10、margin外边距
      
        可统一设置或四边分开设置，如图：

           

        具体的设置可查看CSS帮助文档(页面下方提供下载)

    11、水平居中和垂直居中

        水平居中包含两种情况：
            块级元素的水平居中：margin:0px auto;
            文字内容的水平居中：text-align: center;
       
        垂直居中：
            常见的单行文字的垂直居中可设置文字所在行的height与
            行高样式属性一致，比如：
            div{
                400px;
                height: 400px;
                line-height: 400px;/*行高与div高度一致*/
            }

    12、案例的首页布局分析

          

             只保留DIV的布局分析：

            

    13、首页布局CSS + DIV代码分析

        HTML结构代码：
        <div id="container">
                <div id="header">顶部（header）</div>
                <div id="main">主体部分（main）</div>
                <div id="footer">底部（footer）</div>
        </div>
       
        CSS样式代码：
        /*主面板样式*/
        #container {
            980px;
            margin:0px auto;/*主面板DIV居中*/
        }
       /*顶部面板样式*/
        #header {
            100%;
            height:150px;
            border:1px #F00 solid;
        }
        /*中间部分面板样式*/
        #main {
            100%;
            height:400px;
            border:1px #F00 solid;
        }
        /*底部面板样式*/
        #footer {
            100%;
            height:100px;
            border:1px #F00 solid;
        }

    14、为什么需要float浮动属性？
      
        我们来看看下图：

       
       
        问题：如何让商品分类DIV、内容DIV和右侧DIV并排放置？
        答案：使用float(浮动)样式

    15、浮动属性

        理解浮动属性首先要搞清楚，什么是文档流？
        文档流：浏览器根据元素在html文档中出现的顺序，
            从左向右，从上到下依次排列
       
        浮动属性是CSS中的定位属性，用法如下：
            float: 浮动方向(left、right、none);

        left为左浮动、right为右浮动、none是默认值表示不浮动
        ，设置元素的浮动，该元素将脱离文档流，向左或向右移动
        直到它的外边距碰到父元素的边框或另一个浮动元素的边
        框为止

        浮动示例，没有使用浮动的3个DIV：
        HTML结构代码：
            <div id="first">第1块div</div>
            <div id="second">第2块div</div>
            <div id="third">第3块div</div>

        CSS样式代码：
            #first, #second, #third{
                    100px;
                    height:50px;
                    border:1px #333 solid;
                    margin:5px;
            }

        执行效果如图：
       


        样式中加入 float:left;
        执行效果如图：
       
       
        你再修改为 float: right试试右浮动是什么效果
       
    16、让商品分类DIV、内容DIV和右侧DIV并排放置

        HTML结构代码：
       

    Java代码 复制代码 收藏代码
    1. <div id="container"> 
    2.     <div id="header">顶部（header）</div> 
    3.     <div id="main"> 
    4.         <div class="cat">商品分类(cat)</div> 
    5.         <div class="content">内容(content)</div> 
    6.         <div class="sidebar">右侧(sidebar)</div> 
    7.     </div> 
    8.     <div id="footer">底部（footer）</div> 
    9. </div> 
    [java] view plaincopy
    1. <div id="container">  
    2.     <div id="header">顶部（header）</div>  
    3.     <div id="main">  
    4.         <div class="cat">商品分类(cat)</div>  
    5.         <div class="content">内容(content)</div>  
    6.         <div class="sidebar">右侧(sidebar)</div>  
    7.     </div>  
    8.     <div id="footer">底部（footer）</div>  
    9. </div>  

       
       CSS样式代码(在第13节CSS代码基础上加入)：

        .cat, .sidebar {
            float:left;
            20%;
            height:100%;
        }
        .content {
            float:left;
            60%;
            height:100%;
        }

    17、clear清除

        clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行
        clear属性的取值：rigth、left、both、none

    18、总结

    • 盒子模型有哪些属性？各属性又分别包含哪些属性？
    • float属性的应用场合？有哪些取值？   
    • clear属性的应用场合？有哪些取值？
  • 相关阅读:
    Eclipse添加Junit测试
    Java基础—JDK环境变量配置
    Java基础—常用类之String类
    Spring3+ibatis (SQL Server)+pager-taglib.tld查询分页的实现
    【solr专题之中的一个】Solr高速入门
    【翻译自mos文章】在12c中Create or Truncate Table时非常慢，等待事件为 DFS Lock Handle wait
    Ubuntu x86 64 settup nginx rtmp server
    [POJ 1390]Blocks
    Spring中AOP的使用
    Cocos2dx 小技巧（十三）聊聊坐标系
  • 原文地址：https://www.cnblogs.com/zhangxiaopeng/p/5138723.html
Copyright © 2020-2023  润新知