【代码】第三次web作业。-CSDN博客

本文链接：https://blog.csdn.net/xhp309578/article/details/140084669

<!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">
    <title>登录</title>
    <style>
        body {
            background-color: #f0eff2;

        }

        form {
            width: 400px;
            height: 380px;
            background-color: #ffffff;
            opacity: 80%;
            text-align: center;
            padding: 20px 120px;
            font-size: 18px;
            border-radius: 10px;
            margin: 50px auto;
        }

        .textinput {
            height: 40px;
            width: 300px;
            padding: 0 35px;
            border: none;
            background: #F8F9F9;
            font-size: 15px;
            /* 给文本框加上阴影 */
            border-radius: 5px;
            color: saddlebrown;
        }

        .login {
            width: 110px;
            height: 40px;
            text-align: center;
            border-radius: 5px;
            background-color: #ff6200;
            color: #fff;
            border: none;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        img {
            margin-left: 200px;
            margin-top: 50px;
            width: 150px;
        }
    </style>
</head>

<body>
    <img src="./img/logo.png" alt="">
    <form>
        <h2>登录</h2>
        <p>用户名<br />
            <input type="text" class="textinput" placeholder="请输入用户名" />
        </p>
        <p>密码<br />
            <input type="password" class="textinput" placeholder="请输入密码" />
        </p>
        <p>
            <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
        </p>
        <p>
            <button class="login"> <a href="./home.html">登录</a> </button>
        </p>
        <p class="smtxt">还没有账户？注册
        </p>
    </form>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            line-height: 0;
        }


        li {
            list-style: none;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }


        /* 头部 */
        .header {
            width: 100%;
            height: 40px;
            background-color: #ff510093;
        }

        .nav ul li {
            float: left;
        }

        .nav ul li {
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-size: 12px;
        }

        .nav ul .fengexian,
        .login i {
            height: 12px;
            margin: 16px 7px 0;
        }

        .shopcar {
            width: 140px;
            height: 40px;
            line-height: 40px;
            float: right;
            color: #afafaf;
            font-size: 12px;
            margin-left: 20px;
            text-align: center;
        }

        .login {
            height: 40px;
            line-height: 40px;
            float: right;
            color: #afafaf;
            font-size: 12px;
        }

        .search {
            height: 100px;
            position: relative;
        }

        .search .logo {
            width: 150px;
            position: absolute;
            left: 0;
            top: 22px;
        }

        .search .search_nav {
            width: 614px;
            height: 100px;
            position: absolute;
            left: 234px;
        }

        .search .search_nav li {
            float: left;
            padding: 0 10px;
        }

        .search_nav li {
            display: inline-block;
            height: 100px;
            line-height: 100px;
            font-size: 14px;
            color: #ff5000;
            font-weight: 700;
        }

        .main {
            height: 460px;
            position: relative;
            margin-bottom: 14px;
        }

        .main .main_list {
            width: 234px;
            height: 420px;
            background-color: #ffffff70;
            float: left;
            padding: 20px 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }

        .main .main_list li {
            height: 42px;
            line-height: 42px;
        }

        .main .main_list li {
            padding-left: 30px;
            font-size: 12px;
            color: #fff;
        }

        .main .main_contant {
            width: 1226px;
            height: 100%;
            float: left;
        }

        .main .main_contant i {
            display: block;
        }

        .main .main_contant i img {
            width: 1226px;
            height: 460px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .main .toggle {
            height: 70px;
            width: 992px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -35px;
            z-index: 999;
        }

        .toggle span {
            height: 70px;
            width: 40px;
            cursor: pointer;
            line-height: 70px;
            text-align: center;
            font-size: 32px;
            color: #d2d2d2;
        }

        .main .main_contant ol {
            width: 90px;
            height: 10px;
            position: absolute;
            right: 34px;
            bottom: 25px;
            z-index: 99;
        }

        .main .main_contant ol li {
            float: left;
            width: 6px;
            height: 6px;
            border: 2px solid #939393;
            background-color: #8e8e8e;
            margin: 0 4px;
            border-radius: 50%;
        }

        .current {
            background-color: #fff !important;
        }


        /* tab 栏 */
        .tab_contant {
            width: 992px;
            height: 460px;
            position: absolute;
            top: 0;
            left: 234px;
            z-index: 1;
        }

        .tab_contant li {
            list-style: none;
            width: 990px;
            height: 458px;
            background-color: #fff;
            border: 1px solid #ccc;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .product {
            height: 170px;
            margin-bottom: 52px;
        }

        .product .list {
            height: 170px;
            width: 234px;
            background-color: #ffeee6;
            float: left;
        }

        .product .list ul li {
            float: left;
            height: 85px;
            width: 78px;
            position: relative;
            cursor: pointer;
            opacity: 0.6;
        }

        .product .list span {
            position: absolute;
            bottom: 20px;
            text-align: center;
            width: 100%;
            color: ff5000;
            font-size: 12px;
        }

        .product .show1,
        .show2,
        .show3 {
            height: 170px;
            width: 316px;
            background-color: skyblue;
            float: left;
            margin-left: 15px;
        }

        .product .show1 {
            margin-left: 14px;
        }

        .product img {
            width: 316px;
            height: 170px;
        }

        .footer {
            height: 25px;
            padding-left: 56px;
            width: 1114px;
            margin: 0 auto;
        }

        .footer span {
            color: #616163;
            font-size: 16px;
            height: 25px;
            display: inline-block;
            line-height: 25px;
            vertical-align: top;
            cursor: pointer;
        }

        .footer i {
            display: inline-block;
            height: 25px;
            width: 1px;
            background-color: #616163;
            margin: 0 54px;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav w">
            <ul>
                <!--导航栏部分-->
                <li>TWR商城</li>
                <li class="fengexian"></li>
                <li>嘿嘿</li>
                <li class="fengexian"></li>
                <li>哈嗨</li>
                <li class="fengexian"></li>
                <li>云服务</li>
                <li class="fengexian"></li>
                <li>金融</li>
                <li class="fengexian"></li>
                <li>细品</li>
                <li class="fengexian"></li>
                <li>TWR开发平台</li>
                <li class="fengexian"></li>
                <li>企业团购</li>
                <li class="fengexian"></li>
                <li>资质证明</li>
                <li class="fengexian"></li>
                <li>协议规划</li>
                <li class="fengexian"></li>
                <li>下载App</li>
                <li class="fengexian"></li>
                <li>Select Location</li>
            </ul>
            <div class="shopcar"> 购物车（2） </div>
            <div class="login"> <span>用户22104</span> </div>
        </div>
    </div>
    <div class="search w">
        <img src="./img/logo.png" class="logo" alt="">
        <div class="search_nav">
            <ul>
                <li>啥啥</li>
                <li>--品牌</li>
                <li>淘宝手机</li>
                <li>淘宝家电</li>
                <li>淘宝超市</li>
                <li>拍卖</li>
                <li>会员</li>
                <li>生鲜</li>
            </ul>
        </div>

    </div>
    <div class="main w">
        <div class="main_list">
            <ul>
                <li>手机、电话卡</li>
                <li>电视盒子</li>
                <li>笔记本 显示器 平板</li>
                <li>家电 插线板</li>
                <li>出行 穿戴</li>
                <li>智能路由器</li>
                <li>电源配件</li>
                <li>健康 儿童</li>
                <li>耳机 音响</li>
                <li>生活 箱包</li>
            </ul>
        </div>

        <div class="main_contant"> <i>
                <img src="img/q.jpg" alt="" style="display: block;">
        </div>
        <a href="./detail.html">
            <div class="tab_contant">
                <ul>
                    <li>手机、电话卡</li>
                    <li>电视盒子</li>
                    <li>笔记本 显示器 平板</li>
                    <li>家电 插线板</li>
                    <li>出行 穿戴</li>
                    <li>智能路由器</li>
                    <li>电源配件</li>
                    <li>健康 儿童</li>
                    <li>耳机 音响</li>
                    <li>生活 箱包</li>
                </ul>
            </div>
        </a>
    </div>
    <div class="product w">
        <div class="list">
            <ul>
                <li> <i></i> <span>商品秒杀</span> </li>
                <li> <i></i> <span>企业团购</span> </li>
                <li> <i></i> <span>F码通道</span> </li>
                <li> <i></i> <span>粉卡</span> </li>
                <li> <i></i> <span>以旧换新</span> </li>
                <li> <i></i> <span>话费充值</span> </li>
            </ul>
        </div>
        <div class="show1"> <img src="img/list1.jpg" alt=""> </div>
        <div class="show2"> <img src="img/list2.jpg" alt=""> </div>
        <div class="show3"> <img src="img/list3.jpg" alt=""> </div>
    </div>
    <div class="footer"> <span>预约维修服务</span> <i></i> <span>7天无理由退货</span> <i></i> <span>15天免费换货</span> <i></i>
        <span>满99包邮</span> <i></i> <span>全国300余家售后网点</span> </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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      width: 100%;
      height: 50px;
      background-color: #ff9b6c;
      margin-bottom: 40px;
      line-height: 50px;
      font-size: 20px;
      line-height: 50px;
      color: #fff;
    }

    .all {
      width: 100%;
      padding-bottom: 50px;
      margin-top: -80px;
      margin-bottom: 1px;
    }

    .all .content {
      margin-top: 0px;
      float: left;
    }

    #content {
      /* 	border: 1px solid red; */
      width: 1200px;
      margin-top: -80px;
      margin: auto;
      display: flex;
    }

    #content .a1 {
      float: left;
      margin-left: 10px;
    }

    #content .a1 .big {
      /* float: left; */
      width: 450px;
      height: 450px;
    }

    #content .a11 ul li {
      list-style: none;
      float: left;
      margin: 20px 15px;
    }

    .a2 {
      float: left;
      margin-left: 90px;
    }

    .a21 .color {
      color: #758188;
    }

    .a21 .a211 {
      background-color: #f2f5f8;
      color: #758188;
    }

    .a21 .a211 .prices,
    .shic {
      margin-left: 40px;
    }

    .a21 .a211 .prices {
      color: #ff4f0d;
      font-size: 35px;
      font-weight: bold;
    }

    .a21 .a211 .prices2 {
      text-decoration: line-through;
    }

    .a21 .a211 .yis {
      margin-left: 230px;
    }

    .a22 {
      background-color: #f6f9fb;
    }

    .a22 span {
      margin-top: 10px;
    }

    .a22 .neir {
      margin-left: 50px;
    }

    .a24 {
      margin-top: 10px;
    }

    .a25 {
      margin-top: 30px;
    }

    .a25 button {
      display: inline-block;
      width: 200px;
      height: 60px;
      border-radius: 30px;
      margin-left: 30px;
    }

    .a25 .a25color1 {
      background-color: #ff4f0d;
      color: white;
      font-size: 20px;
      font-weight: bolder;
      border: 1px #ff4f0d solid;
    }
  </style>
</head>

<body>
  <div class="nav">
    <span class="back">
      <</span> <span class="shop">商品详情
    </span>
  </div>
  <div id="all">
    <div id="content">
      <div class="a1">
        <img class="big" src="./img/monile.jpg_.webp" />
      </div>
      <div class="a2">
        <h2>
          顺丰速发【24期免息】Apple/苹果 iPhone 15 Pro 国行正品5G新款手机官方旗舰店直降全新分期13官网14pro max</h2>
        <div class="a21">
          <div class="a211">
            <span class="color">售价</span>
            <span class="prices">¥6999</span>
          </div>
          <div class="a22">
            <span class="color">详情</span>
            <span class="neir">
              原色钛金属 蓝色钛金属 白色钛金属 黑色钛金属</span>

          </div>
          <div class="a24">
            <span class="color">选择</span>
          </div>
          <div class="a25">
            <button class="a25color1">加入购物车</button>
            <button class="">查看购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>