681.大学生HTML期末大作业 —【简单的旅游网页(2页)】 Web前端网页制作 html5+css3
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3，div+css布局，代码简单,带实验报告书。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含2个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./main.css"/>
<title></title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="zhong">
<div id="top">
<img src="./images/logo.jpg">
<div id="fuwurexian">服务热线：600-666-888</div>
<div id="sousuo">
<form action="#" method="post">
<div id="sou-submit">
<input type="text" placeholder="请输入要搜索的内容"/>
<input type="submit" value="搜索" />
</div>
</form>
</div>
<div id="denglu">
<a href="login.html">登录</a>
</div>
<div id="fenge">|</div>
<div id="zhuce">
<a href="login.html">注册</a>
</div>
</div>
</div>
<div id="bottom">
<div id="zhong">
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="#">海岛</a>
<ul id="liebiao">
<li><a>巴厘岛</a></li>
<li><a>柏劳</a></li>
</ul>
</li>
<li>
<a href="#">东南亚</a>
<ul id="liebiao">
<li><a>东岛</a></li>
<li><a>南岛</a></li>
</ul>
</li>
<li>
<a href="#">产品说明</a>
<ul id="liebiao">
<li><a>旅游团</a></li>
<li><a>导游</a></li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul id="liebiao">
<li><a>客服</a></li>
<li><a>售后</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="banner">
<img src="./images/banner.jpg" />
</div>
...
2.CSS
代码如下（节选示例）：
*{
margin:0;
padding:0;
}
body{
font-size: 14px;
}
a{
color: #333;
text-decoration: none;
}
ul{
list-style: none;
}
#wrap{
width: 100%;
height: 2010px;
/* border:solid 2px red; */
}
#zhong{
width: 1000px;
margin: 0 auto;
}
/* 头部样式 */
#header{
width: 100%;
height: 130px;
/* background-color: #9ACD32; */
}
#header #top{
width: 1200px;
height: 90px;
/* background-color: beige; */
}
#header #top img{
margin: 15px;
float: left;
}
#header #top #fuwurexian{
margin: 35px;
float: left;
font-size: 20px;
}
#header #top #sousuo{
margin: 30px;
float: left;
}
#header #top #sousuo input[type="text"]{
width: 200px;
height: 30px;
border: none;
outline: none;
}
#header #top #sousuo input[type="submit"]{
width: 50px;
height: 33px;
border: none;
background: #0575de;
color: #fff;
}
#header #top #sousuo #sou-submit{border: solid 2px #0575de;}
#header #top #denglu{
margin-top: 37px;
margin-left: 30px;
float: left;
width: 45px;
height: 33px;
border: none;
text-align: center;
font-size: 15px;
}
#header #top #fenge{float: left;margin-top: 37px;}
#header #top #zhuce{
margin-top: 37px;
float: left;
width: 45px;
height: 33px;
border: none;
text-align: center;
font-size: 15px;
}
#header #bottom{
height: 40px;
background: #01559d;
position: relative;
}
#header #bottom ul{
position: absolute;
}
#header #bottom ul li{
float: left;
/* margin: 0 25px; */
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
22
0- 0
已为社区贡献24条内容
所有评论(0)