HTML實(shí)戰(zhàn)篇：常用新聞列表以及圖片列表制作

篇文章主要給大家介紹一下如何使用html+css完成新聞列表以及圖片列表的制作。

1）新聞列表

首先呢一個(gè)通用的新聞列表頁面一般是有左側(cè)的一個(gè)圖片縮略圖，右側(cè)有新聞的標(biāo)題和簡(jiǎn)介，有的呢還包含有新聞發(fā)布的時(shí)間等，我們具體來看一下下面這張圖片

從上邊圖片不難看出，整個(gè)新聞列表的布局就是由新聞圖片、標(biāo)題、簡(jiǎn)介以及時(shí)間組成。這個(gè)列表頁的主要涵蓋了以下幾個(gè)知識(shí)點(diǎn)：

1）浮動(dòng)元素float（圖片要使用 float:left; 進(jìn)行左對(duì)齊，而日期要使用 float:right; 進(jìn)行右對(duì)齊）；

小技巧：使用float:right;的元素要放到元素內(nèi)容的最左側(cè)，這樣元素可以避免內(nèi)容過多導(dǎo)致右浮動(dòng)元素?fù)Q行的問題。

2）標(biāo)題以及簡(jiǎn)介元素配置（合理的使用css代碼來調(diào)整標(biāo)題以及簡(jiǎn)介元素，使主題結(jié)構(gòu)清晰明了，這里要注意文字內(nèi)容超出隱藏的問題）

具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：

2）圖片列表

圖片列表跟新聞列表比較類似，一般也是由一張圖片以及一個(gè)標(biāo)題文字組成，我們具體來看一下下面這張圖片

由此圖片列表可以看出，本圖片列表包含了一個(gè)圖片的縮略圖，還有一行文字，半透明的黑色背景并且浮動(dòng)在圖片的底部。這個(gè)圖片列表頁的主要涵蓋了以下幾個(gè)知識(shí)點(diǎn)：

1）浮動(dòng)元素float（圖片列表要使用 float:left; 進(jìn)行左排列對(duì)齊）；

2）標(biāo)題元素的絕對(duì)定位（首先設(shè)置子元素position:relative;，然后設(shè)置標(biāo)題絕對(duì)定位position:absolute;讓其位于圖片的底部）

3）背景半透明（使用css3的新屬性background:rgba(0,0,0,0.5);最后一位0.5為元素的透明度，區(qū)間（0-1））

具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：

為什么給大家放圖片而不直接放源代碼，就是為了想要讓大家鍛煉自己動(dòng)手寫的能力，只有自己能夠熟練的運(yùn)用才是王道。

好了，本篇文章就給大家說到這里，大家自己動(dòng)手寫一下看能不能寫出一樣的頁面效果出來，也可以舉一反三看能寫出其它的類似頁面，如果有不理解或者有需要源碼的可以直接私信我即可。

每日金句：人生不要被過去所控制，決定你前行的是未來，人生不要被安逸所控制，決定你成功的是奮斗。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

作者：極客小俊」
「把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

咱們廢話不多說直接上代碼案例素材!

準(zhǔn)備工作

首先準(zhǔn)備圖片素材放入到你的demo案例下的img文件夾

當(dāng)然圖片你也可以用其他類似的圖來代替也是可以的!

如圖

HTML代碼結(jié)構(gòu)

 <div id="big">
            <div class="box">
                <div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
                <div class="mask">
                    <h2>三用小巧思波士頓包</h2>
                    <p>印花波士頓包 復(fù)古波士頓包，手提單肩斜挎多用，印花PVC</p>
                </div>
                <div class="title">
                    <h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
                    <h3 class="sl"><i></i><span>搶全場(chǎng)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>退貨賠運(yùn)費(fèi)</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>豬年紀(jì)念款經(jīng)典牛皮水桶包</h2>
                    <p>豬年紀(jì)念款 經(jīng)典牛皮水桶包，自帶強(qiáng)大氣場(chǎng)</p>
                 </div>
                 <div class="title">
                    <h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
                    <h3 class="sl"><i></i><span>搶全場(chǎng)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>退貨賠運(yùn)費(fèi)</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>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
                    <h3 class="sl"><i></i><span>搶全場(chǎng)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>退貨賠運(yùn)費(fèi)</span></p>
                            <p><strong>70</strong>件已付款</p>
                            </div>
                        <div class="buy">搶!</div>
                    </div>
                </div>
            </div> 
        </div>

CSS代碼結(jié)構(gòu)

*{
            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;
        }

最終效果

如圖

"點(diǎn)贊" "??評(píng)論" "收藏"

大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?

?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，歡迎在下面留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)???????????

家有沒有好奇過，為什么網(wǎng)頁中的圖片都是按順序排放的，或者說有時(shí)候網(wǎng)頁的內(nèi)容的排版非常有序。其實(shí)大多數(shù)網(wǎng)頁的這種效果都要依賴于列表標(biāo)簽。

在HTML中，列表分為有序列表和無序列表。

有序列表：

<ol type="">(type屬性不寫默認(rèn)為0,1,2......)

。。。。。

</ol>

ol標(biāo)簽的type屬性只有五種類型，分別為：
“1”：用阿拉伯?dāng)?shù)字排列。

“A”：用大寫字母排列。

“a”：用小寫字母排列。

“i”：用羅馬數(shù)字排列。

“Ⅰ”：用大寫羅馬數(shù)字排列。

ol還有兩個(gè)屬性：reversed和start。

<ol reversed=""reversed>倒敘排列。

<ol start="(數(shù)字)"從第幾個(gè)開始排列。

我們說完有序列表自然要說他的好兄弟——無序列表，在我們真正的研發(fā)中，無序列表才是應(yīng)用最廣泛的，

<ul>

。。。。。

</ul>

ul標(biāo)簽也有type屬性，

“disc”效果是個(gè)圓點(diǎn)（是默認(rèn)值）。

"square"效果是個(gè)實(shí)心方塊。

“circle”效果是個(gè)空心圓。

在我們真實(shí)的編程中一般都是用不上這些type效果的，所以我們可以通過CSS將其解決掉：<style>

list-style:none;(此代碼可以去掉列表的樣式)

</style>

好啦，今天接到這里，有什么問題可以評(píng)論區(qū)留言或者私聊我呦，制作不易，希望多多轉(zhuǎn)發(fā)多多關(guān)注[比心][比心][比心]

在線咨詢

上一篇：原生javascript實(shí)現(xiàn)帶動(dòng)畫的提示型彈窗
下一篇：Flash已死：Adobe警告用戶棄用，用HTML5代替

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商