前端学习日志之复刻百度新闻百家号专栏
百度新闻百家号专栏
- 划分页面布局
- 百家号题头部分
- 左边图片部分
- 右边文字部分
- 整体效果图
划分页面布局
- 将页面划分为两部分：
- 百家号题头
- 主体内容
- 题头部分设置为一个整体盒子，主体内容设置为两列一行的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背景颜色变为蓝色。
<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设置底部边框即可实现灰色虚线。
给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>思必驰冲刺科创板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>新国货梦碎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;}
整体效果图
最后整体效果图如下；
到这里结束啦，欢迎各位大佬在评论区提供更好的写法！
如果要给span标签设置样式，需要先将span标签转换为块元素display: block。 ↩︎
前端学习日志之复刻百度新闻百家号专栏相关推荐
- 百度企业百家号运营矩阵三部曲——1、蓝V认证 2、企业头条 3行业词占领(蓝V2.0）；蓝V认证立享21项特权（度爷解说收藏版）
一.企业百家号认证详细介绍 经过不断地打磨,百度百家号企业[认证服务(上一版本)]终于浮出水面.此品牌企业蓝v认证介绍版本是最新官方版,度爷在此加以解读分析,供大家更详细地参考阅读:充分了解后,尽快入 ...
- 前端学习日志之复刻花礼网礼品专栏
花礼网礼品专栏 知识点 页面布局 html 代码 css代码 效果展示 知识点 竖直与水平居中的实现: 竖直居中有两种情况: 将line-height的值设置的与height的值一样即可. verti ...
- 企业如何借助百度百家号进行网络推广？
有些中小企业的网络推广需求很简单,就是想网上搜自己的品牌关键词及产品关键词能搜到自己企业的信息,这个最简单的方法就是用百度的百家号.百家号认证蓝V之后会增加一个百家名片的展示,且会给一些流量支持,相对 ...
- 百度Q2净利润同比增长45% 百家号成信息流营收源动力
文|曾响铃 来源|科技向令说(xiangling0815) 又涨了!近日百度2018Q2财报发布,营收额达260亿元人民币,在Q1总营收209亿元的基础上继续增长.而这亮眼的成绩离不开其核心业务&qu ...
- 号外：百度又出自媒体！百家号6月16即将上线
相信自媒体对于大家来说已经不怎么陌生了,而百度旗下将在6月16日,也就是这周四又会推出自媒体平台:百家号!而注册地址已经开放:http://baijiahao.baidu.com/.而这次百家号发布是 ...
- WEB前端学习日志Day4
WEB前端学习日志Day4 今日总结:通过一天的学习了解了样式表的权重,css的层叠性,css的选择符,划分网页上下布局,主要对css的选择符进行深入理解和代码实现. 样式表的权重 样式表的权重关系: ...
- 百度新闻源重大调整，百家号将成企业曝光下一个风口？
3月20日,百度在站长平台发布公告,宣布取消百度新闻源制度,一时间成为站长圈的重磅新闻.对大部分企业来说,这个消息可谓喜忧参半.喜的是终于不用花大量资金在百度购买新闻源,帮企业SEO省钱:忧的是企业软 ...
- 百度百家号“漏洞”大曝光 一篇文章十几万阅读量 收入上万
越来越发现自媒体的好处,就是现在太多的平台都提供入口,基本是四大门户还有三大巨头互联网公司,百度.腾讯 .阿里都提供!那么接下来我要分享的是中国最大的搜索引擎公司-百度!,相信最近很多人都知道百度百家 ...
- 百家号自媒体视频,视频消重软件,批量自动去水印加水印软件 哔哩哔哩 秒拍 爱拍百度视频...
网易自媒体视频,批量修改md5采集下载上传,批量自动去水印加水印软件 今日头条自媒体视频,youtubu 视频去重,批量自动去水印加水印软件 快视频,视频消重技术去水印去logo字幕工具 搜狐自媒体视 ...
最新文章
- @property疑难杂症
- 111.什么是基带信号？什么是宽带信号？
- C#之app.config、exe.config和vshost.exe.config作用区别
- maven工程使用spring-boot-devtools进行热部署，更改代码避免重启web容器
- 4G通信技术LTE介绍
- 关于JSBuilder2的使用.
- android 导出数据库文件
- 计算机上机操作表格试题,2013职称计算机考试Excel表格操作试题（1）
- 选择html5抛弃flash,谷歌Chrome年底正式抛弃Flash 全面转向HTML5
- 破解sublime 3207(2019.6.3更新)
- c语言编程学生活动安排表,C语言作业安排表(18学时-周学时2...).doc
- 攻破 JAVA NIO 技术壁垒（ 下 ） 2017-09-02 ImportNew （点击上方公众号，可快速关注） 来源：朱小厮， blog.csdn.net/u013256816/articl
- Webstorm 分屏操作
- note edge android 6.0 root,三星Note Edge 6.0 root N9150ZCU1CQH5 root 高级设置
- PoE、PoE+、PoE++ 三款交换机如何选择？一文带你了解
- 唯样商城：扩展用于汽车以太网的 ESD 保护解决方案产品组合
- 关于SQL server 2000 在安装过程中遇到文件挂起的解决办法
- 【Problems】：JSON parse error: Invalid UTF-8 start byte 0xbd;
- git 的使用以及如何解决git冲突问题
- 清淡闲雅之《浮生六记》