整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要給大家介紹一下如何使用html+css完成新聞列表以及圖片列表的制作。
首先呢一個通用的新聞列表頁面一般是有左側的一個圖片縮略圖，右側有新聞的標題和簡介，有的呢還包含有新聞發布的時間等，我們具體來看一下下面這張圖片
從上邊圖片不難看出，整個新聞列表的布局就是由新聞圖片、標題、簡介以及時間組成。這個列表頁的主要涵蓋了以下幾個知識點：
1）浮動元素float（圖片要使用 float:left; 進行左對齊，而日期要使用 float:right; 進行右對齊）；
小技巧：使用float:right;的元素要放到元素內容的最左側，這樣元素可以避免內容過多導致右浮動元素換行的問題。
2）標題以及簡介元素配置（合理的使用css代碼來調整標題以及簡介元素，使主題結構清晰明了，這里要注意文字內容超出隱藏的問題）
具體的實現html代碼以及css代碼就如下圖所示：
圖片列表跟新聞列表比較類似，一般也是由一張圖片以及一個標題文字組成，我們具體來看一下下面這張圖片
由此圖片列表可以看出，本圖片列表包含了一個圖片的縮略圖，還有一行文字，半透明的黑色背景并且浮動在圖片的底部。這個圖片列表頁的主要涵蓋了以下幾個知識點：
1）浮動元素float（圖片列表要使用 float:left; 進行左排列對齊）；
2）標題元素的絕對定位（首先設置子元素position:relative;，然后設置標題絕對定位position:absolute;讓其位于圖片的底部）
3）背景半透明（使用css3的新屬性background:rgba(0,0,0,0.5);最后一位0.5為元素的透明度，區間（0-1））
具體的實現html代碼以及css代碼就如下圖所示：
為什么給大家放圖片而不直接放源代碼，就是為了想要讓大家鍛煉自己動手寫的能力，只有自己能夠熟練的運用才是王道。
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以舉一反三看能寫出其它的類似頁面，如果有不理解或者有需要源碼的可以直接私信我即可。
每日金句：人生不要被過去所控制，決定你前行的是未來，人生不要被安逸所控制，決定你成功的是奮斗。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
作者：極客小俊」
「 把邏輯思維轉變為代碼的技術博主」
咱們廢話不多說直接上代碼案例素材!
首先準備圖片素材 放入到你的demo案例下的img文件夾
當然圖片你也可以用其他類似的圖來代替也是可以的!
如圖
<div id="big">
<div class="box">
<div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
<div class="mask">
<h2>三用小巧思波士頓包</h2>
<p>印花波士頓包 復古波士頓包，手提單肩斜挎多用，印花PVC</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運費</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
<div class="mask">
<h2>豬年紀念款經典牛皮水桶包</h2>
<p>豬年紀念款 經典牛皮水桶包，自帶強大氣場</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運費</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
<div class="mask">
<h2>一包四用蜜蜂系列迷你小方包</h2>
<p>四用方盒包 一包四用蜜蜂系列迷你鏈條小方包</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
<h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運費</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
</div>*{
padding:0px;
margin:0px;
}
body{
font-family: '微軟雅黑';
}
.sl{
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
}
#big{
width:950px;
height:416px;
margin:10px auto;
overflow: hidden;
}
#big>.box{
width:298px;
height:410px;
float: left;
position: relative;
overflow: hidden;
border:1px solid #ccc;
margin-left:19px;
}
#big>.box:first-child{
margin-left:0px;
}
#big>.box>.pic{
width:298px;
height:300px;
overflow: hidden;
}
#big>.box>.pic>img{
transition: all 500ms;
}
#big>.box:hover>.pic>img{
transform: scale(1.5);
}
#big>.box>.mask{
height:300px;
width:298px;
position: absolute;
left:-298px;
top:0px;
background:rgba(0,0,0,0.3);
transition: all 600ms;
color:#fff;
}
#big>.box>.mask>h2{
font-size: 18px;
margin:80px 0px 10px 10px;
}
#big>.box>.mask>p{
font-size: 12px;
margin:0px 0px 10px 10px;
}
#big>.box:hover>.mask{
left:0px;
}
#big>.box>.title>h2{
margin:10px auto;
width:288px;
height:20px;
line-height: 20px;
font-size: 14px;
color:#333;
overflow: hidden;
font-weight: normal;
}
#big>.box>.title>h2>span{
display: inline-block;
width:31px;
height:16px;
vertical-align: middle;
background: url('img/tu.png') no-repeat;
background-size:cover;
margin-right:5px;
}
#big>.box>.title>h3{
width:288px;
height:20px;
margin:0px auto;
font-size: 12px;
color:#666;
font-weight: 400;
}
#big>.box>.title>h3>i{
width:12px;
height:16px;
display: inline-block;
background:url('img/tu1.jpg') no-repeat;
vertical-align: middle;
}
#big>.box>.title>h3>span{
color:#f00;
margin:0 5px 0 5px;
}
#big>.box>.title>.price{
width:298px;
height:50px;
background:#e61414;
}
#big>.box>.title>.price>.zx_pr>span{
font-size: 20px;
}
#big>.box>.title>.price>.zx_pr{
width:83px;
height:50px;
line-height: 50px;
float: left;
margin-left:2px;
vertical-align: bottom;
font-size:38px;
color:#fff;
}
#big>.box>.title>.price>.buy{
width:56px;
height:50px;
line-height: 50px;
text-align: center;
background:url('img/tu3.png') no-repeat;
float:right;
color:#f00;
}
#big>.box>.title>.price>.xl_yp{
width:145px;
height:41px;
float: left;
margin:4px 0 0 8px;
font-size: 12px;
color:#fff;
}
#big>.box>.title>.price>.xl_yp>p>span{
margin-left:4px;
width:72px;
height:17px;
display: inline-block;
line-height: 17px;
text-align: center;
border-radius: 10px;
background:#ffb369;
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2){
width:80px;
height:20px;
line-height: 20px;
text-align: center;
border-radius: 1px;
margin-top:5px;
background:rgba(0,0,0,0.2);
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
margin-right: 5px;
font-size: 14px;
}如圖
"點贊" "??評論" "收藏"
大家的支持就是我堅持創作下去的動力!?
?如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 留個言指出、或者你有更好的想法，歡迎一起交流學習???????????
家有沒有好奇過，為什么網頁中的圖片都是按順序排放的，或者說有時候網頁的內容的排版非常有序。其實大多數網頁的這種效果都要依賴于列表標簽。
在HTML中，列表分為有序列表和無序列表。
有序列表：
<ol type="">(type屬性不寫默認為0,1,2......)
<li>內容</li>
<li>內容</li>
。。。。。
</ol>
ol標簽的type屬性只有五種類型，分別為：
“1”：用阿拉伯數字排列。
“A”：用大寫字母排列。
“a”：用小寫字母排列。
“i”：用羅馬數字排列。
“Ⅰ”：用大寫羅馬數字排列。
ol還有兩個屬性：reversed和start。
<ol reversed=""reversed>倒敘排列。
<ol start="(數字)"從第幾個開始排列。
我們說完有序列表自然要說他的好兄弟——無序列表，在我們真正的研發中，無序列表才是應用最廣泛的，
<ul>
<li>內容</li>
<li>內容</li>
。。。。。
</ul>
ul標簽也有type屬性，
“disc”效果是個圓點（是默認值）。
"square"效果是個實心方塊。
“circle”效果是個空心圓。
在我們真實的編程中一般都是用不上這些type效果的，所以我們可以通過CSS將其解決掉：<style>
list-style:none;(此代碼可以去掉列表的樣式)
</style>
好啦，今天接到這里，有什么問題可以評論區留言或者私聊我呦，制作不易，希望多多轉發多多關注[比心][比心][比心]
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
