来看看：CSS实例教程:制造网页特别产物列表

只看该作者 · 发表于 2015-1-15 23:59:09

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
破洛洛文章简介：我们一般的做法是，把日期写在span标签里，然后把span标签写在li里，CSS界说span(float:right)，让span浮动在列表的右侧。
克日，被同事问及一个产物列表的做法怎样完成？一个产物列表，每一个产物列表前面跟一个button，这些button居右对齐。

登录/注册后可看大图

实在这个效果跟旧事列表是相似的，我们经常必要做如许的旧事列表效果：

登录/注册后可看大图

我们一般的做法是，把日期写在span标签里，然后把span标签写在li里，css界说span(float:right)，让span浮动在列表的右侧。

css部分:
body{font-size:12px}
ul{width:400px;margin:0;padding:0;list-style:none}
.newslist{line-height:20px;padding:5px0;color:#333;border-bottom:1pxdashed#ccc}
.newslistspan{color:#888;float:right;text-align:right}
a{color:#333;text-decoration:none}
a:hover{color:blue;text-decoration:underline}
html部分:
<ul>
<liclass="newslist">·<ahref="#">10%无责补偿仍存交强惊</a>2008-11-28</li>
</ul>
我们一样平常的逻辑做法都是把日期写在旧事列表的前面。实在否则，我们应当把日期放在旧事列表的后面。至于为何要如许做，我还没找到很好的注释。

登录/注册后可看大图

准确的做法：
<ul>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
</ul>
全体代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无题目文档</title>
<styletype="text/css">

</style>
</head>
<body>
<ul>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
<liclass="newslist">2008-11-28·<ahref="#">百张奥运揭幕式门票赠予年夜发表！</a></li>
<liclass="newslist">2008-11-28·<ahref="#">出游买保险，赢好礼，蓝牙耳机、野餐包等你来拿！</a></li>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
<liclass="newslist">2008-11-28·<ahref="#">五周年绚丽好礼举动中奖名单第2期</a></li>
</ul>
</body>
</html>

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

只看该作者 · 发表于 2015-1-26 23:01:33

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-2-5 03:32:43

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-2-11 03:57:45

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-1 21:26:23

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-11 01:03:31

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-17 18:08:16

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-3-24 19:54:08

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS实例教程:制造网页特别产物列表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子