html+css旅游网页设计实现网页设计期末作业_旅游网页设计htmlcss资源-CSDN下载

共38个文件

jpg：30个

css：4个

html：4个

版权申诉

html

html5

css3

5星 · 超过95%的资源 111 浏览量 2021-06-25 09:31:35 上传评论 64 收藏 7.95MB ZIP 举报

在本项目中，"html+css 旅游网页设计实现网页设计期末作业"是一个学生为完成网页设计课程的期末任务所创建的项目。这个作业涵盖了四个关键页面：主页、登录页面、注册页面和商品购物页面。通过使用HTML、HTML5、CSS以及CSS3，学生旨在构建一个功能完整且具有视觉吸引力的旅游主题网站。以下是关于这些技术及页面设计的详细知识点： 1. **HTML（超文本标记语言）**： - HTML是网页的基础结构语言，用于定义网页内容的结构，如标题、段落、链接、图片等。 - HTML5是HTML的最新版本，引入了新的元素，如<header>、<nav>、<section>、<article>和<footer>，使网页内容的组织更清晰，更利于SEO优化。 - 学生可能使用了HTML5的新特性，如离线存储（AppCache）、拖放功能（Drag and Drop API）和媒体元素（<video>、<audio>）来提升用户体验。 2. **CSS（层叠样式表）**： - CSS用于控制网页的样式，包括颜色、字体、布局和响应式设计。 - CSS3增加了许多新特性，如选择器（伪类、属性选择器）、过渡效果（transition）、动画（animation）、多列布局（column-count）以及媒体查询（media queries），用于实现更高级的样式设计和响应式布局。 - 固定导航是指始终显示在屏幕顶部或底部的导航菜单，通常通过CSS定位（position: fixed）实现。 - 横向导航栏通常使用<ul>和<li>元素配合CSS的浮动（float）或Flexbox或Grid布局来创建。 3. **页面设计**： - 主页可能包含介绍性内容、特色景点、滑动图片展示、导航链接等元素，设计时需考虑整体布局和吸引力。 - 登录和注册页面需要有输入框（input元素）和按钮，以及错误提示机制。通常会使用CSS来美化表单元素，并确保其在不同设备上的适应性。 - 商品购物页面则需要显示产品信息、数量选择、添加到购物车等功能，可能涉及JavaScript交互以实现动态效果。 4. **响应式设计**： - 响应式设计是确保网页在不同设备和屏幕尺寸上都能良好显示的关键。学生可能利用CSS3的媒体查询来定义不同屏幕尺寸下的样式规则，实现移动优先的设计策略。 5. **最佳实践**： - 使用语义化HTML标签，有助于提高可访问性和搜索引擎优化。 - CSS代码应遵循模块化和可维护性原则，如使用预处理器（如Sass或Less）和BEM命名方法。 - 优化图片大小，减少加载时间，提高用户体验。这个项目是学生对HTML、HTML5、CSS和CSS3综合运用的实践，通过设计和实现一个完整的旅游网站，锻炼了他们的网页设计和开发技能，同时展示了对现代Web标准的理解和应用。

资源推荐

资源详情

资源评论

收起资源包目录

网页.zip （38个子文件）

网页

css

goods.css 3KB

index.css 9KB

goods.html 8KB

index.html 31KB

img

4.jpg 31KB

goods1.jpg 102KB

c8.jpg 104KB

c2.jpg 149KB

c3.jpg 149KB

c6.jpg 87KB

c9.jpg 144KB

nav3.jpg 9KB

nav4.jpg 33KB

c1.jpg 65KB

nav5.jpg 11KB

goods6.jpg 1.18MB

c7.jpg 64KB

c5.jpg 62KB

goods4.jpg 1.55MB

c4.jpg 95KB

c10.jpg 19KB

nav1.jpg 66KB

3.jpg 21KB

6.jpg 25KB

nav2.jpg 16KB

1.jpg 33KB

goods2.jpg 1.46MB

7.jpg 28KB

9.jpg 26KB

goods3.jpg 1.13MB

goods5.jpg 1.22MB

2.jpg 26KB

8.jpg 25KB

5.jpg 27KB

