简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1028 淘宝首页

1028 淘宝首页

移动用户-4050479
移动用户-4050479原创
2022年10月31日 08:24:15404浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="css.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <div class="top">
  12.         <div>
  13.             <ul>
  14.                 <li>中国大陆</li>
  15.                 <li>亲,请登录</li>
  16.                 <li>免费注册</li>
  17.                 <li>手机逛淘宝</li>
  18.                 <li>网页无障碍</li>
  19.             </ul>
  21.             <ul>
  22.                 <li>我的淘宝</li>
  23.                 <li>购物车</li>
  24.                 <li>收藏夹</li>
  25.                 <li>商品分类</li>
  26.                 <li>免费开店</li>
  27.                 <li>卖家中心</li>
  28.                 <li>联系客服</li>
  29.             </ul>
  30.         </div>
  31.     </div>
  33.     <div class="top-center">
  34.         <div>
  35.             <div><img src="img/logo.png" alt="" srcset=""></div>
  36.             <div class="top-center-div"><img src="img/1.png" alt="" srcset=""></div>
  37.             <div class="top-center-div"><img src="img/2.png" alt="" srcset=""></div>
  38.             <div class="top-center-div"><img src="img/3.png" alt="" srcset=""></div>
  39.             <div class="top-center-div"><img src="img/4.png" alt="" srcset=""></div>
  40.             <div class="top-center-div"><img src="img/5.png" alt="" srcset=""></div>
  42.         </div>
  43.     </div>
  45.     <div class="main">
  47.         <div class="main-main">
  48.             <div class="main-top"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png" alt="" srcset=""></div>
  49.             <div>
  50.                 <select name="" id="">
  51.                     <option value="1">宝贝</option>
  52.                     <option value="t">天猫</option>
  53.                 </select>
  54.                 <input type="text" name="12" id="" placeholder="马航MH370">
  55.                 <input type="button" value="搜索" >
  56.                 <p>新款连衣裙 四件套 潮流T恤 时尚女鞋 短裤 半身裙 男士外套 墙纸 行车记录仪 新款男鞋</p>
  57.             </div>
  58.             <div class="xiazai">
  59.                 <ul>
  60.                     <li>下载淘宝</li>
  61.                     <li><img src="img/xiazai.png" alt="" srcset=""></li>
  62.                 </ul>
  63.             </div>
  64.         </div>
  65.         <div class="center">
  66.             <div class="center-left">
  67.                 <ul>
  68.                     <li>分类</li>
  69.                     <li> 女装/内衣/ 奢品</li>
  70.                     <li> 女鞋/男鞋/ 箱包</li>
  71.                     <li> 美妆/饰品/ 洗护</li>
  72.                     <li> 男装/运动/ 百货</li>
  73.                     <li> 手机/数码/ 企业礼品</li>
  74.                     <li> 家装/电器/ 车品</li>
  75.                     <li> 食品/生鲜/ 母婴</li>
  76.                     <li> 医药/保健/ 进口</li>
  77.                 </ul>
  78.             </div>
  79.             <div class="center-center-top">
  80.                 <p><a href="">天猫</a> <span>|</span><a href="">聚划算</a> <span>|</span><a href="">天猫超市</a><span>|</span>司法拍卖<span>|</span>飞猪旅行<span>|</span>天天特卖<span>|</span>极有家<span>|</span>淘宝直播</p>
  81.             </div>
  82.             <div class="center-center-center">
  83.                 <img src="https://img.alicdn.com/imgextra/i2/6000000003880/O1CN01VgkkC51eX5WOikWtx_!!6000000003880-0-octopus.jpg" alt="" srcset="">
  84.             </div>
  85.             <div class="center-center-right">
  86.                 <div class="div">
  87.                     <img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8" alt="" srcset="">
  88.                     <p>Hi 你好！</p>
  89.                 </div>
  90.                 <div >
  91.                     <ul class="nav">
  92.                         <li>登录</li>
  93.                         <li>注册</li>
  94.                         <li>开店</li>
  95.                     </ul>
  96.                 </div>
  97.                 <div class="bott">
  98.                     <div><img src="img/001.png" alt="" srcset=""></div>
  99.                     <div><img src="img/001.png" alt="" srcset=""></div>
  100.                     <div><img src="img/001.png" alt="" srcset=""></div>
  101.                     <div><img src="img/001.png" alt="" srcset=""></div>
  102.                     <div>宝贝收藏</div>
  103.                     <div>买过的店</div>
  104.                     <div>收藏的店</div>
  105.                     <div>我的足迹</div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </body>
  111. </html>
  2. *{
  3.     padding: 0;
  4.     margin: 0;
  5. }
  6. body{
  7.     background-color: rgba(155, 155, 232,0.2);
  8.     display: flex;
  9.     flex-wrap: wrap;
  10.     justify-content: center;
  11. }
  12. .top {
  13.     display: flex;
  14.     background-color: gainsboro;
  15.     width: 100%;
  16.     height: 2.1875rem;
  17.     font-size: 0.75rem;
  18.     justify-content: center;
  20. }
  21. .top div {
  22.     width: 90%;
  23.     display: flex;
  24.     position: relative;
  25. }
  26. .top div ul {
  27.     padding-top: 0.625rem;
  28.     list-style: none;
  29.     display: flex;
  30.     font-weight: 300;
  32. }
  33. .top div ul li{
  34.     padding: 0px 0.3125rem 0px 0.3125rem;
  35. }
  36. .top div ul:nth-of-type(1) li:nth-of-type(1){
  37.     font-weight: 500;
  38. }
  40. .top div ul:nth-of-type(1) li:nth-of-type(2){
  41.     color: red;
  42. }
  44. .top div ul:nth-of-type(2){
  45.     position:absolute;
  46.     right: 0;
  47. }
  51. .top-center {
  52.     background-color: pink;
  53.     width: 100%;
  54.     display: flex;
  55.     justify-content: center;
  56. }
  57. .top-center div {
  58.     display: flex;
  59.     width: 80%;
  60. }
  61. .top-center div div{
  62.     margin: 15px 15px 15px 0px ;
  64. }
  65. .top-center div div:nth-last-of-type(1){
  66.     margin: 15px 0px 15px 0px ;
  68. }
  69. .top-center div div:nth-of-type(1) {
  70.     width: 5.6875rem;
  71. }
  72. .top-center div div:nth-of-type(1) img {
  73.     height: 5rem;
  74. }
  75. .top-center div div:nth-of-type( n + 2 ) img {
  76.     height: 76.5px;
  77. }
  80. .main {
  81.     background-color: white;
  82.     width: 80%;
  83.     height: auto;
  86. }
  87. .main-main {
  88.     display: grid;
  89.     grid-template-rows: repeat(1, 100%);
  90.     grid-template-columns: 15% 70% 15% ;
  91.     padding-top: 1.875rem;
  92.     place-items: center;
  93.     background-color: white;
  94. }
  96. .main-top {
  97.     background-image: url('https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png');
  98.     height: 60px;
  99.     background-repeat: no-repeat;
  101. }
  102. .main-top+div {
  103.     position: relative;
  104.     border: 2px solid red;
  105.     border-radius: 20px;
  106.     box-shadow: inset 0px 0px 3px yellow;
  107.     height: 2.625rem;
  108.     width: 46.125rem;
  109. }
  110. .main-main div input[name="12"] {
  111.     border: none;
  112.     background: none;
  114.     height: 2.625rem;
  115.     width: 36.125rem;
  118. }
  119. .main-main div input:focus {
  120.     outline: none;
  121. }
  122. .main-main div input:nth-last-of-type(1){
  123.     background-image: linear-gradient(145deg,#ff9000,#ff5000 77%);
  124.     border: none;
  125.     width: 5rem;
  126.     height: 2.5rem;
  127.     border-radius: 2.5rem;
  128.     position:absolute;
  129.     right: 0px;
  130.     top: 1px;
  131. }
  132. select {
  133.     border: none;
  134. }
  135. select:focus {
  136.     outline: none;
  137. }
  141. .xiazai {
  142.     border: 1px solid gainsboro;
  143.     padding: 5px;
  144. }
  146. .xiazai ul {
  147.     list-style: none;
  148.     text-align: center;
  149.     font-size: 13px;
  150.     font-weight: 400;
  151.     color: red;
  152. }
  153. .xiazai ul li img {
  154.     width: 65px;
  155. }
  157. .main-main div:nth-last-of-type(2) p{
  158.     font-size: 13px;
  159.     font-weight: 300;
  160.     /* text-align: center; */
  161.     margin-left: 1.875rem;
  165. }
  168. .center {
  169.     display: grid;
  170.     grid-template-columns: 25% 50% 25%;
  171.     padding-top: 2.5rem;
  172.     grid-auto-flow: column;
  173.     grid-template-rows: repeat(2 , auto);
  176. }
  177. .center-left {
  178.     background-color: rgb(231, 231, 233);
  179.     border-radius: 10px;
  180.     margin-left: 1rem;
  181.     grid-area: 1 / 1 / span 2 / span 1 ;
  182.     height: 25rem;
  183. }
  184. .center-left ul {
  185.     list-style: none;
  186.     padding-left: 2rem;
  187.     line-height: 2.5rem;
  188.     padding-bottom: 2rem;
  190. }
  191. .center-left ul li:nth-of-type(1){
  192.     font-size: 18px;
  193.     font-weight: 600;
  194.     padding-bottom: 1rem;
  195. }
  198. .center-center-top {
  199.     background-color: rgb(231, 231, 233);
  200.     border-radius: 10px;
  201.     grid-area: 1 / 2 / span 1 / span 2 ;
  202.     margin-left: 1rem;
  203.     margin-right: 2rem;
  204. }
  205. .center-center-top p {
  206.     text-align: center;
  207.     font-size: 1.125rem;
  208.     padding: 0.5rem 0rem 0.5rem 0rem;
  210. }
  211. .center-center-top p span {
  212.     font-size: 1rem;
  213.     padding: 0px 1rem 0px 1rem;
  214. }
  215. .center-center-top p a:nth-of-type( -n + 2 ) {
  216.     color: red;
  218. }
  219. .center-center-top p a:nth-of-type( 3 ) {
  220.     color: green
  221. }
  222. a {
  223.     text-decoration: none;
  224. }
  225. .center-center-center img{
  226.     width: 95%;
  227.     border-radius: 10px;
  228.     margin-left: 1rem;
  229.     margin-top: 1rem;
  230. }
  231. .center-center-right {
  232.     position: relative;
  233.     display: grid;
  235. }
  236. .center-center-right .div img {
  237.     position: absolute;
  238.     border-radius: 50px;
  239.     left: 35%;
  240.     top: 2rem;
  241. }
  242. .center-center-right p {
  243.     position: absolute;
  244.     border-radius: 50px;
  245.     left: 35%;
  246.     top: 7rem;
  247. }
  248. ul{
  249.     list-style: none;
  250. }
  251. .nav {
  252.     display: flex;
  253.     margin-left: 1.1rem;
  254.     margin-top: 5rem;
  255. }
  256. .nav li {
  257.     border-radius: 30px;
  258.     padding: 0.7rem 1.3rem;
  259.     background-color: #ff5000;
  260.     color: white;
  261.     margin-right: 0.5rem;
  262.     font-size: 1.125rem;
  263. }
  264. .nav li:nth-last-of-type(1){
  266.     border-radius: 30px;
  267.     border: 1px solid red;
  268.     padding: 0.7rem 1.3rem;
  269. /*     background-color: #ff5000; */
  270.     color: red;
  271.     background-color: white;
  272.     margin-right: 0.5rem;
  273.     font-size: 1.125rem;
  275. }
  277. .bott {
  278.     display: grid;
  279.     grid-template-columns: repeat(4 , 1fr);
  280.     grid-template-rows: repeat(2 , auto);
  281.     place-content: center center;
  282. }
  283. .bott div{
  284.     font-size: 0.875rem;
  285.     text-align: center;
  286. }

上一条：10.28作业下一条：2022.10.21第七课：盒模型和状态伪类的学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多