前端学习日志之复刻百度新闻女人专栏

将页面布局划分为两行两列的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;
}

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

前端学习日志之复刻百度新闻女人专栏相关推荐

前端学习日志之复刻百度新闻百家号专栏
百度新闻百家号专栏划分页面布局百家号题头部分左边图片部分右边文字部分整体效果图划分页面布局将页面划分为两部分: 百家号题头主体内容题头部分设置为一个整体盒子,主体内容设置为两列一行的 ...
前端学习日志之复刻花礼网礼品专栏
花礼网礼品专栏知识点页面布局 html 代码 css代码效果展示知识点竖直与水平居中的实现: 竖直居中有两种情况: 将line-height的值设置的与height的值一样即可. verti ...
WEB前端学习日志Day4
WEB前端学习日志Day4 今日总结:通过一天的学习了解了样式表的权重,css的层叠性,css的选择符,划分网页上下布局,主要对css的选择符进行深入理解和代码实现. 样式表的权重样式表的权重关系: ...
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
前端学习日志(Vue)
文章目录模板语法插值语法指令语法数据绑定 MVVM模型数据代理事件处理计算属性监视属性进行监听深度监视条件渲染列表渲染 1.基本列表列表过滤列表排序生命周期 Vue组件的 ...
前端学习日志-4-js
js 基本数据类型(6) null undefined boolean number 复杂数据类型:object 对象创建继承操作定义属性读写属性删除属性合并对象判断类型 typeof ...
前端学习日志-7-浏览器
网络浏览器打开一个网址浏览器内核缓存强制缓存协商缓存 CDN 加速原理 TCP 报文三次握手四次挥手 UDP Ping Http.Https http HTTP/1.0 HTTP/1. ...
前端学习（270）：百度弹性导航
Web前端系列技术之移动端CSDN会员页面复刻（动态完整版）
移动端CSDN会员页面复刻在基于前端 HTML + CSS + JS(后期会细说) 以及移动端Web开发的学习中,内心不禁的激起了对于复刻移动端CSDN会员页面的欲望: 于是,在经历了接近 31 ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...

前端学习日志之复刻百度新闻女人专栏

前端学习日志之复刻百度新闻女人专栏相关推荐

最新文章

热门文章