HTML期末作业-我的大学生活

最新推荐文章于 2024-06-11 10:18:43 发布
最新推荐文章于 2024-06-11 10:18:43 发布
阅读量4.4k 收藏 78
点赞数 11
分类专栏： 大学HTML+CSS+JavaScript期末作业 文章标签： javascript css3 css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41101110/article/details/117946265
版权

 HTML期末大作业-我的大学生活

部分网页源码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的生活</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/life.css">

</head>
<body>
        <nav>
                <ul>
                    <li>我的大学生活</li>
                    <li>    </li>
                    <li> <a href="index.html">首页</a></li>
                    <li> <a href="life.html">我的生活</a></li>
                    <li> <a href="wlife.html">大学生活</a></li>
                    <li> <a href="res.html">注册</a></li>
                    <li> <a href="login.html">登录</a> </li>
                </ul>
            </nav>
    <header>
        <img src="img/1-1G1021242070-L.jpg" alt="">
    </header>  
    <div class="title">
            <h2>大学生活 </h2>
            <p></p>
        </div>    
         <div class="mp4 min-width" style="margin-top:20px">
                        <video width="" height="400" loop="loop" controls="controls">
                                <source src="mp4/1.mp4" type="video/mp4"></source>
                                <source src="myvideo.ogv" type="video/ogg"></source>
                                <source src="myvideo.webm" type="video/webm"></source>
                                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                                    <param name="movie" value="myvideo.swf" />
                                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
                                </object>
                                当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
                            </video>
                &nbsp; &nbsp; &nbsp;
                        <video width="" height="400" loop="loop" controls="controls">
                                <source src="mp4/2.mp4" type="video/mp4"></source>
                                <source src="myvideo.ogv" type="video/ogg"></source>
                                <source src="myvideo.webm" type="video/webm"></source>
                                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                                    <param name="movie" value="myvideo.swf" />
                                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
                                </object>
                                当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
                            </video>
           </div>    
           
            <!-- 外层最大容器 -->
    <div class="wrap min-width">
            <!--包裹所有元素的容器-->
            <div class="cube">
                <!--前面图片 -->
                <div class="out_front">
                    <img src="img/life/1.jpg" class="pic" />
                </div>
                <!--后面图片 -->
                <div class="out_back">
                        <img src="img/life/2.jpg" class="pic" />
                </div>
                <!--左面图片 -->
                <div class="out_left">
                        <img src="img/life/3.jpg" class="pic" />
                </div>
                <!--右面图片 -->
                <div class="out_right">
                        <img src="img/life/4.jpg" class="pic" />
                </div>
                <!--上面图片 -->
                <div class="out_top">
                        <img src="img/life/5.jpg" class="pic" />
                </div>
                <!--下面图片 -->
                <div class="out_bottom">
                        <img src="img/life/6.jpg" class="pic" />
                </div>
    
                <!-- 小正方体 -->
                <!-- <span class="in_front">
                        <img src="img/life/1.jpg" class="pic" />
                </span>
                <span class="in_back">
                        <img src="img/life/2.jpg" class="pic" />
                </span>
                <span class="in_left">
                        <img src="img/life/3.jpg" class="pic" />
                </span>
                <span class="in_right">
                        <img src="img/life/4.jpg" class="pic" />
                </span>
                <span class="in_top">
                        <img src="img/life/5.jpg" class="pic" />
                </span>
                <span class="in_bottom">
                        <img src="img/life/6.jpg" class="pic" />
                </span> -->
            </div>
    
        </div>







    <div class="title">
        <h2>大一军训 </h2>
        <p></p>
    </div>    
        <ul class="uu-life min-width">
            <li><img src="img/life/1.jpg" alt=""></li>
            <li><img src="img/life/2.jpg" alt=""></li>
            <li><img src="img/life/3.jpg" alt=""></li>
        </ul>
        <div class="title">
                <h2>牌坊街 </h2>
                <p></p>
        </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/4.jpg" alt=""></li>
                <li><img src="img/life/5.jpg" alt=""></li>
                <li><img src="img/life/6.jpg" alt=""></li>
            </ul>
        <div class="title">
            <h2>比赛过后 </h2>
            <p></p>
        </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/7.jpg" alt=""></li>
                <li><img src="img/life/8.jpg" alt=""></li>
                <li><img src="img/life/9.jpg" alt=""></li>
            </ul>       
            <div class="title">
                <h2>班级烧烤 </h2>
                <p></p>
            </div>    
                <ul class="uu-life min-width">
                    <li><img src="img/life/10.jpg" alt=""></li>
                    <li><img src="img/life/11.jpg" alt=""></li>
                    <li><img src="img/life/12.jpg" alt=""></li>
                </ul>
                <div class="title">
                    <h2>西湖之旅 </h2>
                    <p></p>
                </div>    
                    <ul class="uu-life min-width">
                        <li><img src="img/life/13.jpg" alt=""></li>
                        <li><img src="img/life/14.jpg" alt=""></li>
                        <li><img src="img/life/15.jpg" alt=""></li>
                    </ul>
            <div class="title">
                <h2>组织部 </h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/16.jpg" alt=""></li>
                <li><img src="img/life/17.jpg" alt=""></li>
                <li><img src="img/life/18.jpg" alt=""></li>
            </ul>  
            <div class="title">
                <h2>三笔一话 </h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/19.jpg" alt=""></li>
                <li><img src="img/life/20.jpg" alt=""></li>
                <li><img src="img/life/21.jpg" alt=""></li>
            </ul> 
            <div class="title">
                <h2>军 协 </h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/22.jpg" alt=""></li>
                <li><img src="img/life/23.jpg" alt=""></li>
                <li><img src="img/life/24.jpg" alt=""></li>
            </ul>  
            <div class="title">
                <h2>海</h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/25.jpg" alt=""></li>
                <li><img src="img/life/26.jpg" alt=""></li>
                <li><img src="img/life/27.jpg" alt=""></li>
            </ul>  
            <div class="title">
                <h2>沙雕时刻</h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/28.jpg" alt=""></li>
                <li><img src="img/life/29.jpg" alt=""></li>
                <li><img src="img/life/30.jpg" alt=""></li>
            </ul>  
            <div class="title">
                    <h2>上课</h2>
                    <p></p>
                </div>    
            <ul class=" min-width uu-lifes">
                <li><img src="img/life/31.jpg" alt=""></li>
                <li><img src="img/life/32.jpg" alt=""></li>
                <li><img src="img/life/33.jpg" alt=""></li>
            </ul> 
            <div class="title">
                <h2>自作食物  </h2>
                <p></p>
            </div>    
            <ul class="uu-lifes min-width">
                <li><img src="img/life/34.jpg" alt=""></li>
                <li><img src="img/life/35.jpg" alt=""></li>
                <li><img src="img/life/36.jpg" alt=""></li>
            </ul> 
            <div class="title">
                <h2>练字时刻  </h2>
                <p></p>
            </div>    
            <ul class="uu-life min-width">
                <li><img src="img/life/37.jpg" alt=""></li>
                <li><img src="img/life/38.jpg" alt=""></li>
                <li><img src="img/life/39.jpg" alt=""></li>
            </ul> 
            <div class="title">
                    <h2>晚会  </h2>
                    <p></p>
                </div>    
                <ul class="uu-life min-width">
                    <li><img src="img/life/40.jpg" alt=""></li>
                    <li><img src="img/life/41.jpg" alt=""></li>
                    <li><img src="img/life/42.jpg" alt=""></li>
                </ul>   
    <footer>
            <p>
                    © 2019 韩山师范学院——计算机与信息工程学院 —姓名:…………—学号:………………
            </p>
        </footer>
