新闻手机端
- 首页效果
- html代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>新闻首页</title><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="font/iconfont.css" /></head><body><div class="box"><div class="header"><a href=""><span class="iconfont icon-qiandao"> <span>签到</span></span></a><div class="search"><span class="iconfont icon-sousuo"></span><form action=""><inputtype="text"class="soso"placeholder="请输入你要搜索的关键词"/><button></button></form><a href=""><span class="iconfont icon-paizhao"></span></a></div><a href=""><span class="iconfont icon-xiaoxi"> <span>消息</span></span></a></div><div class="navs"><li><a href="">推荐</a></li><li><a href="">关注</a></li><li><a href="">头条</a></li><li><a href="">热点</a></li><li><a href="">娱乐</a></li><li><a href="">健康</a></li><li><a href="">美食</a></li><a href=""><span class="iconfont icon-115-lanmuguanli"></span></a></div><div class="main"><ul class="list"><li class="item"><h2><a href="">中国多地停产限电，真的是没电了吗？中美博弈才是关键因素</a></h2><div class="img"><img src="images/pic1.jpg" alt="" /><img src="images/pic2.jpg" alt="" /><img src="images/pic3.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">3年“败光”百亿，花3亿投资又被王思聪讽刺，陈欧比你想象传奇</a></h2><div class="img"><img src="images/pic4.jpg" alt="" /><img src="images/pic5.jpg" alt="" /><img src="images/pic6.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><div class="ajd"><div class="tit"><a href="">二手房将迎来贬值潮，为什么炒房客不降价抛售？内行指出3个原因</a></div><div class="pic"><img src="images/pic7.jpg" alt="" /></div></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">跟王兴创业的清华高材生，41岁急流勇退，拿1.5亿年薪享受人生</a></h2><div class="img"><img src="images/pic8.jpg" alt="" /><img src="images/pic9.jpg" alt="" /><img src="images/pic10.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">中国多地停产限电，真的是没电了吗？中美博弈才是关键因素</a></h2><div class="img"><img src="images/pic1.jpg" alt="" /><img src="images/pic2.jpg" alt="" /><img src="images/pic3.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">3年“败光”百亿，花3亿投资又被王思聪讽刺，陈欧比你想象传奇</a></h2><div class="img"><img src="images/pic4.jpg" alt="" /><img src="images/pic5.jpg" alt="" /><img src="images/pic6.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><div class="ajd"><div class="tit"><a href="">二手房将迎来贬值潮，为什么炒房客不降价抛售？内行指出3个原因</a></div><div class="pic"><img src="images/pic7.jpg" alt="" /></div></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">跟王兴创业的清华高材生，41岁急流勇退，拿1.5亿年薪享受人生</a></h2><div class="img"><img src="images/pic8.jpg" alt="" /><img src="images/pic9.jpg" alt="" /><img src="images/pic10.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">中国多地停产限电，真的是没电了吗？中美博弈才是关键因素</a></h2><div class="img"><img src="images/pic1.jpg" alt="" /><img src="images/pic2.jpg" alt="" /><img src="images/pic3.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">3年“败光”百亿，花3亿投资又被王思聪讽刺，陈欧比你想象传奇</a></h2><div class="img"><img src="images/pic4.jpg" alt="" /><img src="images/pic5.jpg" alt="" /><img src="images/pic6.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><div class="ajd"><div class="tit"><a href="">二手房将迎来贬值潮，为什么炒房客不降价抛售？内行指出3个原因</a></div><div class="pic"><img src="images/pic7.jpg" alt="" /></div></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">跟王兴创业的清华高材生，41岁急流勇退，拿1.5亿年薪享受人生</a></h2><div class="img"><img src="images/pic8.jpg" alt="" /><img src="images/pic9.jpg" alt="" /><img src="images/pic10.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">中国多地停产限电，真的是没电了吗？中美博弈才是关键因素</a></h2><div class="img"><img src="images/pic1.jpg" alt="" /><img src="images/pic2.jpg" alt="" /><img src="images/pic3.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">3年“败光”百亿，花3亿投资又被王思聪讽刺，陈欧比你想象传奇</a></h2><div class="img"><img src="images/pic4.jpg" alt="" /><img src="images/pic5.jpg" alt="" /><img src="images/pic6.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><div class="ajd"><div class="tit"><a href="">二手房将迎来贬值潮，为什么炒房客不降价抛售？内行指出3个原因</a></div><div class="pic"><img src="images/pic7.jpg" alt="" /></div></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">跟王兴创业的清华高材生，41岁急流勇退，拿1.5亿年薪享受人生</a></h2><div class="img"><img src="images/pic8.jpg" alt="" /><img src="images/pic9.jpg" alt="" /><img src="images/pic10.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">中国多地停产限电，真的是没电了吗？中美博弈才是关键因素</a></h2><div class="img"><img src="images/pic1.jpg" alt="" /><img src="images/pic2.jpg" alt="" /><img src="images/pic3.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">3年“败光”百亿，花3亿投资又被王思聪讽刺，陈欧比你想象传奇</a></h2><div class="img"><img src="images/pic4.jpg" alt="" /><img src="images/pic5.jpg" alt="" /><img src="images/pic6.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><div class="ajd"><div class="tit"><a href="">二手房将迎来贬值潮，为什么炒房客不降价抛售？内行指出3个原因</a></div><div class="pic"><img src="images/pic7.jpg" alt="" /></div></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li><li class="item"><h2><a href="">跟王兴创业的清华高材生，41岁急流勇退，拿1.5亿年薪享受人生</a></h2><div class="img"><img src="images/pic8.jpg" alt="" /><img src="images/pic9.jpg" alt="" /><img src="images/pic10.jpg" alt="" /></div><div class="read"><div><span>置顶</span><span>央视新闻</span><span>阅读12568</span></div><div><span><span class="iconfont icon-pinglun"></span> 152评论</span><span><span class="iconfont icon-dianzan"></span> 389点赞</span></div></div></li></ul></div><div class="footer"><a href=""><div><span class="iconfont icon-shouye"></span><span>首页</span></div></a><a href=""><div><span class="iconfont icon-shipin"></span><span>视频</span></div></a><a href=""><div><span class="iconfont icon-24gl-newspaper"></span><span>新闻</span></div></a><a href=""><div><span class="iconfont icon-shouye"></span><span>任务</span></div></a><a href=""><div><span class="iconfont icon-wode"></span><span>我的</span></div></a></div></div></body></html>
- css代码
/* 通用css */* {margin: 0;padding: 0;box-sizing: border-box;}html {font-size: 10px;}body {font-size: 1.6rem;background-color: #fff;}a {color: #333;text-decoration: none;}li {list-style: none;}@media screen(min-width:480px) {font-size: 12px;}@media screen(min-width:640px) {font-size: 14px;}@media screen(min-width:720px) {font-size: 16px;}.box {min-height: 100vh;display: grid;grid-template-rows: 5rem 4rem 1fr 5rem;}/* 顶部css */.box .header {background-color: #f93442;display: grid;grid-template-columns: 4rem 1fr 4rem;place-items: center;color: #fff;}.box .header .icon-qiandao,.box .header .icon-xiaoxi {display: grid;flex-flow: column nowrap;font-size: 2.2rem;color: #fff;}.box .header .icon-qiandao span,.box .header .icon-xiaoxi span {font-size: 1rem;font-weight: 400;}.box .header .search {display: grid;grid-template-columns: 4rem 1fr 4rem;background-color: #fff;border-radius: 0.3rem;place-items: center;line-height: 3.2rem;color: #666;width: 98%;}.box .header .search .iconfont {font-size: 1.8rem;place-self: center;}.box .header .search form {width: 100%;}.box .header .search .soso {line-height: 3.2rem;border: 0;outline: none;overflow: hidden;}.box .header .search button {width: 0;height: 0;}.box .navs {background-color: #efefef;line-height: 4rem;display: flex;flex-wrap: nowrap;place-content: space-around;}.box .navs a {color: #777;}.box .navs li:first-of-type {font-weight: bolder;}/* 主体css */.box .main {height: calc(100vh - 4rem - 5rem - 5rem);overflow-y: scroll;}ul.list {overflow: hidden;}ul.list li.item {padding: 1rem 1rem;}ul.list li.item h2 {font-size: 1.7rem;font-weight: inherit;line-height: 2.5rem;text-align: justify;}ul.list li.item .img {padding-top: 0.6rem;display: flex;flex-wrap: nowrap;place-content: space-between;}ul.list li.item .img img {width: 32%;border-radius: 0.5rem;}ul.list li.item .read {padding-top: 1rem;display: flex;flex-wrap: nowrap;place-content: space-between;font-size: 1.2rem;}ul.list li.item .read div:first-of-type > :first-of-type {color: #f93442;border: 1px #f93442 solid;font-size: 1rem;padding: 1px 3px;border-radius: 3px;}ul.list li.item .read div:first-of-type > :nth-of-type(2) {margin-left: 0.5rem;}ul.list li.item .read div:first-of-type > :nth-of-type(3) {color: #666;margin-left: 0.5rem;}ul.list li.item .read div:last-of-type {color: #666;}ul.list li.item .read div:last-of-type > :first-of-type {margin-right: 0.5rem;}ul.list li.item .ajd {display: grid;grid-template-columns: 1fr 30vw;gap: 1rem;}ul.list li.item .ajd .tit {line-height: 1.6;}ul.list li.item .ajd .pic img {max-width: 100%;border-radius: 0.5rem;min-height: 75px;}/* 底部css */.box .footer {background-color: #efefef;border-top: 1px solid #dad9d8;display: flex;place-content: space-around;padding-top: 0.6rem;}.box .footer div {color: #9c9c9c;display: flex;flex-flow: column nowrap;place-items: center;}.box .footer a:first-of-type div {color: #f93442;}.box .footer a div span:first-of-type {font-size: 2.2rem;}.box .footer a div span:last-of-type {font-size: 1rem;}
通过对grid布局和flex布局的初步掌握，基本可以完成一些网站布局，但是flex和grid的布局的强大还需要进一步熟练掌握。
