Web第二次作业

作业一：学校官网

1.1学校官网

代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校官网1</title>
    <style>
        :root{
            --all-width:1300px;
        }
 
        header.header{
            width: 100%;
            height: auto;
            border-bottom: 1px solid blue;
        }
 
        .top-logo{
            width: var(--all-width);
            height: 130px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
 
        .top-logo>img{
            margin-top: 0;
            max-width: 300px;
            height: auto;
        }
 
        .search{
            width: 300px;
            height: 50px;
            display: flex;
            align-items: center;
        }
 
        .search>input{
            width: 150px;
            height: 40px;
            border-radius: 20px;
            border: 1px solid rgb(211, 211, 229);
            padding: 0 15px;
        }
        
        .search>input:focus{
            outline: none;
            border: 1px solid black;
        }
 
        .search button{
            width: 60px;
            height: 40px;
            border: none;
            /* background-image: linear-gradient(blue,white); */
            color: rgb(22, 112, 195);
            cursor: pointer;
            border-radius: 20px;
        }
 
        nav{
            width: 100%;
            background-color: rgb(31, 61, 150);
        }
 
        nav > ul{
            list-style: none;         
            margin: 0 auto;
            padding: 0;
            max-width: var(--all-width);
            display: flex;            
            justify-content: center;   
            gap: 40px;                 
        }
 
        nav>ul>li{
            line-height: 50px;
        }
 
        nav>ul>li>a{
            display: block;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            padding: 0 10px;
        }
 
        nav > ul > li > a:hover{
            background-color: rgba(255,255,255,.2);
            border-radius: 4px;
        }
 
        .banner{
            width: 100%;
            height: 500px;
            background-image: url();
            background-size: cover;
            background-position: center;
        }
 
        .news-section{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
 
        .news-item{
            width: 30%;
            border: 1px solid #ccc;
            padding: 20px;
            box-sizing: border-box;
        }
 
        .box{
            width: 129%;
            max-width: var(--all-width);
        }
        .box img{
            width: 129%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="top-logo">
            <img src="./校徽.png" alt="校徽">
            <div class="search">
                <input type="text" placeholder="搜索">
                <button>搜索</button>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">学校概况</a></li>
                <li><a href="#">党建工作</a></li>
                <li><a href="#">学院设置</a></li>
                <li><a href="#">人才培养</a></li>
                <li><a href="#">招生就业</a></li>
                <li><a href="#">活力校园</a></li>
                <li><a href="#">校园风采</a></li>
                <li><a href="#">信息服务</a></li>
            </ul>
        </nav>
        <div class="box">
            <img src="./2.png" alt="">
        </div>
    </header>
    <div class="banner"></div>
</body>
</html>

运行结果如下：

1.2教务系统登录页面

代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学校教务系统登录界面</title>
  <style>
    /* 原 logo 区域 */
    .logo{
      position:relative;
      padding:30px 0;
      height:80px;
      line-height:80px;
    }
    .logo img{
      height:80px;
      margin-left:15%;
      vertical-align:middle;
    }
 
    /* 主容器 */
    .flex-container{
      width:1500px;
      height:300px;
      margin:auto;
      background-color:#eee9e9;
      display:flex;
      align-items:center;
    }
 
    /* 左侧大图 */
    .nav{
      width:49%;
      height:550px;
      margin-left:15px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .nav img{
      width:60%;
      height:55%;
    }
 
    /* 右侧登录卡片 */
    .login-card{
      width:50%;
      padding:0 50px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      height:230px;
    }
 
    .login-title{
      font-size:22px;
      font-weight:600;
      color:#333;
      margin-bottom:25px;
    }
 
    .form-group{
      display:flex;
      align-items:center;
      margin-bottom:10px;
    }
    .form-group label{
      width:70px;
      font-size:15px;
      text-align:right;
      margin-right:12px;
    }
 
    /* 新增：限制输入框长度 */
    .input-box{
      width:220px;   /* 想要的宽度，可自行再改 */
    }
    .input-box input{
      width:100%;
      height:30px;
      padding:0 12px;
      border:1px solid #d9d9d9;
      border-radius:4px;
    }
 
    /* 小图区域 */
    .small-banner{
      align-self:center;
      margin-top:10px;
    }
    .small-banner img{
      height:40px;
      width:auto;
    }
    .aone{
        margin-left: 10%;
        color: gray;
       }
    .two{
        color: blue;
       }
    .afour{
        margin-left: 75%;
        color: gray;
       }
    footer a{
      color:#007bff;
      text-decoration:none;
      margin:0 5px;
    }
    footer a:nth-child(2){
      text-decoration:underline;
    }
  </style>
</head>
 
<body>
  <!-- logo -->
  <div class="logo">
    <img src="./4.png" alt="logo">
  </div>
 
  <!-- 主区域 -->
  <div class="flex-container">
    <!-- 左侧大图 -->
    <div class="nav">
      <img src="./5.png" alt="">
    </div>
 
    <!-- 右侧登录 -->
    <div class="login-card">
      <div class="login-title">用户登录</div>
 
      <form action="#" method="post">
        <div class="form-group">
          <label>用户名</label>
          <div class="input-box">
            <input type="text" placeholder="请输入您的学号" required>
          </div>
        </div>
 
        <div class="form-group">
          <label>密码</label>
          <div class="input-box">
            <input type="password" placeholder="请输入您的密码" required>
          </div>
        </div>
      </form>
 
      <!-- 小图 -->
      <div class="small-banner">
        <img src="./6.png" alt="">
      </div>
    </div>
  </div>
 
  <!-- 页脚 -->
  <footer>
    <a href="#" class="aone">湖南强智科技发展有限公司 版权所有</a>
    <a href="#" class="atwo">找回密码</a> 
    <a href="#" class="afour">隐私声明|设为首页</a>
  </footer>
</body>
</html>

运行结果如下：

1.3在线学堂

代码如下：

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>
         :root{
            --all-width:1300px;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        header {
            background-color: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .logo {
            display: flex;
            align-items: center;
        }
        .logo img {
            width: 100%;
            height: 40px;
            margin-right: 10px;
        }
        nav ul {
            list-style: none;
            display: flex;
            align-items: center;
        }
        nav ul li {
            margin: 0 15px;
    
        }
        nav ul li a {
            color: #333;
            text-decoration: none;
            font-weight: bold;
             font: "宋体";
        }
        .search-bar {
            display: flex;
            align-items: center;
        }
        .search-bar input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }
        .search-bar button {
            padding: 8px 12px;
            margin-left: 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .search-bar button:hover {
            background-color: #0056b3;
        }
        .banner {
            background-color: white;
            color: white;
            text-align: center;
            padding: 50px 0;
            font-size: 24px;
            font-weight: bold;
           
        }
        .course-section, .live-section {
            padding: 20px;
        }
        .course-section h2, .live-section h2 {
            margin-bottom: 20px;
        }
        .course-list, .live-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .course-item, .live-item {
            width: 23%;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .course-item img, .live-item img {
            width: 100%;
            height: auto;
        }
        .course-item h3, .live-item h3 {
            padding: 10px;
            margin: 0;
            font-size: 18px;
        }
        footer {
            background-color: #003366;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: relative;
            width: 100%;
        }
       /* 蓝色登录按钮 */
        .btn-login{
            width: 80px;
            height: 40px;
            border: none;
            /* background-image: linear-gradient(blue,white); */
            color: rgb(138, 150, 161);
            cursor: pointer;
            border-radius: 15px;
        }
        /* .btn-login:hover{
        background:#40a9ff;
        } */
 
        /* 红色重置按钮 */
        .btn-reset{
            width: 80px;
            height: 40px;
            border: none;
            /* background-image: linear-gradient(blue,white); */
            color: rgb(195, 212, 224);
            cursor: pointer;
            border-radius: 15px;
            background-color: rgb(19, 119, 241);
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="./在线学堂.png" alt="logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">全部课程</a></li>
                <li><a href="#">公开课</a></li>
                <li><a href="#">云课直播</a></li>
                <li><a href="#">新闻公告</a></li>
                <li><a href="#">数图资源</a></li>
                <li><a href="#">智汇大讲堂</a></li>
            </ul>
        </nav>
        <div class="search-bar">
            <input type="text" placeholder="请输入课程名称">
            <button type="submit">搜索</button>
        </div>
        <div>
            <button class="btn-login">教师登录</button>
            <button class="btn-reset">学生登录</button>
        </div>
    </header>
    <div class="banner">
        <img src="./8.png" alt="">
    </div>
    <div class="course-section">
        <h2>计算机实训</h2>
        <div class="course-list">
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1676421601320.jpg" alt="课程1">
                <h3>5G全网部署仿真与实践</h3>
            </div>
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1655295971670.jpg"alt="课程2">
                <h3>大学计算机基础</h3>
            </div>
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1676365389801.jpg" alt="课程3">
                <h3>机器人制作与创客综合能力实训</h3>
            </div>
            <div class="course-item">
                <img src="https://s3.hongmukej.com/upfiles/1750215334996.png" alt="课程4">
                <h3>数据挖掘</h3>
            </div>
        </div>
    </div>
    <div class="live-section">
        <h2>热门直播</h2>
        <div class="live-list">
            <div class="live-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1650260636816.png" alt="直播1">
                <h3>商务谈判技巧</h3>
            </div>
            <div class="live-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1650260339702.png" alt="直播2">
                <h3>打造高执行力团队</h3>
            </div>
            <div class="live-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1650260472088.png" alt="直播3">
                <h3>高校资产管理的信息化应用</h3>
            </div>
            <div class="live-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1650260500497.png" alt="直播4">
                <h3>新时代智慧校园建设</h3>
            </div>
        </div>
    </div>
</body>
</html>

运行结果如下：

2.淘宝网页

2.1淘宝登录页面

代码如下：

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>
        body{
            height: 630px;
            background-color:rgb(241, 241, 241);
        }
        .main1{
            width: 1280px;
            height:70px ;
            margin: auto;
 
        }
        .top1{
            float: left;
            margin-left: 28px;
        }
       .main2{
            width: 150px;
            height: 70px;
            float: left;
            margin-left: 980px;
       }
        .top2,.top3{
           
            width: 120px;
            height: 5px;
            margin-top: 15px;
            font-size: x-small;   
        }
        .top4,.top5{   
            color:grey;
            text-decoration: none;
        }
        .top5,.top4:hover{
            color: orange;
            text-decoration: none;
        }
        .middle{
            width: 850px;
            height: 520px;
            background-color: white;
            border-radius: 20px;
            margin: auto;
            margin-top: 90px;    
        }
        .middle1{
            width: 350px;
            height: 450px;
            float: left;
            font-family: "黑体"  
        }
        .middle2{
            width: 400px;
            height: 450px;
            margin-left: 80px;
            float: left;
            font-family: "黑体"
        }
        .inner1{
            width: 200px;
            height: 30px;
            font-size: larger;
            margin-left: 70px;
            text-align: center;
            margin-top: 60px;
         }
         .inner2{
            width: 210px;
            height: 210px;
           margin-left: 70px;
            margin-top: 30px;
         }
          .inner3{
            width: 30px;
            height: 20px;
            float: left;
            font-size: x-small;
            margin-left: 70px;
            margin-top: 15px;
            color: gray;                
          }
        .inner4{
            width: 55px;
            height: 20px;
            float: left;
            font-size: x-small;
            color: rgb(255, 98, 0);
            margin-top: 15px;
        }
        .inner5{
            width: 130px;
            height: 20px;
            float: left;
            font-size: x-small;
            margin-top: 15px;
            color: gray;
        }
        .inner6{
           width: 120px;
           height: 20px;
           margin-top: 80px;
           margin-left: 120px;
           color: gray;
           font-size: 15px;
        }
        .inner7{
            width: 100px;
            height: 30px;
            color: rgb(255, 94, 0);
            font-size: larger;
            font-weight: 1000;
            margin-top: 55px;
            margin-left: 75px;
            float: left;
        }
        .inner8{
            width: 100px;
            height: 30px;
            color: black;
            font-size: larger;
            font-weight: 400;
            margin-top: 55px;
            margin-left: 35px;
            float: left;
        }
        .input1,.input2{
            width: 280px;
            height: 40px;
            margin-left: 50px;
            border-radius: 10px;
            margin-top: 30px;
           background-color: rgb(236, 235, 235);
            border: 0cap;
        }
       .input3{
        text-decoration: none;
        margin-left: 280px;
       font-size: x-small;
        color: grey;
       }
       .input4{
            width: 280px;
            height: 40px;
            margin-left: 50px;
            border-radius: 10px;
            margin-top: 70px;
            background-color: rgb(255, 94, 0);
            border: 0cap;
            color: white;
       }
       .aone,.atwo,.athree,.afour{
        text-decoration: none;
        color: grey;
        margin-left: 10px;
       font-size: smaller; 
       }
       .aone{
        margin-left: 45px;
       }
       .input5{
        margin-top: 30px;
       }
    </style>
</head>
<body>
    <div class="main1">
        <div class="top1"><img src="./1.png" alt="taobao" width="70px" height="70px"></div>
        <div class="main2">
        <div class="top2"><a href="" class="top4">网络无障碍</a></div>
        <div class="top3">
            <a href="https://survey.taobao.com/apps/zhiliao/rWq00C2IB?spm=a2107.1.0.0.762211d9Ubw8RQ" class="top4">"登陆页面"改进建议</a>
        </div>
    </div>
    </div>
    <div class="middle">
        <div class="middle1">
            <div class="inner1">手机扫码登录</div>
            <div  class="inner2"> <img src="./二维码.png" alt="登录" width="210px" height="210px"></div>
            <div class="inner3">打开</div>
            <div class="inner4">淘宝app</div>
            <div class="inner5">------点击左上角扫一扫</div>
            <div class="inner6">怎么扫码登录?</div>
        </div>
        <div class="middle2">
            <div class="inner7">密码登录</div>
            <div class="inner8">短信登录</div>
            <input type="text" placeholder="   账号名/邮箱/手机号" class="input1">
            <input type="password" placeholder="   请输入登录密码" class="input2"            >
            <a href="https://passport.taobao.com/ac/password_find.htm?from_site=0&lang=zh_CN&app_name=tb&tracelog=signin_main_pass" class="input3">忘记密码</a>
       
            <button class="input4">登录</button>
            <div class="input5">
            <a href="" class="aone"> 支付宝登录  |</a>
            <a href="" class="atwo"> 钉钉登录   |</a>
            <a href="" class="athree"> 忘记账号   |</a>
            <a href="" class="afour"> 免费注册</a>
        </div>
        </div>
    </div>
</body>
</html>

运行结果如下：

2.2商品浏览

代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝</title>
    <!-- 
        技巧：
            1.布局
            2.小格子
            3.通过调试工具看源代码
     -->
    <style>
        /* 1.所有商品初始窗体 */
        .prod_all{
            width: 1310px;
            height: 1000px;
            margin: auto;
        }
        li{
            list-style: none;
            width: 214px;
            height: 328px;
            display: inline-block;
        }
        li:hover{
            border: 1px solid orangered;
            border-radius: 12px;
        }
        img{
            border-radius: 12px;
            margin-left: 2.8px;
        }
 
        .introduce{
            font-size: 16px;
            line-height: 24px;
        }
        .price{
            color: orangered;
            font-weight: bold;
            font-family: "黑体";
            font-size: 20px;
            margin-top: 10px;
        }
        .price>span:nth-child(1){
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="prod_all">
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.zkj41crMe0aY0J23v79kFQHaLG?w=186&h=279&c=7&r=0&o=5&dpr=1.5&pid=1.7">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.utmYf4g4Ptzp7YKj70Xf0QHaNu?w=183&h=340&c=7&r=0&o=5&dpr=1.5&pid=1.7">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.F1ixU7wHM1v0H7qpCzytmwHaHs?w=186&h=193&c=7&r=0&o=5&dpr=1.5&pid=1.7">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.SlM3Liq_GZd7-TQImM5SiwHaJ4?w=186&h=248&c=7&r=0&o=5&dpr=1.5&pid=1.7">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.dD2BGHvtqo-u9Rtkqv92BAHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.5&pid=1.7">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.HTr1Wr0puWIQoTPygv1PugHaIk?w=186&h=215&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
        <li>
            <!-- 1.图片 -->
             <div>
                <img width="200px"  height="250px" src="data:image/webp;base64,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">
             </div>
             <!-- 2.商品介绍 -->
              <div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
              <!-- 3.价格 -->
               <div class="price"><span>￥</span><span>238</span></div>
        </li>
    </div>
    
</body>
</html>

运行结果如下：

2.3购物车

代码如下：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>淘宝购物车界面</title>
		<style>
		.Tbsl{
			background-color: #FFFFFF;
			height: 80px;
			margin: 0px 0px 24px;
		}
		.box{
			
			text-align: center;
			overflow: hidden;
		}
		button{
			height: 18px;
			width: 22px;
			text-align: center;
			border: #F5F5F5;	
		}
		</style>
	</head>
	<body>
		<table>		
			<tr>
				<td width="68%"><img src="./淘宝购物车.png" /> </td>
				<td>
					<div id="Tbsl">
						<select style=" outline: none; width:50px;height:32px;border: 3px solid orangered;border-right: none;color: gainsboro;">
							<option selected="selected" disabled="disabled">宝贝</option>
							<optgroup label="鞋靴"></optgroup>
							<optgroup label="服装"></optgroup>
						</select><input type="search" style="outline: none; border: 3px solid orangered; border-left: none; border-right: none; height: 31px; width:250px;"/><button style="color: #F5F5F5; width: 50px; height: 32px;background-color: red;border-color: red;">搜索</button> 
					</div>
				</td>
			</tr>
		</table>
		<table  border="0" width="1300px"height="500px">
			<thead style="height: 30px;">
				<th align="right"><input type="checkbox" name="全选"/></th>
				<th align="left">全选</th>
				<th colspan="2">商品信息</th>
				<th>单价</th>
				<th width="5%">数量</th>
				<th>金额</th>
				<th>操作</th>
			</thead>
			<tr height="30px">
				<td align="right"><input type="checkbox" name="勾选"/></td>
				<td colspan="10">店铺:MAC魅可官方店<img src="口红.png"height="23px"width="23px" /> </td>
			</tr>
			<tr height="30px">
				<td align="right"><input type="checkbox" name="勾选"/></td>
				<td><img src="口红.png"width="140px"height="150px"/></td>
				<td  width="35%"> <a href="https://www.taobao.com">【直播专享】MAC/魅可大子弹头口红唇膏哑光显色669/602/666</a>
				<br/>
				<img src="./9.png"width="150px"height="60px"/>
				</td>
				<td><font color="gainsboro">版本<br/>哑光大子弹头 | 浓郁持色 大宠粉666</font> </td>
				<td>
					<del><font color="grey">¥225.00</font></p></del> 
					<p>¥185.00</p>
				</td>
				<td align="center" width="10%">
					<div class="box">
						<button>+</button><input type="number" value="1" style="border: none; height: 16px;width:30px;text-align: center;"/><button>-</button>
					</div>
					</td>
				<td>
					<font color="red">¥185.00</font></td>
				<td>
					<a href="#">移入收藏夹</a>
					</br>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr height="30px">
				<td align="right"><input type="checkbox" name="勾选"/></td>
				<td colspan="10">店铺:cogi高资旗舰店<img src= https://gw.alicdn.com/imgextra/i2/O1CN01Mo9BIf1DOOTmHgOR1_!!6000000000206-2-tps-102-48.png height="23px"width="30px" /> </td>
			
			</tr>
			<tr height="30px">
				<td align="right">
					<input type="checkbox" name="勾选"/></td>
				<td>
					<img src="./面膜.png"width="140px"height="150px" />
				</td>
				<td>
					<a href="https://www.taobao.com">[重磅升级]高姿面膜女蜂巢补水保湿舒缓积雪草修护熬夜肌官方正品</a>
					<br/>
					<img src="./10.png"width="200px"height="70px"/>
					</td>
				<td><font color="gainsboro">【升级版22片】3.0版到手2盒+2片<br/>【升级版组合装】3.0版锁水1盒+焕采1盒+修护2盒+7片</font> </td>
				<td> 
				<p><color="grey">¥199.00</p> 
				</td>
				<td> 
				<div class="box">
					<button>+</button><input type="number" value="1" style=" border: none; height: 16px;width: 30px;text-align: center;"/><button>-</button>
					
				</td>
				<td><font color="red">¥199.00</font> </td>
				<td><a href="#">移入收藏夹</a>
					</br>
					<a href="#">删除</a> </td>
			</tr>
			<tfoot align="right" style="background-color: gainsboro;">
				<tr>
					<td colspan="8">合计（不含运费）：0元<span>&nbsp;</span>
					<input type="button" value="结算"style="background-color: red; width: 34px;height: 25px;color: #F5F5F5;border: none;"/>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

运行结果如下：