学习前端第一天之复刻百度新闻部分专栏

将页面布局划分为两行两列的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">“反季节”穿搭&nbsp;他们这样在桑拿天坚守</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;
}

各位大佬有更简便的写法欢迎评论区解答！