Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:已完成的部分效果还不错, 继续加油
<!doctype html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="my/css.css">
<link rel="stylesheet" href="font_icon/iconfont.css">
<!-- 作业内容:-->
<!-- 1. 使用Grid / Flex , 编写淘宝网PC端首页布局-->
<!-- 2. (可选) 尝试动手实现淘宝移动端首页的主导航和商品列表-->
<style>
/*鼠标移上去的样式*/
header a:hover{
color: red;
}
/*字体大小 间距*/
.top_right >a,.top_left>a,.top_left>span{
color: #6C6C6C;
font-size: 12px;
padding-left: 15px;
cursor: pointer;
}
.top_left, .top_right{
padding-top: 3px;
/*margin-left:191px*/
}
header {
display: grid;
background-color: #f5f5f5;
grid-template-rows:35px;
grid-template-columns: repeat(2,605px);
place-content: center;
}
.top_right{
padding-left:84px
}
/*商品分类 免费开店间距单独处理*/
.top_right a:nth-of-type(5){
padding-left: 1px;
}
/*商品分类,免费开店间距*/
.top_right span{
margin-left: 10px;
color: #ddd;
margin-right: -9px;
}
/*亲,请登录红色处理*/
.top_left a:first-of-type{
color: red;
}
.a1{
display: grid;
grid-template-rows: 100px;
grid-template-columns:100px repeat(5,209px);
place-content: center;
gap: 8px;
width: 100%;
background-color: #ff72b5;
position: relative;
}
.a1>a:first-of-type>img{
/*border: 1px solid red;*/
width: 80px;
height: 80px;
}
.a1 >a{
margin-top: 10px;
padding-right: 50px;
}
.icobk{
position: absolute;
top: 14px;
margin-left: -75px;
border-radius:10px;
height: 66px;
}
.main{
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(4,300px);
place-content: center;
}
/*LOG部分*/
.logo {
width: 143px;
place-self: center start;
}
.iput{
border: 2px solid #FF5000;
width: 600px;
border-radius: 30px;
place-self: center;
position: relative;
padding-left:10px;
}
/*输入框行高*/
.iput span{
line-height:40px;
margin-left: 10px;
}
/*输入框的竖线*/
.iput span:nth-of-type(2){
border-left: 1px solid #F3F0F0;
color: #9b9b9b;
padding-left: 10px;
}
/*输入框美化,去除边框线*/
.iput>span>input{
height: 38px;
width: 400px;
color: red;
border: none;
background-color: white;
}
/* 宝贝搜索下面的产品超链接*/
.search{
position:absolute;
top: 50px;
font-size: 12px;
}
/*宝贝搜索下面的产品超链接间距*/
.search >a{
margin-left: 10px;
color: #666;
}
/*提交按钮*/
.iput > button{
color: white;
width: 80px;
background-image: linear-gradient(145deg,#ff9000,#ff5000 77%);
font-weight: 700;
border: 1px solid red;
right: 2px;
padding-top: 1px;
position: absolute;
border-radius: 30px;
bottom:3px;
font-size: 20px;
height: 35px;
}
.a1>a>h3,.a1>a>p{
position: relative;
right: 0;
top: -66px;
left: 29px;
color: white;
}
/*二维码大小*/
.qr .obj{width: 75px;border: 1px solid silver; margin-top: 10px}
.qr>.obj>img{width: 60px;margin: 6px 0 0 6px;}
.qr>.obj>small{
display: block;
font-size: 12px;
margin: 6px 0 0 6px;
margin-left: 9px;
color: red;
}
.qr {
grid-area: 1/4/1/span 3;
margin-left:217px;
}
.bananer{
display: grid;
grid-template-rows: 410px;
grid-template-columns: 270px 900px ;
place-content: center;
margin-top:40px
}
/*分类*/
.left_class{
/*margin: 50px 0 0 0;*/
background-color: #F7F9FA;
border-radius: 10px;
}
.nav{
display: grid;
grid-template-rows: 40px 100px;
grid-template-columns: 900px 100px ;
grid-auto-flow: column;
margin-left: 10px;
}
</style>
</head>
<body>
<header>
<div class="top_left">
<span>中国大陆 v</span>
<a href="">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
<a href="">网页无障碍</a>
</div>
<div class="top_right">
<a href="">我的淘宝 v</a>
<a href="">购物车</a>
<a href="">收藏夹 v</a>
<a href="">商品分类</a>
<a href="">免费开店</a>
<span> |</span>
<a href="">千牛卖家中心 v</a>
<a href="">联系客服 v</a>
</div>
</header>
<div class="a1">
<a href=""><img src="my/img/tm.png" alt=""></a>
<a href=""><img src="my/img/bg1.png" alt=""><img class= 'icobk' src="my/img/b1.webp" alt=""><h3>家装百科</h3><p>避坑指南</p></a>
<a href=""><img src="my/img/bg2.png" alt=""><img class= 'icobk' src="my/img/b2.webp" alt=""><h3>图像音像</h3><p>热度好书推荐</p></a>
<a href=""><img src="my/img/bg3.png" alt=""><img class= 'icobk' src="my/img/b3.webp" alt=""><h3>开新出行</h3><p>爆款破冰价</p></a>
<a href=""><img src="my/img/bg4.png" alt=""><img class= 'icobk' src="my/img/b4.webp" alt=""><h3>国潮东方</h3><p>不止5折</p></a>
<a href=""><img src="my/img/bg5.png" alt=""><img class= 'icobk' src="my/img/b5.webp" alt=""><h3>全球家电</h3><p>抢5折家电</p></a>
</div>
<!--LOGO输入框-->
<div class="main" >
<div class="logo"><img src="my/img/taobao.png" alt=""></div>
<div class="iput">
<span>宝贝 v</span>
<span><input placeholder="连衣裙"></span>
<button type="submit">提交</button>
<div class="search">
<a href="">新款连衣裙</a>
<a href="">四件套</a>
<a href="">潮流T恤</a>
<a href="">时尚女鞋</a>
<a href="">短裤</a>
<a href="">半身裙</a>
<a href="">男士外套</a>
<a href="">墙纸</a>
<a href="">行车记录仪</a>
</div>
</div>
<div class="qr">
<div class="obj"><small>下载淘宝</small><img src="my/img/qr.png"></div>
</div>
</div>
<div class="bananer">
<!-- 分类-->
<div class="left_class">
<h3>分类</h3>
<ul>
<li> <span class="iconfont icon-qunzi"></span>
<a href="">女装</a>
<span>/</span>
<a href="">内衣</a>
<span>/</span>
<a href="">奢品 </a></li>
<li> <span class="iconfont icon-chunjishangxin-peishi-"></span>
<a href="">女鞋</a>
<span>/</span>
<a href="">男鞋</a>
<span>/</span>
<a href="">箱包 </a></li>
<li> <span class="iconfont icon-meizhuang"></span>
<a href="">美妆</a>
<span>/</span>
<a href="">饰品</a>
<span>/</span>
<a href="">洗护 </a></li>
<li> <span class="iconfont icon-nanzhuang"></span>
<a href="">男装</a>
<span>/</span>
<a href="">运动</a>
<span>/</span>
<a href="">百货 </a></li>
<li> <span class="iconfont icon-qunzi"></span>
<a href="">手机</a>
<span>/</span>
<a href="">数码</a>
<span>/</span>
<a href="">企业礼品 </a></li>
<li> <span class="iconfont icon-weibiaoti2fuzhi13"></span>
<a href="">家装</a>
<span>/</span>
<a href="">电器</a>
<span>/</span>
<a href="">车品 </a></li>
<li> <span class="iconfont icon-shipin"></span>
<a href="">食品</a>
<span>/</span>
<a href="">生鲜</a>
<span>/</span>
<a href="">母婴 </a></li>
<li> <span class="iconfont icon-yiyaoxiang
"></span>
<a href="">医药</a>
<span>/</span>
<a href="">保健</a>
<span>/</span>
<a href="">进口 </a></li>
</ul>
</div>
<div class="nav">
<!-- bananer上面的文字-->
<div class="tianmao">
<a href="">天猫</a>
<span> |</span>
<a href="">聚划算</a>
<span> |</span>
<a href="">天猫超市</a>
<span> |</span>
<a href="">司法拍卖</a>
<span> |</span>
<a href="">飞猪旅行</a>
<span> |</span>
<a href="">天天特卖</a>
<span> |</span>
<a href="">极有家</a>
<span> |</span>
<a href="">淘宝直播</a>
</div>
<!-- bananer图-->
<!-- <div class="bananer_img">-->
<!-- <img style="height: 50px" src="my/img/bananer.jpg" alt=""></div>-->
<div class="self_person"></div>
</div>
<!-- 个人中心-->
<div class="persons"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer style="background-color: silver;height: 80px;text-align: center;color: red">
页脚
</footer>
</body>
</html>