Wed前端第二次作业

2301_810970392025-08-12 14:32

一、作业1：完成自己学校的官网，动忘内容直接贴，至少三个不同的页面

1、界面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: 180px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .top-logo>img{
            margin-top: 0;
            max-width: 300px;
            height: auto;
        }
        .search{
            width: 500px;
            height: 50px;
            display: flex;
            align-items: center;
        }
        .search>input{
            width: 400px;
            height: 40px;
            border-radius: 20px;
            border: 1px solid blue;
            padding: 0 15px;
        }
        .search>input:focus{
            outline: none;
            border: 1px solid blue;
        }
        .search button{
            width: 100px;
            height: 40px;
            border: none;
            background-image: linear-gradient(blue,white);
            color: white;
            cursor: pointer;
            border-radius: 20px;
        }
        nav{
            width: 100%;
            background-color: blue;
        }
        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="./image.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>

（2）运行结果

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>学校官网2</title>
    <style>
        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 {
            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;
        }
        .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%;
        }
    </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>教师登录</button>
            <button>学生登录</button>
        </div>
    </header>
    <div class="banner">
        <img src="./3.png" alt="">
    </div>
    <div class="course-section">
        <h2>公开课</h2>
        <div class="course-list">
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1645663121424.jpg" alt="课程1">
                <h3>中国特色社会主义理论</h3>
            </div>
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1646626962617.jpg "alt="课程2">
                <h3>思想道德</h3>
            </div>
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1645663064226.jpg" alt="课程3">
                <h3>马克思主义基本原理概论</h3>
            </div>
            <div class="course-item">
                <img src="https://s2.yinghuaonline.com/upfiles/1645663153602.jpg" alt="课程4">
                <h3>中国特色社会主义思想</h3>
            </div>
        </div>
    </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）运行结果

3、界面3

（1）相关代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <mate charset="UTF-8">
    <title>学校官网3</title>
    <style>
        .logo{  
            position:relative;  
            padding:30px 0;
            height:80px;         
            line-height:80px;          
        }
        .logo img{
            height:80px;           
            margin-left:15%;
            vertical-align:middle;
        }
        .fhsy{
            position:absolute;
            left:85%;           
            top:50%;
            transform:translateY(-50%);
            color:#8f9295;
            text-decoration:none;
        }
        .fhsy:hover{ 
            text-decoration:underline;
        }
        .nav,.body{
            height: 550px;
            float: left;
            margin-left: 15px;
        }
        .nav {
            width: 49%;
            height: 550px;
            float: left;
            margin-left: 15px;
            overflow: hidden;  
        }
        .p {
            width: 100%;
            height: 100%;
        }
        .p img {
            width: 100%;
            height: 100%;
            object-fit: cover;  
            display: block;     
        }
        .body{
            width: 49%;
            background:#ede6e6;        
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .login-title{
            font-size:22px;
            text-align:center;
            margin-bottom:25px;
            font-weight:600;
            color:#333;
        }
        .form-group{
            display:flex;
            align-items:center;
            margin-bottom:18px;
        }
        .form-group label{
            width:70px;         
            font-size:14px;
            font-size:14px;
            color:black;
        }
        .form-group input{
            width:100%;
            height:44px;
            padding:0 12px;
            border:1px solid #d9d9d9;
            border-radius:4px;
            font-size:14px;
        }
        .form-group input:focus{
            border-color:#1890ff;
            outline:none;
        }
        .captcha-box{
            display:flex;
            gap:10px;
        }
        .captcha-box input{
            flex:1;
        }
        .captcha-img{
            width:110px;
            height:44px;
            background:#eee;
            border:1px solid #d9d9d9;
            border-radius:4px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            font-weight:bold;
            letter-spacing:2px;
            user-select:none;
        }
        .remember-row{
            display:flex;
            align-items:center;
            margin:15px 0;
            font-size:14px;
            color:#666;
        }
        .remember-row input{
            margin-right:6px;
            width:16px;
            height:16px;
        }
        .forgot{
            margin-left:auto;
            color:#1890ff;
            text-decoration:none;
            font-size:14px;
        }
        .forgot:hover{
            text-decoration:underline; 
        }
        .login-btn{
            width:100%;
            height:46px;
            background:#1890ff;
            border:none;
            border-radius:4px;
            color:#fff;
            font-size:16px;
            cursor:pointer;
        }
        .login-btn:hover{
            background:#40a9ff; 
        }
    </style>
</head>
<body>
    <div class="logo">
            <img src="./在线学堂.png" alt="logo">
            <a class="fhsy" href="#">返回首页</a>
        </div>
    <header class="nav">
        <div class="p">
            <img src="./4.png" alt="">
        </div>
    </header>
    <div class="body">
        <div class="login-card">
            <div class="login-title">学生登录</div>
            <form action="#" method="post">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" placeholder="请输入您的学号" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" placeholder="请输入您的密码" required>
                </div>

                <div class="form-group">
                    <label>验证码</label>
                    <div class="captcha-box">
                        <input type="text" placeholder="请输入验证码" maxlength="5" required>
                        <div class="captcha-img">4DND</div>
                    </div>
                </div>
                <div class="remember-row">
                    <label>
                        <input type="checkbox"> 保持登录状态
                    </label>
                    <a class="forgot" href="#">忘记密码？</a>
                </div>
                <button type="submit" class="login-btn">登录</button>
            </form>
        </div>
    </div>
</body>
</html>

（2）运行结果

二、作业2：自己寻找一个大型的网站,完放至少三个页面，其中必包含登录页面

1、界面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>淘宝登录界面</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;
       }
        .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: 230px;
            height: 350px;
           margin-left: 70px;
            margin-top: 30px;
         }
        .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="./淘宝logo.png" alt="taobao" width="70px" height="70px">
        </div>
        <div class="main2">
            <img src="./5.png" alt="">
        </div>
    </div>
    </div>
    <div class="middle">
        <div class="middle1">
            <div class="inner1">手机扫码登录</div>
            <div  class="inner2"> <img src="./二维码.png" alt="登录" width="230px" height="350px"></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、界面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>
    .box{
        width: 80%;
         margin: auto; 
    }
    .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;
    }
 
    .tou{
        display: inline-block;
       
        margin-left: 10%;
    }
    .top{
        display: inline-block;
        width: 90%;
        height: 10%;
    }
    .shousuo{
        
        width: 600px;
        height: 35px;
        border: 2px solid red;
        float: right;
        margin-right: 25%;
        margin-top: 2%;
    }
 
    .wenzi{
        background-color: rgb(235, 65, 18);
        width: 65px;
        height: 35px;
        margin-left: 100%;
        border: solid 1px red;
        
    }
 
    .ziti{
        color: #f9f8f8;
        margin: auto;
    }
 
    .box2{
 
width: 90%;
height: 45px;
background-color: rgb(253, 250, 250);
margin-left: 5%;
border-radius:8%;
 
}
.hang{
 
font-size: 25px;
color: rgb(61, 62, 62);
 
 
}
.hang:hover{
background-color: rgb(201, 29, 29);
}
</style>
</head>
<body>
<div class="box2">
    <table align="center">
        <tr>
            <td>
    <span class="hang">中国大陆 &nbsp;</span>
    <span class="hang">免费注册 &nbsp;
        <a href=""></a>
    </span>
    <span class="hang">手机逛淘宝 &nbsp;</span>
    <span class="hang">淘宝网首页 &nbsp;</span>
    <span class="hang">我的淘宝 &nbsp;</span>
    <span class="hang">购物车 &nbsp;</span>
    <span class="hang">收藏夹 &nbsp;</span>
    <span class="hang">商品分类 &nbsp;</span>
            </td>
        </tr>
    </table>
    
