📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
