百度新闻百家号专栏
划分页面布局百家号题头部分左边图片部分右边文字部分整体效果图划分页面布局
将页面划分为两部分： 百家号题头主体内容 题头部分设置为一个整体盒子，主体内容设置为两列一行的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中的文字使用span1标签，使用position: absolute来相对定位文字的位置，在div中再写一个position: relative相对定位。d2，d4的超链接悬浮样式a:hover是span标签的背景颜色由半透明变为全黑。d3的超链接悬浮样式a:hover是文字变为白色，div背景颜色变为蓝色。 因为文字部分有三个加粗文本，所以写三个无序列表ul。 加粗文本设为h3，普通文本设为p。 因为文本中间有两个灰色虚线，所以给三个ul分别命名为u1，u2，u3。 给其中u1，u2设置底部边框即可实现灰色虚线。 给li设置list-style-type:none，这样无序列表中每一列前面的圆点就不见了。 加上超链接样式文字变蓝，文字底部有下划线。其中h3和p被a标签包裹所以要用a:hover h3和a:hover p来设置其超链接悬浮样式。 最后整体效果图如下； 到这里结束啦，欢迎各位大佬在评论区提供更好的写法！ 如果要给span标签设置样式，需要先将span标签转换为块元素display: block。 ↩︎<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;}右边文字部分
<td><ul class="u1"><li><a href=""><h3>腾讯云需要“转基因”</h3></a></li><li><a href=""><p>思必驰冲刺科创板IPO：三年净亏损8.3亿</p></a></li><li><a href=""><p>行业冥灯？老罗最好祈祷苹果的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分！数字人直播挑战高考英语作文“翻车”！</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>每日优鲜等来2亿“外援”，能否走出困境？</p></a></li><li><a href=""><p>“雪糕刺客”泛滥，扯下“消费升级”的遮羞布</p></a></li><li><a href=""><p>为什么“虚拟人”们不爱回评论？</p></a></li><li><a href=""><p>新国货梦碎</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;}整体效果图
