HTML+CSS大学生作业作品练习

已于 2024-02-02 04:04:06 修改
阅读量770 收藏 5
点赞数 25
分类专栏： HTML CSS 文章标签： css 前端 html
于 2024-01-30 20:54:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63780299/article/details/135940901
版权
HTML 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

点击下面链接下载源码及网站所用图片

HTML+CSS大学生作业作品练习icon-default.png?t=N7T8https://download.csdn.net/download/m0_63780299/88795881

截图网页部分图片如下

作品组成

1.网址名称及宣传词

2.导航条，点击导航条内文字可跳转网页对应位置

3.景点、餐厅、酒店、民宿、攻略等网页内容

4.固定在左上角的导航器，点击导航器内文字可跳转网页对应位置

部分代码

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>
    <link rel="stylesheet" href="./一站式旅游服务.css" type="text/css">
</head>
<body>
    <div class="large" id="large2">
        <div class="header">
            <div class="websiteName">
                <div class="left">
                    <h1>一站式旅游服务网</h1>
                    <p>yi zhan shi lv you fu wu wang</p>
                </div>
                <ul class="right">
                    <li>真 诚</li>
                    <li>无 私</li>
                    <li>回 报</li>
                    <li>感 恩</li>
                </ul>
            </div>
            <ul class="nav">
                <li><a href="#part1">景点</a></li>
                <li><a href="#part2">餐厅</a></li>
                <li><a href="#part3">酒店</a></li>
                <li><a href="#part4">民宿</a></li>
                <li><a href="#part5">攻略</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="jingdian">
                <h1 id="part1">景点</h1>
                <ul>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                    <li>
                        <img src="./images/1.png" alt="">
                        <h2>5A级唯美风景景点1</h2>
                        <p>￥100元/张成人票</p>
                        <button>收藏景点</button>
                    </li>
                </ul>
            </div>
            <div class="cantin">
                <h1 id="part2">餐厅</h1>
                <ul>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                    <li>
                        <img src="./images/2.png" alt="">
                        <h2>五星级豪华大餐</h2>
                        <p>￥200元/人</p>
                        <button>收藏餐厅</button>
                    </li>
                </ul>
            </div>
            <div class="jiudian">
                <h1 id="part3">酒店</h1>
                <ul>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <h2>五星级商务酒店</h2>
                        <p>￥250元/间</p>
                        <button>收藏酒店</button>
                    </li>
                </ul>
            </div>
            <div class="minsu">
                <h1 id="part4">民宿</h1>
                <ul>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <h2>海景乡间民宿</h2>
                        <p>￥150元/间</p>
                        <button>收藏民宿</button>
                    </li>
                </ul>
            </div>
            <div class="gonglue">
                <h1 id="part5">攻略</h1>
                <ul>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <h2>一条路线走遍靓丽城市</h2>
                        <p>￥10元/份</p>
                        <button>收藏攻略</button>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="nav2">
            <li>导航</li>
            <li><a href="#large2">顶部</a></li>
            <li><a href="#part1">景点</a></li>
            <li><a href="#part2">餐厅</a></li>
            <li><a href="#part3">酒店</a></li>
            <li><a href="#part4">民宿</a></li>
            <li><a href="#part5">攻略</a></li>
        </ul>
    </div>
</body>
</html>

2.CSS代码