</body>
</html>

部分网页截图

 

 

IT--精英联盟
关注
  • 11
    点赞
  • 踩
  • 78
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
HTML大学班级活动网页设计 、大学校园HTML实例网页代码 、本实例适合于初学HTML的同学
qq_38512570的博客
04-10 256
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程
HTML期末学生大作业-班级校园我的校园网页设计与实现html+css+javascript
qq_38512570的博客
04-25 431
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
我的大二web课程设计 使用HTML做一个简单漂亮的页面（纯html代码）
最新发布
网页设计与制作
06-11 354
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
我的大学生活个人主页网站模板,我的大学生活网页制作模板,HTML
09-10
我的大学生活个人主页网站模板个人网站欢迎下载使用
我的大学期末网页作业 仿学校网站制作实现 HTML+CSS西北大学新闻网带psd带js
qq_365392777
10-10 130
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
基于HTML大学生静态网页设计期末作业-静态简历网页源码.zip
06-18
基于HTML大学生静态网页设计期末作业-静态简历网页源码，高分必看，2021年期末高分作业项目。 基于HTML大学生静态网页设计期末作业-静态简历网页源码，高分必看，2021年期末高分作业项目。基于HTML大学生静态网页...
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip
04-17
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip 95分以上必过项目，下载即用，无需修改。小白也可实战。包括字体、背景颜色和内边距等。它还为各个区域设置了特定的背景颜色。 一个基本的网页...
大学生静态网页设计期末作业
12-28
在本项目中，"大学生静态网页设计期末作业"是一个典型的HTML网页设计项目，适用于大学生们在期末时提交，以展示他们的网页设计技能。这个作业旨在检验学生对HTML基础知识的掌握，以及他们如何将这些知识应用到实际...
适合大学生html作业，简单易懂
05-31
使用html，css，js完成的个人主页，适合大学生html小作业，初学者学习，通俗易懂！使用html，css，js完成的个人主页，适合大学生html小作业，初学者学习，通俗易懂！使用html，css，js完成的个人主页，适合大学生html小作业，初学者学习，通俗易懂
sql期末大作业
12-24
sql期末大作业，图书馆管理系统，内容全面，交做也够用啦
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
我的大学生活_mountainmss_html_个人主页_我的大学生活_js
05-01
我的大学生活个人主页网站模板，响应式设计，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、个人介绍、课余生活、学校、职业规划、留言板等HTML个人模板页面。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
STU网页设计
01-02 3306
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
我的大学生活
xiaoyan0526的博客
09-26 1821
大学，多少高三学子向往的地方。大学生活，每一个高中生都梦寐以求的的想去体验一番。至少当时的我是这样。但是，说句实话，大学对那时的我来说只是一种想象中的美好，但究竟如何，我想现在的我才对他有一定的了解。 　　在大学，不会再有老师苦口婆心的教诲和防腐不知疲倦的讲解；不会有每天做不完的习题和试卷；也不会天天为了分数、名次而焦急、苦恼……在体验大学生活的这一个月中，有这样一件事让我印象比较深刻：在大学的第...
DW大学生网页作业制作设计 ——旅游门户网站（21页）HTML+CSS+JavaScript
qq_38512570的博客
03-31 449
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
HTML+CSS+JS大学期末作业
06-08
很高兴能够为您提供帮助！下面是一个 HTML+CSS+JS 的大学期末作业范例，供您参考： 题目：制作一个简单的计算器 要求： 1. 界面简洁美观，符合人机工程学原理； 2. 能够进行加、减、乘、除四则运算； 3. 能够清空当前输入的数字。 实现步骤： 1. 编写 HTML 文件，包含一个计算器界面和几个按钮，如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="calculator"> <input type="text" id="result" value="0"> <div> <button onclick="clearResult()">清空</button> <button onclick="calculate('+')">+</button> <button onclick="calculate('-')">-</button> <button onclick="calculate('*')">*</button> <button onclick="calculate('/')">/</button> <button onclick="getResult()">=</button> </div> <div> <button onclick="inputNumber('7')">7</button> <button onclick="inputNumber('8')">8</button> <button onclick="inputNumber('9')">9</button> </div> <div> <button onclick="inputNumber('4')">4</button> <button onclick="inputNumber('5')">5</button> <button onclick="inputNumber('6')">6</button> </div> <div> <button onclick="inputNumber('1')">1</button> <button onclick="inputNumber('2')">2</button> <button onclick="inputNumber('3')">3</button> </div> <div> <button onclick="inputNumber('0')">0</button> <button onclick="inputNumber('.')">.</button> </div> </div> <script src="script.js"></script> </body> </html> ``` 2. 编写 CSS 文件，样式可以根据自己的喜好进行调整，如下所示： ```css .calculator { width: 200px; margin: 50px auto; border: 1px solid #ccc; padding: 10px; text-align: center; } input[type="text"] { width: 100%; height: 30px; margin-bottom: 10px; text-align: right; font-size: 20px; } button { width: 50px; height: 30px; margin: 5px; font-size: 16px; background-color: #ccc; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #aaa; } ``` 3. 编写 JS 文件，实现计算器的功能，如下所示： ```js var result = document.getElementById("result"); function inputNumber(number) { var value = result.value; if (value == "0") { result.value = number; } else { result.value += number; } } function calculate(operator) { var value = result.value; if (value.indexOf(operator) == -1) { result.value += operator; } } function getResult() { var value = result.value; if (value.indexOf("+") != -1) { var numbers = value.split("+"); result.value = parseFloat(numbers[0]) + parseFloat(numbers[1]); } else if (value.indexOf("-") != -1) { var numbers = value.split("-"); result.value = parseFloat(numbers[0]) - parseFloat(numbers[1]); } else if (value.indexOf("*") != -1) { var numbers = value.split("*"); result.value = parseFloat(numbers[0]) * parseFloat(numbers[1]); } else if (value.indexOf("/") != -1) { var numbers = value.split("/"); result.value = parseFloat(numbers[0]) / parseFloat(numbers[1]); } } function clearResult() { result.value = "0"; } ``` 通过以上三步，就能够完成一个简单的计算器了。当然，还有很多功能可以扩展，比如添加括号、支持负数、增加科学计数法等，这些都可以根据自己的需要进行拓展。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值