第二次作业

已于 2024-06-04 02:14:59 修改
阅读量205 收藏
点赞数 1
文章标签： 前端
于 2024-06-04 02:13:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwandxy/article/details/139428057
版权

作业1.使用css+html完成导航栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>导航栏</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Popins",sans-serif;
    }
    
    .container{
        background: #ffbdc9;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    nav{
        background: #fff;
        border-radius: 50px;
        padding: 10px;
        box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
    }
   
    nav ul li{
        list-style: none;
        display: inline-block;
        padding: 13px 35px;
        margin: 10px;
        font-size: 18px;
        font-weight: 500;
        color: #777;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 0.5s;
    }
    
    nav ul li::after{
        content: "";
        background: #f44566;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
        opacity: 0;
        transition: top 0.5s,opacity 0.5s;
    }
   
    nav ul li:hover{
        color: #fff;
    }
   
    nav ul li:hover::after{
        top: 50%;
        opacity: 1;
    }
    </style>
    <body>
        <div class="container">
            <nav>
                <ul>
                    <li>游戏1</li>
                    <li>游戏2</li>
                    <li>游戏3</li>
                    <li>游戏4</li>
                    <li>游戏5</li>
                    <li>游戏6</li>
                    <li>游戏7</li>
                    <li>游戏8</li>
                    <li>游戏9</li>
                </ul>
            </nav>
        </div>
    </body>
</html>

 

作业2.使用css+html完成至少三个页面，必须包含登陆页面

1.教务系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统</title>
</head>
<style>
    .jw{
        margin-bottom: -5px;
    }
    
    .dh{
        background-color: rgb(236, 227, 227);
        width: 1230px;
        height: 45px;
        margin-top: 0;
    }
   
    .dh li{
        display: inline-block;
        text-align: center;
        margin-top: 10px;
        font-family: "楷体";
        font-size: 20px;
        padding-left: 50px;
    }
    
    .bp,img{
        margin-top: -10px;
    }
    
    .container{
        display: inline;
        width: 350px;
        height: 400px;
    }
    
    .a1{
        float: left;
        width: 330px;
        height: 350px;
        text-align: center;
        font-family: "楷体";
    }
   
    .a2{
        float: left;
        width: 370px;
        height: 350px;
        text-align: center;
        font-family: "楷体";
    }
    
    .a2 li{
        list-style-type: none;
    }
   
    .a3{
        float: right;
        width: 500px;
        height: 400px;
        text-align: left;
        font-family: "楷体";
        font-size: 15px;
    }
   
    .a3 h2{
        text-indent: 200px;
    }
   
   
    .a3 li{
        list-style-type: none;
    }
   
    .bottom div{
        margin-bottom: -50px;
        display: inline-block;
    }
   
    .bottom1{
        line-height: 180px;
        text-align: center;
        width: 180px;
        height: 180px;
        text-align: center;
        background-color:green ;
    }
   
    .bottom2{
        line-height: 180px;
        text-align: center;
        width: 180px;
        height: 180px;
        background-color: deepskyblue;
    }
   
    .bottom .bottom3{
        line-height: 180px;
        text-align: center;
        width: 180px;
        height: 180px;
        background-color: darkorange;
    }
  
    .bottom .bottom4{
        line-height: 180px;
        text-align: center;
        width: 180px;
        height: 180px;
        background-color: cornflowerblue;
    }
  
    .final{
        width: 1270px;
        height: 50px;
        background-color: rgb(36, 112, 206);
        text-align: center;
        margin-top: 51px;
    }
