網(wǎng)頁(yè)制作經(jīng)驗(yàn)分享:干凈簡(jiǎn)潔的網(wǎng)頁(yè)列表代碼

2024-07-11 08:48:22

字體：大中小

供稿：網(wǎng)友

誰(shuí)不希望有一個(gè)好看而又干凈的網(wǎng)頁(yè)列表？這篇文章中我們給出幾個(gè)實(shí)用的例子，你可以把他們直接用到自己的工作中。我們從一個(gè)帶有動(dòng)畫效果的垂直列表開始，接著是一個(gè)圖文混排的例子，然后是一個(gè)只有圖片的list例子跟一個(gè)水平菜單的例子，最后是一個(gè)以放大數(shù)字開頭的列表。對(duì)于初學(xué)者而言這里可以學(xué)到很多東西，對(duì)于熟手，直接拿來(lái)用就是了。
screenshot

1.helvetica字體的列表
第一個(gè)例子的樣式看起平淡無(wú)奇，不過(guò)喜歡簡(jiǎn)約風(fēng)格的人也許會(huì)感興趣，這類似于印刷字體風(fēng)格，簡(jiǎn)結(jié)的同時(shí)也不失靈動(dòng)的特點(diǎn)（當(dāng)鼠標(biāo)滑上去的時(shí)候）。注：個(gè)人喜歡這里的第二個(gè)圖文混排的例子，但是發(fā)現(xiàn)老外更喜歡第一個(gè)，也許這就是文化差異吧。。。
這里是源碼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; 
-o-transition: font-size 0.3s ease, background-color 0.3s ease; 
-ms-transition: font-size 0.3s ease, background-color 0.3s ease; 
transition: font-size 0.3s ease, background-color 0.3s ease; 
} 
li a:hover { 
font-size: 30px; 
background: #f6f6f6; 
}

/strong>
2.圖文混排的Thumbnail List
這是一種在很多網(wǎng)站上都用得比較普遍的列表樣式，“圖文混排”，圖文混排往往比單一的文字更能吸引人的眼球，很多wordpress的博客網(wǎng)站都是用圖文混排的板式。
這里是源碼demo地址：CodePen.
先看效果圖：
screenshot

以下是html代碼：

<div> 
<ul> 
<li> 
<img src=<"http://lorempixum.com/100/100/nature/1" /> 
<h3>Headline</h3> 
<p>Lorem ipsum dolor sit amet...</p> 
</li> 
<li> 
<img src=<"http://lorempixum.com/100/100/nature/2" /> 
<h3>Headline</h3> 
<p>Lorem ipsum dolor sit amet...</p> 
</li> 
<li> 
<img src=<"http://lorempixum.com/100/100/nature/3" /> 
<h3>Headline</h3> 
<p>Lorem ipsum dolor sit amet...</p> 
</li> 
<li> 
<img src=<"http://lorempixum.com/100/100/nature/4" /> 
<h3>Headline</h3> 
<p>Lorem ipsum dolor sit amet...</p> 
</li> 
</ul> 
</div>

比起上面的例子來(lái)，這里的代碼要復(fù)雜一些。每個(gè)列表元素都有三個(gè)子元素：圖片，標(biāo)題，文字介紹。注意圖片的大小這里需被固定為100px乘以100px，不然加在的圖片大小不一會(huì)使排版混亂，你可以在html代碼里強(qiáng)制設(shè)置為這個(gè)大小。總的來(lái)說(shuō)實(shí)現(xiàn)起來(lái)還是比較簡(jiǎn)單的。
以下是css代碼：

* {margin: 0; padding: 0;} 
div { 
margin: 20px; 
} 
ul { 
list-style-type: none; 
width: 500px; 
} 
h3 { 
font: bold 20px/1.5 Helvetica, Verdana, sans-serif; 
} 
li img { 
float: left; 
margin: 0 15px 0 0; 
} 
li p { 
font: 200 12px/1.5 Georgia, Times New Roman, serif; 
} 
li { 
padding: 10px; 
overflow: auto; 
} 
li:hover { 
background: #eee; 
cursor: pointer; 
}

