引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式

最新推荐文章于 2022-03-24 10:00:35 发布
最新推荐文章于 2022-03-24 10:00:35 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： java 文章标签： css class qq xhtml 手机游戏 手机

(一)刚开始腾讯搞下来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>

输出如下

 

-------------------------------------------------------------------------------

(三)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 多谢朱明的支持

gabriel80
关注
专栏目录
MySQL 备份与恢复（完全备份恢复--增量备份恢复+案例演示）
CSDN著名博主
09-13 2401
文章目录一、MySQL 完全备份1.1、数据库备份方式精讲1.1.1、数据库备份的重要性1.1.2、数据库备份的分类1.1.3、MySQL 完全备份概念解读1.2、物理冷备份与恢复1.3、mysqldump 备份二、MySQL 完全恢复2.1、恢复整库操作2.1.1、source 命令整库恢复2.1.2、MySQL 命令整库恢复2.2、恢复表操作2.3、MySQL 备份思路三、MySQL 增量备份3.1、增量备份的概念3.2、增量备份方法四、MySQL 增量恢复4.1、增量恢复方法4.2、企业恢复案例4.2
如何实现 水平/垂直居中
Zheng_xinle的博客
08-27 1393
多种方法实现水平居中和垂直居中 一、水平居中（包含块中居中） 对于行内元素，在父级块级元素css属性中使用 text-align：center即可。 对于width固定的块级元素，使用margin:20px auto; / margin-left 与 margin-right 设置为 auto* 对于width不固定的块级元素： 1、使用table标签 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。 第二步：为这个 table 设置“左右 margin
CSS 之dl dt dd模拟表格实例代码
12-02
随便搜下，几十万条。贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0 CSS: 复制代码代码如下: dl,dt,dd{ margin:0; background:#fff5fa; font-size:14px; } dl{ margin:0 auto; width:50%; border:1px solid #f8b3d0; border-bottom:none; } dt{ font-weight:800; background:#ff99cc; color:#fff; } dt,dd{ line-he
四个好看的table表格样式
热门推荐
下半夜的风
10-24 7万+
1. 单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } ta
table样式设置小结
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
10-26 3666
table表格的样式设置虽然不多，但每次用到的时候都要去问度娘,很羞耻，借鉴下官网 1.为表格设置合并边框模型： table{border-collapse:collapse;} 2.给边框设置宽度和颜色: table{border: 1px solid blue;} 3.通过 width 和 height 属性定义表格的宽度和高度 table{width:100%;} th{height:50px;} 4.text-align 和 vertical-align 属性设置表格中文本的对齐方式。 t.
DIV+CSS中标签dl dt dd常用的用法
黄维
11-13 6万+
用来创建一个普通的列表, 用来创建列表中的上层项目， 用来创建列表中最下层项目， 和都必须放在标志对之间。   实例一： 效果:   源码： body{ font-size:12px; line-height:1.8; width:900px; margin:auto;} *{ margin:0; padding:0;} h1{ background:
tabale 's css
09-13
tabale 's css tabale 's css tabale 's css
pyecharts tabale
最新发布
11-22
以下是使用pyecharts绘制表格的示例代码： ```python from pyecharts import options as opts from pyecharts.charts ...1. 如何在表格中添加样式？ 2. 如何将表格导出为Excel文件？ 3. 如何在表格中添加超链接？
el-table样式总结—持续更新
weixin_43258184的博客
03-24 2150
1.el-table标签的header-cell-style给指定的表头添加样式 :header-cell-style="getRowClass" getRowClass ({ row, column, rowIndex, columnIndex }) { if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex
纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,...
weixin_30826761的博客
12-26 215
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt><a class="first" href="#" >首页</a></dt><dd class="line">|</dd><dd class="triangle"&gt...
HTML之dl、dt、dd（也许这是你还没用过的标签，但它们非常实用）
子非魚
08-27 4万+
一、dl dt dd认识 html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table tr td、table tr th表格布局）。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li
dl dt dd 标签的用法（一）
weixin_34235371的博客
02-08 2567
html标签中 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。 一般的写法： 首先dt和dd是放于dl标签内，标签dt与dd处于dl...
html:自定义列表(dl>dt+dd)的使用
mumu42的博客
07-28 9453
以前用的都有用无序列表ul>li比较多，看了授课老师的写的代码才又重新认识了自定义列表，例如以下布局用自定义列表标签就相当方便： 只需要定义四个dl标签，在dt标签内添加分别添加相应的图片，在dd标签内添加p标签或者span标签或者其他可以添加文字的标签，再给dt和dd添加浮动属性（float:left;）即可。不过值得注意的是dd标签内可以添加任意其他标签，但是dt标签
好看的table css样式
王永安的博客
04-20 7万+
漂亮的table表格样式css源码漂亮的table表格样式css源码&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; table { border-collapse: collapse; margin: 0 ...
mint-ui坑爹指南(vue)—— 顶部选项卡Navbar的自定义css样式使用方法
人间草木
05-31 4050
效果 html <div class="content"> <mt-navbar class="page-part" v-model="selected"> <mt-tab-item class="my" id="1">我发布的</mt-tab-item> <mt-tab-item...
Web前端面试指导(五十)：CSS样式书写有哪些规范？
雄领IT的专栏
11-01 2682
一、CSS书写顺序 1.位置属性(position, top, right,z-index, display, float等) 2.大小(width, height, padding,margin) 3.文字系列(font, line-height,letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他
css样式之导航条(nav)
wangchaohpu的博客
09-03 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值