html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...
誰不希望有一個好看而又干凈的列表？這篇文章中我們給出幾個實用的例子，你可以把他們直接用到自己的工作中。
我們從一個帶有動畫效果的垂直列表開始，接著是一個圖文混排的例子，然后是一個只有圖片的list例子跟一個水平菜單的例子，最后是一個以放大數字開頭的列表。對于初學者而言這里可以學到很多東西，對于熟手，直接拿來用就是了。
1.helvetica字體的列表
第一個例子的樣式看起平淡無奇，不過喜歡簡約風格的人也許會感興趣，這類似于印刷字體風格，簡結的同時也不失靈動的特點(當鼠標滑上去的時候)。注：個人喜歡這里的第二個圖文混排的例子，但是發現老外更喜歡第一個，也許這就是文化差異吧。。。
這里是源碼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
這是一種在很多網站上都用得比較普遍的列表樣式，“圖文混排”，圖文混排往往比單一的文字更能吸引人的眼球，很多wordpress的博客網站都是用圖文混排的板式。
這里是源碼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...
比起上面的例子來，這里的代碼要復雜一些。每個列表元素都有三個子元素：圖片，標題，文字介紹。注意圖片的大小這里需被固定為100px乘以100px，不然加在的圖片大小不一會使排版混亂，你可以在html代碼里強制設置為這個大小。總的來說實現起來還是比較簡單的。
以下是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代碼頁很簡短。我們重設了所有元素的margin和padding。這里只需記住將圖片向左浮動，這樣文字就會緊挨著跟在后面。
3.標準的圖片網格 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);
}
這里的重點是給每張圖片加上一定的margin然后向左浮動，然后用over-flow:auto清除浮動(為保險起見，用了浮動之后一定要清除浮動)。給整個網格添加黑色背景，給每張圖片加上邊框。為了讓網格更有趣，我加上了一個鼠標畫上去顯示發光的效果。你可以選擇性的使用，不必將這個效果用在每一個項目中。
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.大數字開頭的列表 Big Numbers Ordered List
上面介紹的都是無序的列表，如果我們想要一個有序的列表，在每一個列表元素的最開頭加上數字能提示用戶這是一個按順序排列的內容。如果能將這個數字的樣式顯示的不同，將會有更好的直觀感受。
在這里查看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個簡單而又實用的列表實例，如果你喜歡，可以直接拿去用。
總結
以上是生活随笔為你收集整理的html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CGCKD2021大会报告整理(2)--
- 下一篇： 数学如何杀死了雷曼兄弟