`
HotStrong
  • 浏览: 509321 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

HTML 第七章 CSS + DIV实现局部布局

阅读更多

HTML 第六章 CSS + DIV实现整体布局
HTML 第八章 Table局部布局与浏览器兼容性

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)布局结构分析,如图:
   
   

    结构代码 (完整版): 

 

 

    <!DOCTYPE html PUBLIC
         "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>首页</title>
        <!-- main.css为外部样式文件名 -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="panel">       
        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机数码</a></li>
                    <li><a href="#">日用百货</a></li>
                    <li><a href="#">书籍</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">免费开店</a></li>
                    <li><a href="#">全球咨询</a></li>
                </ul>
            </div>
        </div>       
    </div>
    </body>
    </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)布局结构分析,如图:
   
   
    结构代码 (完整版): 
 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>购物版块演示</title>
        <!-- 导入外部样式style.css-->
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="shopping">
        <dl>
            <dt><img src="images/1.jpg" /></dt>
            <dd>时尚产品1</dd>
        </dl>
        <dl>
            <dt><img src="images/2.jpg" /></dt>
            <dd>时尚产品2</dd>
        </dl>
        <dl>
            <dt><img src="images/3.jpg" /></dt>
            <dd>时尚产品3</dd>
        </dl>
        <dl>
            <dt><img src="images/4.jpg" /></dt>
            <dd>时尚产品4</dd>
        </dl>
        <dl>
            <dt><img src="images/5.jpg" /></dt>
            <dd>时尚产品5</dd>
        </dl>
        <dl>
            <dt><img src="images/6.jpg" /></dt>
            <dd>时尚产品6</dd>
        </dl>
        <dl>
            <dt><img src="images/7.jpg" /></dt>
            <dd>时尚产品7</dd>
        </dl>
        <dl>
            <dt><img src="images/8.jpg" /></dt>
            <dd>时尚产品8</dd>
        </dl>
        <dl>
            <dt><img src="images/9.jpg" /></dt>
            <dd>时尚产品9</dd>
        </dl>
    </div>
    </body>
    </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局部结构用在什么地方?

10、请下载 相关图片素材用于编码 练习

HTML 第六章 CSS + DIV实现整体布局
HTML 第八章 Table局部布局与浏览器兼容性


5
0
分享到:
评论
1 楼 294460620 2011-05-06  
写的很不错,

相关推荐

    使用DIV、CSS技术设计的个人博客网页(web期末考试)

    - **DIV+CSS**: 这种布局方式是指利用HTML中的`&lt;div&gt;`标签作为容器,通过CSS来设置样式和布局的方法。相比传统的表格布局,DIV+CSS布局更加灵活、易于维护,并且能够更好地适应不同分辨率和设备的屏幕。 - **特点**:...

    第3章HTML相关技术基础知识.pdf

    2. `&lt;div&gt;`和`&lt;span&gt;`:`&lt;div&gt;`用于分组HTML元素,常用于布局和样式控制;`&lt;span&gt;`则用于对文本进行局部控制,它们都可以通过CSS定义样式。 3. `&lt;a&gt;`:创建链接,如`链接文本&lt;/a&gt;`,用户点击后跳转至指定URL。 4. ...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    第7章(/C07/) 7.1.htm 演示了编码和译码使用的方法 7.2.htm 演示了exec方法的用法 7.3.htm 对RegExp对象的综合举例 7.4.htm 演示了字符匹配的使用情况 7.5.htm 正则匹配...

    html5权威指南英文版

    - **Ajax应用**:介绍异步JavaScript和XML(Ajax)技术的基础知识,包括如何实现局部刷新、数据加载等交互效果。 - **多媒体集成**:讨论如何在网页中嵌入视频、音频等多媒体资源,并保证良好的用户体验。 - **...

    WEB前端开发初级教案.pdf

    7. CSS3新增多列属性:讲解了CSS3中的多列布局相关属性,用于实现类似报纸的多列布局。 8. CSS3新增单位:介绍了新的长度单位,如rem、vh/vw、ch等。 9. 弹性盒模型:详细解释了CSS3弹性盒模型的原理和使用方法,...

    React Native的布局代码

    - `View`组件:作为基本的布局容器,类似于HTML中的`&lt;div&gt;`。它可以包含其他组件,并通过设置`flex`属性调整自身大小。 - `Text`组件:用于显示文本,支持内联样式和多行文本。 - `Image`组件:加载图片资源,...

    vue实现指定区域截图.zip

    - 对于复杂的布局,可能需要对CSS样式做额外调整以确保截图效果正确。 - 考虑到兼容性问题,确保你的目标浏览器支持HTML5的canvas和Blob API。 - 在实际项目中,裁剪后的图片通常需要上传到服务器,或者通过base...

    Frontend Guide

    - **第3章:CSS** —— 详细介绍CSS的语法、应用方法以及实际案例分析。 #### 四、HTML详解 - **2.2 HTML标签介绍**:讲解了常用的HTML标签及其作用。例如,`&lt;div&gt;` 用于创建区块容器;`&lt;span&gt;` 用于对文本进行...

    Web前端开发初级理论考试.docx

    14. CSS选择器:要选择类名以'c'开头的`div`元素,应使用`div[class^=c]`,这意味着选择类名中以'c'开头的`div`。 15. CSS3变换:在HTML中,使用`transform: rotate(45deg)`可以使元素在鼠标悬停时旋转45度,对应...

    ECShop小米商城模板最新模板堂商业源码模板 团购+手机版+整站数据+微信商城版

    真正模板堂官方销售价6000元的小米商城模板,ECShop内核,带团购、手机版和微信商城的哦,源码站长亲测,完整...12、新增多种jquery兼容特效,整站采用 Div+Css布局,兼容良好 13、模板前端代码优化并重构,速度提升50

    css入门基本知识点,记录我的日常学习

    ### CSS入门基本知识点详解 #### 一、选择器 在CSS中,选择器是用于匹配HTML文档中的元素,以便为其应用样式的一种工具。常见的选择器包括: - **元素选择器**:选择所有指定类型的元素。例如,`p` 选择器会匹配...

    思库教育PHP零基础培训+进阶课程+PHP项目开发实战 21G PHP零基础学习视频教程.txt

    │ │ │ ├[思库教育]JS 第七集 数组初步 (2).avi │ │ │ ├[思库教育]JS 第三集 经过多少次这个路口.avi │ │ │ ├[思库教育]JS 第四集 九九乘法表.avi │ │ │ ├[思库教育]JS 第五集 js系统内置函数.avi │...

    content_1710068454040.zip

    8. `&lt;div&gt;`:分组元素,可以配合CSS进行布局控制。 9. `&lt;span&gt;`:用于对文本进行局部样式设置。 10. `&lt;table&gt;`:表格标签,可用于显示时间线、工作经历等。 此外,为了使简历看起来更美观,还可能使用CSS...

    实验一-开发环境搭建及HTML基本标签实验.rar

    8. `&lt;div&gt;`:分组元素,常用于布局和应用样式。 9. `&lt;span&gt;`:用于对文本进行局部操作,如改变颜色或字体。 10. `&lt;ul&gt;` 和 `&lt;li&gt;`:创建无序列表,`&lt;ol&gt;` 和 `&lt;li&gt;` 创建有序列表。 11. `&lt;table&gt;`:创建表格,`&lt;tr&gt;`...

    2021-2022计算机二级等级考试试题及答案No.381.docx

    5. CSS布局:CSS(层叠样式表)主要用于构建网页布局,其中`&lt;div&gt;`标签是最常用的布局容器,可以用来组织和控制页面内容的呈现。 6. VBA变量作用域:VBA(Visual Basic for Applications)中,变量有模块级、窗体级...

    ExtAspNet_v2.3.2_dll

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...

    JS日期控件

    这涉及到CSS(层叠样式表)的使用,包括布局(如Flexbox或Grid)、颜色、字体、边框等样式设置。 6. **自定义功能**:根据需求,日期控件可能需要支持多种功能,如日期范围选择、禁用特定日期、显示周数等。这需要...

    Mini_Project_2

    9. **CSS集成**:项目可能使用`&lt;style&gt;`标签在HTML文件内部定义CSS样式,或者通过`&lt;link&gt;`标签引入外部CSS文件,实现页面的美化和布局。 10. **响应式设计**:如果项目考虑到了不同设备的显示,可能会使用媒体查询...

Global site tag (gtag.js) - Google Analytics