百度新聞百家號(hào)專欄

• • • 劃分頁面布局
    • 百家號(hào)題頭部分
    • 左邊圖片部分
    • 右邊文字部分
    • 整體效果圖

劃分頁面布局

將頁面劃分為兩部分：

• 百家號(hào)題頭
• 主體內(nèi)容

題頭部分設(shè)置為一個(gè)整體盒子，主體內(nèi)容設(shè)置為兩列一行的table表格 ，兩個(gè)部分用hr水平線隔開。

<div id="d1"></div><hr><table><tr><td></td><td></td></tr></table>

百家號(hào)題頭部分

把題頭部分放在一個(gè)div里命名為d1。

將百家號(hào)設(shè)置為h2，拼音百家號(hào)設(shè)置為span，箭頭是圖片img。

設(shè)置css樣式。

<div class="d1"><h2>百家號(hào)</h2><span>BAIJIA</span><img width="10" height="10" src="img/箭頭.png" alt="圖片加載失敗" /></div> h2 {display: inline;color: #254282;font-size: 17px;padding-left: 7px;}span {font-size: 14px;color: #999999;}hr {width: 560px;}.d1 {width: 560px;height: 31px;text-align: left;margin: auto;}

左邊圖片部分

四個(gè)圖片分別放在四個(gè)div中。

兩張大圖片是div的background-image背景圖片，兩張小圖片是直接在div中放的img標(biāo)簽且樣式一樣。所以將第一張大圖命名為d2，兩張小圖命名為d3，第四張大圖命名為d4。

想要兩個(gè)d3這兩個(gè)div并行，需要將div的display設(shè)置為inline-block。

其中d2，d4中的文字使用span¹標(biāo)簽，使用position: absolute來相對(duì)定位文字的位置，在div中再寫一個(gè)position: relative相對(duì)定位。

d2，d4的超鏈接懸浮樣式a:hover是span標(biāo)簽的背景顏色由半透明變?yōu)槿?。d3的超鏈接懸浮樣式a:hover是文字變?yōu)榘咨?#xff0c;div背景顏色變?yōu)樗{(lán)色。

<table align="center" cellpadding="10"><tr><td><a href=""><div class="d2"><span>Web3“入侵”手機(jī)圈</span></div></a><a href=""><div class="d3"><img width="112" height="84" src="img/2.jpeg" alt="圖片加載失敗" /><br><span>Soul失去靈魂</span></div></a><a href=""><div class="d3"><img width="112" height="84" src="img/4.jpeg" alt="圖片加載失敗" /><br><span>良品鋪?zhàn)用允Ц叨嘶?span id="ozvdkddzhkzd" class="token tag"></span></div></a><a href=""><div class="d4"><span>小康股份賠了60億，把命交給華為</span></div></a></td><td></td></tr></table> .d2 {background: url(img/1.jpeg);}.d3 {width: 112px;height: 110px;display: inline-block;margin-bottom: 20px;}.d4 {background: url(img/3.jpeg);}.d2,.d4 {width: 100%;height: 155px;color: white;font-size: 13px;position: relative;margin-bottom: 10px;}.d2 span,.d4 span {color: white;position: absolute;margin-top: 125px;padding-top: 5px;display: block;width: 100%;height: 25px;background-color: #000000B3;}.d3 span {color: black;font-size: 12px;display: block;padding-left: 3px;}a {text-decoration: none;}a:hover .d3 {background-color: #3064BB;}a:hover span {color: white;}a:hover .d2 span,a:hover .d4 span {background-color: black;}

右邊文字部分

因?yàn)槲淖植糠钟腥齻€(gè)加粗文本，所以寫三個(gè)無序列表ul。

加粗文本設(shè)為h3，普通文本設(shè)為p。

因?yàn)槲谋局虚g有兩個(gè)灰色虛線，所以給三個(gè)ul分別命名為u1，u2，u3。

給其中u1，u2設(shè)置底部邊框即可實(shí)現(xiàn)灰色虛線。

給li設(shè)置list-style-type:none，這樣無序列表中每一列前面的圓點(diǎn)就不見了。

加上超鏈接樣式文字變藍(lán)，文字底部有下劃線。其中h3和p被a標(biāo)簽包裹所以要用a:hover h3和a:hover p來設(shè)置其超鏈接懸浮樣式。

<td><ul class="u1"><li><a href=""><h3>騰訊云需要“轉(zhuǎn)基因”</h3></a></li><li><a href=""><p>思必馳沖刺科創(chuàng)板IPO：三年凈虧損8.3億</p></a></li><li><a href=""><p>行業(yè)冥燈？老羅最好祈禱蘋果的AR能成</p></a></li><li><a href=""><p>馬斯克正把推特變成一家“無人駕駛公司”</p></a></li><li><a href=""><p>是時(shí)候?qū)λ押f幾句真話了</p></a></li></ul><ul class="u2"><li><a href=""><h3>星巴克和麥當(dāng)勞的好兄弟，也要IPO了</h3></a></li><li><a href=""><p>Meta深陷泥潭：廣告主壓縮支出，撤離平臺(tái)</p></a></li><li><a href=""><p>抖音“賣水”給騰訊，為碎銀幾兩放棄游戲夢(mèng)？</p></a></li><li><a href=""><p>中國出海人，夢(mèng)碎印度</p></a></li><li><a href=""><p>0分！數(shù)字人直播挑戰(zhàn)高考英語作文“翻車”！</p></a></li></ul><ul class="u3"><li><a href=""><h3>蔚來已騎虎難下</h3></a></li><li><a href=""><p>警方介入，幣圈交易所AEX暫停所有服務(wù)</p></a></li><li><a href=""><p>每日優(yōu)鮮等來2億“外援”，能否走出困境？</p></a></li><li><a href=""><p>“雪糕刺客”泛濫，扯下“消費(fèi)升級(jí)”的遮羞布</p></a></li><li><a href=""><p>為什么“虛擬人”們不愛回評(píng)論？</p></a></li><li><a href=""><p>新國貨夢(mèng)碎2022</p></a></li></ul> </td> li {list-style-type: none;}h3 {color: black;font-size: 14px;margin: 0;}p {color: black;font-size: 13px;margin: 10px 0px;}ul {width: 290px;padding: 0;margin: 0;}a:hover p {text-decoration: underline;color: #3064BB;}a:hover h3 {text-decoration: underline;color: #3064BB;}.u1,.u2{border-bottom: 1px #999999 dashed;padding-bottom: 5px;}.u2,.u3{padding-top: 5px;}

整體效果圖

最后整體效果圖如下；

到這里結(jié)束啦，歡迎各位大佬在評(píng)論區(qū)提供更好的寫法！

---

如果要給span標(biāo)簽設(shè)置樣式，需要先將span標(biāo)簽轉(zhuǎn)換為塊元素display: block。 ??

總結(jié)

以上是生活随笔為你收集整理的前端学习日志之复刻百度新闻百家号专栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。