Grid布局练习案例

仿Eage浏览器首页

效果：

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"><link rel="stylesheet" href="./edge-index.css"><title>Document</title>
</head><body><div id="container"><div id="nav"><div id="nav-collection"><!-- 第一行 --><a href="#"><img src="./edge-images/biying.img" alt=""> 必应</a><a href="#"><img src="./edge-images/百度.img">百度</a><a href="#"><img src="./edge-images/aiqiyi.img">爱奇艺</a><a href="#"><img src="./edge-images/腾讯.img">腾讯</a><a href="#"><img src="./edge-images/优酷.img">优酷</a><a href="#"><img src="./edge-images/芒果.img">芒果TV</a><a href="#"><img src="./edge-images/天猫.img"> 天猫</a><a href="#"><img src="./edge-images/京东.img"> 京东</a><!-- 第二行 --><a href="#"><img src="./edge-images/微软咨询.img">微软咨询</a><a href="#"><img src="./edge-images/特惠.img">唯品会</a><a href="#"><img src="./edge-images/淘宝.img">淘宝</a><a href="#"><img src="./edge-images/哔哩哔哩.img">哔哩哔哩</a><a href="#"><img src="./edge-images/微博.img">微博</a><a href="#"><img src="./edge-images/知乎.img">知乎</a><a href="#"><img src="./edge-images/小米油有品.img">小米有品</a><a href="#"><img src="./edge-images/豆瓣.img">豆瓣</a><!-- 第三行 --><a href="#"><img src="./edge-images/人民网.img">人民网</a><a href="#"><img src="./edge-images/新华网.img">新华网</a><a href="#"><img src="./edge-images/欢太商城.img">欢太商城</a><a href="#"><img src="./edge-images/苏宁易购.img">苏宁易购</a><a href="#"><img src="./edge-images/cctv.img">CCTV</a><a href="#"><img src="./edge-images/精选购物.img">精选购物TV</a><a href="#"><img src="./edge-images/biying.img">必应词典</a><a href="#"><img src="./edge-images/更多.img">更多>></a></div></div><div id="news"><div class="items item-1"><img src="./edge-images/新闻-1.jpg" alt=""><p>侃爷卡戴珊正式离婚，将分割266亿元共同财产</p></div><div class="items item-2"><img src="./edge-images/img-2.png"><span><img src="./edge-images/人民网.img">人民网</span><span>意大利3月通胀为6.2%</span><span>这是3月2日在意大利罗马拍摄的意大利央行总部。据欧盟统计局3月2日公布的初步统计数据显示...</span></div><div class="items item-3"><span>今天的市场行情 ></span><div class="tody-quotation"><div class="quotation"><span class="quo-title">USD/CNY</span><span class="quo-title quo-title-1">-0.01%</span><span class="plus">+</span><span class="quo-title-fy">美元/人民币(RMB)</span><span class="quo-title-fy">6.32</span></div></div><div class="tody-quotation"><div class="quotation"><span class="quo-title">GBP/CNY</span><span class="quo-title quo-title-1">-0.02%</span><span class="plus">+</span><span class="quo-title-fy">美元/人民币(RMB)</span><span class="quo-title-fy">8.43</span></div></div><div class="tody-quotation"><div class="quotation"><span class="quo-title">HKD/CNY</span><span class="quo-title quo-title-1">-0.00%</span><span class="plus">+</span><span class="quo-title-fy">港元/人民币(RMB)</span><span class="quo-title-fy">0.81</span></div></div><div class="tody-quotation"><div class="quotation"><span class="quo-title">JPY/CNY</span><span class="quo-title quo-title-2">+0.01%</span><span class="plus">+</span><span class="quo-title-fy">美元/人民币(RMB)</span><span class="quo-title-fy">0.05</span></div></div><div class="btn-look"><div>查看货币</div></div></div><div class="items item-4"><img src="./edge-images/img-3.png" alt=""><div class="oppo"><h3>买手机，选OPPO: OPPO官方商城，放心购买</h3><span>广告</span><i>多麦</i></div></div><div class="item-5"><div class="item-5-1"><div class="item-5-1-1"><img src="./edge-images/人民网.img" alt=""><span>人民网</span><p>加拿大多伦多露营与房车展开幕</p></div><img src="./edge-images/img-5.png" alt=""></div><div class="item-5-2"><div class="item-5-1-1"><img src="./edge-images/人民网.img" alt=""><span>人民网</span><p>加拿大多伦多露营与房车展开幕</p></div><img src="./edge-images/img-5.png" alt=""></div></div><div class="items item-6 item-4"><img src="./edge-images/img-4.png" alt=""><div class="oppo"><h3>NIKE BY YOU 暖心礼遇，惊喜折扣等你来</h3><span>广告</span><i>Nike</i></div></div><div class="items item-7"><span>天气</span><span>陕西省西安市</span><div class="weather-temperature"><img src="./edge-images/sun.svg" alt=""><span>19<sup>℃</sup></span><span>晴朗<br>67</span></div><div class="five"><div class="five-bg"><span>今天</span><img src="./edge-images/sun.svg" alt="" width="30"><span>20°</span><p>6°</p></div><div class="five-bg"><span>周六</span><img src="./edge-images/sun.svg" alt="" width="30"><span>16°</span><p>6°</p></div><div class="five-bg"><span>周日</span><img src="./edge-images/yu.png" alt="" width="30"><span>20°</span><p>6°</p></div><div class="five-bg"><span>周一</span><img src="./edge-images/yun.png" alt="" width="30"><span>18°</span><p>7°</p></div><div class="five-bg"><span>周二</span><img src="./edge-images/sun.svg" alt="" width="30"><span>19°</span><p>9°</p></div></div><a href="#" class="weather-search">查看完整预报</a></div><div class="items item-8">8</div><div class="items item-9">9</div><div class="items item-10">10</div><div class="items item-11">11</div></div></div>
</body></html>

