CSS案例实例教程:制做网页页面独特商品目录

日期:2020-12-13 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序


大家一般的做法是,把时间写在span标识里,随后把span标识写在li里,css界定span(float:right),让span波动在目录的右侧。
近日,被朋友问及1个商品目录的做法如何完成?1个商品目录,每一个商品目录后边跟1个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:5px 0; color:#333; border-bottom:1px dashed #ccc}
.newslist span { color:#888; float:right; text-align:right}
a { color:#333; text-decoration:none}
a:hover { color:blue; text-decoration:underline}
html一部分:
<ul>
<li class="newslist">·<a href="#">10%无责赔付仍存 交强惊</a><span>2008⑴1⑵8</span></li>
</ul>
大家1般的逻辑性做法全是把<span>时间</span>写在新闻目录的后边。实际上要不然,大家应当把<span>时间</span>放在新闻目录的前面。至于为何要这样做,我还没寻找很好的解释。

正确的做法:
<ul>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">10%无责赔付仍存 交强惊</a></li>
</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=gb2312" />
<title>无题目文本文档</title>
<style type="text/css">
<!--
body { font-size:12px}
ul { width:400px; margin:0; padding:0; list-style:none}
.newslist { line-height:20px; padding:5px 0; color:#333; border-bottom:1px dashed #ccc}
.newslist span { color:#888; float:right; text-align:right}
a { color:#333; text-decoration:none}
a:hover { color:blue; text-decoration:underline}
-->
</style>
</head>
<body>
<ul>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">10%无责赔付仍存 交强惊</a></li>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">百张奥运揭幕式门票赠予大揭晓!</a></li>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">出游买商业保险,赢好礼,手机蓝牙耳机、野餐包等你来拿!</a></li>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">10%无责赔付仍存 交强惊</a></li>
<li class="newslist"><span>2008⑴1⑵8</span>·<a href="#">5周年缤纷好礼主题活动中奖名单第2期</a></li>
</ul>
</body>
</html>