百度新聞百家號專欄

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

劃分頁面布局

將頁面劃分為兩部分：

• 百家號題頭
• 主體內容

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

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

百家號題頭部分

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

將百家號設置為h2，拼音百家號設置為span，箭頭是圖片img。

設置css樣式。

<div class="d1"><h2>百家號</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;}

左邊圖片部分

四個圖片分別放在四個div中。

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

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

其中d2，d4中的文字使用span¹標簽，使用position: absolute來相對定位文字的位置，在div中再寫一個position: relative相對定位。

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

<table align="center" cellpadding="10"><tr><td><a href=""><div class="d2"><span>Web3“入侵”手機圈</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>良品鋪子迷失高端化</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;}

右邊文字部分

因為文字部分有三個加粗文本，所以寫三個無序列表ul。

加粗文本設為h3，普通文本設為p。

因為文本中間有兩個灰色虛線，所以給三個ul分別命名為u1，u2，u3。

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

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

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

<td><ul class="u1"><li><a href=""><h3>騰訊云需要“轉基因”</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>是時候對搜狐說幾句真話了</p></a></li></ul><ul class="u2"><li><a href=""><h3>星巴克和麥當勞的好兄弟，也要IPO了</h3></a></li><li><a href=""><p>Meta深陷泥潭：廣告主壓縮支出，撤離平臺</p></a></li><li><a href=""><p>抖音“賣水”給騰訊，為碎銀幾兩放棄游戲夢？</p></a></li><li><a href=""><p>中國出海人，夢碎印度</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暫停所有服務</p></a></li><li><a href=""><p>每日優(yōu)鮮等來2億“外援”，能否走出困境？</p></a></li><li><a href=""><p>“雪糕刺客”泛濫，扯下“消費升級”的遮羞布</p></a></li><li><a href=""><p>為什么“虛擬人”們不愛回評論？</p></a></li><li><a href=""><p>新國貨夢碎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;}

整體效果圖

最后整體效果圖如下；

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

---

如果要給span標簽設置樣式，需要先將span標簽轉換為塊元素display: block。 ??

總結

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

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