首页 > 开发 > CSS > 正文

网页制作经验分享:干净简洁的网页列表代码

2024-07-11 08:25:52
字体:
来源:转载
供稿:网友
谁不希望有一个好看而又干净的网页列表?这篇文章中我们给出几个实用的例子,你可以把他们直接用到自己的工作中。我们从一个带有动画效果的垂直列表开始,接着是一个图文混排的例子,然后是一个只有图片的list例子跟一个水平菜单的例子,最后是一个以放大数字开头的列表。对于初学者而言这里可以学到很多东西,对于熟手,直接拿来用就是了。
screenshot
1.helvetica字体的列表
第一个例子的样式看起平淡无奇,不过喜欢简约风格的人也许会感兴趣,这类似于印刷字体风格,简结的同时也不失灵动的特点(当鼠标滑上去的时候)。注:个人喜欢这里的第二个图文混排的例子,但是发现老外更喜欢第一个,也许这就是文化差异吧。。。
这里是源码demo地址:CodePen
先看效果图:
screenshot
以下是html代码:
<div> /div>
<h2>HelvetiList</h2>
<ul>
<li><a href=<"#"<>Zurich</a></li>
<li><a href=<"#"<>Geneva</a></li>
<li><a href=<"#"<>Winterthur</a></li>
<li><a href=<"#"<>Lausanne</a></li>
<li><a href=<"#"<>Lucerne</a></li>
</ul>
</div>

以下是css代码:
div {
width: 200px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
display: block;
width: 200px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表