基于HTML的旅游风景网站设计 HTML网页设计结课作业 web前端开发技术 web前端大一实训

最新推荐文章于 2022-10-11 09:16:02 发布

原创最新推荐文章于 2022-10-11 09:16:02 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#七夕情人节 #表白网页制作 #程序员表白代码 #html生日快乐网站 #表白网页模版html

网页建设专栏收录该内容

1137 篇文章

订阅专栏

本文介绍了一个关于北京旅游的主题网站设计案例，采用HTML5+CSS3+JS技术栈，实现了响应式布局和动态轮播效果，同时提供了丰富的图片资源和交互体验。

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

E13JP- 北京20页 HTML+CSS+JS

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet"  media="all" type="text/css" />
<title>北京</title>
</head>
<body>
<div class="head">
  <div class="ma">
    <div class="logo"> <img src="images/logo.jpg" width="250" /></div>
    <div class="menu">
      <ul class="center">
        <li><a href="index.html">首页</a></li>
        <li><a href="jingdian.html">景点</a></li>
        <li><a href="meishi.html">美食</a></li>
        <li><a href="wenhua.html">文化</a></li>
        <li><a href="guanyu.html">关于</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="content" style="position:relative; padding-bottom:0">
  <div class="banner">
    <div  class="banner" id="banner">
      <ul id="b_pic">
        <li style="display: block;"><img src="images/banner1.jpg"  alt=""></li>
        <li><img src="images/banner2.jpg"  alt=""></li>
        <li><img src="images/jingdian6.jpg"  alt=""></li>
      </ul>
      <ul id="b_an">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="lsc">
   <ul>
   <a href="jingdian.html">
    <li style="background:rgba(226,54,54,0.8)">—— 景点 —— <p>Scenic</p></li>
	</a>
	 <a href="meishi.html">
    <li style="background:rgba(226,139,53,0.8)">—— 美食 —— <p>Delicious Food</p></li>
	</a>
	 <a href="wenhua.html">
    <li style="background:rgba(69,137,202,0.8)">—— 文化 —— <p>Culture</p> </li>
	</a>
   </ul>
  </div>
</div>
<div class="end">
  <p>北京 </p>
</div>
<script src="js/lunbo.js" type="text/javascript"></script>
</body>
</html>

🏠CSS样式代码



@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
img{ display:block}
body{ width:100%; min-width: 1300px; background:#ddd; margin:0 auto; line-height:21px}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ margin:0px; float:left}
.logo img{ width:100px}
.banner{ position:relative; }
.head{ background:#dc3434; height:100px}

.menu{ text-align:center; float:right;}
.menu li a{ padding:10px 20px; font-size:18px;color:#fff}
.menu li {  float:left; padding:40px 0;}
.jsc{ font-size:18px; line-height:30px}
.right{ float:right; width:950px; margin-right:20px; padding:0px}
.left{ float:left; width:260px; margin-left:20px; padding:0px}
.mid{ float:left; width:460px; margin-left:20px; padding:0px}
.content{ clear:both;background:#fff ; padding-bottom:30px; width:100%}
.content,.ma{ width: 1300px; margin: 0 auto}
.content:after{ clear: both; display: block; content: ''}
.end{ clear:both; background:#dc3434; color:#fff; padding:20px 0; text-align:center;}
.produce img{  margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px; display:block}
.pics p{ text-align:center}
.of{ width:400px}
.imglist{ width:100%; margin:0 auto}
.imglist li{ float:left; width:33.3%; text-align:center}
.imglist li:hover img{ opacity:0.7}
.imglist li img{ border-radius:10px; margin:0 auto; margin-bottom:10px; width:90%}
.imglist li p{ font-size:20px; padding-bottom:20px}
.scrollleft{ margin:0 0px}
.scrollleft li{ float:left; width:250px; margin-bottom:10px;}
.news li{ padding:5px;}
.banner2{ position:relative}
.banner2 div{ position:absolute; left:50%; margin-left:-350px; width:600px;top:50%; margin-top:-200px; text-align:center; padding:50px; background:rgba(255,255,255,0.5)}
.banner2 div p{ text-align:justify}
.banner2 div h3{ font-size:30px; margin:20px 0}

.banner3{ position:relative}
.banner3 div{ position:absolute; height:100%; right:5%; width:300px;top:0%; padding:0 50px; background:rgba(255,255,255,0.5)}
.banner3 div p{ text-align:justify; line-height:24px}
.banner3 div h3{ font-size:30px; margin:20px 0; padding-top:40px;}

#banner {
	width: 100%;
	height: 750px;
	position: relative;
}
#banner ul#b_pic li {
	width: 100%;
	height: 750px;
	overflow: hidden;
	position: absolute;
	top: 0;
	display: none;
}
#banner ul#b_pic li img {
	width: 100%;
	height:750px;
	display: block;
}
#banner ul#b_an {
	position: absolute;
	width: 100%;
	bottom:182px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#banner ul#b_an li {
	width: 13px;
	height: 13px; border-radius:13px;
	background: #86939b;
	margin: 0 3px;
}

.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.js  div{ width:56%; font-size:18px; line-height:30px;  margin-bottom:20px; float:left}
.gd{ background:#993333; color:#fff; padding:10px 50px; display:inline-block; margin-top:20px; font-size:18px}
.js div img{ float:left; margin-right:20px} 

.js h1{ font-weight:normal; padding-bottom:30px}
.lsc { position:absolute; bottom:0; width:100%; left:0;}
.lsc li{ float:left; width:30%; margin:1.6%; text-align:center; color:#fff;border-radius:10px; font-size:24px; padding:40px 0; background:#99CC33}
.lsc li p{ font-family:"Courier New", Courier, monospace; margin-top:20px;}
.msg>div{ padding:10px}
.mes li { height:400px}
.mes li img{ width:50%; height:400px; float:left}
.mes li.rs img{ float:right}
.mes li div { text-align:center; padding-top:170px}
.mes li h3{ font-size:36px;}
.bar{ margin:0px 0; margin-bottom:20px;clear:both; line-height: 50px;  color:#dc3434; background:#fff ; border-bottom:#ccc solid 2px; font-size:18px;font-weight:bold; padding:10px 20px}
.pics li img{ width:240px; height: 180px}
.tub li {background: #fff; font-size:24px; width:49%; border: #ccc solid 1px;padding: 17px 0; margin-bottom:27px; display:inline-block;color: #FFFF00; 
}
.tub li:hover{ border:#999933 solid 1px}
.tub li img{ margin-right:30px; width:300px; margin-left:20px; height:200px; float:left}
.navs { margin-top:20px;}
.navs p a{ display:block; background:#ccc; padding:10px; font-size:18px; margin:10px 0 }
.gqlist li {
    width: 100%; border-bottom:#ccc dashed 1px;
    float: left;
    padding:10px 0;
}
.gqlist li  b{ font-weight:normal}
.btn{ display: inline-block; padding: 5px 50px; width:200px; background: #dc3434; color: #fff; font-size: 18px; border: none}
.fss input,.fss textarea,.fss  button{ padding: 10px}