grid布局企业站
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>grid布局</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;min-width: 100vh;}.container {min-width: 1000px;display: grid;gap: 20px;}.container > .row {display: grid;grid-template-columns: repeat(12, 1fr);min-height: 20px;}.container > .row > .item {padding: 10px;}.header {background-color: lightgray;grid-column: span 1;text-align: center;}.left {grid-column: 1/4;height: 400px;}.main {grid-column: 4/10;height: 500px;}.right {grid-column: 10/13;height: 400px;}.footer {grid-column: span 2;text-align: center;}.copyright {grid-column: span 12;text-align: center;}</style></head><body><div class="container"><!-- 导航 --><div class="row"><div class="item header">首页</div><div class="item header">宏观</div><div class="item header">财经</div><div class="item header">行业</div><div class="item header">数字经济</div><div class="item header">招商</div><div class="item header">营销</div><div class="item header">园区</div><div class="item header">特别策划</div><div class="item header">综合</div><div class="item header">区域</div><div class="item header">客服</div></div><!-- 主体 --><div class="row"><div class="item left"><img src="timg.jpg" alt="" width="300px" /></div><div class="item main">近日，国新办举行《关于全面提升“获得电力”服务水平持续优化用电营商环境的意见》国务院政策例行吹风会。国家能源局副局长刘宝华表示，在各地政府和电力企业特别是电网企业的共同努力下，“获得电力”工作已经取得积极成效，但各地“获得电力”服务水平还存在一些不平衡，有些地方营商环境还有一定差距。未来，能源局还将会同国务院有关部门、地方政府、电网企业抓好各项举措的落实落地，持续加大监管力度，督促各地按质保量完成任务，确保各项工作取得实效，力争把办电服务打造成国内营商环境品牌、树立为全球第一流标杆。刘宝华指出，按照党中央、国务院优化营商环境的相关部署，国家能源局与相关部委、地方政府和电力企业一起，以世行营商环境评价为契机，以北京、上海为样本城市，对标国际先进水平，聚焦小微企业，全面开展“获得电力”便利化改革，推动我国营商环境持续改善。市场主体和人民群众办电用电的获得感、满意度明显提升，效果不错。</div><div class="item right"><img src="timg2.jpg" alt="" width="300px" /></div></div><!-- 底部 --><div class="row"><div class="item footer">员工专区</div><div class="item footer">网站地图</div><div class="item footer">联系方式</div><div class="item footer">内审平台</div><div class="item footer">招聘</div></div><div class="row"><div class="item copyright">版权所有©苏cc 8888-9999。| 地址：江苏省苏州市金枫路888号</div></div></div></body></html>
运行结果
grid网格相册
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="css/grid-picture.css" media="screen" /><title>摩托图片展示</title><style>body {background-color: royalblue;}.container {display: grid;grid-gap: 10px;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-template-rows: repeat(300px);}.pic {border-radius: 10px;padding: 10px;background-color: #eee;display: flex;flex-flow: column nowrap;align-items: center;justify-self: center;}img {height: 200px;width: 300px;}h2 {text-align: center;font-size: 2.5rem;font-weight: normal;text-shadow: 2px 2px 2px #555;margin-top: 20px;}</style></head><body><h2>摩托车图片展示</h2><div class="container"><div class="pic"><img src="bt.jpg" alt="本田" /><p>本田</p></div><div class="pic"><img src="lm.jpg" alt="" /><p>铃木</p></div><div class="pic"><img src="ymh.jpg" alt="" /><p>雅马哈</p></div><div class="pic"><img src="cq.jpg" alt="" /><p>川崎</p></div><div class="pic"><img src="cf.jpg" alt="" /><p>春风</p></div><div class="pic"><img src="df.jpg" alt="" /><p>刀锋</p></div><div class="pic"><img src="tz.jpg" alt="" /><p>太子</p></div><div class="pic"><img src="hj.jpg" alt="" /><p>豪爵</p></div></div></body></html>
运行结果
