将页面布局划分为两行两列的table，第二行使用colspan合并两列为一行。
第一行第一列镶嵌一个12行1列的表格，第一行和第七行加粗部分使用h3标题，其他字体使用普通的p标签。注意将所有的h3和p标签包裹在a标签里，一个单元格一个a标签。
左边的小蓝点，小红点，用一个span标签，用class命名，设置宽、高、颜色，用absolute在普通单元格里相对定位，对齐文字。
.dot {font-size: 0;display: block;width: 5px;height: 5px;background-color: #da4453;margin-left: 10px;position: absolute;top: 22px;left: -15px;}.bot {font-size: 0;display: block;width: 3px;height: 3px;background-color: #7195B7;margin-left: 10px;position: absolute;top: 14px;left: -15px;}td {padding-left: 10px;position: relative;}
<table><tr><td><a href=""><span class="dot"></span><h3>哪两种螨虫陪伴我们最多？七八月可是繁衍高峰……</h3></a></td></tr><tr><td><a href=""><span class="bot"></span><p>【关注】准妈妈们夏季如何补水？</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>这个夏天的咖啡和奶茶怎么都穿上了“美妆外衣”？</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>还在用清水拖地嘛？费时费力还拖不干净，地板清洁小妙..</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>爱美要适度 手术麻醉前请“素颜”</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>眼镜封印颜值？看眼镜妆逆袭</p></a></td></tr><tr><td><a href=""><span class="dot"></span><h3>夏日炎炎防晒这样做</h3></a></td></tr><tr><td><a href=""><span class="bot"></span><p>乐健康｜戴口罩能防晒吗？防晒做太好会缺钙吗？夏天防..</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>创新赋能·国货崛起丨淮树开启护肤行业新高度！</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>健康周刊 | “武装到头发丝”的防晒装备依然没阻止..</p></a></td></tr><tr><td><a href=""><span class="bot"></span><p>评论丨羡慕乐视员工过得滋润，正常日子怎么就成了“神..</p></a></td></tr><tr><td class="bo"><a href=""><span class="bot"></span><p>夏季防晒，你准备好了吗？</p></a></td></tr></table>
超链接鼠标悬浮样式是蓝色下划线和字体变蓝，因为h3，p标签被a标签包裹，所以样式也要写出包裹的h3,p标签，否则字体颜色无法变蓝。
a {text-decoration: none;}a:hover p {color: #4573C3;text-decoration: underline;}a:hover h3 {color: #4573C3;text-decoration: underline;}
第一行第二列镶嵌一个10行2列的table，左边的图片部分，大图片用rowspan=4合并4行，小图片用rowspan=5合并5行。标题“|女人图片”和“星座”部分用h2标题，其他普通标题同样使用a标签包裹着p标签。
图片部分用一个a标签包裹着的div，div里面放进图片和p标签，超链接悬浮样式字体颜色变白，背景颜色变蓝，将图片和div设置同宽，写a包裹着的div超链接悬浮样式即可，大小图片都如此。
div设置display:inline-block才能让两个盒子并排。右边一列的瞭望也是一个div，图片向左飘，文字也左飘，注意文字和图片是超链接，将超链接的文字放在span标签里，文字超链接悬浮样式是文字变为红色。
a:hover div{background-color: #4573C3;}a:hover .re{color: white;text-decoration: none;}div{display: inline-block;}.image{float: left;padding-right: 15px;}.txt{width: 161px;float: left;height: 90px;}a:hover span{color: firebrick;}#d1{width: 240px;height: 210px;}#d2{width: 112px;height: 130px;margin-right: 12px;}#d3{width: 330px;height: 100px;display: block;background-color: #F6F7F8;}
<table><tr><td><h2>|女人图片</h2></td><td><h2>|星座</h2></td></tr><tr><td rowspan="4"><a href=""><div id="d1"><img width="240" height="170" src="img/2.jpg" alt="图片加载失败" /><p class="re">“反季节”穿搭 他们这样在桑拿天坚守</p></div></a></td><td><div id="d3"><div class="image"><a href=""><img width="134" height="100" src="img/5.jpg" alt="图片加载失败" /></a></div><div class="txt"><a href=""><span>瞭望｜“未来我们也许会像生产汽车一样生产</span></a><h5>现在国内卫星尝试流水线生产，将为今后高...</h5></div></div></td></tr><tr><td><a href=""><p>瞭望丨开辟太空新赛道</p></a></td></tr><tr><td><a href=""><p>星座说｜十二星座在古装剧中能活几集？</p></a></td></tr><tr><td><a href=""><p>全面冲出正负零！中建二局三公司承建华能双</p></a></td></tr><tr><td rowspan="5" class="bo"><a class="a1" href=""><div id="d2"><img width="112" height="84" src="img/4.jpg" alt="图片加载失败"><p class="re">评论|羡慕乐视员工过得滋润，正常</p></div></a><a href=""><div id="d2"><img width="112" height="84" src="img/3.jpg" alt="图片加载失败"><p class="re">新尚|夏日防暑攻略：有效防晒</p></div></a></td><td><a href=""><p>全面冲出正负零！中建二局三公司承建华能双</p></a></td></tr><tr><td><a href=""><p>时空道宇首轨九星成功入轨，推动中国商业航</p></a></td></tr><tr><td><a href=""><p>“一箭九星”成功入轨，上合示范区卫星互联网项</p></a></td></tr><tr><td><a href=""><p>金砖国家航天合作联委会成立，正式开启星座</p></a></td></tr><tr><td class="bo"><a href=""><p>“一箭五星”海上飞天！“吉林一号”在轨卫星数量</p></a></td></tr></table>
最后一行镶嵌一个五行一列的表格，每个表格放一个a标签包裹着的div，div里面和上面的图片一样设置样式。
<td colspan="3"><table><tr><td><a href=""><div><img width="187" height="125" src="img/a1.jpeg" alt="图片加载失败" /><p class="rel">袁姗姗示范春日穿搭</p></div></a></td><td><a href=""><div><img width="187" height="125" src="img/a2.jpeg" alt="图片加载失败" /><p class="rel">张子枫最新大片曝光</p></div></a></td><td><a href=""><div><img width="187" height="125" src="img/a3.jpeg" alt="图片加载失败" /><p class="rel">倪妮穿香芋紫上衣气质温柔</p></div></a></td><td><a href=""><div><img width="187" height="125" src="img/a4.jpeg" alt="图片加载失败" /><p class="rel">刘亦菲婚纱造型仙气十足</p></div></a></td><td ><a href=""><div><img width="187" height="125" src="img/a5.jpeg" alt="图片加载失败" /><p class="rel">刘雯分享随拍美照</p></div></a></td></tr></table></td>
.rel{font-size: 12px;text-align: center;}a:hover .rel{color: white;text-decoration: none;}
页面到这里就结束了，如果觉得上下间距太近，可以给上面每个表格的最后一个单元格设置一个class然后加入一个底部内间距。
.bo{padding-bottom:30px;}
各位大佬有更简便的写法欢迎评论区解答！
