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属性的应用场合？有哪些取值？
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhangxiaopeng/p/5138723.html