html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...
誰不希望有一個(gè)好看而又干凈的列表？這篇文章中我們給出幾個(gè)實(shí)用的例子，你可以把他們直接用到自己的工作中。
我們從一個(gè)帶有動(dòng)畫效果的垂直列表開始，接著是一個(gè)圖文混排的例子，然后是一個(gè)只有圖片的list例子跟一個(gè)水平菜單的例子，最后是一個(gè)以放大數(shù)字開頭的列表。對于初學(xué)者而言這里可以學(xué)到很多東西，對于熟手，直接拿來用就是了。
1.helvetica字體的列表
第一個(gè)例子的樣式看起平淡無奇，不過喜歡簡約風(fēng)格的人也許會感興趣，這類似于印刷字體風(fēng)格，簡結(jié)的同時(shí)也不失靈動(dòng)的特點(diǎn)(當(dāng)鼠標(biāo)滑上去的時(shí)候)。注：個(gè)人喜歡這里的第二個(gè)圖文混排的例子，但是發(fā)現(xiàn)老外更喜歡第一個(gè)，也許這就是文化差異吧。。。
這里是源碼demo地址：CodePen
先看效果圖：
以下是html代碼：
HelvetiList
- Zurich
- Geneva
- Winterthur
- Lausanne
- Lucerne
以下是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;
}
2.圖文混排的Thumbnail List
這是一種在很多網(wǎng)站上都用得比較普遍的列表樣式，“圖文混排”，圖文混排往往比單一的文字更能吸引人的眼球，很多wordpress的博客網(wǎng)站都是用圖文混排的板式。
這里是源碼demo地址：CodePen.
先看效果圖：
以下是html代碼：
Headline
Lorem ipsum dolor sit amet...
Headline
Lorem ipsum dolor sit amet...
Headline
Lorem ipsum dolor sit amet...
Headline
Lorem ipsum dolor sit amet...
比起上面的例子來，這里的代碼要復(fù)雜一些。每個(gè)列表元素都有三個(gè)子元素：圖片，標(biāo)題，文字介紹。注意圖片的大小這里需被固定為100px乘以100px，不然加在的圖片大小不一會使排版混亂，你可以在html代碼里強(qiáng)制設(shè)置為這個(gè)大小。總的來說實(shí)現(xià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代碼頁很簡短。我們重設(shè)了所有元素的margin和padding。這里只需記住將圖片向左浮動(dòng)，這樣文字就會緊挨著跟在后面。
3.標(biāo)準(zhǔn)的圖片網(wǎng)格 Standard Thumbnail Grid
這里是源碼demo地址：CodePen.
效果圖：
以下是html代碼：
以下是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代碼：
- Home
- About
- Portfolio
- Contact
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
上面介紹的都是無序的列表，如果我們想要一個(gè)有序的列表，在每一個(gè)列表元素的最開頭加上數(shù)字能提示用戶這是一個(gè)按順序排列的內(nèi)容。如果能將這個(gè)數(shù)字的樣式顯示的不同，將會有更好的直觀感受。
在這里查看demo和源碼 CodePen.
html代碼：
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.
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.
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.
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;
}
上面就是5個(gè)簡單而又實(shí)用的列表實(shí)例，如果你喜歡，可以直接拿去用。
總結(jié)
以上是生活随笔為你收集整理的html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CGCKD2021大会报告整理(2)--
- 下一篇： 数学如何杀死了雷曼兄弟