CSS代码：

    * {margin: 0;padding: 0;box-sizing: border-box;}body {background: #f7f7f7;}a {text-decoration: none;color: black;font-size: 14px;}/* 居中 */#container {display: grid;grid-template-rows: 154px 100px;grid-row-gap: 15px;width: 1224px;margin: 0 auto;}#nav {display: grid;background-color: #fff;padding-left: 30px;}#nav-collection {display: grid;grid-template-rows: repeat(3, 35px);grid-template-columns: repeat(8, 1fr);justify-items: self-start;align-items: end;margin-top: 20px;}#nav-collection img {width: 16px;margin-right: 5px;}#news {display: grid;grid-template-rows: repeat(3, 300px);grid-template-columns: repeat(4, 1fr);grid-column-gap: 10px;grid-row-gap: 10px;}#news .item-1 {position: relative;grid-column-start: 1;grid-column-end: 3;}#news .item-1 p {position: absolute;left: 10px;bottom: 10px;font-size: 25px;font-weight: 700;color: #fff;z-index: 1;}.item-1 img {width: 100%;}#news .item-2 {display: grid;grid-template-rows: 150px 30px 50px 60px;align-items: center;}.item-2 img {width: 100%;}#news .item-2 span {padding: 0 10px;}#news .item-2 span:nth-child(2) {display: grid;grid-template-columns: 20px 1fr;}#news .item-2 span:nth-child(2) img {width: 16px;margin-right: 5px;align-self: center;}#news.item-2 span:nth-child(3) {font-weight: 700;font-size: 20px;align-self: flex-start;}#news .item-2 span:nth-child(4) {padding: 10px;}#news .item-3 {background-color: #bfd3ef;display: grid;grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;/* grid-template-columns: 1fr 1fr; */padding: 10px;}.item-4 img {width: 100%;}.tody-quotation {width: 100%;height: 45px;background-color: #f2f6fc;border-radius: 5px;}.item-3>span {font-size: 14px;font-weight: 700;}.quotation {display: grid;grid-template-rows: 1fr 1fr;grid-template-columns: 2fr 1fr 1fr;padding: 5px;}.quotation .quo-title {/* font-weight: 700; */font-size: 14px;}.quotation .quo-title-fy {font-size: 12px;}.quotation .plus {grid-row-start: 1;grid-row-end: 3;grid-column-start: 3;grid-column-end: 4;justify-self: center;align-self: center;}.quotation .quo-title-1 {color: #11a859;}.quotation .quo-title-2 {color: #fd7051;}.btn-look {justify-self: center;align-self: center;}.btn-look div {background-color: #e1eaf7;text-align: center;line-height: 30px;border-radius: 15px;width: 100px;height: 30px;}.item-4 .oppo {display: grid;grid-template-rows: 1fr 75px;grid-template-columns: 1fr 5fr;padding: 10px;}.oppo h3 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;}.oppo span:nth-child(2) {align-self: flex-end;width: 40px;background-color: #595959;font-size: 12px;color: #fff;text-align: center;}.oppo i {align-self: flex-end;justify-self: flex-start;font-size: 12px;}#container .news .item-5 {box-shadow: none;}.item-6 img {width: 100%;}.item-5 {display: grid;grid-template-rows: 1fr 1fr;}.item-5 .item-5-1,.item-5 .item-5-2 {display: grid;grid-template-columns: 1fr 1fr;width: 100%;height: 95%;border-radius: 8px;padding: 10px;/* background-color: #11a859; */box-shadow: 0px 1px 5px 2px rgba(63, 62, 62, .3);align-items: center;}.item-5 .item-5-2 {align-self: flex-end;}.item-5-1>img {border-radius: 8px;/* width: 100px; */justify-self: flex-end;}.item-5-1-1 {align-self: flex-start;}.item-5-1-1 img {width: 16px;vertical-align: middle;margin-right: 5px;}.item-5-1-1 span {font-size: 12px;color: #888686;}.item-5-1-1 p {margin-top: 15px;font-weight: 700;}#news .item-7 {display: grid;grid-template-rows: 30px 30px 50px 1fr 1fr;padding: 15px;background: url(./edge-images/weather-bg.jpg);color: #fff;}.item-7>span:nth-child(2) {justify-self: center;align-self: center;}.weather-temperature {display: grid;grid-template-columns: 0.5fr 1fr 1fr;}.weather-temperature span:nth-child(2) {font-size: 40px;}.weather-temperature span:nth-child(3) {justify-self: flex-end;}.weather-temperature sup {font-size: 25px;}.weather-temperature img {justify-self: center;width: 50px;}.five {display: grid;grid-template-columns: repeat(5, 1fr);/* justify-items: center; */grid-column-gap: 3px;}.five .five-bg {background-color: rgba(255, 255, 255, .1);border-radius: 4px;padding: 10px 3px;text-align: center;}.five .five-bg img {padding: 6px 0;}.item-7 .weather-search {justify-self: center;align-self: center;width: 150px;text-align: center;border-radius: 15px;background-color: rgba(255, 255, 255, .1);line-height: 30px;height: 30px;margin-top: 10px;color: #fff;}#news .item-8 {background-color: rgb(185, 84, 163);}#news .item-9 {background-color: rgb(185, 84, 163);}#news .item-10 {background-color: rgb(185, 84, 163);}#news .item-11 {background-color: rgb(185, 84, 163);}#news .items {border-radius: 8px;overflow: hidden;box-shadow: 0px 1px 5px 2px rgba(63, 62, 62, .3);}

Grid布局练习案例相关推荐

python布局管理_Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...
Web前端笔记（10）Grid布局
Grid网格布局: Grid布局是一个二维布局方法,横纵两个方向总是同时存在.与flex布局的语法类似,Grid布局涉及到的语法也分为两类,一类是作用在Grid容器上的,另一类是作用在grid子项上的 ...
grid布局看这一篇就够了
grid布局笔记 1.grid概述 2.grid布局的作用 2.1.grid与flex布局的区别 2.2.grid的优势 3.grid基本概念 3.1.容器与项目 3.2.行.列.单元格 3.3.网格 ...
前端每日实战：143# 视频演示如何用 CSS 的 Grid 布局创作一枚小松鼠邮票
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YOoXpv 可交互视频此视频是可 ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
[转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的&l ...
Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...

Grid布局练习案例

Grid布局练习案例相关推荐

最新文章

热门文章