布局练习——网易新闻

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style type="text/css">*{margin: 0;padding: 0;}.news-wrapper{margin: 50px auto;width: 300px;}.news-tittle{font: 16px '微软雅黑';font-weight: 600;height: 42px;line-height: 42px;display: inline-block;border-top: 1px solid red;}.news-wrapper .news-img{width: 100%;height: 150px;}.news-wrapper .img-title{margin-top: -46px;padding: 10px;font: 16px '微软雅黑';font-weight: 600;color: white;}.news-wrapper .news-list{list-style: none;}.news-list{margin-top: 25px;}.news-list li:before{content: '■';font-size: 10px;margin-right: 10px;}.news-list li{margin-bottom: 14px;}.news-list a{text-decoration: none;font-size: 14px;margin-bottom: 14px;}</style><body><div class="news-wrapper"><h3 class="news-tittle">军事</h3><div class="news-img"><a href=""><img src="https://cms-bucket.ws.126.net/2020/0615/1ee9af8aj00qby3h3005mc000s600e3c.jpg?imageView&thumbnail=300y150&type=webp" alt=""><h3 class="img-title">俄军参加胜利日阅兵装备图</h3></a></div><ul class="news-list"><li><a href="#">触目惊心!航拍浙江温岭槽罐车爆炸现场</a></li><li><a href="#">美军特种实验室外形犹如"哈尔的城堡"</a></li><li><a href="#">越捷航空一客机冲出跑道 扎进泥地</a></li><li><a href="#">直升机转运浙江温岭槽罐车爆炸事故受伤者</a></li></ul>
</div></body>
</html>

难点分析

.img-title 利用margin负值上移时，下面的文字也跟着上移了，原因是，news-img没有设置高度，img-title上移导致news-img的高度变小，img-title中溢出的内容并不能影响img-title元素层面的布局
父元素没设置高度，高度由内容撑开，且以父元素最后一个子元素的位置为准
使用伪类选择器来添加列表前面的点 .news-list li:before

布局练习——网易新闻相关推荐

视频教程-Flutter布局实战网易新闻客户端-flutter
Flutter布局实战网易新闻客户端 Flutter书籍作者.曾任职于多家互联网大型企业,担任移动端项目技术负责人,主导研发和攻关技术难题,项目涉及教育.金融.医疗.交通.车载设备.智能家居等众多领域 ...
Android SlidingMenu 仿网易新闻客户端布局
前面两篇文章中的SlidingMenu都出现在左侧,今天来模仿一下网易新闻客户端左右两边都有SlidingMenu的效果,以下是网易新闻客户端效果: 不扯闲话了,直接进入正题吧 frame_conte ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherl ...
android 仿网易标题栏,仿网易新闻可滑动标题栏TabLayout(文字或图标)
近期有需要,要做一个类似于网易新闻首页中的可滑动标题栏 TabLayout,根据大神写的 FlycoTabLayout 改造了一下,可以加载网络图片,主要实现内容如下: 1. 可配置标题选中效果(下划 ...
网易新闻iOS版使用的18个开源组件
***************************^_^**************************************** 网易新闻iOS版在开发过程中曾经使用过的第三方开源类库.组 ...
网易新闻回答2021：靠差异化内容逆势增长
QuestMobile在<中国移动互联网发展启示录>中披露了一组数据:截止到2021年9月,中国的网民总人数达到11.67亿人,同比仅增加1400万. 这样的局面似乎并不让人意外,经历了直 ...
iOS开发之AVPlayer的精彩使用---网易新闻视频播放界面的另类实现
遇到个需求需要涉及到视频播放,那么没办法,先找资料开始进一步了解下这个不熟悉的东西 . 一个是 MP ,一个是AV,MP是封装好的,用起来非常简单,但是自定义样式就基本不可能了.AVPlayer存在 ...
[转]网易新闻客户端为什么开始在北京市区的地铁、公交站牌大批量投放广告？...
一.可能是网易新闻客户端取得了不可思议的成功,潜力巨大,引起了网易的重视. 二.可能是京城学生上班族群体的智能手机普及率高,拓展市场. -------------------------------- ...

布局练习——网易新闻

布局练习——网易新闻相关推荐

最新文章

热门文章