【CSS】 PC端布局-实战淘宝 - PHP前端

首页 > 博客列表 > 【CSS】 PC端布局-实战淘宝

博主信息

博文 94

粉丝 0

访问量 118054

专题推荐

更多>

PC端布局-实战淘宝

<!DOCTYPE html>
<html lang="en">
  <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="css/pcmain.css" />
    <title>PC端布局-实战淘宝</title>
  </head>
  <body>
    <div class="wrap">
      <header>
        <!-- 头部 -->
        <!-- 1.顶部导航 -->
        <div class="top">
          <div class="content"></div>
        </div>
        <!-- 2.快速入口 -->
        <div class="entry">
          <div class="content">
            <div class="item logo"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
      </header>
      <!-- 主体 -->
      <main>
        <!-- 1.搜索框 -->
        <div class="search">
            <div class="item logo"></div>
            <div class="item input"></div>
            <div class="item ewm"></div>
        </div>
        <!-- 2.导航区 -->
        <!-- 左侧分类 -->
        <div class="navs">
            <div class="cate">
            </div>
            <!-- 右侧轮播图和用户信息 -->
            <div class="user">
                <!-- 顶部导航 -->
                <div class="user-top">
                    .
                </div>
                <!-- 左侧轮播图 -->
                <div class="slider"></div>
                <!-- 右侧用户信息 -->
                <div class="user-info"></div>
            </div>
        </div>
        <div class="title">
            <h2>猜你喜欢</h2>
            <div class="tag">个性推荐</div>
        </div>
        <div class="list">
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="images/items/item-20.webp" alt=""></a>
                <div class="detail">
                    <div class="desc">商品描述</div>
                    <div class="price">105</div>
                </div>
            </div>
        </div>
      </main>
    </div>
  </body>
</html>

CSS

* {
    margin: 0;
    padding: 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;
    margin: auto;
    background-color: wheat;
}
/* 头部快速入口 */
.wrap header .entry {
    height: 100px;
    padding: 15px;
    /* background-color: #ccc; */
}
.wrap header .entry .content {
    max-width: 1190px;
    min-width: 940px;
    height: inherit;
    background-color: aquamarine;
    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: #fff;
  border-radius: 15px;
}
/* 主体 */
.wrap main {
    max-width: 1190px;
    min-width: 740px;
    background-color: lightgreen;
    min-height: 1000px;
    margin: 20px auto;
    padding: 20px;
}
/* 搜索框 */
.wrap main .search {
    height: 88px;
    display: grid;
    grid-template-columns: 190px 1fr 90px;
    /* 1fr：自适应 */
    gap: 10px;
    /* 粘性定位 */
    position: sticky;
    top: 0;
}
.wrap main .search .item {
    background-color: lightpink;
}
/* 主体导航区 */
.wrap main .navs {
    height: 423px;
    margin: 20px 0;
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 10px;
}
.wrap main .navs .cate {
    background-color: lightskyblue;
}
.wrap main .user {
    display: grid;
    grid-template-columns: 564px 1fr;
    grid-template-rows: 42px 1fr;
    gap: 10px;
}
.wrap main .user > * {
    background-color: aquamarine;
}
.wrap main .user .user-top {
    grid-column: span 2;
}
/* 主体标题区 */
.wrap main .title {
    background-color: lightcyan;
    display: flex;
    place-items: center;
}
.wrap main .title .tag {
    background: linear-gradient(to left,orangered,orange);
    border-radius: 3px;
    color: #fff;
    margin-left: 6px;
    padding: 0 5px;
    cursor: default;
}
/* 主体：商品列表 */
.wrap main .list {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 172px;
    gap: 10px;
}
.wrap main .list .item {
    background-color: lightcyan;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    padding: 10px;
}
.wrap main .list .item > * {
    background-color: antiquewhite;
    border-radius: 6px;;
}
.wrap main .list .item img {
    width: 100%;
    border-radius: 6px;
}
.wrap main .list .item .detail {
    display: grid;
    grid-template-rows: 1fr 25px;
    padding: 10px;
    /* 要加place-content:space-between 适应响应式*/
    place-content: space-between;
}
/* 媒体查询:响应式布局 */
@media (max-width: 940px){
    .wrap header .entry .content {
        grid-template-columns: 80px repeat(4,1fr);  
    }
    .wrap main .list {
        grid-template-columns: repeat(2,1fr);
    }
    /* 屏幕宽度小于740PX时，隐藏菜单 */
    .wrap main .navs .cate {
        display: none;
    }
    /* 屏幕宽度小于740PX时，修改布局为一列 */
    .wrap main .navs {
        grid-template-columns: 1fr;
    }
}

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好, 继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59