web前端第二次作业

Wcy30765190662025-08-18 11:17

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

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>

运行截图

界面3

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.自己寻找一个大型的网站，完成至少三个页面，其中必须包含登录页面

界面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="athree"> 忘记账号   |</a>
            <a href="" class="afour"> 免费注册</a>
        </div>
        </div>
    </div>
</body>
</html>

运行截图

界面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>
<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>

运行截图

界面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">店铺:回头爱逛小店<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>

运行截图

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示