HTML CSS + DIV实现局部布局

最新推荐文章于 2024-05-19 11:11:17 发布

Mercop

最新推荐文章于 2024-05-19 11:11:17 发布

阅读量1.4w

点赞数 12

分类专栏： HTML&JS 文章标签： div html css 产品 xhtml

本文链接：https://blog.csdn.net/Mercop/article/details/7882002

版权

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代码

<!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>
<link href="css/main.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div id="panel">
<div id="header">
<divid="logo"></div>
<divid="menu">
<ul>
<li><ahref="#">首页</a></li>
<li><ahref="#">家用电器</a></li>
<li><ahref="#">手机数码</a></

最低0.47元/天解锁文章

Mercop

关注

12
点赞
踩
35

收藏

觉得还不错? 一键收藏
10
评论
HTML CSS + DIV实现局部布局

HTML CSS + DIV实现局部布局1、本章教大家掌握2种布局方式: 1）顶部导航菜单布局，效果图： 2）购物版块布局，效果图： 2、技术目标:使用div + ul-li实现导航菜单布局使用div + dl-dt-dd实现购物版块布局3、一般的局部布局无非采用如下的技术: 1）div
复制链接

扫一扫