<!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="css/index.css"> </head> <body> <div class="nav-wrap"> <div class="nav"> <div class="nav-content"> <div class="list-nav-div-1"> <ul class="list-nav"> <li class="list-nav-li-1 list-nav-li-1-end"><a href="">联系客服</a></li> <li class="list-nav-li-1"><a href="">积分商城</a><span class="dividing-line"></span></li> <li class="list-nav-li-1"><a href="">查看订单</a><span class="dividing-line"></span></li> <li class="list-nav-li-1"><a href="">消息</a><span class="dividing-line"></span></li> <li class="list-nav-li-1"> <span class="span1">请</span><a href="login.html">登录</a> <span class="span2">或</span><a href="register.html">免费注册</a> <span class="dividing-line"></span> </li> </ul> </div> <div class="list-nav-div-2"> <ul class="list-nav"> <li class="list-nav-li-2"><a href="index.html">首页</a></li> <li class="list-nav-li-2"><a href="">周边游</a></li> <li class="list-nav-li-2"><a href="">自驾游</a></li> <li class="list-nav-li-2"><a href="">海外玩乐</a></li> <li class="list-nav-li-2"><a href="">出境游</a></li> <li class="list-nav-li-2"><a href="">包团游</a></li> <li class="list-nav-li-2"><a href="">特卖</a></li> <li class="list-nav-li-2"><a href="">攻略</a></li> <li class="list-nav-li-2"><a href="">酒店</a></li> <li class="list-nav-li-2"><a href="">门票</a></li> </ul> </div> </div> </div> </div> <div class="search"> <div class="search-nav"> <div class="location"> <div class="location-message"> <span class="address">郑州站</span> <a href="">进入周边/当地游</a> </div> </div> <div class="search-box"> <form action="" class="search-form"> <input type="text" placeholder="请输入目的地、主题或关键词" class="search-input"> <input type="submit" value="搜索" class="search-submit"> </form> <span class="high-search"><a href="">高级搜索</a></span> <div class="hot-search"> <span class="high-search-head">正在热搜:</span> <span class="high-search-content"><a href="">云南</a></span> <span class="high-search-content"><a href="">巴厘岛</a></span> <span class="high-search-content"><a href="">三亚</a></span> <span class="high-search-content"><a href="">泰国</a></span> <span class="high-search-content"><a href="">北京</a></span> <span class="high-search-content"><a href="">嵩山</a></span> <span class="high-search-content"><a href="">上海</a></span> <span class="high-search-content"><a href="">哈尔滨</a></span> </div> </div> </div> </div> <div class="index-body-1"> <div class="nav-1"> <div class="nav-1-list nav-1-list-1"> <h3 class="nav-1-list-h3">当季好玩</h3> <p class="nav-1-list-p"> <a href="">成都</a> <a href="">三亚</a> <a href="">日照</a> <a href="">青岛</a> <a href="">厦门</a> </p> <div class="second-nav second-nav-1"> <div class="second-nav-1"> <div class="second-nav-title"> <a href="" class="second-nav-title-a">当季好玩</a> </div> <div class="second-nav-img"> <a href=""><img src="img/1.jpg" alt=""></a> <h3 class="img1">成都</h3> <a href=""><img src="img/2.jpg" alt=""></a> <h3 class="img2">三亚</h3> <a href=""><img src="img/3.jpg" alt=""></a> <h3 class="img3">日照</h3> <a href=""><img src="img/4.jpg" alt=""></a> <h3 class="img4">厦门</h3> <a href=""><img src="img/5.jpg" alt=""></a> <h3 class="img5">西双版纳</h3> <a href=""><img src="img/6.jpg" alt=""></a> <h3 class="img6">青岛</h3> <a href=""><img src="img/7.jpg" alt=""></a> <h3 class="img7">泰国</h3> <a href=""><img src="img/8.jpg" alt=""></a> <h3 class="img8">台南</h3> <a href=""><img src="img/9.jpg" alt=""></a> <h3 class="img9">少林寺</h3> </div> <div class="second-nav-footer"> <a href="">专业签证省心省时省力</a> <p>全球签证，一周狂惠！</p> <a href="">奢享邮轮不一样的体验</a> <p>海上假期玩美日韩玩转全球！</p> <a href="">度假精选天天有推荐</a> <p style="margin: 0px 100px 10px 15px;">心动的价格享受美好的旅行！</p> </div> </div> </div> </div> <div class="nav-1-list nav-1-list-2"> <h3 class="nav-1-list-h3">郑州周边游</h3> <p class="nav-1-list-p"> <a href="">云台山</a> <a href="">老君山</a> <a href="">少林寺</a> <a href="">重渡沟</a> </p> <div class="second-nav second-nav-2"> <div class="second-nav-1"> <div class="second-nav-title"> <a href="" class="second-nav-title-a">郑州周边游</a> </div> <div class="second-nav-img"> <a href=""><img src="img/1.jpg" alt=""></a> <h3 class="img1">成都</h3> <a href=""><img src="img/2.jpg" alt=""></a> <h3 class="img2">三亚</h3> <a href=""><img src="img/3.jpg" alt=""></a> <h3 class="img3">日照</h3> <a href=""><img src="img/4.jpg" alt=""></a> <h3 class="img4">厦门</h3> <a href=""><img src="img/5.jpg" alt=""></a> <h3 class="img5">西双版纳</h3> <a href=""><img src="img/6.jpg" alt=""></a> <h3 class

评论收藏

内容反馈

版权申诉