1031作业

<!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>淘宝PC布局框架</title>
    <link rel="stylesheet" href="CSS/pc.css">
</head>
<body>
    <div class="wrap">
        <!-- (1)头部 -->
        <header> 
            <!-- 1.顶部导航 -->
            <div class="top">
                <div class="content">
                        <span>中国大陆</span>
                        <a href="">亲，请登录</a>
                        <a href="">免费注册</a>
                        <span>手机淘宝</span>
                        <span>网页无障碍</span>
                        <span>我的淘宝</span>
                        <span>购物车</span>
                        <span>收藏夹</span>
                        <span>商品分类</span>
                        <span>免费开店</span>
                        <span>千牛卖家中心</span>
                        <span>联系客服</span>
                </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 last"></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">
                <!-- 2.1 左侧分类 -->
                <div class="cate"></div>
                <!-- 2.2右侧轮播图与用户信息 -->
                <div class="user">
                    <!-- 顶部导航 -->
                    <div class="user-top"></div>
                    <!-- 左侧轮播图 -->
                    <div class="slider"></div>
                    <!-- 右侧用户登录 -->
                    <div class="user-info"></div>
                </div>
            </div>
            <!-- (3)标题区 -->
            <div class="title">
                <h2>猜你喜欢</h2>
                <div class="tag">个性推荐</div>
            </div>
            <!-- (4)商品列表 -->
            <div class="list">
                <div class="item">
                    <a href=""><img src="https://gw.alicdn.com/bao/uploaded/i4/3984301190/O1CN01Cx5fwW1Kf45u0t6Cz_!!0-item_pic.jpg_300x300q90.jpg_.webp" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div>
                <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div> <div class="item">
                    <a href=""><img src="" alt=""></a>
                    <div class="detail">
                        <div class="desc">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</div>
                        <div class="price">105</div>
                    </div>
                </div>
            </div>
        </main>
    </div> 
</body>
</html>

/* ? 样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* .wrap{
    margin: auto;
} */
body{
    /* ? 最小高度 */
    min-height: 2000px;
    /* background-color: rgb(246, 211, 123); */
}
/* 头部导航 */
.wrap header > .top{
    width: 100vw;
    height: 35px;
    background-color: #f5f5f5;
}
.wrap header > .top > .content{
    width: 1190px;
    /* 继承父级高度 */
    height: inherit;
    background-color: aquamarine;
    /* 居中 */
    margin: auto ;
    display: grid;
    grid-auto-flow: column;
    place-content: center end;
}
.wrap header > .entry{
    height: 100px;
    /* background-color: blueviolet; */
    /* padding: 15px; */
    margin: 15px;
}
.wrap header .entry .content{
    max-width: 1190px;
    min-width: 940px;
    height: inherit;
    margin: auto;
    background-color: cadetblue;
    /* ?绘制6列网格 */
    display: grid;
    grid-template-columns: 80px repeat(5,1fr);
     /* 网格定义高度 */
     grid-auto-rows: 80px;
    /* 加上网格间距 */
    gap: 10px;
    padding: 10px;
}
.wrap header .entry .content .item{
    background-color: brown;
    /* border: 1px solid; */
    /* 边框圆角 */
    border-radius: 15px;
}
/* -------------------------------------- */
/* ? 主体 */
.wrap main {
    max-width: 1190px;
    min-width: 940px;
    min-height: 1000px;
    background-color:cornflowerblue;
    margin: 5px auto;
    padding: 10px;
}
/* ? 搜索框 */
.wrap main .search{
    /* margin: 10px 10px; */
    height: 88px;
    display: grid;
    grid-template-columns: 190px 1fr 90px;
    gap: 10px;
    position: sticky;
    top: 0;
}
.wrap main .search .item{
    background-color:rgb(101, 243, 6);
}
/* 主题导航区 */
main .navs{
    height: 423px;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 270px 1fr;
    gap:10px
}
main .navs > .cate{
    background-color: antiquewhite;
}
main .navs .user{
    display: grid;
    grid-template-columns: 564px 1fr;
    grid-template-rows: 42px 1fr;
    gap:10px;
}
main .navs .user > *{
    background-color:aquamarine;
}
/* .user-top进行2列合并 */
main .navs .user > .user-top{
    grid-column: span 2;
} 
/* 主题标题区 */
main .title{
    background-color: aliceblue;
    display: flex;
    place-items: center;
}
/* 渐变色 */
main .title .tag{
    background: linear-gradient(to left,orangered,rgb(255, 106, 0));
    color: white;
    border-radius: 5px;
    padding: 0 5px;
    margin-left: 6px;
    cursor: pointer;
}
/* 主体：商品列表 */
main .list{
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    /* grid-template-rows: repeat(3,172px); */
    grid-auto-flow: 111px;
    grid-auto-rows: 172px;
    gap: 5px;
}
main .list .item{
    background-color: antiquewhite;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    padding: 10px 10px;
}
main .list .item > *{
    background-color:darkgrey;
    border-radius: 5px;
}
main .list .item img{
    width: 100%;
    /* border-radius: 5px; */
}
main .list .item .detail{
    display: grid;
    grid-template-rows:1fr 25px;
    padding: 10px;
    /* 2端对齐 */
    place-content: space-between;
}
/* 媒体查询 当宽度小于940px时显示4个 */
@media (max-width:940px) {
    .wrap header .entry .content{
        grid-template-columns: 80px repeat(4,1fr);
    }  
    .wrap header .entry .content .item .last{
        display: none;
    }
    main .list{
        grid-template-columns: repeat(2,1fr);
    }
    main .navs{
        grid-template-columns: 1fr;
    }
    main .navs > .cate{
        display: none;
    } 
}

实际效果

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

如何高效打造开发环境及语法，网络的认识

2022-10-14 15:56:43