css代碼頁(yè)很簡(jiǎn)短。我們重設(shè)了所有元素的margin和padding。這里只需記住將圖片向左浮動(dòng)，這樣文字就會(huì)緊挨著跟在后面。

3.標(biāo)準(zhǔn)的圖片網(wǎng)格 Standard Thumbnail Grid

這里是源碼demo地址：CodePen.
效果圖：
screenshot

以下是html代碼：

<div> 
<ul> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li> 
</ul> 
</div>

/p>
以下是css代碼：

* { 
margin: 0; 
padding: 0; 
} 
body { 
background: #333; 
} 
div { 
width: 900px; 
margin: 0 auto; 
overflow: auto; 
} 
ul { 
list-style-type: none; 
} 
li img { 
float: left; 
margin: 10px; 
border: 5px solid #fff; 
-webkit-transition: box-shadow 0.5s ease; 
-moz-transition: box-shadow 0.5s ease; 
-o-transition: box-shadow 0.5s ease; 
-ms-transition: box-shadow 0.5s ease; 
transition: box-shadow 0.5s ease; 
} 
li img:hover { 
-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 
box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 
}

這里的重點(diǎn)是給每張圖片加上一定的margin然后向左浮動(dòng)，然后用over-flow:auto清除浮動(dòng)（為保險(xiǎn)起見，用了浮動(dòng)之后一定要清除浮動(dòng)）。給整個(gè)網(wǎng)格添加黑色背景，給每張圖片加上邊框。為了讓網(wǎng)格更有趣，我加上了一個(gè)鼠標(biāo)畫上去顯示發(fā)光的效果。你可以選擇性的使用，不必將這個(gè)效果用在每一個(gè)項(xiàng)目中。

4.水平菜單 Horizontal Menu
在這里查看demo和源碼 CodePen.

html代碼：

<nav> 
<ul> 
<li><a href=<"#"<>Home</a></li> 
<li class=<"active"<><a href=<"#"<>About</a></li> 
<li><a href=<"#"<>Portfolio</a></li> 
<li><a href=<"#"<>Contact</a></li> 
</ul> 
</nav>

css代碼：

* { 
margin: 0; 
padding: 0; 
} 
nav { 
margin: 50px; 
} 
ul { 
overflow: auto; 
list-style-type: none; 
} 
li { 
height: 25px; 
float: left; 
margin-right: 0px; 
border-right: 1px solid #aaa; 
padding: 0 20px; 
} 
li:last-child { 
border-right: none; 
} 
li a { 
text-decoration: none; 
color: #ccc; 
font: 25px/1 Helvetica, Verdana, sans-serif; 
text-transform: uppercase; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 
li a:hover { 
color: #666; 
} 
li.active a { 
font-weight: bold; 
color: #333; 
}

5.大數(shù)字開頭的列表 Big Numbers Ordered List
上面介紹的都是無(wú)序的列表，如果我們想要一個(gè)有序的列表，在每一個(gè)列表元素的最開頭加上數(shù)字能提示用戶這是一個(gè)按順序排列的內(nèi)容。如果能將這個(gè)數(shù)字的樣式顯示的不同，將會(huì)有更好的直觀感受。
在這里查看demo和源碼 CodePen.

html代碼：

<div> 
<ol> 
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li> 
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> 
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> 
</ol> 
</div>

css代碼：

div { 
width: 500px; 
margin: 10px 
} 
ol { 
color: #ccc; 
list-style-type: none; 
} 
ol li { 
position: relative; 
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif; 
margin-bottom: 20px; 
} 
li p { 
font: 12px/1.5 Helvetica, sans-serif; 
padding-left: 60px; 
color: #555; 
} 
span { 
position: absolute; 
}