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）布局结构分析，如图：
    

结构代码（完整版）：

  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>
  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{   
        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）布局结构分析，如图：
    
    
    结构代码（完整版）：

  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="data:images/1.jpg"/></dt>
  13. <dd>时尚产品1</dd>
  14. </dl>
  15. <dl>
  16. <dt><imgsrc="data:images/2.jpg"/></dt>
  17. <dd>时尚产品2</dd>
  18. </dl>
  19. <dl>
  20. <dt><imgsrc="data:images/3.jpg"/></dt>
  21. <dd>时尚产品3</dd>
  22. </dl>
  23. <dl>
  24. <dt><imgsrc="data:images/4.jpg"/></dt>
  25. <dd>时尚产品4</dd>
  26. </dl>
  27. <dl>
  28. <dt><imgsrc="data:images/5.jpg"/></dt>
  29. <dd>时尚产品5</dd>
  30. </dl>
  31. <dl>
  32. <dt><imgsrc="data:images/6.jpg"/></dt>
  33. <dd>时尚产品6</dd>
  34. </dl>
  35. <dl>
  36. <dt><imgsrc="data:images/7.jpg"/></dt>
  37. <dd>时尚产品7</dd>
  38. </dl>
  39. <dl>
  40. <dt><imgsrc="data:images/8.jpg"/></dt>
  41. <dd>时尚产品8</dd>
  42. </dl>
  43. <dl>
  44. <dt><imgsrc="data:images/9.jpg"/></dt>
  45. <dd>时尚产品9</dd>
  46. </dl>
  47. </div>
  48. </body>
  49. </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="data:images/1.jpg" /></dt>
  13. <dd>时尚产品1</dd>
  14. </dl>
  15. <dl>
  16. <dt><img src="data:images/2.jpg" /></dt>
  17. <dd>时尚产品2</dd>
  18. </dl>
  19. <dl>
  20. <dt><img src="data:images/3.jpg" /></dt>
  21. <dd>时尚产品3</dd>
  22. </dl>
  23. <dl>
  24. <dt><img src="data:images/4.jpg" /></dt>
  25. <dd>时尚产品4</dd>
  26. </dl>
  27. <dl>
  28. <dt><img src="data:images/5.jpg" /></dt>
  29. <dd>时尚产品5</dd>
  30. </dl>
  31. <dl>
  32. <dt><img src="data:images/6.jpg" /></dt>
  33. <dd>时尚产品6</dd>
  34. </dl>
  35. <dl>
  36. <dt><img src="data:images/7.jpg" /></dt>
  37. <dd>时尚产品7</dd>
  38. </dl>
  39. <dl>
  40. <dt><img src="data:images/8.jpg" /></dt>
  41. <dd>时尚产品8</dd>
  42. </dl>
  43. <dl>
  44. <dt><img src="data: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 实现局部布局的更多相关文章

  1. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  2. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  3. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  4. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  6. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  7. HTML CSS + DIV实现整体布局 part2

    9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:     从上往下看,层次关系如下: 第1层:盒子的边框(border),     第2层:元素的内容(content).内边 ...

  8. 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

  9. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

随机推荐

  1. Python实现对Android截图

    背景: 测试过程中,总是需要对Android设备进行截图,然后在截图中标注问题描述: 手动方式: 1.使用adb scrrencap /sdcard/screen.png 命令对Android设备进行 ...

  2. 怎么使用C++标准库来实现二维数组

    在编程里,像界面布局是二维的,那么常常使用二维数组来表示界面的元素,那么就需要使用二维的数组,在现在C++肯定是以标准库为基础了,不再使用C的二维数组,那么怎么样做呢?下面就使用vector来实现二维 ...

  3. P1001 第K极值

    P1001 第K极值 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 成成第一次模拟赛 第一道 描述 给定一个长度为N(0<n<=10000)的序 ...

  4. linux用户添加到多个组

    usermod -G groupname username (这种会把用户从其他组中去掉,只属于该组)如:usermod -G git git (git只属于git组) usermod -a -G g ...

  5. hadoop之HDFS运行小观察

    hadoop 是当前很火的一个  大数据运行框架和平台, 对于这个神奇的大家伙我甚是搞不清楚,前段时间闲来无视便把 HADOOP 运行起来, 看着它的操作记录存储部分(操作日志), IMAGE 记录着 ...

  6. 【opencv基础】测量运行时间的函数getTickCount/getCPUTickCount/getTickFrequency

    函数的计算结果类型是double,单位是秒. 要使用更精确的计时,就需要使用getCPUTickCount(),不过现代计算机CPU的频率会随着负载而变化所以没大有必要使用该函数,可以参看函数的介绍[ ...

  7. Adobe Flash Player - imsoft.cnblogs

    Adobe Flash Player是一个跨平台.基于浏览器的应用程序.运行时,它可以跨屏幕和浏览器原汁原味地查看具有表现力的应用程序.内容和视频.Flash Player实现了移动屏幕上的高性能优化 ...

  8. HDU 4619 Warm up 2 贪心或者二分图匹配

    给同一张横着的牌的所在的格子编同一样的号,这些格子对应x集合,给同一张竖着的牌所在的格子编同一样的号,对应y集合,同一个格子上既有横着的牌又有竖着的牌,那么就建一条边,有冲突就要拿走一张,结果是总的牌 ...

  9. poj2387 最短路

    题意:给出一堆双向路,求从N点到1点的最短路径,最裸的最短路径,建完边之后直接跑dij或者spfa就行 dij: #include<stdio.h> #include<string. ...

  10. nuclio kubernetes 部署

    一张参考架构图: 从图中可以看到nuclio可以运行到docker 以及kubernetes中 提供了kubernetes 部署的脚本 安装 创建命名空间 kubectl create namespa ...