第三次作业:完成一套网站页面(至少三个页面)-学校官网、电商，必须包登录页

最新推荐文章于 2024-09-15 21:53:26 发布

2301_81717288

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量177

点赞数 1

文章标签：前端学习 javascript webstorm

本文链接：https://blog.csdn.net/2301_81717288/article/details/140673834

版权

第一个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        *{
            margin: 0px;
        }
        .box{
            width:100% ;
            height: 1300px;
            border: 1px solid red;
            background-image: url(http://jwc.scnucas.com/images/login_jd_bg.jpg);
            text-align: center;

        }
        .inbox1{
            width: 500px;
            height: 60px;
            background-image: url(http://jwc.cdcas.com/images/index_new/d_login_banner.png);
            margin: auto;
            margin-top: 200px;
        }
        .login{
            width: 400px;
            height: 400px;
            margin: auto;
            margin-top: 20px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.875);
            border: 1px solid black;
            border-radius:5%;
            line-height: 2.6;
        }
        li{
            list-style: none;
        }
        select,button,input{
            width: 330px;
            height: 35px;
            border-top-left-radius:5px;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-width: 1.5px;
            border-color: rgb(0, 255, 208);
        }
        .inbox2{
            margin-top: 10px;
        }
        .inbox3{
            margin-top: 10px;
        }
        .inbox4{
            margin-top: 10px; 
        }
        .inbox5{
            margin-top: 10px; 
        }
        .inbox6{
            text-align: left;
            padding-left: 30px;
        }
        .inbox8{
            margin-top: 60px;
        }
        .inbox9{
            color:#ffffff;
        }
        a{
            text-decoration: none;
        }
        span{
            font-size: 30px;
            font-weight: 10;
            
        }
        .img2{
            width: 500px;
            height: 60px;
            margin: auto;
        }
    .user{
        font-size: 0px;
    }
    </style>

</head>
<body>
    <div class="box">
        <div class="inbox1"></div>
        <div class="login">
            <span>账号登录</span>
         <form action="">
            <div class="inbox2">
                <li class=""><select name="" id="">
                    <option value="1">学生</option>
                    <option value="2">教师</option>
                </select>
                </li>
            </div>
                <div class="inbox3">
                    <li><input type="text" placeholder="请输入你的账号"></li>
                </div>
                <div class="inbox4">
                    <li><input type="password" placeholder="请输入你的密码"></li>
                </div>
                <div class="inbox5">
                    <li><input type="text" name="验证码" id="" placeholder="验证码                                              正常情况 免验证码"></li>
                </div>
                <div class="inbox6">
                    <li><a href="javascript:void(0)" onclick="parent.doMobileReset()" style="color:#f87409;font-family:微软雅黑">忘记密码？</a></li>
                </div>
                <div class="inbox7">
                   <li><button type="submit">登录</button></li> 
                </div>
         </form>
        </div>
        <div class="inbox8">
            <a href="http://jwc.cdcas.com/_data/version.html">运行环境指南</a>
        </div>
        <div class="inbox9">
            <td align="center" style="color: #ffffff; width: 600px;">
                "Copright 2000-2024 By"
                <a href="http://www.kingosoft.com/">青果软件有限集团</a>
                All Rights Reserved

								
            </td>
        </div>
    </div>
</body>
</html>

运行截图：

第二个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px ;
        }
        a{
            text-decoration: none;
            color: gray;
        }
        li,span{
            list-style: none;
            display: inline-block;
            color: gray;
            font-size: ;
        }
        .boxTop{
            width: 100%;
            height: 35px;

        }
        .boxS{
            width: 100%;
            height: 97px;
       
        }
        .box1{
            width: 25%;
            height: 33px;
            margin-left: 100px;
        
            float: left;
        }
        .box2{
            width: 45%;
            height: 35px;
            margin: auto;
            margin-right: 10px;
   
        }
        .img1{
            width: 90px;
            height: 55px;
            background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01a69z6z1hJklCkBqOU_!!6000000004257-2-tps-174-106.png);
            background-size: 100%;
            margin-left: 80px;
            margin-top: 20px;
            float: left;
        }
        .boxB1{
            width: 100%;
            height: 70px;
        }
        .boxB1Img{
            width: 50px;
            height: 50px;
            background-image: url(https://gw.alicdn.com/imgextra//6a/23/TB1ssfQPVXXXXc_aXXXSutbFXXX.jpg_110x10000q50.jpg_.webp);
            background-size: 90%;
            background-position: center;
            border-radius: 50%;
            margin-top: 10px;
            margin-left: 80px;
            float: left;
        }
        .boxB1Img2{
            width: 40px;
            height: 20px;
            background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN01VD9Iap25oweneR31D_!!6000000007574-2-tps-120-60.png_.webp);
            background-size: 90%;
            background-position: center;
            margin-top: 10px;
            margin-left:140px
        
        }
        .st{
            width: 15px;
            height: 15px;
            background-image: url(https://img0.baidu.com/it/u=2802467134,2008148961&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300);
            background-size: 89%;
            background-position: center;
            float: left;
        }
        .boxB1Img3{
            width: 700px;
            height: 20px;
           
            margin-top: -30px;
            margin-left: 260px;
        }
        
        .boxB2Img{
            width: 30%;
            height: 600px;
          
            margin-left: 80px;
            margin-top: 10px;
            float: left;
            background-image: url(https://gw.alicdn.com/imgextra/i1/3190498043/O1CN01py7zHK29HkQli2NIH_!!0-item_pic.jpg_240x10000Q75.jpg_.webp);
        }
        .boxB2W{
            width: 30%;
            height: 600px;
            margin: auto;
           
            margin-top: 30px;
           
        }
        .money{
            width: 200px;
            height: 30px;
            margin: 10px 10px 10px 10px;
        }
        .money > span{
            color: chocolate;
            font-size: 30px;
        }
        .cc{
            width: 600px;
            height: 200px;
         
        }
        .cc1{
            width: 170px;
            height: 60px;
            background-color: rgb(211, 81, 21);
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            display: inline-block;
            text-align: center;
        }
        .cc2{
            width: 170px;
            height: 60px;
            background-color: orange;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            display:inline-block;
            margin-left: -10px;
            text-align: center;
        }
        .cc span{
            font-size: 20px;
            font-weight: 1000;
            color: white;
        }
        
    </style>
</head>
<body>
    <div class="boxMax">
        <div class="boxTop">
            <div class="box1">
                <table>
                    <tr>
                        <td>
                            <a href="https://www.tmall.com/">天猫首页</a>
                        </td>
                        <td width="20px"></td>
                        <td>
                            喵，欢迎来到天猫
                        </td>
                        <td width="20px"></td>
                        <td>
                            <a href="https://login.taobao.com/?redirectURL=https%3A%2F%2Fdetail.tmall.com%2Fitem.htm%3FpriceTId%3D214782e817216154276135625ecbec%26utparam%3D%257B%2522aplus_abtest%2522%253A%2522e92bc955556d12aaae826f681d263c49%2522%257D%26id%3D688831798652%26xxc%3Dad_ztc">请登录</a>
                        </td>
                        <td width="20px"></td>
                        <td>
                            <a href="https://register.tmall.com/">免费注册</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="box2">
                <table>
                    <tr>
                            <td>
                                <a href="https://i.taobao.com/my_taobao.htm">我的淘宝</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://cart.tmall.com/cart/myCart.htm?from=btop">购物车 </a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://shoucang.taobao.com/shop_collect_list.htm?scjjc=c1">收藏夹</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://pages.tmall.com/wow/portal/act/app-download?scm=1027.1.1.1">手机版</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://www.taobao.com/">淘宝网</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="">淘宝网</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://mai.taobao.com/">网页无障碍</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://mai.taobao.com/">商家支持</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://mai.taobao.com/seller_admin.htm">商家中心</a>
                            </td>
                            <td width="20px"></td>
                            <td>
                                <a href="https://consumerservice.taobao.com/">联系客服</a>
                            </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="boxS">
            <div class="img1">
                <a href="https://www.tmall.com/">
            </a>
            </div>
        </div>
        <div class="boxB1">
            <div class="boxB1Img"></div>
            <div>
                <span>东成食品专营</span>
                <div class="boxB1Img2">
                    <a href=""></a>
                </div>
            </div>
            <div class="boxB1Img3">
                <table>
                    <tr>
                    <div  width="100px" height="20px" style="background-color: rgb(255, 238, 230);-color: ;">
                        <td>5.0</td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                    </div>
                        <td width="15px"></td>
                        <td>
                            <span>平均13小时发货</span>
                        </td>
                        <td width="15px"></td>
                        <td>
                            <span>客服平均10秒回复</span>
                        </td>
                        <td width="15px"></td>
                        <td>
                            <span>物流体验良好</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <a href=""></a>
            </div>
            <div>
                <a href=""></a>
            </div>
        </div>
        <div class="boxB2">
            <div class="boxB2Img"></div>
            <div class="boxB2W">
                <h1>零食大礼包网红零食组合整箱送女友生日礼物解馋小吃休闲食品儿童</h1>
                <table>
                    <tr>
                        <div class="money">
                            <span>
                                ￥69.9
                            </span>
                            <a href=""></a>
                        </div>
                    </tr>
                   
                    <tr>
                        <div class="cc">
                            <div class="cc1"><span>立即购买</span></div>
                            <div class="cc2"><span>加入购物车</span></div>
                        </div>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

运行截图：

第三个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
        }
        a{
            text-decoration: none;
            color: gray;
            margin: 5px;
            font-size: 15px;
            font-weight: 400;
        }
        a:hover{
            color: red;
        }
        .img1{
            width: 50%;
            height: 300px;
          
            margin: auto;
            margin-top: 70px;
            margin-left: 700px;
        }
        .img2{
            width: 20%;
            height: 200px;
            /* border: 1px solid red; */
            margin: auto;
            margin-top: 70px;
            margin-left: 450px;
            background-image: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=4160404059,3510095719&fm=179&app=35&f=PNG?w=152&h=152&s=4B011B62C7C2A4A561BFC59A03008093);
            float: left;
            background-size: 100%;
            text-align: center;
        }
        .search{
            width: 45%;
            height: 40px;
            border: 1px solid red;
            margin: auto;
            margin-top: -10px;
            margin-left: 540px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            float: left;
            align-items: center;
            justify-content: center;
        }
        /* input{
            width: 79%;
            height: 30px;
            border-color: white ;
        } */
        .boxA2{
            float: left;
            width: 56%;
            height: 500px;
            margin: auto;
            margin-top: 80px;
            margin-left: 410px;
            border-radius: 10px;
            box-shadow: 5px 5px 10px 5px rgb(236, 232, 232);
        }
        .span1{
            width: 20%;
            height: 30px;
            margin: auto;
            color: gray;
        }
        .searchInput{
            width: 75%;
            height: 100%;
            outline: none;
            border: none;
            align-items: center;
            justify-content: center;
        }
        .baidu{
            width: 20%;
            height: 100%;
            margin-right: 0px;
            background-color: rgb(0, 119, 255);
            float:right;
            font-size: 26px;
            font-weight: 500;
            text-align: center;
            color: white;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .baidu:hover{
            background-color: rgb(99, 99, 241);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxA1">
            <div class="boxTop">
            <table>
                <tr>
                    <td><a href="http://news.baidu.com/">新闻</a></td>
                    <td><a href="https://www.hao123.com/?src=from_pc_logon/">hao123</a></td>
                    <td><a href="http://map.baidu.com/">地图</a></td>
                    <td><a href="http://tieba.baidu.com/">贴吧</a></td>
                    <td><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></td>
                    <td><a href="http://image.baidu.com/">图片</a></td>
                    <td><a href="https://pan.baidu.com/?from=1026962h/">网盘</a></td>
                    <td><a href="https://wenku.baidu.com/?fr=bdpcindex">文库</a></td>
                    <td><a href="http://www.baidu.com/more/">更多</a></td>
                </tr>
            </table>
            </div>
            <div class="img1">
                <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
            </div>
            <div class="search">
                <form action="https://www.baidu.com">
                    <div class="">
                    <input type="text" class="searchInput">
                    <button class="baidu">百度一下</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="boxA2">
            <p>我的导航</p>
            <div class="img2"></div>
            <div class="span1"><span>您还没有添加任何网址</span></div>
        </div>
    </div>
</body>
</html>

运行截图