在页面当中总是有这样那样的自适应宽度的 li 列表,一般做的是信息列表,有的许多都带了时间。
对于这样的,我们总是希望一个css类能够重用到相关类型的列表,我就是这样的一个想法
今天再群里面提出这样的一个东西,大家都踊跃参与了讨论,我也得到一些想法,现在记录一下
也许里面的做法不是最好的,但是实现是比较简单的,如果有更好的方法,欢迎大家回帖讨论!
下面是相关代码:
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>带日期的信息列表自适应宽度</title>
<style type="text/css">
*{margin:0;padding:0}
body{font:12px/1.5 simsun;text-align:center}
div{margin:0 auto}
ul,li{list-style:none}
hr{margin:10px 0;}
a,a:visited{color:blue;text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
.wraper{width:300px/*设置为500px可以让文字完全显示*/;text-align:left;}
.wraper h3{}
.wraper ul{padding:10px 0;background:#f60;}
.wraper li{overflow:hidden;height:22px;line-height:22px;background:#ccc;/*white-space:nowrap;IE6下会撑大外层元素text-overflow:ellipsis;*/}
.wraper pre{white-space:pre-wrap;word-wrap:break-word;/*为pre自适应换行*/}
.demo1 span{float:right;}
.demo2 span{float:right;/*padding-left:5px; 给一个padding-left会让时间与信息文本有一定的间隔,美观上好看一些*/}
.demo3 a{float:left;}
.demo3 span{float:right;}
.demo3 li{vertical-align:bottom;}
.demo4 a{float:left;}
.demo4 span{float:right;}
.demo4 li{vertical-align:bottom;}
.demo5 li{position:relative;padding-right:70px;}
.demo5 span{position:absolute;top:0;right:0;}
</style>
</head>
<body>
<div class="wraper">
<h3>信息不浮动,时间右浮动</h3>
<ul class="demo1">
<li><a href="#" title="">1_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-01-01</span></li>
<li><a href="#" title="">2_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-02-02</span></li>
<li><a href="#" title="">3_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-03-03</span></li>
</ul>
<pre>
1、IE6下时间掉下去了,其他浏览器可以一左一右。
2、字符过长,宽度不够,时间掉下去了。
</pre>
<hr />
<h3>时间右浮动,信息不浮动</h3>
<ul class="demo2">
<li><span>2011-01-01</span><a href="#" title="">1_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
<li><span>2011-02-02</span><a href="#" title="">2_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
<li><span>2011-03-03</span><a href="#" title="">3_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
</ul>
<pre>
1、各浏览器表现一致,只是在IE6下,时间文本貌似下去了一点点。
2、字符过长,宽度不够,信息文本被截掉了。
</pre>
<hr />
<h3>信息左浮动,时间右浮动</h3>
<ul class="demo3">
<li><a href="#" title="">1_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-01-01</span></li>
<li><a href="#" title="">2_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-02-02</span></li>
<li><a href="#" title="">3_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-03-03</span></li>
</ul>
<pre>
1、IE6下,第二个li与第三个li之间出现间隔(应该是浮动引发的IEBUG),解决方法是为li增加 vertical-align:bottom(其中一种解决方法,还可以对li进行左浮动)。
2、字符过长,宽度不够,时间掉下去了。
</pre>
<hr />
<h3>时间右浮动,信息左浮动</h3>
<ul class="demo4">
<li><span>2011-01-01</span><a href="#" title="">1_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
<li><span>2011-02-02</span><a href="#" title="">2_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
<li><span>2011-03-03</span><a href="#" title="">3_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a></li>
</ul>
<pre>
1、IE6下,第二个li与第三个li之间出现间隔(应该是浮动引发的IEBUG),解决方法是为li增加 vertical-align:bottom(其中一种解决方法,还可以对li进行左浮动)。
2、字符过长,宽度不够,IE8,FF下信息文本掉下去了,IE6下信息文本显示不全,过长文字被截掉了。
</pre>
<hr />
<h3>信息不浮动,时间绝对定位右</h3>
<ul class="demo5">
<li><a href="#" title="">1_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-01-01</span></li>
<li><a href="#" title="">2_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-02-02</span></li>
<li><a href="#" title="">3_各位亲,你们准备好了吗?准备好了吗?好了吗?了吗?吗?</a><span>2011-03-03</span></li>
</ul>
<pre>
1、表现良好,但是页面的定位元素过多会导致性能下降(具体没有试验过)
2、字符过长,宽度不够,信息文本与时间文本互相重合;字符长度长过li宽度,文本会被截取换行,还是与时间重合。
3、字符过长,宽度不够的情况下,给li一个padding-right值(值的长度是时间文本的长度),信息文本不会与时间文本重合,且多于文本会被换行隐藏
</pre>
<hr />
</div>
</body>
</html>
本文第一次发是在 w3cfuns.com社区(
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=1836),现把此文作为的我第一篇iteye博文,以作纪念.
- 描述: 效果截图信息(IE8)
- 大小: 102.2 KB
分享到:
相关推荐
本篇将详细介绍如何使用jQuery来创建一个自适应宽度且带有动画效果的时间轴。 首先,我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画以及Ajax交互等任务。在本...
在这个"jQuery自适应宽度动画时间轴代码.zip"压缩包中,包含了一套实现自适应宽度且带有动画效果的时间轴代码,这对于创建动态展示项目或事件的时间线布局非常有用。以下是关于这个主题的详细知识点: 1. jQuery库...
在这个例子中,“说明”列由于内容可能较长,我们可以将其设为自适应宽度。然而,当内容中包含长度超过列宽的半角字符时,会撑破单元格。为解决这个问题,可以在对应的td元素中添加`style="word-wrap:break-word;"`...
在`index.html`文件中,应该包含了HTML5的DOCTYPE声明和viewport元标签,如`, initial-scale=1">`,这将告诉浏览器根据设备宽度来调整页面缩放,以实现自适应效果。 jQuery Mobile是一个轻量级的前端框架,特别适合...
自适应性是通过使用媒体查询(Media Queries)实现的,这是CSS3的一个特性,允许内容根据设备特征如宽度、高度和分辨率进行调整。在AdminLTE模板中,媒体查询被用来定义不同屏幕尺寸下的样式规则,确保无论用户在...
媒体查询可以根据设备的特性,如视口宽度、设备像素比等,应用不同的样式规则,从而使页面在各种设备上呈现良好的视觉效果。 BeginnerAdmin_0.2.5可能包含以下组件和功能: 1. **布局系统**:框架可能包含网格系统...
这主要通过检测屏幕宽度、调整元素大小和位置来实现,以确保在手机、平板和桌面电脑上都能提供良好的用户体验。 “rem自适应布局”是现代前端开发中的一个重要概念。REM(root em)是相对于根元素(通常是html元素...
例如,如果某一列的数据全是数字,系统应自动将其识别为数值类型,对于日期或时间数据,也需要正确解析。 4. **数据绑定**:将转换后的数据绑定到GridView控件。使用`GridView.DataSource = 数据源;`和`GridView....
5. 表单控件增强:例如日期选择器、电子邮件输入类型等,提高了表单的用户体验和验证能力。 6. 语义化元素:如、和,增加了文档的可读性和可访问性。 【自适应设计(Responsive Design)】 自适应设计是一种网页...
例如,TextView的宽度可能需要根据屏幕宽度自适应,而高度则取决于内容。 5. 数据模型与视图的绑定: 在实现报销功能时,通常会有一个数据模型来存储报销信息,比如报销单ID、报销人、金额、日期等。开发者需要将...
CSS3的媒体查询(Media Queries)可以检测设备的视口宽度,然后根据不同的断点应用不同的样式规则。 二次修改这部分,开发者可以根据自己的需求调整以下方面: - **样式调整**:通过修改style.css中的规则,可以...
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的... label=日期 width=180> </el>
jQuery提供了如`.width()`和`.height()`方法来获取元素的宽度和高度,以及`.resize()`事件来监听窗口大小的变化。通过这些工具,开发者可以动态调整日历表的布局和样式,使其在手机、平板和桌面电脑上都能正常显示。...
响应式设计的核心在于媒体查询(Media Queries),这是CSS3的一个特性,允许开发者根据设备的物理特性(如宽度、高度、方向等)来应用不同的样式规则。在这个酒店民宿住宿类网站模板中,开发者可能使用了媒体查询来...
"BeyondAdmin"是一款基于Bootstrap的后台管理模板,特别设计为自适应屏幕,无论是在桌面、平板还是手机上,都能提供出色的用户体验。 这款模板的亮点在于其对各种屏幕尺寸的优化,它利用Bootstrap的栅格系统和媒体...
此外,为了提高用户体验,模板可能还包括图表库(如Chart.js或Highcharts)、图标集(如Font Awesome)以及日期选择器等实用工具。 在开发过程中,HTML5和CSS3的新特性也被广泛应用,如语义化标签、媒体查询、过渡...
3. **表单控件**:新添了多种表单输入类型,如日期、时间、颜色等,简化用户输入操作。 4. **响应式设计**:H5模板通常具备响应式布局,能自动适配不同设备的屏幕大小。 二、自适应响应式设计 响应式设计是现代网页...
通过设定不同的样式规则针对不同设备的视口宽度,我们可以确保网站布局在各种屏幕尺寸下都能保持良好。还有新的选择器、过渡效果、动画和阴影等特性,使得设计更加丰富多彩且交互性更强。 JavaScript,作为客户端...
在【压缩包子文件的文件名称列表】中,只有一个文件名 "H426",这可能是该压缩包内的主要源码文件夹或者文件。通常,一个HTML5模板会包含HTML文件(如index.html)、CSS样式表(如style.css)、JavaScript脚本(如...