️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
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代码)。
E19JP-HC 旅游中国-11页
<html>
<head>
<meta charset="UTF-8">
<title>旅游中国title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript">script>
head>
<body>
<div class="head"><img src="images/logo.png" width="240">div>
<div class="nav">
<ul>
<li><a href="index.html">首页a>li>
<li><a href="liuyan.html">留言a>li>
<li><a href="gentuanyou.html">跟团游a>li>
<li><a href="zixun.html">新闻资讯a>li>
<li><a href="fengguang.html">图片风光a>li>
<li><a href="shipin.html">精彩视频a>li>
<li><a href="denglu.html">会员登录a>li>
<li><a href="zhuce.html">会员注册a>li>
ul>
div>
<div class="banner2" 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/banner3.jpg" alt="">li>
ul>
<ul id="b_an">
<li>li>
<li>li>
<li>li>
ul>
div>
<div class="main">
<div class="fls" >
<h2 class="bar">自由行h2>
<ul>
<li><img src="images/1.jpg" width="100%">
<p>四川成都+稻城亚丁+理塘+珍珠海+新都桥7日6晚私家团·越野自驾·p>
li>
<li><img src="images/2.jpg" width="100%">
<p>可选专车接送站/一日游/包车|穿越时光·遇见长安|停留天数随心定·旅行说走就走p>
li>
<li><img src="images/3.jpg" width="100%">
<p>住1晚市区+1晚黄山山顶+1晚宏村 · 严选包车游p>
li>
ul>
div>
<div class="mls">
<h2 class="bar">推荐线路h2>
<ul class="txtlist">
<li> <a href="zyinfo.html"><img src="images/b1.jpg" width="140">a>
<div> <a href="zyinfo.html">阿坝3日2晚跟团游·纯玩丨九寨沟+黄龙【熊猫乐园/都江堰任选其一】(可升级头等舱/熊猫主题食宿/千古情晚会/三钻-五钻多档住宿·供君选择)赠价值150元藏家晚会(酥油茶、青稞酒、土火锅)+含去程动车费用+三环内包接~a>
<p>p>
div>
li>
<li> <a href="gtyinfo.html"><img src="images/b2.jpg" width="140">a>
<div> <a href="gtyinfo.html">九寨沟+成都3日2晚跟团游·3晚+去程动车票| 真纯玩0购物0自费4钻|小团/旅拍/熊猫主题|A线熊猫乐园/B线都江堰/C线峨眉乐山/D线达古冰川/E线四姑娘山/F线若尔盖草原,赠送百元川秀/升级/玩法任选|三环包接~a>
<p>p>
div>
li>
<li> <a href="zyinfo.html"><img src="images/b3.jpg" width="140">a>
<div> <a href="zyinfo.html">成都+九寨沟+黄龙风景名胜区4日3晚跟团游·全程入住优选4钻酒店+成都首尾自由活动+有限的时间只与美景相遇+高端真纯玩精选行程无猫腻+24小时免费接送机站让你的假期出行无忧+可选升级保姆车2+1座椅a>
<p>p>
div>
li>
<li> <a href="gtyinfo.html"><img src="images/b4.jpg" width="140">a>
<div> <a href="gtyinfo.html">海南海口+三亚蜈支洲岛5日4晚跟团游·亲子出游升级海口五星*三亚连住海边不挪窝+蜈支洲岛畅游+浪漫雨林天堂公园+南山+打卡网红亚特兰蒂斯水世界+扬帆出海【爸妈·蜜月·亲子·闺蜜出游必选】24H在线管家服务~~a>
<p>p>
div>
li>
<li> <a href="zyinfo.html"><img src="images/b5.jpg" width="140">a>
<div> <a href="zyinfo.html">三亚+蜈支洲岛+亚龙湾5日4晚跟团游·【五•一特惠 高端出游行程】赠送好莱坞车技表演 0购物纯玩 单/双飞可选 全程五星度假酒店 4大5A热门景点 海南美食盛宴升级海鲜大餐+养生素斋 本土导游跟随讲解a>
<p>p>
div>
li>
ul>
div>
<div class="rls" >
<h2 class="bar">跟团游h2>
<ul>
<li><img src="images/c1.jpg" width="100%">
<p>贵州黄果树+梵净山+镇远+西江千户苗寨+荔波7...p>
li>
<li><img src="images/c2.png" width="100%">
<p>海南三亚+蜈支洲岛6日5晚跟团游(5钻)·限时特惠...p>
li>
<li><img src="images/c3.jpg" width="100%">
<p>成都+稻城亚丁4日3晚跟团游·稻城出发 【纯玩无购物...p>
li>
ul>
div>
<div style="clear:both">div>
<h2 class="bar">风光图片h2>
<ul class="imglist">
<li><img src="images/f1.jpg">li>
<li><img src="images/f2.jpg">li>
<li><img src="images/f3.jpg">li>
<li><img src="images/f4.jpg">li>
ul>
<div style="clear:both">div>
div>
<div class="end">旅游网div>
body>
html>
/* CSS Document */
body{width:1200px; background-color:#fff; line-height:24px; font-size:13px; margin:0px auto; background:#C2E7FC}
.main{padding:20px; background:#FFFFFF}
.fls{float:left; width:220px; margin-right:30px; }
.mls{float:left; width:640px; margin-left:20px; }
.rls{float:right; width:200px; }
a{ text-decoration:none;}
ul,li{list-style:none; margin:0; padding:0;}
.nav{ height:50px; background:#0066CC}
.nav li{ display:inline-block; line-height:50px }
.nav li a{color:#fff; font-size:18px; padding:10px 40px}
.end{ background:#0066CC; color:#fff; padding:11px 0; text-align:center}
.c li{ box-shadow:0px 0px 15px #888888;margin-top:30px; height:350px; width:30%; margin:1.666%; float:left;}
.c li img{ max-width:100%; height:200px}
.c li p{ padding:0 20px}
.c a{ color:#000; font-size:16px;}
.clear{ clear:both}
.dl2{ margin:0 auto; font-size:16px; background:url(../images/login.jpg) no-repeat; background-size:cover; padding:120px}
.dl2 input{ padding:5px 10px}
.dl2 span{ display:inline-block; width:100px; text-align:right; padding-right:15px;}
.dl2 div{ margin:10px 0}
.tit{ font-size:18px}
.txtlist li{ height:100px; background:#DCF3FA; padding:5px; margin-bottom:20px; font-size:14px; line-height:22px}
.txtlist li img{ width:120px; display:block; float:left; margin:0 20px 0 0 }
.txtlist li a{ color:#000}
.imglist li{ float:left; width:24%; padding:0.5%;}
.imglist li img{ width:100% ; height:200px}
.bar{ border-bottom:#ccc solid 1px; font-size:16px; padding-bottom:10px}
#banner {
width: 100%;
height: 450px;
position: relative;
}
#banner ul#b_pic li {
width: 100%;
height: 450px;
overflow: hidden;
position: absolute;
top: 0;
display: none;
}
#banner ul#b_pic li img {
width: 100%;
height: 450px;
display: block;
}
#banner ul#b_an {
position: absolute;
width: 100%;
bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
}
#banner ul#b_an li {
width: 13px;
height: 13px;
background: #fff;
margin: 0 3px;
border-radius: 13px
}
.v{ background:#000}
1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏”
一键三连哦!
2.【关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习