第二次作业

最新推荐文章于 2024-10-30 19:10:39 发布
最新推荐文章于 2024-10-30 19:10:39 发布
阅读量189 收藏
点赞数 3
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84253936/article/details/139508463
版权

1.导航栏

<!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>
        div{
            width: 800px;
            height: 30px;
            background-color: rgb(28, 38, 73);
            margin: auto;
            border-radius: 10px;
            text-shadow: 5px 5px 5px gray;
            color: aliceblue;
            box-shadow: 0px 5px gray;
        }

        ul{
            text-align: center;
            margin: auto;
        }

        li{
            width: 46px;
            list-style: none;
            display: inline-block;
        }

        li:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <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>
    </div>
</body>
</html>

运行截屏

2.编写三个网页

1简写的某学校主页

<!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>
        .head{
            background-color: rgb(9, 88, 214);
            height: 160px;
        }
        .A{
            margin-top: 38px;
            margin-left: 130px;
        }
        span{
            color: white;
            position: relative;
            left: 230px;
            bottom: 80px;
        }
        .B{
            position: relative;
            right: 53px;
            bottom: 45px;
        }
        button{
            width: 35px;
            height: 35px;
            margin: 0px;
            padding: 0px;
            border: 0px;
            position: relative;
            bottom: 27px;
            right: 58px;
        }
        .body{
            background-color: white;
            width: 1280px;
            height: 40px;
            margin-top: 5px;
        }
        ul{
            float: left;
            margin-left: 180px;
        }
        .o > li{
            float: left;
            list-style: none;
            width: 130px;
            height: 20px;
            text-align: center;
            font-size: large;
            position: relative;
            bottom: 8px;
        }
        .foot{
            margin: 0px;
            height: 400px;
            width: 100%;
        }
        .f1{
            margin-left: 100px;
        }
        .f1,.f2,.f3{
            width: 420px;
            height: 300px;
            float: left;
        }
        li{
            width: 500px;
        }
        .item{
            width: 100%;
            height: 160px;
            background-color: rgb(0, 84, 203);
            color: white;
            position: relative;
            top: 80px;
        }
        .item1,.item2{
            display: inline-block;
        }
        .item1{
            font-size: 14px;
            position: relative;
            bottom: 200px;
            left: 110px;
        }
        .item2{
            text-align: center;
            position: relative;
            left: 530px;
            bottom: 160px;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="./logo_jwc.png" alt="" class="A">
        <span>学院首页 | 加入收藏</span>
        <input type="text" placeholder="SEAECH" class="B" style="width: 220px;height: 40px;">
        <button><label><img src="c:\Users\A\Pictures\Screenshots\png1.png" alt=""></label></button>
    </div>
    <div class="body">
        <ul class="o">
            <li><img src="c:\Users\A\Desktop\home.png" alt="" height="20px"></li>
            <li>规章制度</li>
            <li>通知公告</li>
            <li>新闻动态</li>
            <li>质量监控</li>
            <li>教务系统</li>
            <li>教学改革</li>
            <li>教学简报</li>
        </ul>
    </div>
    <div class="foot">
        <img src="./W020190530389886662813.jpg" alt="" width="100%" max-width="100%" height="260px">
        <div class="f1"><h1><small>新闻动态</small></h1>
            <li style="list-style: none;"><small>教务处组织召开2024版本科人才培养方案修订工作推进</small></li>
        </div>
        <div class="f2"><h1><small>通知公告</small></h1>
            <li>关于2024年学院教师数字化教学竞赛结果的公示</li>
            <li>2024届校级优秀毕业设计(论文)推荐名册</li>
            <li>关于开展2024年院级课程思政教学竞赛的通知</li>
            <li>2024年“专升本”考试准考证打印及考试须知</li>
            <li>关于2024年春季学期重修安排的通知</li>
        </div>
        <div class="f3"><h1><small>下载中心</small></h1>
            <li>教务处邮箱</li>
            <li>2023年6月全国大学生四六级成绩</li>
            <li>中南林业科技大学涉外学院免修课程申请表</li>
            <li>2022年12月大学英语四六级成绩</li>
            <li>2022年6月大学英语四六级成绩</li>
        </div>
    </div>
    <div class="item">
        <div class="item1">   
            <p>
                Copyright ©2011 - 2019 中南林业科技大学涉外学院 域名备案信息: 湘教QS4-201405-010072  湘ICP备09017705号 
                <br>
                <br>
                地址：湖南省长沙市望城区丁字湾街道 邮箱: znlswdzb@163.com
            </p>
        </div>
        <div class="item2">
            <img src="c:\Users\A\Desktop\weChat.jpg" alt="">
            <p>官方微信</p>
        </div>
    </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>Document</title>
    <style>
        .head{
            text-align: center;
            margin-top: 60px;
            margin-right: 750px;
        }
        .body{
            width: 1900px;
            height: 350px;
            background: url(./bgtp.gif) no-repeat ;
            background-size: 1500px 350px;
            position: relative;
        }
        .a{
            position: absolute;
            top: 50px;
            left: 800px;
        }
        span{
            position: absolute;
            left: 800px;
        }
        .foot{
            position: relative;
            left: 200px;
            color: gray;
        }
        .b{
            position: absolute;
            top: 226px;
            left: 980px;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="./index_02.png" alt="">
    </div>
    <div class="body">
        <div class="a">
            <br>
            <big><strong>用户登录</strong></big>
            <br><br>
            用户名:&nbsp;&nbsp;&nbsp;<input type="usename">
            <br><br>
            密 &nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;<input type="password">
        </div>
        <div class="b">
            <img src="c:\Users\A\Desktop\dlau.gif" alt="">
            <img src="c:\Users\A\Desktop\dlau1.gif" alt="">
        </div>
    </div>
    <div class="foot">湖南强智科技发展有限公司 版权所有
        <span>隐私声明|设为首页</span>
    </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>
        li{
            margin-right: 15px;
            display: inline-block;
        }
        .b{
            float: left;
            border: 1px solid rgb(0, 171, 213);
            background-color: azure;
            list-style: none;
            position: relative;
            left: 1000px;
            margin-top: 0px;
            text-align: center;
        }
        span{
            position: relative;
            left: 110px;
        }
        .c{
            background-color: rgb(106, 188, 255);
            width: 100%;
            height: 30px;
        }
        .d{
            list-style: none;
            margin-left: 310px;
        }
        .box{
            display: grid;
            width: 900px;
            grid-template-columns: repeat(6,1fr);
            height: 400px;
            grid-template-rows: repeat(3,1fr);
            grid-gap: 5px;
            margin-left: 350px;
            grid-template-areas: 
                "One One Two Three Four Four"
                "One One Two Five Six Six "
                "Seven Eight Nine Ten Eleven Twelve"
            ;
        }
        .box > *{
            background-color: rgb(0, 153, 255);
            text-align: center;
            color: white;
            font-size: 14px;
        }

        /* 引用地图 */
        One{grid-area: One;}
        Two{grid-area: Two;}
        Three{grid-area: Three;}
        Four{grid-area: Four;}
        Five{grid-area: Five;}
        Six{grid-area: Six;}
        Seven{grid-area: Seven;}
        Eight{grid-area: Eight;}
        Nine{grid-area: Nine;}
        Ten{grid-area: Ten;}
        Eleven{grid-area: Eleven;}
        Twelve{grid-area: Twelve;}
        .e{
            border-top: 1px solid gray;
            width: 1000px;
            margin-left: 300px;
            color: gray;
            text-align: center;
        }
        p1{
            position: relative;
            top: 80px;
        }
        p2{
            position: relative;
            top: 80px;
        }
        p3{
            position: relative;
            top: 20px;
        }
        p4{
            position: relative;
            right: 80px;
            top: 10px;
        }
    </style>
</head>
<body> 
    <div class="a">
        <span><img src="c:\Users\A\Desktop\index_logo.gif" alt="" width="460px" height="60"></span>
        <ul class="b">
            <li><img src="c:\Users\A\Desktop\Nsb_top_p1.jpg" alt="" width="30px" height="30px"></li>
            <li><img src="c:\Users\A\Desktop\Nsb_top_p1.jpg" alt="" width="30px" height="30px"></li>
            <li><img src="c:\Users\A\Desktop\Nsb_top_p1.jpg" alt="" width="30px" height="30px"></li>
            <li><img src="c:\Users\A\Desktop\Nsb_top_p1.jpg" alt="" width="30px" height="30px"></li>
        </ul>
    </div>
    <div class="c">
        <ul class="d">         
                <li title="首页">首页</li>
                <li title="我的桌面">我的桌面</li>
                <li title="学籍成绩">学籍成绩</li>
                <li title="培养管理">培养管理</li>
                <li title="考试报名">考试报名</li>
                <li title="教学评价">教学评价</li>
        </ul>
    </div>
    <br>
    <br>
    <div class="box">
        <One><p1><img src="c:\Users\A\Desktop\tp1.png" alt=""><br>个人信息</p1></One>
        <Two><p2><img src="c:\Users\A\Desktop\tp2.png" alt=""><br>选课中心</p2></Two>
        <Three><p3><img src="c:\Users\A\Desktop\tp3.png" alt=""><br>学生评教</p3></Three>
        <Four><p4><img src="c:\Users\A\Desktop\tp5.png" alt=""><br>已收留言</p4></Four>
        <Five><p3><img src="c:\Users\A\Desktop\tp4.png" alt=""><br>培养方案</p3></Five>
        <Six><p4><img src="c:\Users\A\Desktop\tp6.png" alt=""><br>已收公告</p4></Six>
        <Seven><p3><img src="c:\Users\A\Desktop\tp7.png" alt=""><br>课程成绩查询</p3></Seven>
        <Eight><p3><img src="c:\Users\A\Desktop\tp8.png" alt=""><br>教学周历</p3></Eight>
        <Nine><p3><img src="c:\Users\A\Desktop\tp9.png" alt="" height="60px"><br>授课计划查询</p3></Nine>
        <Ten><p3><img src="c:\Users\A\Desktop\tp10.png" alt="" height="60px"><br>未获得学分成绩查询</p3></Ten>
        <Eleven><p3><img src="c:\Users\A\Desktop\tp11.png" alt="" height="60px"><br>学籍卡片</p3></Eleven>
        <Twelve><p3><img src="c:\Users\A\Desktop\tp12.png" alt="" height="60px"><br>修改密码</p3></Twelve>
    </div>
    <br>
    <br>
    <div class="e"><small>Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</small></div>
</body>
</html>

运行截屏

欧耶～～
关注
第二次上机作业 大连理工大学
Mrrunsen的博客
11-21 3587
7.20 顾客到银行办理业务时往往需要等待一段时间,而等待时间的长短与多种因素有关,比如,银行业务员办理业务的速度,顾客等待排队的方式等。为比较哪种排队方式使顾客等待的时间更短,银行各随机抽取10名顾客,他们在办理业务时所等待的时间(单位:分钟)如下。7.25 从两个总体中各抽取一个n1＝n2＝250的独立随机样本，来自总体1的样本比例为p1＝40%，来自总体2的样本比例为p2＝30%。π1－π2的90%的置信区间为。求该校大学生平均上网时间的置信区间,置信水平分别为90%,95%和99%。
第二次作业.zip
11-24
第二次作业.zip
重庆大学研究生课程——图论及其应用（第二次作业）
j9errhrgu的博客
01-19 1103
重庆大学研究生课程——图论及其应用（第二次作业）
linux 第二次作业
m0_54177787的博客
12-03 1141
熟悉根目录
BUAA数据结构与程序设计第二次作业复习
zxy13149285776的博客
05-09 1272
昨天写了第一次作业的复习汇总:，感觉第二遍写比第一遍写要顺畅很多，也有了很多新的想法。今天就再把第二次作业复习复习，祝大家代码顺利哦~
数据库第二次作业
weixin_51290359的博客
04-13 2499
数据库第二次作业第二次作业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 6997
web前端第二次作业
国科大大数据系统与大规模数据分析课程第二次作业(Graph Coloring)
程哥哥的一亩三分地
04-18 6004
​ WordCount的变体，主要考察对Hadoop MapReduce框架编程的熟练度，几乎无坑点。​。
Java第二次作业
GamesDuan的专栏
03-10 1583
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 2953
第二次作业，同学们虽然在认真完成，但是或多或少都出了一些错误，一班张婷，四班武仪人，六班杨泽宇，八班候雯洁，安锦阳，刘净圆，这些同学完成的较为出色，错误较少。 注：排名不分先后 作业内容：根据BMI指数分类并输出 下面写一个包含典型错误的程序 n=input(体重,千克) m=input(身高，米) k=n/(m**2) if k&lt;18.5: print(1) if 18....
北航操作系统课程-第二次作业-操作系统引论2
JeremyZhao1998的博客
03-07 4772
北京航空航天大学计算机学院-2020春操作系统课程，理论课第二次作业，内容为操作系统引论。 题目作者为北航计算机学院操作系统课程组，答案为博主原创。水平有限，无法保证作答正确性，如有错误敬请批评指正。部分作答源自百度谷歌等其他资料，如有侵权联系删除。
江苏开放大学计算机应用基础形考第二次作业答案.pdf
07-14
江苏开放大学计算机应用基础形考第二次作业答案.pdf 这是江苏开放大学计算机应用基础课程的第二次作业答案，旨在指导学生学习 Excel 制作行业状况调查表的实践目标。该作业分为两个部分：企业总体状况和企业人才...
川大网络教育-政治科学原理第一次作业第二次作业.doc
12-06
川大网络教育-政治科学原理第一次作业第二次作业.doc
《计算机应用基础》(二)-第二次作业.pdf
11-20
《计算机应用基础》(二)-第二次作业
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1016
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1241
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 636
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
echarts 遍历多个图表，并添加resize缩放
最新发布
licongmingli的博客
10-30 191
遍历echarst多个图表，并添加独立的缩放函数
Vue3用户关注与粉丝列表展示
m0_74963840的博客
10-27 634
粉丝列表小组件
数据科学导论第二次作业解析
资源摘要信息:"数据科学导论第二次作业" 数据科学是一门涉及多个学科的交叉领域，它利用科学方法、过程、算法和系统从结构化和非结构化数据中提取知识和见解。第二次作业是数据科学导论课程的学习过程中一个重要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值