打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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>
<!-- main.css为外部样式文件名 -->
<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></li>
<li><ahref="#">日用百货</a></li>
<li><ahref="#">书籍</a></li>
<li><ahref="#">帮助中心</a></li>
<li><ahref="#">免费开店</a></li>
<li><ahref="#">全球咨询</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[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>
<!-- 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)布局结构分析,如图:
结构代码(完整版):
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>
<!-- 导入外部样式style.css-->
<link href="style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div id="shopping">
<dl>
<dt><imgsrc="images/1.jpg"/></dt>
<dd>时尚产品1</dd>
</dl>
<dl>
<dt><imgsrc="images/2.jpg"/></dt>
<dd>时尚产品2</dd>
</dl>
<dl>
<dt><imgsrc="images/3.jpg"/></dt>
<dd>时尚产品3</dd>
</dl>
<dl>
<dt><imgsrc="images/4.jpg"/></dt>
<dd>时尚产品4</dd>
</dl>
<dl>
<dt><imgsrc="images/5.jpg"/></dt>
<dd>时尚产品5</dd>
</dl>
<dl>
<dt><imgsrc="images/6.jpg"/></dt>
<dd>时尚产品6</dd>
</dl>
<dl>
<dt><imgsrc="images/7.jpg"/></dt>
<dd>时尚产品7</dd>
</dl>
<dl>
<dt><imgsrc="images/8.jpg"/></dt>
<dd>时尚产品8</dd>
</dl>
<dl>
<dt><imgsrc="images/9.jpg"/></dt>
<dd>时尚产品9</dd>
</dl>
</div>
</body>
</html>
[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>
<!-- 导入外部样式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局部结构用在什么地方?
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
css的简介
从原型图到成品:步步深入CSS布局
第十天 div+css网页标准布局实例教程(二)
DIV+CSS中标签ul ol li dl dt dd用法 - ayajenson - 博
css布局
[置顶] 史上最全的HTML、CSS知识点总结,浅显易懂。
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服