web前端-设计网站页面
代码
评论页.html
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<!-- 页面的宽度与设备屏幕的宽度一致, 初始缩放比例 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的网页</title>
<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css"/>
<!-- jQuery所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<script src="bootstrap4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/评论页.css" />
<script src="js/评论页.js" type="text/javascript" charset="utf-8"></script>
<script src="js/表单验证.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body data-spy="scroll" data-target="#list-example">
<!-- 滚动监听开始 -->
<div id="list-example" class="list-group current">
<a class="list-group-item list-group-item-action" href="#list-item-1">菜单</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">轮播图</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">游客评价</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">热门景点</a>
<a class="list-group-item list-group-item-action" href="#list-item-5">精美图集</a>
<a class="list-group-item list-group-item-action" href="#list-item-6">卡片展示</a>
<a class="list-group-item list-group-item-action" href="#list-item-7">留言</a>
<a class="list-group-item list-group-item-action" href="#list-item-8">底部</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1"></h4>
<p>
<!-- 导航条 -->
<!-- 菜单开始 -->
<div class="container-fluid" style="background:url(img1/beijing.jpg); height:180px; ">
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="#">承德文旅</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
景区介绍
</a>
<div class="dropdown-menu" style="margin-left: 290px;">
<a class="dropdown-item" href="#">景区概况</a>
<a class="dropdown-item" href="#">景区介绍</a>
<a class="dropdown-item" href="#">景点一览</a>
<a class="dropdown-item" href="#">VR全景</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
景区文化
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">文化赏析</a>
<a class="dropdown-item" href="#">文物赏析</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
最新资讯
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">文化活动</a>
<a class="dropdown-item" href="#">招标公告</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
文创商店
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">文化周边</a>
<a class="dropdown-item" href="#">购物车</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
在线购票
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">登录</a>
<a class="dropdown-item" href="#">注册</a>
<a class="dropdown-item" href="#">编辑信息</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="sousuo" style="text-align: center; color: #000000;font-size: 2.5rem;">盛景说天下</h1>
<div class="row">
<div class="col-10 col-sm-12 d-flex justify-content-center" style="position: relative;">
<!-- 搜素框 -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="color: black;">搜索</button>
</form>
</div>
</div>
</div>
</div>
<!-- 菜单结束 -->
</p>
<div class="container-fluid">
<h4 id="list-item-2"></h4>
<p>
<div class="row justify-content-md-center">
<div class="col-lg-10 col-sm-12">
<!-- 轮播图开始 -->
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img1/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>避暑山庄</h5>
<p>（宫殿）</p>
</div>
</div>
<div class="carousel-item">
<img src="img1/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>金山上帝阁</h5>
<p>（仿镇江金山寺）</p>
</div>
</div>
<div class="carousel-item">
<img src="img1/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>永佑寺</h5>
<p>（仿杭州六和塔）</p>
</div>
</div>
<div class="carousel-item">
<img src="img1/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>文园狮子林</h5>
<p>（仿苏州狮子林）</p>
</div>
</div>
<div class="carousel-item">
<img src="img1/5.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>芝径云堤</h5>
<p>（仿苏州苏堤）</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
<!-- 轮播图结束 -->
</div>
</div>
</p>
</div>
<div class="mycontent">
<h4 id="list-item-3"></h4>
<p>
<div class="pt_content1">
<!-- 页面内容-图片 开始 -->
<div class="text-center">
<h1>
<img src="img1/窗户.png" />
游客评价
</h1>
<!-- 徽章开始 -->
<span class="badge badge-pill badge-secondary">Tourists Evaluation</span>
<!-- 徽章结束 -->
</div>
<!-- 页面内容-图片 结束 -->
<div class="container-fluid ">
<div class="row">
<!-- 页面内容-表格 开始 -->
<table class="table table-hover">
<tr>
<td>
<img src="img1/人1.jpeg" />
</td>
<td>
<h5>
vickey
</h5>
<strong class="text-muted">
推荐指数：
<meter value="85" min="0" max="100" low="60" high="80" title="85分" optimum="100"></meter>
</strong>
<p>
承德避暑山庄也可以称为承德离宫或者热河行宫，避暑山庄是中国在清代皇帝到夏天时候的避暑与处理政务的地方。山庄有着这样的历史：是在清朝的时候皇帝为了实现中国伟大的边疆少数民族的团结一致，从而巩固了国家统一的政治觉面为目的从而修建了这样一座神奇的夏宫——避暑山庄。避暑山庄自从建成之后，清朝的皇帝每年都会有大量的时间来到宝地处理军政上的重要大事，也为接见外国的使节与边疆的少数民族的政教首领而提供了方便。在此宝地发生的一连串的重要见闻、重要的宝贵遗迹和重要的古代文物，将成为了中国多民族国家统一的最后形成的伟大历史见证。通过介绍，相信您一定想到避暑山庄旅游参观一番，这里一定会让您流连忘返的。
</p>
</td>
</tr>
<tr>
<td>
<img src="img1/人2.jpeg" />
</td>
<td>
<h5>
拂晓
</h5>
<strong class="text-muted">
推荐指数：
<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100"></meter>
</strong>
<p>
去承德避暑山庄时正好是夏季，避暑的时节，不知为什么，避暑山庄里面的温度比外面低3-5摄氏度，确实是个绝佳的避暑圣地，进门以后往右边走有荷花池还有苏州狮子园林的缩小版，在里面还看到了小松鼠，在进门的凉亭处还有人排练戏曲，出来后顺着河边走不知不觉就到了烟雨楼，这是拍摄还珠格格时的淑芳斋，走过木桥左手边还有一个假山石洞，总之好玩的地方很多，就不一一介绍了
</p>
</td>
</tr>
<tr>
<td>
<img src="img1/人3.jpeg" />
</td>
<td>
<h5>
路路
</h5>
<strong class="text-muted">
推荐指数：
<meter value="50" min="0" max="100" low="60" high="80" title="50分" optimum="100"></meter>
</strong>
<p>
都说避暑山庄是避暑胜地，但我却还是被那里的骄阳晒得冒烟。暂不提这些，单说景色还是值得一看，像是缩小版的故宫，好多府邸没开，但真的很恢宏，建议暑假不要去，人多树少，很晒而且路上很堵。公交可到，而且可选线路很多，我是坐的28路。在里面玩上一天绝对没问题，带上外八庙大概要玩两到三天。
</p>
</td>
</tr>
<tr>
<td>
<img src="img1/人4.jpeg" />
</td>
<td>
<h5>
穿越之旅
</h5>
<strong class="text-muted">
推荐指数：
<meter value="90" min="0" max="100" low="60" high="80" title="90分" optimum="100"></meter>
</strong>
<p>
避暑山庄是世界上最大的皇家园林~山水如画！适合四季出行！夏天的时候去避暑，冬天的时候去，雪景更是美的你不要不要的！
</p>
</td>
</tr>
</table>
<!-- 页面内容-表格 结束 -->
</div>
</div>
</div>
</p>
<h4 id="list-item-4"></h4>
<p>
<div class="pt_content1">
<!-- 页面内容-图片 开始 -->
<div class="text-center">
<h1>
<img src="img1/窗户.png" />
热门景点
</h1>
<span class="badge badge-pill badge-secondary">hot spots</span>
</div>
<!-- 页面内容-图片 结束 -->
<div class="container-fluid ">
<div class="row">
<!-- 媒体对象 开始 -->
<ul class="list-unstyled">
<li class="media">
<img src="img1/热门景点金山.jpg" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1"">金山</h5>
<p>金山岛建于康熙四十二年（1703），仿镇江金山寺而建。岛上堆砌假山，山上筑殿，面阔五间，康熙帝御题"镜水云岑"，循石级而上，抵达"天宇咸畅"。两殿均被收入康熙三十六景。岛上制高点北建有三层木塔，题名"上帝阁"，为清帝祭祀真武大帝和玉皇大帝之所。此岛虽由人工堆砌，却宛如天开地造。康熙帝赞其"仰接云霄，俯临碧水，如登妙高峰上"。</p>
</div>
</li>
<li class="media my-4">
<img src="img1/热门景点热河.jpg" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">热河</h5>
<p>避暑山庄内一处温泉，也是一处水源。泉侧有一石碣，今刻"热河"二字。这里春季泉水泠泠，盛夏浮蘋点点，严冬薄雾蒸蒸，泉水涌动，不见冰凌，确是一番奇景。</p>
</div>
</li>
<li class="media">
<img src="img1/热门景点烟雨楼.jpg" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">烟雨楼</h5>
<p>烟雨楼建于乾隆四十五年（1780），坐落于避暑山庄青莲岛上。乾隆南巡时，见浙江嘉兴南湖鸳鸯岛上的烟雨楼晨烟暮雨，非常奇妙，就命画师临摹，并在青莲岛上仿建。此楼面阔五间，上下两层，四面皆辟窗，正面檐下悬挂乾隆帝御题云龙金匾"烟雨楼"，联为："百尺起空濛，碧涵莲岛；八窗临渺瀰，澄印鸳湖"。二楼四周有栏杆，可凭栏环览四周景色。月台下两处石雕须弥座上有根据古代"河图洛书"制造的铜质海马一对。烟雨楼东侧跨院有"青杨书屋"，其南北各有亭。西侧有"对山斋"，其南堆假山，山上置亭，形若鸟翼，名曰"翼亭"。</p>
</div>
</li>
</ul>
<!-- 媒体对象 结束 -->
</div>
</div>
</div>
</p>
<h4 id="list-item-5"></h4>
<p>
<div class="pt_content2 hidden-xs">
<div class="text-center">
<h1>
<img src="img1/窗户.png" />
精美图集
</h1>
<span class="badge badge-pill badge-secondary">pictures</span>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- 页面内容-画像 开始 -->
<figure class="figure">
<img src="img1/大成殿.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">大成殿</figcaption>
</figure>
<!-- 页面内容-画像 结束 -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/大红台.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">大红台</figcaption>
</figure>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/金山.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">金山</figcaption>
</figure>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/热河.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">热河</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/棂星门.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">棂星门</figcaption>
</figure>
<img src="" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/磬锤峰.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">磬锤峰</figcaption>
</figure>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/蛤蟆石.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">蛤蟆石</figcaption>
</figure>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<figure class="figure">
<img src="img1/万法归一.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">万法归一</figcaption>
</figure>
</div>
</div>
</div>
</div>
</p>
<h4 id="list-item-6"></h4>
<p>
<div class="pt_content2 hidden-xs">
<div class="text-center">
<h1>
<img src="img1/窗户.png" />
卡片展示
</h1>
<span class="badge badge-pill badge-secondary">card show</span>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- 卡片开始 -->
<div class="card" style="width: 18rem;">
<img src="img1/卡片1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">普乐寺</h5>
<p class="card-text">在普乐寺，探秘旭光阁欢喜佛和密宗境界。</p>
<a href="#" class="btn btn-primary" >详情介绍</a>
</div>
</div>
<!-- 卡片结束 -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">磬锤峰</h5>
<p class="card-text">棒槌山，大自然的鬼斧神工。康熙赐名磬锤，念多大的经才能拿的动这根敲磬的锤，这种气势这种胸怀才有了康乾盛世。</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">普宁寺</h5>
<p class="card-text">普宁寺大乘之阁的千手千眼观音菩萨，是世界上最大的金漆木雕佛像。</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">金山</h5>
<p class="card-text">金山，本在江苏镇江的江心，康熙皇帝南巡时，醉心于江流天际的壮丽景色，照样子搬回山庄，来山庄也能赏南方秀丽景色，一举多得！</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片5.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">避暑山庄</h5>
<p class="card-text">“避暑山庄”牌匾，此牌匾在避暑山庄正宫区的内午门上，是康熙御笔亲题的。</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片6.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">烟雨楼</h5>
<p class="card-text">烟雨楼，当年爆火电视剧《还珠格格》一、二部里“漱芳斋”的拍摄地~去感受一下吧！</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片7.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">水心榭</h5>
<p class="card-text">水心榭是连接宫殿区与湖区的重要通道，榭在水中，两旁空间广阔，碧波荡漾，四望皆成画景。</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="img1/卡片8.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">文园狮子林</h5>
<p class="card-text">文园狮子林里也有御猫,不知与故宫御猫有何关系?</p>
<a href="#" class="btn btn-primary">详情介绍</a>
</div>
</div>
</div>
</div>
</div>
</div>
</p>
<h4 id="list-item-7"></h4>
<p>
<div class="pt_content3">
<div class="text-center">
<h1>
<img src="img1/窗户.png" />
留言
</h1>
<span class="badge badge-pill badge-secondary">leave a message</span>
</div>
<!--表单开始-->
<div class="container-fluid">
<div class="row">
<form onsubmit="return a()">
<div class="form-group">
<label for="Input1">姓名</label>
<input type="text" class="form-control" id="Input1" placeholder="name">
</div>
<div class="form-group">
<label>性别：</label>
<label class="radio-inline">
<input type="radio" name="sex" id="Radio1" value="male"> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="Radio2" value="female"> 女
</label>
</div>
<div class="form-group">
<label>年龄：</label>
<select class="form-control">
<option>小于20</option>
<option>20~30</option>
<option>30~50</option>
<option>大于50</option>
</select>
</div>
<div class="form-group">
<label for="Input2">电子邮箱</label>
<input type="email" class="form-control" id="Input2" placeholder="Email">
</div>
<div class="form-group">
<label >留言</label>
<textarea cols="70" rows="10" placeholder="message"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
</div>
</div>
<!--表单结束-->
</div>
<!-- 按钮开始 -->
<button id="myButton" class="btn btn-secondary">返回</button>
<!-- 按钮结束 -->
<!-- 警示框开始 -->
<div id="myAlert" class="alert alert-warning alert-dismissible fade" role="alert">
<strong>警告!</strong> 返回后留言内容丢失.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 警示框结束 -->
</p>
</div>
<h4 id="list-item-8"></h4>
<p>
<div class="container-fluid">
<!-- 巨幕开始 -->
<div class="jumbotron">
<div class="row">
<div class="col-lg-8 col-md-10 col-sm-12">
<h1 class="display-4">转地址:承德市双桥区山庄东路6号</h1>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<a class="lead">电话:086-0314-2029771</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<a class="lead">E-mail:0314-2029771@163.com</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<a class="lead">避暑山庄及周围寺庙景区服务中心</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<a class="lead">冀公网安备 13080202000548号</a>
</div>
</div>
<hr class="my-4">
<!-- 模态框开始 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
快捷电话！
</button>
<ul class="menu1" style="list-style: none; margin-left: -100px;">
<li>
<a href="https://xyt.xcc.cn/getpcInfo?sn=1542693010087559168&language=CN&certType=8&url=*.bishushanzhuang.com.cn" target="_blank">
<img style="list-style: none; margin-left: 90px;" src="img1/xinchahcha.jpg" >
</a>
</li>
</ul>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- 旋转图标开始 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 旋转图标结束 -->
<h5 class="modal-title" id="exampleModalLabel">转入拨号--3秒后转换页面</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">感谢您的反馈</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
</div>
<!-- 巨幕结束 -->
</div>
</p>
</div>
<!-- 滚动监听结束 -->
</body>
</html>
评论页.css
* {
padding: 0px;
margin: 0px;
list-style: none;
}
body {
background-color: rgb(255, 255, 255);
background: url(../img1/底纹2.jpg) no-repeat;
background-size:cover ;
}
/* 导航条菜单 */
.nav-link{
margin-left: 160px;
font-size: large;
}
.dropdown-menu{
margin-left: 180px;
}
/* 中间内容整体框架 */
/* 中间内容容器大小 */
.mycontent {
width: 80%;
margin: 0 auto;
}
/* 中间内容每块(行)的背景色 */
.mycontent .row{
background: #f0f0f0;
}
/* 页面内容-图片 */
h1{
font-size: 24px;
position: relative;
}
/* 窗口图片 */
h1>img{
width: 30px;
position: absolute;
left: 41%;
}
/* 媒体查询 */
/* 视口宽度小于 908 像素时,窗口图片隐藏 */
@media all and (max-width: 908px) {
h1>img{
display: none; /* 不显示 */
}
}
/* 游客评价 热门景点*/
/* 游客评价中的文字 */
.pt_content1 .row table td{
padding: 20px;
font-size: 14px;
line-height: 20px;
}
/* 游客评价中的标题 */
.pt_content1 .row table h5{
font-weight: bold;
font-size: 16px;
height: 25px;
margin-bottom: 0px;
}
/* 游客评价中的推荐指数 */
.pt_content1 .row table strong{
line-height: 30px;
display: block;
}
/* 游客评价和热门景点中的图片 */
.pt_content1 .row img{
border-radius: 50%;
width: 100px;
height: 100px;
}
/* 热门景点中的标题 */
.media-body h5{
font-weight: bold;
font-size: 16px;
height: 25px;
margin-bottom: 0px;
}
/* 热门景点中的文字 */
.media-body p{
padding: 20px;
font-size: 14px;
line-height: 20px;
}
/* 精美图集 卡片 */
.pt_content2 .row div{
overflow: hidden;/* 超出了其指定的尺寸，超出部分将被隐藏 */
}
/* 精美图集和卡片中的图片 */
.pt_content2 .row img{
width: 100%;
padding: 10px 0;
}
/* 背景颜色设置为透明 */
.pt_content2 .row {
background: transparent;
}
/* 卡片 */
/* 卡片所占容器大小一致 */
.card {
height: 450px;
}
/* 使卡片中a标签内的详情介绍与容器底部距离一致对齐 */
.card-body {
display: flex;/* 设置为一个 flex 容器，使其子元素能够使用 Flexbox 布局 */
flex-direction: column;/* 主轴方向为垂直方向，即子元素会沿着垂直方向进行布局，从上到下依次排列 */
justify-content: space-between;/* 在垂直方向上平均地分配元素之间的空白空间，使得子元素在主轴方向上尽可能地填满容器的高度，从而实现底部对齐的效果 */
}
.card-body h5{
font-weight: bold;
font-size: 16px;
height: 25px;
margin-bottom: 0px;
}
/* 留言 */
/* 背景颜色设置为透明 */
.pt_content3 .row{
background: transparent;
}
/* 留言表单 */
.pt_content3 .row form{
width: 80%;
margin: 0 auto;
}
/* 留言多行文本输入框 */
.pt_content3 .row textarea{
border: 0;
resize: none;/* 用户将无法通过拖动边缘或角落来调整多行文本输入框的尺寸 */
outline: none;/* 用于移除元素的轮廓线 */
width: 100%;
border-radius:3px ; /* 圆角 */
}
/* 留言按钮 */
.pt_content3 .row button{
width: 100px;
border: 0;
outline: none;/* 用于移除元素的轮廓线 */
font-weight: bold;/* 粗体 */
border-radius:15px ;/* 圆角 */
}
/* 小屏幕时不出现导航条的搜索框 */
/* @media all and (max-width: 768px) {
.form-inline{
display: none;
}
} */
/* 徽章字体大小 */
.badge{
font-size: 85%;/* 文字大小 */
}
/* 滚动监听 */
/* 设置导航列表 */
#list-example {
position: fixed;/* 固定位置 */
top: 30px; /* 距离顶部的距离 */
width: 120px; /* 导航框的宽度 */
}
/* 导航列表的文字 */
.list-group-item-action{
text-align: center;/* 文字居中 */
}评论页.js
$(document).ready(function() {
// 游客评价、热门景点等前的窗口图片旋转效果
// 鼠标指向页面内容-图片时,图片顺时针旋转225度,过渡时间为0.4秒;鼠标移开时,图片恢复原始状态
$("h1 img").hover(
function() {
$(this).css({
"transform": "rotate(225deg)",
"transition": "0.4s linear"
});
},
function() {
$(this).css({
"transform": "",
"transition": ""
});
}
);
// 游客评价图片效果
// 鼠标指向表格中的图片时,图像的大小会缩小为原来的0.8倍,过渡时间为0.5秒;当鼠标移开时恢复原来的大小
$(".pt_content1 .row table tr").hover(
function(){
$(this).find("img").css({
"transform": "scale(0.8)",
"transition": "0.5s linear"
});
},
function(){
$(this).find("img").css({
"transform": "",
"transition": ""
});
}
);
// 游客评价文字标题效果
// 鼠标指向表格中的标题文字时,标题文字颜色改变,字体变大;当鼠标移开时恢复原始状态
$(".pt_content1 .row table tr").hover(
function(){
$(this).find("h5").css({
"font-size": "18px",
"color": "rgb(229,36,22)"
});
},
function(){
$(this).find("h5").css({
"font-size": "",
"color": ""
});
}
);
// 热门景点图片效果
// 鼠标指向媒体对象中的图片时,图像的大小会变为原来的1.2倍,过渡时间为0.5秒;当鼠标移开时恢复原来的大小
$(".list-unstyled .media").hover(
function(){
$(this).find("img").css({
"transform": "scale(1.2)",
"transition": "0.5s linear"
});
},
function(){
$(this).find("img").css({
"transform": "",
"transition": ""
});
}
);
// 热门景点背景效果
// 鼠标指向媒体对象时,背景颜色改变;当鼠标移开时恢复
$(".list-unstyled .media").hover(
function(){
$(this).css({
"background": "lightgrey"
});
},
function(){
$(this).css({
"background": ""
});
}
);
// 热门景点文字标题效果
// 鼠标指向媒体对象中的标题文字时,标题文字颜色改变,字体变大;当鼠标移开时恢复原始状态
$(".list-unstyled .media ").hover(
function(){
$(this).find("h5").css({
"font-size": "24px",
"color": "rgb(229,36,22)"
});
},
function(){
$(this).find("h5").css({
"font-size": "",
"color": ""
});
}
);
// 图集、卡片图片效果
// 鼠标指向页面内容-图像或卡片中的图片时,图像的大小会变为原来的1.2倍,过渡时间为0.5秒;当鼠标移开时恢复原来的大小
$(".pt_content2 .row img").hover(
function(){
$(this).css({
"transform": "scale(1.2)",
"transition": "0.5s linear"
});
},
function(){
$(this).css({
"transform": "",
"transition": ""
});
}
);
// 按钮效果
// 鼠标指向提交按钮时,按钮的背景颜色会改变;当鼠标移开时恢复原来的背景色
$(".pt_content3 .row button").hover(
function(){
$(this).css("background", "rgba(229, 36, 22, 0.503)");
},
function(){
$(this).css("background", "");
}
);
// 点击返回按钮触发警示框
$("#myButton").click(function() {
$("#myAlert").addClass("show");
});
// $("#myButton").click(function() {
// $("#myAlert").toggleClass("show");
// });
// $("#myAlert .close").click(function() {
// $("#myAlert").removeClass("show");
// });
// 滚动监听 展示或隐藏导航列表
var flag = true;
// 获取页面中第二部分距离文档顶部的高度
var rightTop = $(".scrollspy-example h4").eq(1).offset().top;
toggleTool();
// 滚动函数实现根据页面滚动位置展示或隐藏导航列表
function toggleTool() {
if ($(document).scrollTop() >= rightTop) {
$(".list-group").fadeIn();
} else {
$(".list-group").fadeOut();
}
}
$(window).scroll(function() {
toggleTool();
});
// 中屏幕、小屏幕时不出现滚动监听的导航列表
$(window).resize(function() {
if ($(window).width() <= 768) {
$(".list-group-item").hide(); // 窗口宽度小于等于768px，隐藏导航列表
} else {
$(".list-group-item").show(); // 窗口宽度大于768px，显示导航列表
}
});
// 小屏幕时不出现导航条的搜索框
$(window).resize(function() {
if ($(window).width() < 768) {
$(".form-inline").hide(); // 窗口宽度小于768px，隐藏搜索框
} else {
$(".form-inline").show(); // 窗口宽度大于等于768px，显示搜索框
}
});
function validateForm() {
var isValid = true;
// 验证姓名
var nameInput = $("#Input1");
var nameValue = $.trim(nameInput.val());
if (nameValue === "" || nameValue.length < 6) {
nameInput.parent().append("<span class='msg onError' style='position:absolute'>非空，长度6位以上</span>");
isValid = false;
} else {
nameInput.parent().find(".high").remove();
nameInput.parent().append("<span class='msg onSuccess' style='position:absolute'>输入正确</span>");
}
// 验证邮箱
var emailInput = $("#Input2");
var emailValue = $.trim(emailInput.val());
var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
if (emailValue === "" || (emailValue !== "" && !regEmail.test(emailValue))) {
emailInput.parent().append("<span class='msg onError' style='position:absolute'>请输入正确的邮箱格式</span>");
isValid = false;
} else {
emailInput.parent().find(".high").remove();
emailInput.parent().append("<span class='msg onSuccess' style='position:absolute'>输入正确</span>");
}
return isValid;
}
$("form").submit(function() {
return validateForm();
});
$(".reset").click(function(){
$(this).parent().siblings().find("span").remove();
});
});表单验证.js
function a() {
var s1 = document.getElementById("Input1").value;
var s3 = document.getElementById("Input2").value;
var s2 = $('textarea').val();
if(s1=="" || s2.trim()=="" || s3=="") {
alert("不能提交");
return false;
} else {
alert("提交成功");
return true;
}
}注意引入jquery.min.js和bootstrap
结果
可适应电脑、平板、手机
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