*{
    padding:0;
    margin:0;
}
.large{
    width:1024px;
    margin:0 auto;
    color:black;
}
.header .websiteName{
    width:1024px;
    height: 120px;
    display: block;
}
.header .websiteName h1{
    font-size: 50px;
}
.header .left{
    height: 120px;
    margin:auto 50px;
    float: left;
}
.header .right{
    display: flex;
    height:120px;
    float: right;
}
.header .right li{
    list-style: none;
    width:20px;
    font-size: 20px;
    margin:auto 30px;
}
.header .nav{
    display: block;
    border: 1px solid white;
    background-color: black;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.header .nav li{
    width:210px;
    list-style: none;
    border-right: 1px solid grey;
    text-align: center;
    color:white;
    height:40px;
    line-height: 40px;
}
.header .nav li a{
    color:white;
    text-decoration: none;
}
.content h1{
    color:black;
}
.content div{
    margin:30px auto;
}
.content h2{
    color:black;
}
.content p{
    color:grey;
}
.content div ul{
    margin-top:30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content div ul li{
    list-style: none;
    margin-bottom: 30px;
}
.content div ul li img{
    width:250px;
    height:150px;
}
.content div ul li:hover{
    transform: scale(1.05);
    transition: all 0.5s linear;
}
.content div ul li button{
    border: none;
    color: red;
    background: none;
}
.content div ul li button:hover{
    color:rgb(250, 145, 145);
}
.nav2{
    position: fixed;
    top:20px;
    left:20px;
    width:40px;
}
.nav2 li{
    list-style: none;
    border-bottom: 1px dashed #ddd;
    text-align: center;
    background: #eee;
}
.nav2 li a{
    text-decoration: none;
    color:grey;
    width:40px;
    font-size: 10px;
    line-height: 40px;
}
.nav2 li:first-child{
    background: black;
    border-bottom: none;
    color:white;
}
.nav2 li:last-child{
    border-bottom: none;
}
.nav2 li:nth-child(n+2):hover{
    background: #fff;
}

「已注销」
关注
专栏目录
2022年大一网页期末作业（纯HTML+CSS实现）(1)
QQ_____365392777的博客
08-08 2355
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网......
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
HTML&CSS【作业】
qq_53090745的博客
07-10 402
关于HTML&CSS的学习总结
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML作业，html+css
weixin_43887148的博客
05-16 761
效果图： 主体:HomePage.html HomePage.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <div class="top"> <d...
关于HTML和CSS的作业
m0_49053032的博客
08-26 255
【题目1】: doctype是什么？有什么作用？ DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明；作用是告诉浏览器使用“标准模式”去渲染页面。 【题目2】: < meta charset=“utf-8” >是什么意思? "utf-8"是一种字符编码。< meta charset=“utf-8” >的意思告诉浏览器当前页面采用"utf-8"这种编码方式进行编码解码。 【题目3】: < meta name=
HTML+CSS大作业
而风不止
11-14 1826
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML+CSS+JS大学生作业作品练习
02-03
标题 "HTML+CSS+JS大学生作业作品练习" 暗示了这个项目是针对学习Web前端技术的学生设计的，主要涉及HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术。这些技术是构建网页和交互式用户界面的...
HTML+CSS极简大学生作业作品练习
01-29
本作业练习旨在帮助学生掌握HTML（超文本标记语言）和CSS（层叠样式表）的核心概念，通过实践提升他们的网页设计技能。 在本作业中，学生需要完成以下几个关键部分： 1. **网址名称及宣传词**：这要求学生设计一个...
htm+css网页设计课程作业
12-16
这是我自己做的HTML期末大作业html+css+div二十个页面以上，花了很多时间，不用修改就可以作为自己的作业，也可以作为学习参考html静态网页，里面包含两个html+css+div的代码原件
html5+css页面(慕课网第一份页面作业)
03-27
本资源是针对慕课网上线课程HTML5+CSS3实现动态网页的作业1进行编写的。
HTML期末大作业html+css+div二十个页面以上
06-13
这是我自己做的HTML期末大作业html+css+div二十个页面以上，花了很多时间，不用修改就可以作为自己的作业，也可以作为学习参考html静态网页，里面包含两个html+css+div的代码原件
web前端大作业：基于html+css+js的个人网站开发
12-07
web前端的大作业，目前整个项目都只基于纯纯三件套的技术 做的是个人网站，主要功能包括简陋的图库功能+写个人笔记功能+树洞功能（写点小日记）+代办事项功能 目前前端部分还没开发完，考虑到快要交作业了，打算先把完成作业要求，先打作业交了再说，之后有时间的话会进行优化 另外，由于up主本身是Java后端，后续应该会加上后端功能，或许还会部署上服务器等等，毕竟，有一个纯纯由自己打造的个人空间是每个程序员的梦想。 最后，还有一个小tips：不要对我的前端代码有太高的期待，他可能只是一团能运行的“答辩”。
英雄联盟LOL静态HTML网页制作模板 DIV+CSS学生网页作品代码 游戏题材大学生网页设计作业下载
11-14
在“DW初学者可使用”的描述中，我们可以理解到这款模板是适合初学者练习和学习的，他们可以通过Dreamweaver来探索HTML和CSS的使用，并逐步掌握网页设计的基本技巧。 总的来说，这个“英雄联盟LOL静态HTML网页制作...
学生HTML个人网页作业作品 (水果商城HTML+CSS)
专注于dreamweaver网页设计制作
08-20 705
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
web网页设计期末课程大作业 基于HTML+CSS+JavaScript制作八大菜系介绍舌尖上的美食5页
wx___BJ050106的博客
12-31 544
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML+CSS实战作业
寻梦&之璐
03-11 4062
题目一 实现代码 <!DOCTYPE html> <html> <head> <style type="text/css"> #div1{ background-color: #ffc33c; border: 2px solid #333; height: 300px; width: 300px; float: left; margin-left: 25px; } #div2{ background-color
2024年大一网页期末作业（纯HTML+CSS实现）
最新发布
网页设计与制作 | HTML+CSS+JS
05-20 1202
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关
HTML+CSS+JS大学生个人网站作业模板，A+水平多页面设计
本资源是一份精心设计的HTML学生个人网站作业，涵盖了HTML5期末大作业的要求，旨在帮助大学生完成网页设计课程的实践任务。作业内容丰富多样，包括个人、美食、公司等多个主题，共计19个页面，如电商、宠物、服装、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值