1031 使用 grid / flex 快速搭建出淘宝网PC端首页框架
<!DOCTYPE html><htmllang=“zh-CN”><head><metacharset=“UTF-8”/><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”/><metaname=“viewport”content=“width=device-width, initial-scale=1.0”/><title>淘宝PC端布局框架</title><linkrel=“stylesheet”href=“css/pc.css”/><style>*{ margin:0;p轻创业网点我wcqh.cnadding:0; box–sizing: border–box;} body { min–height:2000px;}/* 头部: 导航 */.wrap header .top { width:100vw; height:36px; background–color: yellow;}.wrap header .top .content { width:1190px; height: inherit; background–color: wheat; margin:auto;}/* 头部: 快速入口 */.wrap header .entry { height:100px; padding:15px;/* background-colo轻创业网点我wcqh.cnr: #ccc; */}.wrap header .entry .content { max–width:1190px; min–width:940px; height: inherit; background–color: cyan; margin:auto; display: grid; grid–template–columns:80px repeat(5,1fr); grid–auto–rows:80px; gap:10px; padding:10px;}.wrap header .entry .content .item { background–color: lightcyan; border–radius:15px;}/* –轻创业网点我wcqh.cn——————————- *//* 主体 */.wrap main { max–width:1190px; min–width:940px; min–height:1000px; margin:20pxauto; padding:20px; background–color: lightgreen;}/* 搜索框 */.wrap main .search { height:88px; display: grid; grid–template–columns:190px1fr90px; gap:10px;/* 粘性定位 */ position: sticky; top:0;}.wrap mai轻创业网点我wcqh.cnn.search .item { background–color: lightpink;}/* 主体导航区 */ main .navs { height:423px; margin:20px0; display: grid; grid–template–columns:270px1fr; gap:10px;} main .navs >*{ background–color: lightskyblue;} main .navs >.user { display: grid;/* 2行2列 */ grid–template–columns:564px1fr; grid–template–rows:42px1fr; gap:10px;} main .na轻创业网点我wcqh.cnvs>.user >*{ background–color: lightcyan;} main .navs >.user .user–top { grid–column: span 2;}/* 主体标题区 */ main .title { background–color: lightcyan; display: flex; place–items: center;} main .title .tag { background: linear–gradient(to left, orangered, orange); color: white; border–radius:5px; padding:05px; margin–left:6px; cursor:d轻创业网点我wcqh.cnefault;}/* 主体: 商品列表 */ main .list { margin:20px0; display: grid; grid–template–columns: repeat(3,1fr); grid–auto–rows:172px; gap:10px;} main .list >.item { background–color: lightcyan; border–radius:6px; display: grid; grid–template–columns:150px1fr; gap:10px; padding:10px;} main .list >.item >*{ background–color: wheat;border轻创业网点我wcqh.cn–radius:6px;} main .list >.item img { width:100%; border–radius:6px;} main .list .item .detail { display: grid; grid–template–rows:1fr25px; padding:10px; place–content: space–between;} main .list .item .detail >*{ background–color: aqua;}/* 媒体查询 */@media(max–width:940px){.wrap header .entry .content { grid–template–columns:80p轻创业网点我wcqh.cnx repeat(4,1fr);} main .list { grid–template–columns: repeat(2,1fr);} main .navs { grid–template–columns:1fr;} main .navs .cate { display: none;}}</style></head><body><divclass=“wrap”><!– (1) 头部 –><header><!– 1. 顶部导航 –><divclass=“top”><divclass=“content”></div></div><!– 2. 快速入口 –><divclass=“entry”><divclass=“轻创业网点我wcqh.cncontent”><divclass=“item logo”></div><divclass=“item”></div><divclass=“item”></div><divclass=“item”></div><divclass=“item”></div><divclass=“item”></div></div></div></header><!– (2) 主体 –><main><!– 1. 搜索框 –><divclass=“search”><divclass=“item logo”></div><divclass=“item input”></div><divclass=“item轻创业网点我wcqh.cn ewm”></div></div><!– 2. 导航区 –><divclass=“navs”><!– 1. 左侧分类 –><divclass=“cate”></div><!– 2. 在侧轮播图与用户信息 –><divclass=“user”><!– 1. 顶部导航 –><divclass=“user-top”></div><!– 左侧轮播图 –><divclass=“slider”></div><!– 右侧用户信息 –><divclass=“user-info”></div></div></div><!– 3. 标题区 –><divclass=“title”><h轻创业网点我wcqh.cn2>猜你喜欢</h2><divclass=“tag”>个性推荐</div></div><!– 4. 商品列表 –><divclass=“list”><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=轻创业网点我wcqh.cn“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商轻创业网点我wcqh.cn品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商轻创业网点我wcqh.cn品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述<轻创业网点我wcqh.cn/div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><di轻创业网点我wcqh.cnvclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“轻创业网点我wcqh.cnprice”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>1轻创业网点我wcqh.cn59</div></div></div><divclass=“item”><ahref=“”><imgsrc=“images/items/item-11.webp”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><d轻创业网点我wcqh.cnivclass=“price”>159</div></div></div><divclass=“item”><ahref=“”><imgsrc=“”alt=“”/></a><divclass=“detail”><divclass=“desc”>商品描述商品描述商品描述商品描述</div><divclass=“price”>159</div></div></div></div></main></div></body></html>
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容