</div>
<div class="top">
 
<div class="tou">
    <img class="biao" width="300px" height="150px" src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
    
</div>
 
<div class="shousuo" >
<div class="wenzi">
    <span class="ziti">搜索</span>
</div>
</div>
 
</div>
<div class="box">
    <ul class="prods">
        <!-- 编写一个商品链接 -->
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i3/1746750157/O1CN01hfX7Rn1D1x1efnIT8_!!0-saturn_solar.jpg" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">好利来半熟芝士双味2盒奥巧网红蛋糕零食甜品</span>
                    </div>
                    <div class="prod-price">￥41.00</div>
                    <div class="prod-boss">好利来官方旗舰店</div>
                    <div class="prod-sale">月销7000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href=>
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i4/16861003/O1CN01NkHNM11JHQHM028ns_!!4611686018427381579-0-saturn_solar.jpg" alt="">
                    
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">靖江猪肉脯小包零食品蜜汁干吃的肉铺休闲边角料</span>
                    </div>
                    <div class="prod-price">￥55.67</div>
                    <div class="prod-boss">满满无限旗舰店</div>
                    <div class="prod-sale">月销999+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/30869979/O1CN018z8Xvj2NaRIXr5hp2_!!2-saturn_solar.png_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">根筋辣条素牛筋8090后怀旧零食麻辣小吃儿时童年回忆</span>
                    </div>
                    <div class="prod-price">￥12.98</div>
                    <div class="prod-boss">金金美食特麻辣零食</div>
                    <div class="prod-sale">月销7000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i1/2557280153/O1CN01kLoZl91D07XnLrE9g_!!0-saturn_solar.jpg" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">三只松鼠零食大礼包坚果礼盒混合干果休闲小吃食品</span>
                    </div>
                    <div class="prod-price">￥43.51</div>
                    <div class="prod-boss">三只松鼠官方旗舰店</div>
                    <div class="prod-sale">月销4万+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i2/113712902/O1CN01QUhZFP1XJALm3Vxkb_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""> 
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">麻辣王子辣条30小包官方正品</span>
                    </div>
                    <div class="prod-price">￥6.9</div>
                    <div class="prod-boss">惠祥食品</div>
                    <div class="prod-sale">月销5000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/2470120118/O1CN01iMKCch1Ck5hitESO6_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">滇二娃农科院云南特产麻辣土豆片贵州小吃薯片休闲小零食</span>
                    </div>
                    <div class="prod-price">￥7.9</div>
                    <div class="prod-boss">科闲合早</div>
                    <div class="prod-sale">月销6000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i2/52523936/O1CN01FymFaz1ewjsD7Bye6_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">天猫盐津铺子零食大礼包休闲食品小吃辣卤解馋小零食吃货</span>
                    </div>
                    <div class="prod-price">￥39.9</div>
                    <div class="prod-boss">址津铺了合早旅I庄</div>
                    <div class="prod-sale">月销2000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="https://img.alicdn.com/imgextra/i1/5525149018/O1CN012sM0b52GUIh1yuHNp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/5525149018/O1CN012sM0b52GUIh1yuHNp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">泰国风味芒果干500g/1000蜜饯果干果脯网红休闲零食一斤...</span>
                    </div>
                    <div class="prod-price">￥8.85</div>
                    <div class="prod-boss">工王结寺T厂店</div>
                    <div class="prod-sale">月销1000+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i4/382090074/O1CN01ppQ01k1CPwHTXUqgI_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">天猫王小卤无骨鸡爪72g酸辣柠檬脱骨去骨凤爪解馋小零食....</span>
                    </div>
                    <div class="prod-price">￥199</div>
                    <div class="prod-boss">王小与有实店</div>
                    <div class="prod-sale">月销800+</div>
                </div>
            </a>
         </li>
         <li class="prod">
            <a class="prod-href" href="">
                <div class="prod-test-box">
                    <img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i1/122061155/O1CN01pfOWbo1KP2UryMqwo_!!4611686018427380067-0-saturn_solar.jpg" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">雪媚娘蛋黄酥休闲食品早餐糕点点心办公室零食</span>
                    </div>
                    <div class="prod-price">￥8.50</div>
                    <div class="prod-boss">天天特卖工厂</div>
                    <div class="prod-sale">月销6000+</div>
                </div>
            </a>
         </li>     
    </ul>
