- 浏览: 224758 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
表格大家并不陌生,细线表格更是受到广泛应用。
使用方法
其中每个li只负责右边、下边的线,配以float:left;来完成横向排列,
最外边的div则只定义上边、左边的线,用以显示表格完整线条。
这种做法的好处是更加灵活,你可以由ul中事先定义好的任意两个class来控制线的颜色,
整体语意也更加清晰,可见CSS有多么的灵活 :p
在做程序实现的时候,如同循环<tr>一样,我们可以直接循环<ul>,
要知道,一个清晰的结构,对程序员开发程序的效率有多么大的帮助啊
完整代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tableFrame_simple</title>
<style type="text/css">
body{
width:auto;
height:auto;
padding:0;
margin:20px 0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
ul{
clear:both;
padding:0;
margin:0;
list-style:none;
}
#tableFrame{
width:875px; /*需要修改*/
height:auto;
border-top:#000 1px solid;
border-left:#000 1px solid;
padding:0;
margin:0 auto;
font-size:12px;
}
#tableFrame:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
li{
float:left;
display: block;
width:120px; /*需要修改*/
height:auto;
padding:2px;
margin:0;
border-right:#000 1px solid;
border-bottom:#000 1px solid;
line-height:16px;
color:000;
}
/* 表格标题*/
#tableFrameTitle ul{}
#tableFrameTitle ul li{
background:gray;
text-align:center;
color:#fff;
}
/* 表格内容*/
#tableCase ul{}
#tableCase ul li{}
/* 单个表格特定样式*/
.tableCaseThree{color:#329A02;}
.tableCaseFive{color:#f00;}
.tableCaseSeven{color:#f00;}
</style>
</head>
<body>
<div id="tableFrame">
<div id="tableFrameTitle">
<ul>
<li>ID</li>
<li>当日排名</li>
<li>排名变化趋势</li>
<li>一周平均排名</li>
<li>排名变化趋势</li>
<li>一月平均排名</li>
<li>排名变化趋势</li>
</ul>
</div>
<div id="tableCase">
<!--此处开始循环 -->
<ul>
<li class="tableCaseOne">0001</li>
<li class="tableCaseTwo">1234</li>
<li class="tableCaseThree">↑ 200</li>
<li class="tableCaseFour">1856</li>
<li class="tableCaseFive">↓ 56</li>
<li class="tableCaseSix">1650</li>
<li class="tableCaseSeven">↓ 156</li>
</ul>
<!--到此循环结束 -->
<ul>
<li class="tableCaseOne">0002</li>
<li class="tableCaseTwo">1234</li>
<li class="tableCaseThree">↑ 200</li>
<li class="tableCaseFour">1856</li>
<li class="tableCaseFive">↓ 56</li>
<li class="tableCaseSix">1650</li>
<li class="tableCaseSeven">↓ 156</li>
</ul>
<ul>
<li class="tableCaseOne">0003</li>
<li class="tableCaseTwo">1234</li>
<li class="tableCaseThree">↑ 200</li>
<li class="tableCaseFour">1856</li>
<li class="tableCaseFive">↓ 56</li>
<li class="tableCaseSix">1650</li>
<li class="tableCaseSeven">↓ 156</li>
</ul>
<ul>
<li class="tableCaseOne">0004</li>
<li class="tableCaseTwo">1234</li>
<li class="tableCaseThree">↑ 200</li>
<li class="tableCaseFour">1856</li>
<li class="tableCaseFive">↓ 56</li>
<li class="tableCaseSix">1650</li>
<li class="tableCaseSeven">↓ 156</li>
</ul>
<ul>
<li class="tableCaseOne">0005</li>
<li class="tableCaseTwo">1234</li>
<li class="tableCaseThree">↑ 200</li>
<li class="tableCaseFour">1856</li>
<li class="tableCaseFive">↓ 56</li>
<li class="tableCaseSix">1650</li>
<li class="tableCaseSeven">↓ 156</li>
</ul>
</div>
</div>
</body>
</html>
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 485一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 527一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 600话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1558Web前端开发和JS面向对象编程分享 一、前端 ... -
网格(UED所谓栅格化)方案生成器
2015-09-03 14:30 514本文转载于:http://www.tw ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 663让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 726现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 624一般情况下,元素拥有默认的white-space:norm ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 646<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1684看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 1011写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 699/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1558这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 839研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
完美解决IE6不支持position:fixed的bug
2012-04-28 16:50 841废话不多说,先看一下下面这段代码: ? ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 956用一个div作为提示信息或者与用户交互的层控件, ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 715为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ... -
如何通过CSS实现div的固定位置,不随页面滚动消失
2012-04-24 16:56 1411每个 Web Developer / Designer 都知道 ... -
如何去掉链接虚线框,css去链接虚线,html链接虚线框隐藏
2012-02-12 11:34 1188链接的虚线框影响整 ... -
让apache支持shtml 文件,aphache shtml
2012-01-10 09:58 740介绍一下shtml和shtm 关于shtml,shtml是一 ...
相关推荐
使用ul li 标签实现的表格样式,可代替table标签,避免搜索引擎收录不了表格中的关键字
本篇文章将深入探讨如何利用CSS来调整`<ul>`和`<li>`的样式,以及它们在选项卡式设计中的应用。 首先,`<ul>`元素用来创建一个无序的项目列表,每个列表项则由`<li>`元素定义。默认情况下,浏览器会为`<ul>`添加一...
标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`<ul>`)和列表项(`<li>`)元素,通过CSS样式来模拟传统HTML表格(`<table>`)的效果。这种方法常用于创建灵活、响应式的布局,...
这就是"ul打造表格样式"这个主题所探讨的内容。通过使用无序列表`<ul>`和列表项`<li>`来模拟表格,我们可以实现更为自由的CSS样式定制,同时保持内容的语义清晰。 首先,我们需要理解`<ul>`和`<li>`元素的基本用法...
通过使用ul和li标签,以及CSS样式,我们可以实现一个细线表格的效果,而不需要使用传统的table标签。这种方法非常有创意,可以应用于各种网页设计中。 优点 这种方法有很多优点。首先,它可以减少代码的数量,...
在网页布局中,`<ul>` 和 `<li>` 元素常常被用来创建列表,而内容宽度的问题在不同浏览器间存在兼容性差异,尤其是IE6。这个问题主要涉及到`<li>`元素的宽度自适应和跨浏览器兼容性。 在IE6中,如果设置`<li>`的...
### CSS 使用 ul li 实现圆角表格的知识点详解 #### 一、引言 在网页设计与开发领域,实现美观且实用的表格是一项常见的需求。本文档将详细讲解如何使用HTML中的`<ul>`和`<li>`元素来构建一个具有圆角效果的表格,...
总结来说,利用UL、Li和CSS属性制作无表格实用菜单导航的关键在于HTML结构的合理构建以及CSS样式的精妙设置。通过消除默认的项目符号,添加自定义的边框和背景样式,以及通过伪类控制状态变化,可以创建出既实用又...
在网页设计中,使用CSS(层叠样式表)来创建美观、功能丰富的界面是至关重要的。其中,制作圆角表格是一项常见的需求,尤其在追求现代感与用户友好体验的设计中。本文将详细介绍如何通过简单的三步骤,利用CSS来实现...
在网页布局和设计中,`<ul>`(无序列表)和`<li>`(列表项)元素是非常常用且基础的HTML结构。它们通常用于创建导航菜单、展示列表数据、构建简单的表格等场景。以下是对`<ul>`和`<li>`基本用法的详细分析: 1. **...
用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...
随着CSS技术的发展,设计师们开始倾向于使用无序列表(`<ul>`)结合CSS来替代表格,实现更灵活、可定制化的布局。这种做法有以下几个主要优点: 1. **响应式设计**:`<table>`元素在不同屏幕尺寸下调整布局较为困难...
在本篇文章中,我们将深入探讨如何利用Dreamweaver中的CSS功能,结合`<ul>`和`<li>`标签来创建无表格布局。这种布局方式不仅有助于提升网页的可读性和美观度,还能提高搜索引擎优化(SEO)的效果。 首先,`<ul>`...
本教程将详细介绍如何使用CSS和JavaScript来实现一个类似表格的动态滚动效果,通过`ul`和`li`标签来模拟表格结构。 ### CSS基础布局 首先,我们需要创建一个容器来包裹我们的“表格”。这可以通过`<div>`标签实现...
- **基础样式**:设置`<ul>`和`<li>`的基本样式,包括清除默认的列表样式、设置浮动等。 - **鼠标悬停效果**:使用`:hover`伪类为一级菜单项添加鼠标悬停效果,包括颜色变化、显示二级菜单等。 - **二级菜单样式*...
10. **表格样式**: `表格样式.html`则可能涵盖了如何使用CSS为HTML表格添加样式,如单元格边框、颜色、对齐方式以及响应式设计。 掌握这些技巧将有助于提升你在HTML和JavaScript开发中的能力,使得网页制作更加...
首先,让我们来看一下如何用`<div>`和`<ul>`构建一个基本的表格结构。`<div>`是一个通用的容器元素,可以用来包裹一组相关的HTML元素;`<ul>`则用于创建无序列表,这里的每个`<li>`元素相当于表格中的一个单元格。 ...