149.大学生期末大作业全球旅游公司网页设计实例 web前端网页制作html+css

原创已于 2024-11-07 02:12:36 修改 · 926 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #课程设计 #html #css

于 2024-05-03 00:18:31 首次发布

Web网页设计实例专栏收录该内容

838 篇文章

订阅专栏

前言

本实例应用html+css，应用 Div、导航条、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。

一、网页概述

1.网页布局

网页布局为“同字型”布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。

2.知识应用

本实例应用HTML+CSS+JS，应用 Div、导航条、Banner、图片轮翻效果、鼠标滑动特效、Table、悬浮菜单、留言表单、注册页面、登录页面、背景特效、搜索等。

3.网页支持

支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含5个页面：

三、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

四、代码展示

1.html

代码如下（节选示例）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>山河旅行社</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">

<div class="center">
<nav class="link" >
<h2 style="display:none;">网站导航</h2>
<ul>
<li class="active"><a href="###">首页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
<div id="adver">
<img src="picture/adver.jpg" alt="">
<div class="center"></div>
<div class="center copy">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
</div>
<div id="tour">
<section class="center ">
<h2>热门旅游</h2>
<p>国内旅游，国外旅游、自助旅游、自驾旅游、游轮签证、主题旅游等各种最新热门旅游推介</p>
</section>
<figure>
<img src="picture/tour1.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
<figure>
<img src="picture/tour2.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour3.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour4.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
<figure>
<img src="picture/tour5.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour6.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour7.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour8.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour9.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
</div>
<footer id="footer">
<div class="top sm-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul class="ul">
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅社</li>
</ul>
</div>

<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul class="ul">
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质是怎么界定的？</li>
<li>旅游保险有些什么种类？</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul class="ul">
<li>微博：weibo.com/maodo</li>
<li>邮件：sh@maodou.com</li>
<li>地址：西安市雁塔区123号</li>
</ul>
</div>
</div>
<div class="chearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">Copyright © SHMD 山河旅行社| 陕ICP 备120110119 号<span class="sm-hidden">| 旅行社经营许可证：L-SH-BK12345</span></div>
</footer>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
body,h1,h2 ,h3,h4,ul,ol,p,form,fieldset,figure{
margin:0;
padding:0;
}
body{
background-color: #fff;
font-family: "Helvetica Neue",Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
img{
display:block;
max-width:100%;
}
ul,ol{
list-style:outside none none;
}
a{
text-decoration:none;
}
div,figure,img,input,button{
box-sizing:border-box;
}
#headline img{
width:100%;
}
.none {
display: none;
}
.sm-visible{
display:none;
}
.clearfix:after{
content:'.';
height:0;
visibility:hidden;
display:block;
clear:both;
}
#header{
width:100%;
height:70px;
background-color:#333;
box-shadow: 0 1px 10px rgba(0 ,0 ,0,0.3);
position:fixed;
top:0;
z-index:9999;
}
#header .center{
max-width:1263px;
height:70px;
margin:0 auto;
}
#header .logo{
width:30%;
height:70px;
background:url(../images/logo.png) no-repeat left center;
text-indent:-9999px;
float:left;
}
#header .link{
width:55%;
height:70px;
line-height:70px;
color:#aaaaaa;
float:right;
}
#header .link li{
width:20%;
text-align:center;
float:left;
}
#header .link a {
color:#eeeeee;
display: block;
}
#header .link a:hover, #header .active a{
background-color:#000;
}

#adver{
padding:70px 0 0 0;
max-width:1920px;
margin:0 auto;
position:relative;
}
#adver .center{
width:40%;
height:60px;
background-color:#000000;
position:absolute;
top:50%;
left:50%;
margin:-10px 0 0 -20%;
opacity:0.6;
border-radius: 10px;
}
#adver .copy{
opacity:1;
background-color: transparent;
padding:3px 3px 0 3px;
}
#adver .search{
width:70%;
height:52px;
background-color: #eeeeee;
color:#666666;
border:1px solid #666666;
border-radius: 10px;
font-size:24px;
padding:0 10px;
outline:none;
display: block;
float:left;
}
#adver .button{
width:30%;
height:54px;
background-color: #eeeeee;
color:#666666;
border:1px solid #333;
border-left-width:3px ;
border-radius: 12px;
font-size:24px;
/*padding:0 10px;*/
outline:none;
cursor:pointer;
font-weight:bold;
display: block;
float:right;
}
#tour{
max-width:1263px;
position:relative;
margin:30px auto;
text-align:center;

}
#tour .center h2{
margin:10px 0;
font-size: 45px;
letter-spacing:2px;
color:#666666;
}
#tour .center p{
color:#666666;
margin:10px;
font-size: 16px;
}
#tour .tour_title{
height:40px;
overflow: hidden;
}

#tour figure {
border: 1px solid #dddddd;
display:block;
float:left;
padding:4px;
border-radius: 4px;
margin:15px 0.4%;
width:32.4%;
text-align:left;
position:relative;
}
#tour figure img{
vertical-align:middle;
}
#tour figcaption{
color:#777;
line-height:1.5;
letter-spacing:1px;
font-size: 14px;
padding:7px 0 5px 0;
}
#tour title{
color:#333;
font-weight: 600;
}
#tour .info{
padding:5px 0 0 0;
}
#tour .sat{
float:right;
font-size: 13px;
color:#999999;
font-style:normal;
position:relative;
top:5px;
right:5px;
}
#tour .price{
color:#f60;
font-size:14px;
}
#tour .price strong{
font-size:20px;
letter-spacing: 1px;
}
#tour .type{
width:90px;
height:25px;
font-size:14px;
line-height:25px;
text-align:center;
color:#eeeeee;
background-color:#59b200;
letter-spacing:2px;
position:absolute;
top:4px;
left:4px;
}
#headline{
max-width:1920px;
padding:70px 0 0 0;
margin:0 auto;
position:relative;
}
#headline hgroup{
position:absolute;
top:45%;
left:18%;
}
#headline h2{
color:#eee;
font-size:45px;
letter-spacing:1px;
}
#headline h3{
color:#eee;
font-size:24px;
letter-spacing:1px;
}

...

五、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q；关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等；以上内容技术有兴趣的可以交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。