</div>
</body>
</html>

（2）运行结果

3、界面3

（1）相关代码

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">店铺:回头爱逛小店<img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png_760x760q30.jpg_.webp"height="23px"width="23px" /> </td>
			</tr>
			<tr height="30px">
				<td align="right"><input type="checkbox" name="勾选"/></td>
				<td><img src="https://img.alicdn.com/imgextra/i4/2516668673/O1CN01qbSkVA2DwI1dDg3ib_!!2516668673.jpg_q50.jpg_.webp"width="140px"height="150px"/></td>
				<td  width="35%"> <a href="https://www.taobao.com">白色方领连衣裙女夏2024新款法式复古收腰显瘦气质赫本风长款裙子</a>
				<br/>
				<img src="./6.png"width="150px"height="60px"/>
				</td>
				<td><font color="gainsboro">颜色分类：白色，<br/>尺码：L 建议105-115斤</font> </td>
				<td>
					<del><font color="grey">¥132.00</font></p></del> 
					<p>¥105.60</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">¥105.60</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">店铺:Apple Store 官方旗舰店<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">Apple/苹果 11 英寸 iPad Pro - 标准玻璃面板</a>
					<br/>
					<img src="./7.png"width="200px"height="70px"/>
					</td>
				<td><font color="gainsboro">存储容量：256GB<br/>机身颜色：银色<br>网络类型：无线局域网机型</font> </td>
				<td> 
				<p><color="grey">¥8999.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">¥8999.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>

（2）运行结果

相关推荐
kymjs张涛3 分钟前
零一开源｜前沿技术周刊 #11
前端·javascript·vue.js
会是上一次6 分钟前
企业级WEB应用服务器TOMCAT
java·前端·tomcat
anyup8 分钟前
🚀 2025 最推荐的 uni-app 技术栈：unibest + uView Pro 高效开发全攻略
前端·vue.js·uni-app
小喷友8 分钟前
第 12 章：最佳实践与项目结构组织
前端·react.js·next.js
ze_juejin9 分钟前
Nuxt.js 混合渲染模式（部分静态化+部分动态渲染）
前端
用户527096487449012 分钟前
Vue3 + Element Plus 报错：Cannot read properties of null (reading 'ce')
前端
ze_juejin19 分钟前
Nuxt.js SSR (服务端渲染) 的底层原理
前端
阿邱吖24 分钟前
实习小记（类名添加问题）&&运算符返回结果
前端
aoi33 分钟前
Monaco json 代码块中插入不可编辑，整块删除，整块光标跳过变量块
前端
用户833810251221 小时前
我为什么做PmMock：让接口设计不再头疼
前端·后端
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04[已解决]VSCode右键菜单消失恢复05GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示08KGG转MP3工具|非KGM文件|解密音频09Cursor 终端“卡死/无响应”问题的解法10OpenAI重返开源！GPT-OSS本地部署完全指南