Bootstrap4响应式网页设计，本套大作业共计12个页面，均为响应式页面，使用bootstrap4制作导航栏、轮播图，使用@media screen and (min-width:480px){... 、 798px、1024px来控制移动端、平板端、PC端对应的响应式尺寸，整体美观度较高，网页中包含：Div+CSS、首页JS轮播图、视频、表单、鼠标滑过效果、二级页面、三级页面，LOGO设计~
Bootstrap响应式 风景主题网页设计 HTML CSS适配PC 手机端
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中国印象</title>
<meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />
<meta name="format-detection" content="telephone=no">
<script language="javascript">
if(screen.width<480)
{
document.getElementById('WebViewport').setAttribute('content', 'width=100%,initial-scale=' + screen.width / 480 + ',target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1');
}
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
@media screen and (min-width:480px){ /* 屏幕宽度大于等于480px小于上一界定值时使用以下css */
.class {
background:#ccc;
}
.recommend { /* 大盒子使用flex属性使得盒子内部内容可以弹性布局，定义该大盒子的尺寸为100%或其他用来实现不同宽度屏幕的自适应 */
height: auto;
width: 100%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
border-radius: 5px;
background-color: #f2f2f2;
}
.img-pt {
width: 100%; /* 将图片盒子自适应 */
height: auto;
margin-top: 2px;
margin-right: auto;
margin-left: auto;
}
.text { /* 定义文本内容盒子自适应 */
height: auto;
width: 100%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
margin-top: 10px;
}
.text1 { /* 文字内容设置 */
height: auto;
width: 85%;
margin-top: 30px;
margin-bottom: 30px;
line-height: 29px;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
}
.footer { /* 底部版权信息栏设定 */
width: 100%;
height: 95px;
margin-right: auto;
margin-left: auto;
background-color: #333;
font-family: "微软雅黑";
font-size: 14px;
color: #FFF;
}
}
@media screen and (min-width:768px){ /* 屏幕宽度大于等于768px小于上一界定值时使用以下css 注释同上 */
.class
{
background:#666;
}
.recommend {
height: auto;
width: 85%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
border-radius: 5px;
background-color: #f2f2f2;
}
.img-pt {
width: 85%;
height: auto;
margin-top: 2px;
margin-right: auto;
margin-left: auto;
}
.text {
height: auto;
width: 85%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
margin-top: 10px;
}
.text1 {
height: auto;
width: 85%;
margin-top: 30px;
margin-bottom: 30px;
line-height: 29px;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
}
.footer {
width: 85%;
height: 95px;
margin-right: auto;
margin-left: auto;
background-color: #333;
font-family: "微软雅黑";
font-size: 14px;
color: #FFF;
}
}
@media screen and (min-width:1024px){/* 屏幕宽度大于等于1024px小于上一界定值时使用以下css */
.class
{
background:#ffa8a8;
}
.recommend {
height: auto;
width: 60%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
border-radius: 5px;
background-color: #f2f2f2;
}
.img-pt {
width: 60%;
height: auto;
margin-top: 2px;
margin-right: auto;
margin-left: auto;
}
.text {
height: auto;
width: 60%;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
border: 1px solid #e4e4e4;
margin-top: 10px;
}
.text1 {
height: auto;
width: 85%;
margin-top: 30px;
margin-bottom: 30px;
line-height: 29px;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
}
.footer {
width: 60%;
height: 95px;
margin-right: auto;
margin-left: auto;
background-color: #333;
font-family: "微软雅黑";
font-size: 14px;
color: #FFF;
}
}
.logo {
padding: 8px;/* 定义logo外框盒子的尺寸 左右边距自适应 */
width: 18%;
margin-right: auto;
margin-left: auto;
text-align:center;
}
.img-responsive { /* 让图片的宽度最大等于图片的真实尺寸且可以自适应父级盒子宽度 */
display: inline-block;
height: auto;
max-width: 100%;
}
.recommend1 { /* 固定宽度高度盒子的相关定义 */
height: 304px;
width: 250px;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #e4e4e4;
line-height: 29px;
text-align: center;
font-family: "微软雅黑";
font-size: 15px;
color: #333;
background-color: #FFF;
}
.recommend1 img:hover { /* 鼠标滑过图片效果设置 */
opacity : 0.800000011920928955078125;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<link rel=stylesheet type=text/css href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="jspopper.min.js"></script>
</head>
<body>
<div class="logo"><a href="index.html"><img src="images/logo.png" class="img-responsive" ></a></div>
<!-- 弹性导航栏开始 -->
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">首页 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="list.html">风景推荐 <img src="images/hot.gif" width="24" height="10"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="dynamic.html">旅游新闻 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="page.html">当季热门 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="video.html">在线视频 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="message.html">给我留言 </a>
</li>
</ul>
</nav>
<!-- 弹性导航栏结束 -->
<!-- 轮播图开始 -->
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner-01.jpg" width="1000" height="350"> </div>
<div class="carousel-item">
<img src="images/banner-02.jpg" width="1000" height="350">
</div>
<div class="carousel-item">
<img src="images/banner-03.jpg" width="1000" height="350">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- 轮播图结束 -->
<div class="recommend">
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="#"><img src="images/index01.jpg" width="245" height="244"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">中国印象</td>
</tr>
</table>
</div>
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="#"><img src="images/index02.jpg" width="245" height="244"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">中国印象</td>
</tr>
</table></div>
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="#"><img src="images/index03.jpg" width="244" height="244"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">中国印象</td>
</tr>
</table></div>
</div>
<div class="img-pt"><img src="images/banner.jpg" width="100%" height="auto"></div>
<div class="text">
<div class="text1">中国的世界自然遗产：九寨沟风景名胜区、武陵源风景名胜区、黄龙风景名胜区、云南三江并流保护区、中国三清山 、中国喀斯特 、大熊猫栖息地。
中国的世界文化遗产：长城、莫高窟、平遥古城、皖南古村落（西递村、宏村）、承德避暑山庄和周围寺庙、云冈石窟、大足石刻、明清皇家宫殿、苏州古典园林、秦始皇陵兵马俑、青城山与都江堰、曲阜孔庙孔林孔府、龙门石窟、河南安阳殷墟、明清皇家陵寝、天坛、颐和园、丽江古城、周口店北京人遗址、武当山古建筑群、拉萨布达拉宫、高句丽王城王陵及贵族墓葬、澳门历史城区、庐山（文化景观）、开平碉楼与村落、福建土楼。
中国的世界文化与自然双遗产：泰山、黄山、峨眉山和乐山大佛、武夷山。
中国的人类口述遗产和非物质遗产：昆曲、古琴艺术、新疆木卡姆舞以及和蒙古国共同申报的蒙古长调艺术。
中国的长寿之乡有广西桂林市永福县等。<br>
</div>
</div>
<div class="footer"><table width="100%" border="0">
<tr>
<td height="90" align="center">Copyright Reserved Me</td>
</tr>
</table>
</div>
</body>
</html>
9053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