</style>
<body>
    <div class="jw">
        <img src="./教务处.png" width="1270px" height="120">
        <ol class="dh">
            <li>规章制度</li>
            <li>通知公告</li>
            <li>新闻动态</li>
            <li>质量监控</li>
            <li>教务系统</li>
            <li>教学改革</li>
            <li>教学简报</li>
        </ol>
    </div>
    <div>
        <img src="./校图.png" width="1270px" height="200px">
    </div>
    <div class="container">
        <div class="main"></div>
            <div class="a1">
                <h2>新闻动态</h2>
                <p>2024年湖南省普通高校教师课堂教学竞赛校内选拔赛顺利进行</p>
                <p>教务处组织召开2024年本科人才培养方案修订工作推进会</p>
            </div>
            <div class="a2">
                <h2>通知公告</h2>
                <ul>
                    <li>关于中南林业科技大学涉外学院2024年专升...</li>
                    <li>关于开展2019年度校级-流本科专业建设点...</li>
                    <li>院教发〔2024]7号关于做好2024届毕业论...</li>
                    <li>院教发〔2024]8号关于2024届毕业设计(..</li>
                    <li>关于开展2024年院级课程思政教学竟赛的通知</li>
                    <li>2024年“专升本”考试准考证打印及考试须知</li>
                    <li>中南林业科技大学涉外学院2024年专升本免...</li>
                    <li>关于2024年春季学期重修安排的通知</li>
                    <li>中南林业科技大学涉外学院2024年专升本免...</li>
                </ul>
            </div>
            <div class="a3">
                <h2>下载中心</h2>
                <ul>
                    <li>教务处邮箱<br>
                    <span>2020-12-23</span>
                    </li><hr>
                    <li>2023年6月全国大学生四六级成绩<br><span>2023-08-24</span></li><hr>
                    <li>中南林业科技大学涉外学院免修课程...<br><span>2023-5-28</span></li><hr>
                    <li>2022年12月大学英语四六级成绩<br><span>2023-2-23</span></li><hr>
                    <li>2022年6月大学英语四六级成绩<br><span>2022-6-3</span></li><hr>
                    <li>中南林业科技大学涉外学院教室申请表<br><span>2022-12-2</span></li><hr>
                    <li>转专业申请表<br><span>2020-12-23</span></li><hr>
                    <li>2021年12月大学英语四六级成绩<br><span>2021-12-23</span></li><hr>
                    <li>2021年6月大学英语四六级成绩<br><span>2021-12-23</span></li><hr>
                </ul>
        </div>
        <div class="bottom">
            <div class="bottom1">学籍学业</div>
            <div class="bottom2">综合管理</div>
            <div class="bottom3">教改项目</div>
            <div class="bottom4">下载中心</div>
        </div>
    </div>
    <div class="final">
        <p>
            Copyright &copy;2011 - 2019 中南林业科技大学涉外学院 &nbsp;域名备案信息：&nbsp;湘教QS4-201405-010072 &nbsp; 湘ICP备09017705号 <br>
            地址：湖南省长沙市望城区丁字湾街道 邮箱：znlswdzb@163.com
        </p>
    </div>
</body>
</html>

2.登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        .container{
            position: relative;
        }
        
        .background-image 
        {
            width: 100%;
            height: auto;
        }
       
        .text-box {
            position: absolute;
            top: 50%;
            left: 70%;
            transform: translate(-30%,-30%);
            text-align: center;
            color:black;
        }
        
        .text-box h1{
            margin: 0;
        }
        
        .text-box p{
            margin: 10px 0;
        }
        
        .container img{
            right: 200px;
        }
        
        .end{
            font-family: "微软雅黑";
            font-size: 12px;
        }
    </style>
</head>
<body>
        <img src="./头.png" alt="">
    <form>
        <div class="container"> 
            <img src="./图标.jpg" class="background-image"  width="80%" height="300px">
            <div class="text-box">
                <h1>用户登录</h1><br>
                <div>
                    <p> 用户名:<input type="text" name="username"></p>
                    <p>密&nbsp;&nbsp;码: <input type="password" name="password"></p>
                    <button>登录</button>
                </div>
            </div>
            <br>
            <div class="end">湖南强智科技发展有限公司 版权所有
            <span>
                <a href="#">隐私声明</a>|<a href="#">设为首页</a>
            </span>
            </div> 
        </div>
    </form>
</body>
</html>

3.淘宝商品页 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝商品页</title>
 
     <style>
        *{
            margin-top: 0;
        }
        .dhl{
            height: 25px;
            background-color: rgb(216, 216, 216);
            margin-top: 0px;
        }
        .dhl li{
            display: inline-block;
            list-style: none;
            margin-top: 5px;
            font-size: 10px;
            padding-left: 20px;
 
        }
      
        .dhl li:hover{
            background-color: chocolate;
        }
 
        .container li{
            width: 234px;
            height: 366px;
            list-style-type: none;
            display: inline-block;
            padding-top:22px ;
            padding-left:20px ;
            padding-right:20px ;
            margin-right: -5px;
            border-top: 1px solid #9b9b9b;
            border-left:1px solid #9b9b9b;
            border-right:1px solid #9b9b9b;
            position: relative;
          
        }
 
        [name="address"]{
            font-size: 14px;
            border: none;
        }
        
        .container li:hover{
            border: 1px solid red;
        }
        
        a{
            text-decoration: none;
        }
      
        .image{
            text-align: center;
        }
 
       .introduce{
            font-family: "pingfangSC-Regular";
            font-size: 14px;
            color: #9b9b9b;;
            line-height: 20px;
            padding-top: 15px;
        }
 
        .prace{
            font-size: 18px;
            color: red;
            line-height: 30px;
        }
 
        .store{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 30px;
        }
 
        .sale{
            color: #9b9b9b;
            font-size: 12px;
            line-height: 50px;
            text-align: right;
        }
 
        .search{
            width: 1200px;
            height: 100px;
            display: inline-block;
            position: relative;
            padding-top: 0%;
        }
      
        .search a{
            font-size: 10px;
            margin-left: 12px;
            text-align: center;
            color: #666;
        }
        
        .red{
            color: rgb(255, 50, 50);
        }
       
        .submit{
            background-color: red;
        }
       
        .text{
            border: none;
            width: 400px;
            height: 20px;
            border: 2px solid red;
        }
 
       .search-border{
            width: 600px;
            height: 100px;
            margin-top: 20px;
            margin-left: 400px;
        }
    
     </style>
</head>
<body>
    <div class="dhl">
       <ul>
        <li > <select name="address" >
            <option value="china">中国大陆</option>
            <option value="tw">中国台湾</option>
            <option value="xg">中国香港</option>
            <option value="hg">韩国</option>
            <option value="mg">美国</option>
        </select></li>
        <li>账号管理</li>
        <li>手机逛淘宝</li>
        <li>网页无障碍</li>
        <li>淘宝网首页</li>
        <li>我的淘宝</li>
        <li>购物车</li>
        <li>收藏夹</li>
        <li>商品分类</li>
        <li>免费开店</li>
        <li>千牛卖家中心</li>
        <li>帮助中心</li>
       </ul>
    </div>
    <div class="search">
       
        <div class="search-border">
            <form method="post" action="" class="box">
                <input type="text" class="text" name="key" placeholder="潮流女装">
                <input type="submit" class="submit" value="搜索">
            </form>
        <br>
        <a href="" class="red" target="_blank">一淘限时抢</a>
        <a href="" class="" target="_blank">口红</a>
        
        <a href="" class="" target="_blank">洗衣液</a>
        
        <a href="" class="" target="_blank">女鞋</a>
        
        <a href="" class="" target="_blank">洗衣液</a>
        
        <a href="" class="" target="_blank">粉饼</a>
        
        <a href="" class="" target="_blank">散粉</a>
        
        <a href="" class="" target="_blank">床垫</a>
        
        <a href="" class="" target="_blank">针织衫</a>
        
        <a href="" class="" target="_blank">连衣裙</a>
        
        <a href="" class="" target="_blank">运动鞋</a>
        </div>
    </div>
 
 
         <!--商品列表展示  -->  
    <div class="container">
 
       <!-- 所有的商品信息 -->
        <ul>
            <!-- 单个商品信息 -->
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2.文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="store"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
 
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce" ><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png" width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png " width="230" height="210" alt=""></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        <li>
            <a href="">
                <!-- 1.图片 -->
                <div class="image"><img src="./潮流女装.png " width="230" height="210" alt="" ></div>
                <!-- 2,。文字说明 -->
                <div class="introduce"><span>美式穿搭花灰色杆条短袖t恤女夏季新款高级感字母印花纯棉情侣装</span></div>
                <!-- 3.价格 -->
                <div class="prace"><span>￥28.50</span></div>
                <!-- 4.店铺 -->
                <div class="boss"><span>zti旗舰店</span></div>
                <!-- 5.月销 -->
                <div class="sale"><span>月销&nbsp;0</span></div>
 
            </a>
        </li>
        </ul>  
        
    </div>
    <div>版权
        <!--底下是一些版权数据  -->
    </div>
 
 
</body>
</html>

xwandxy
关注
第二次上机作业 大连理工大学
Mrrunsen的博客
11-21 3495
7.20 顾客到银行办理业务时往往需要等待一段时间,而等待时间的长短与多种因素有关,比如,银行业务员办理业务的速度,顾客等待排队的方式等。为比较哪种排队方式使顾客等待的时间更短,银行各随机抽取10名顾客,他们在办理业务时所等待的时间(单位:分钟)如下。7.25 从两个总体中各抽取一个n1＝n2＝250的独立随机样本，来自总体1的样本比例为p1＝40%，来自总体2的样本比例为p2＝30%。π1－π2的90%的置信区间为。求该校大学生平均上网时间的置信区间,置信水平分别为90%,95%和99%。
第二次作业.zip
11-24
第二次作业.zip
linux 第二次作业
m0_54177787的博客
12-03 1117
熟悉根目录
BUAA数据结构与程序设计第二次作业复习
zxy13149285776的博客
05-09 1246
昨天写了第一次作业的复习汇总:，感觉第二遍写比第一遍写要顺畅很多，也有了很多新的想法。今天就再把第二次作业复习复习，祝大家代码顺利哦~
数据库第二次作业
weixin_51290359的博客
04-13 2421
数据库第二次作业第二次作业1. SQL命令查询选修2号课的学生学号，成绩，并按照成绩降序输出；2. SQL命令查询各系院名称及学生人数；3. SQL命令查询选修2号课程的学生学号，姓名及成绩；4. SQL命令查询学生李勇选修的课程名称及成绩；5. SQL命令查询每个学生学号及选修课程的总学分数。6. SQL命令查询每个学生姓名及选修课程号及成绩（没选课的学生姓名也要输出） 第二次作业 1. SQL命令查询选修2号课的学生学号，成绩，并按照成绩降序输出； select sno,grade fro
web前端第二次作业
plzdonotlietome的博客
01-22 6640
web前端第二次作业
国科大大数据系统与大规模数据分析课程第二次作业(Graph Coloring)
程哥哥的一亩三分地
04-18 5970
​ WordCount的变体，主要考察对Hadoop MapReduce框架编程的熟练度，几乎无坑点。​。
Java第二次作业
GamesDuan的专栏
03-10 1561
Java第二次作业 【程序11】 题目：有1、2、3、4四个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？ 【程序12】 题目：企业发放的奖金根据利润提成。利润(I)低于或等于10万元时，奖金可提10%；利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可可提成7.5%；20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于4
第二次作业 讲解及展示
少说，多做。
08-06 2944
第二次作业，同学们虽然在认真完成，但是或多或少都出了一些错误，一班张婷，四班武仪人，六班杨泽宇，八班候雯洁，安锦阳，刘净圆，这些同学完成的较为出色，错误较少。 注：排名不分先后 作业内容：根据BMI指数分类并输出 下面写一个包含典型错误的程序 n=input(体重,千克) m=input(身高，米) k=n/(m**2) if k&lt;18.5: print(1) if 18....
工程伦理第二次作业
热门推荐
yaojunjie2010
10-20 2万+
“明乎经变之事,然后知轻重之分,可与适权矣”,这句话给我们的启示是,在工程职业实践中遇到伦理困境时,工程伦理的规范性要求是“经”,()是“权”,工程师在现实的工程实践情境中应该做到原则性与灵活性的统一。 A、对职业章程的规范要求因时因境作出变通和调整 B、无条件遵循职业伦理章程的规范要求去行动 C、按照约定俗成的标准或以往的经验去行动 D、服从上级的命令去行动 正确答案：A 从工程师现实的职业行为过程看,职业章程的规范引导与他对具体工作实践场景的分析、判断,以及特定情景中可能的行为方式的权衡、选择等,都
江苏开放大学计算机应用基础形考第二次作业答案.pdf
07-14
江苏开放大学计算机应用基础形考第二次作业答案.pdf 这是江苏开放大学计算机应用基础课程的第二次作业答案，旨在指导学生学习 Excel 制作行业状况调查表的实践目标。该作业分为两个部分：企业总体状况和企业人才...
川大网络教育-政治科学原理第一次作业第二次作业.doc
12-06
川大网络教育-政治科学原理第一次作业第二次作业.doc
《计算机应用基础》(二)-第二次作业.pdf
11-20
《计算机应用基础》(二)-第二次作业
day01
JiangMeiXue的博客
09-25 252
目录。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 136
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 792
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1935
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 712
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值