引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式
(一)刚开始腾讯搞下来CSS+DIV布局
<!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">
<style>
/*boby*/
body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-height:22px;}
/*TEXT*/
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
/*导航区域*/
#WWWWW *{font-size:12px;line-height:22px;}
#WWWWW {width:284px;height:133px;overflow:hidden;margin-bottom:10px;border: thin solid #000000;
padding-top: 2px;padding-right: 2;padding-bottom: 2;padding-left: 2px;}
#WWWWW #bx {
overflow:hidden;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
}
#WWWWW span{position:block;margin-right:8px;font-weight:bold;}
#WWWWW a{text-decoration:none;padding:3px 3px 1px 3px;}
#WWWWW a.qq{text-decoration:none;padding:1px;}
#WWWWW a.qq:hover{text-decoration:none;padding:1px 3px 1px 3px;background-color: #F5F5F5;
}
</style>
<div id="WWWWW">
<div id="bx">
<span>通信</span>
<a href="#" class="qq">QQ邮箱</a>
<a href="#" class="qq">QQ软件</a>
<a href="#" class="qq">QQ秀</a>
<a href="#" class="qq">会员</a>
<a href="#" class="qq">号码</a>
<a href="#" class="qq">和悦</a>
</div>
<div id="bx">
<span>社区</span>
<a href="#" class="qq">空间</a>
<a href="#" class="qq">相册</a>
<a href="#" class="qq">音乐</a>
<a href="#" class="qq">视频</a>
<a href="#" class="qq">直播</a>
<a href="#" class="qq">Q吧</a>
<a href="#" class="qq">交友</a>
</div>
<div id="bx">
<span>休闲</span>
<a href="#" class="qq">QQ游戏</a>
<a href="#" class="qq">炫舞</a>
<a href="#" class="qq">QQ宠物</a>
<a href="#" class="qq">飞车</a>
<a href="#" class="qq">音速</a>
<a href="#" class="qq">QQ堂</a>
</div>
<div id="bx">
<span>网游</span>
<a href="#" class="lchot">地下勇士</a>
<a href="#" class="qq">寻仙</a>
<a href="#" class="qq">穿越火线</a>
<a href="#" class="qq">自幻想</a>
<a href="#" class="qq">三国</a>
</div>
<div id="bx">
<span>手机</span>
<a href="#" class="qq">QQ无线</a>
<a href="#" class="qq">超级QQ</a>
<a href="#" class="qq">手机游戏</a>
<a href="#" class="qq">手机QQ</a>
<a href="#" class="qq">爱墙</a>
</div>
<div id="bx">
<span>商务</span>
<a href="#" class="qq">拍拍网</a>
<a href="#" class="qq">财付通</a>
<a href="#" class="qq">QQ充值</a>
<a href="#" class="qq">手机充值</a>
<a href="#" class="qq">更多</a>
</div>
</div>
输出如下
------------------------------------------------------------------------------
(二)我改成了ＤＩＶ＋ＣＳＳ＋ＵＬ＋ＬＩ
<!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">
<style>
/*boby*/
body{margin:0;background:#fff;font-size:13px;line-height:22px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
/*TEXT*/
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
/*导航区域*/
#WWWWW *{font-size:12px;line-height:22px;list-style-type: none;margin: 0px;padding: 0px;}
#WWWWW {border: thin solid #000000;width: 258px;overflow: hidden;}
#WWWWW #bx {border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #999999;
overflow: hidden;}
#WWWWW #bx li {float: left;}
#WWWWW #bx ul span{position:block;font-weight:bold;float: left;margin-right: 8px;padding: 0px;}
#WWWWW #bx ul li a{text-decoration:none;}
#WWWWW #bx ul li a.qq{text-decoration:none;padding-right: 6px;}
#WWWWW #bx ul li a.qq:hover{text-decoration:none;background-color: #F5F5F5;}
</style>
<div id="WWWWW">
<div id="bx">
<UL><span>通信</span>
<li><a href="#" class="qq">QQ邮箱</a></li>
<li><a href="#" class="qq">QQ软件</a></li>
<li><a href="#" class="qq">QQ秀</a></li>
<li><a href="#" class="qq">会员</a></li>
<li><a href="#" class="qq">号码</a></li>
<li><a href="#" class="qq">和悦</a></li>
</UL>
</div>
<div id="bx">
<UL><span>社区</span>
<li><a href="#" class="qq">空间</a></li>
<li><a href="#" class="qq">相册</a></li>
<li><a href="#" class="qq">音乐</a></li>
<li><a href="#" class="qq">视频</a></li>
<li><a href="#" class="qq">直播</a></li>
<li><a href="#" class="qq">Q吧</a></li>
<li><a href="#" class="qq">交友</a></li>
</UL>
</div>
<div id="bx">
<UL> <span>休闲</span>
<li><a href="#" class="qq">QQ游戏</a></li>
<li><a href="#" class="qq">炫舞</a></li>
<li><a href="#" class="qq">QQ宠物</a></li>
<li><a href="#" class="qq">飞车</a></li>
<li><a href="#" class="qq">音速</a></li>
<li><a href="#" class="qq">QQ堂</a></li>
</UL>
</div>
<div id="bx">
<UL><span>网游</span>
<li><a href="#" class="lchot">地下勇士</a></li>
<li><a href="#" class="qq">寻仙</a></li>
<li><a href="#" class="qq">穿越火线</a></li>
<li><a href="#" class="qq">自幻想</a></li>
<li><a href="#" class="qq">三国</a></li>
</UL>
</div>
<div id="bx">
<UL><span>手机</span>
<li><a href="#" class="qq">QQ无线</a></li>
<li><a href="#" class="qq">超级QQ</a></li>
<li><a href="#" class="qq">手机游戏</a></li>
<li><a href="#" class="qq">手机QQ</a></li>
<li><a href="#" class="qq">爱</a></li>
</UL>
</div>
<div id="bx">
<UL><span>商务</span>
<li><a href="#" class="qq">拍拍网</a></li>
<li><a href="#" class="qq">财付通</a></li>
<li><a href="#" class="qq">QQ充值</a></li>
<li><a href="#" class="qq">手机充值</a></li>
<li><a href="#" class="qq">更多</a></li>
</UL>
</div>
</div>
输出如下
商务 拍拍网 财付通 QQ充值 手机充值 更多
-------------------------------------------------------------------------------
(三)dl+dt+dd版本
<!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">
<style>
body{font-size:12px;}
.nav-sub *{ margin:0; padding:0;}
.nav-sub dl dt{ font-weight:bold;}
.nav-sub dl dt,.nav-sub dl dd{ display:inline; zoom:1;}
.nav-sub dl dd a{ padding:0 5px;}
</style>
<div class="nav-sub">
<dl class="list1">
<dt>通信</dt>
<dd><a href="#" class="qq">QQ邮箱</a></dd>
<dd><a href="#" class="qq">QQ软件</a></dd>
<dd><a href="#" class="qq">QQ秀</a></dd>
<dd><a href="#" class="qq">会员</a></dd>
<dd><a href="#" class="qq">号码</a></dd>
<dd><a href="#" class="qq">和悦</a></dd>
</dl>
</div>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
----------------------------------------------------------------------
(四)最后我用ＴＡＢＬＥ+TD+TR实验下 用表格+CSS
<!DOCTYPE html PUBLIC "-//W3C//spanD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/spanD/xhtml1-transitional.spand">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body{font-size:12px;}
.nav-sub *{ margin:0; patding:0;}
.span{ font-weight:bold;}
.nav-sub tr td a{patding:0 5px;text-decoration: none;
}
</style>
<table class="nav-sub">
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
</table>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
我的CSS兼容性基本已经到位了,以前总是不会做CSS+DIV+UL+LI
转自：http://hi.baidu.com/%D6%EC%C3%F7%B2%A9%BF%CD/blog/item/8ca407fbccb85d18a8d311a8.html 多谢朱明的支持
引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式相关推荐
- CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
- html图文混排结构dt,dl,dt,dd实现的图文混排（左边图片右边文字）
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
- 用dl元素编辑html个人信息,html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 一.dl dt dd认识 - TOP html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与tabl ...
- dl dt dd标签具体用法
一般我们在做列表的时候通常只会用到ul和li标签,至于DL一般都很少用到,它也属于列表类的标签,下面说一下大概的用法: <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<d ...
- html中dl标签和ul标签,html中dl,dt,dd,ul,li,ol标签区别和使用
html中dl,dt,dd,ul,li,ol标签区别和使用 时间:2013-04-12 21:48 来源:未知 | 作者:易享学习网 | 本文已影响 人 ul: unordered lists ol: ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html,dw软件 方法/步骤 1 无序列表 无序列表是 ...
- 【转】网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊？请说明啊，谢谢有什么功能？...
网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊?请说明啊,谢谢有什么功能? <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(" ...
最新文章
- 提高C++性能的编程技术笔记：编码优化+测试代码
- redis mysql查询数据类型_linux 常见的标识与Redis数据库详解
- 比特币现金（BCH）将在2018年占据主导地位
- Spring DAO之Hibernate
- finfoopen需要什么扩展 php_php获取文件mime类型的四种方法
- Python学习笔记19（算法）
- mvn install:install-file将本地一个中央仓库没有的jar包，推到本地仓库----所有依赖不上仓库不能用
- python ctypes
- 高级Java程序员面试宝典
- 入职与离职手续、五险一金、档案
- 基于steam的游戏销量预测 — PART 3 — 基于BP神经网络的机器学习与预测
- 体验经济：互联网生存的秘密
- 年底无心工作？给个摸鱼好去处。中国超级英雄【一方净土】，进来看看嘛
- c216芯片组服务器,几无改变 9系芯片组架构及新功能_Intel主板_主板评测-中关村在线...
- C语言内部强化培训视频教程
- DRM DUMB相关说明
- (转载)使用Perl编写协议分析脚本
- 报告！优维科技EasyOps®️全栈运维平台又一大波新功能上线
- word2007 正文自动变为大纲一级 问题
- linux定期清理日志脚本，一周清理一次