admin管理员组文章数量:1655506
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝商品页面</title>
<style>
.box{
width: 90%;
margin: auto;
float: left;
margin-left: 110px;
}
.prod{
width: 234px;
height: 366px;
list-style: none;
border: 1px solid #f2f2f2;
display: inline-block;
line-height: 1.6;
margin-left: -5px;
}
.prod-href{
text-decoration: none;
}
.prod:hover{
border-color: red;
}
.prod-intoduce-span{
color: #9b9b9b;
font-size: 14px;
}
.prod-price{
font-size: 19px;
color: red;
}
.prod-boss{
color: #9b9b9b;
font-size: 12px;
}
.prod-sale{
color: #9b9b9b;
font-size: 12px;
border-top: 1px solid #f2f2f2;
text-align: right;
padding-top: 10px;
}
.prod-test-box{
width: 210px;
height: 340px;
margin: auto;
margin-top: 15px;
}
.firstbox{
height: 15px;
width: 100%;
/* border: 1px solid black; */
text-align: center;
}
.firstbox li{
width: 5%;
height: 100%;
display: inline-block;
/* border: 1px solid black; */
list-style:none;
font-size: 12px;
}
#second{
width: 220px;
}
.one,.two{
float: left;
/* border: 1px solid black; */
margin-top: 20px;
}
.one{
width: 20%;
height: 130px;
margin-left: 150px;
text-align: center;
padding-top: 20px;
}
.two{
width: 60%;
height:130px ;
}
.three,.four{
float: left;
border: 2px solid black;
margin-top: 20px;
}
.three{
width: 70%;
height: 40px;
}
.four{
width: 10%;
height: 40px;
text-align: center;
font-size: 25px;
background-color: rgb(238, 158, 54);
}
.five{
display: inline-block;
}
.five li{
float: left;
height: 20px;
/* border: 1px solid black; */
list-style: none;
margin-left: 11px;
}
</style>
</head>
<body>
<div class="firstbox">
<li id="first"> </li>
<li>中国大陆</li>
<li>亲,请登录</li>
<li>免费注册</li>
<li>手机逛淘宝</li>
<li>网页无障碍</li>
<li id="second"></li>
<li>淘宝网首页</li>
<li>我的淘宝</li>
<li>购物车</li>
<li>收藏夹</li>
<li>商品分类</li>
<li>免费开店</li>
<li>千牛卖家中心</li>
<li>帮助中心</li>
<li id="end"></li>
</div>
<div class="one">
<img src="https://img.alicdn/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
</div>
<div class="two">
<div class="three"></div>
<div class="four">搜索</div>
<div class="five">
<li>一淘限时抢</li>
<li>女包包</li>
<li>mac</li>
<li>沐浴露</li>
<li>口红</li>
<li>床</li>
<li>手机</li>
<li>手表</li>
<li>苹果</li>
<li>窗帘</li>
<li>零食</li>
</div>
</div>
<div class="box">
<ul class="prods">
<!-- 编写一个商品链接 -->
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i2/52523936/O1CN01FymFaz1ewjsD7Bye6_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i2/1985745737/O1CN01DFtAgj1sFbAwIEpT1_!!1985745737-0-alimamacc.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i1/1710930009/O1CN011hI3IW1BwAX3wluoq_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i1/112008198/O1CN01yiNZEh2AQjuus0T17_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i1/31536383/O1CN015QUlaH1x1T2PD9nVa_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i2/2413470151/O1CN01EaRd6w1CzCm790TE3_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i4/5476915554/O1CN01AQDk981qtmfqD0jLE_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i1/30113799/O1CN015C3kft1dvzYskXcSR_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i4/2390140164/O1CN01E2DYtR1D59si3d17L_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://img.alicdn/imgextra/i1/49313621/O1CN015jfN8P1ccSttDLDbl_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
</div>
<div class="prod-price">¥66</div>
<div class="prod-boss">沐寻办公用品批发部</div>
<div class="prod-sale">月销9999+</div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>taobao</title>
<style>
body{
background-color: #f2f2f2b0
}
.top{
width: 100%;
height: 150px;
/* border: 1px solid red; */
}
.top-inner{
width: 50%;
height: 40%;
/* border: 1px solid black; */
margin-top: 30px;
margin-left: 150px;
}
.box{
width: 60%;
margin: auto;
height: 450px;
border: 1px solid #fffcfc;
background-color: #ffffff;
box-shadow: 2px 2px 2px rgb(227, 222, 222);
}
.left{
float: left;
width: 60%;
height: 100%;
/* border: 1px solid black; */
}
.right{
float: left;
width: 39%;
height: 100%;
/* border: 1px solid black; */
}
.title{
width: 100%;
height: 50px;
/* border: 1px solid black; */
margin-top: 50px;
}
span{
font-size: 20px;
margin-left: 110px;
}
.input1,.input2{
width: 100%;
height:70px ;
/* border: 1px solid black; */
}
.input-type,.input-typeTwo{
width: 70%;
height: 45%;
margin-left: 70px;
margin-top: 30px;
}
.login{
width: 100%;
height: 100px;
/* border: 1px solid black; */
}
#login{
width: 70%;
height:35% ;
margin-left: 70px;
margin-top: 50px;
background-color: chocolate;
}
#size{
font-size: 13px;
margin-left:180px;
}
li{
display: inline-block;
list-style: none;
margin-left: 10px;
font-size: 13px;
}
.botton{
margin-left: 125px;
}
.right-top{
width: 100%;
height: 50px;
/* border: 1px black; */
margin-top: 50px;
margin-left: 70px;
font-size: 25px;
}
.right-lun{
width: 100%;
height: 250px;
/* border: 1px solid black; */
}
.img{
margin-left: 70px;
}
.right-bottom{
margin-left: 85px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="top">
<div class="top-inner"><img src="./taobaoimg.png" alt=""></div>
</div>
<form action="">
<div class="box">
<div class="left">
<div class="title">
<span><b>密码登录</b></span>
<span><b>短信登录</b></span>
</div>
<div class="input1">
<input class="input-type" type="text" placeholder="账号名/邮箱/手机号">
</div>
<div class="input2">
<input class="input-typeTwo" type="password" placeholder="请输入登录密码">
</div>
<div class="login">
<button id="login"><b>登录</b></button>
</div>
<span id="size">支付宝登录|钉钉登录</span>
<div class="botton"><li >免费注册</li>
<li >忘记账号名</li>
<li >忘记密码</li>
</div>
</div>
<div class="right">
<div class="right-top">手机扫码安全登录</div>
<div class="right-lun">
<img class="img" src="./二维码.png" alt="">
</div>
<div class="right-bottom">
<li>打开</li>
<li>淘宝</li>
<li>天猫</li>
<li>App扫码</li>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校官网</title>
<style>
.top{
width: 30%;
height: 100px;
/* border: 1px solid black; */
float: left;
}
.top-two{
width: 69.5%;
height: 100px;
/* border: 1px solid black; */
float: left;
}
li{
list-style: none;
display: inline-block;
font-size: 13px;
margin-top: 40px;
margin-left: 20px;
}
.box{
width: 100%;
height: 700px;
border: 1px solid black;
background-image: url("https://www.cdcas.edu/wp-content/uploads/sites/42/sites/42/2024/06/20221010102749-1.jpg");
background-size: cover;
float: left;
}
</style>
</head>
<body>
<div class="top">
<img src="./官网.png" alt="">
</div>
<div class="top-two">
<li>首页</li>
<li>学校概况</li>
<li>新闻公告</li>
<li>教学科研</li>
<li>综改评建</li>
<li>国际交流</li>
<li>招生</li>
<li>就业</li>
<li>学院设置</li>
<li>学子风采</li>
<li>信息公开</li>
<li>公共服务</li>
<li>队伍建设</li>
</div>
<div class="box"></div>
</body>
</html>
版权声明:本文标题:web前端第三次作业 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729706210a1210759.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论