目录
一、网页简介
本实例共包含4个页面,应用html+css,包括Div、菜单栏、文字轮翻等。页面简单,代码精简,为初级的学生水平,适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页效果
三、代码展示
节选代码示例如下:
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css">
<title>老君山</title>
</head>
<body>
<header class="auto">
<img src="./images/图标.png" alt="">
河南老君山名胜景区
</header>
<div class="hd auto flex">
<p>洛阳老君山欢迎您</p>
<ul class="flex">
<li style="background-color: #eee;"><a href="index.html">首页</a></li>
<li><a href="file2.html">奇景一览</a></li>
<li><a href="file3.html">美文美图</a></li>
<li><a href="file4.html">关于我们</a></li>
</ul>
</div>
<div class="banner auto">
<img src="./images/13.jpg" alt="">
</div>
<div class="main1 auto flex">
<div>
<h2>洛阳老君山风景区介绍</h2>
<p>老君山风景名胜区位于河南省栾川县城东区,面积2666公顷,是伏牛山世界地质公园、国家AAAAA级旅游景区、国家级自然保护区、省级风景名胜区、省级文物保护单位。
老君山古号景室山,因东周道家始祖老子归隐修炼于此而得名;是八百里伏牛山主峰,海拔2217米。老君山形成于十九亿年前的大陆造山运动,造就了其千姿百态、群峰竞秀,拔地通天、气势磅礴的景观;塑造了“华夏绿色心脏,世界地质奇观”的主题形象。</p>
</div>
<img src="./images/10.jpg" alt="">
</div>
<div class="main1 auto flex">
<div>
<h2>地理位置</h2>
<p>老君山庙宇道观群历史悠久,道教文化源远流长,自北魏建老君庙以来,已成为中原香客朝拜中心,明万历十九年颁赐老君山道经诏谕,封为“天下名山”。已建成灵官殿、淋醋殿、救苦殿、老君庙、道德府等庙宇群落,且文物古迹众多。</p>
</div>
<img src="./images/7.jpg" alt="">
</div>
<div class="main1 auto flex">
<div>
<h2>历史文化</h2>
<p>老君山集自然景观与道教文化与一身,终以其雄险奇秀的神采成为中华大地的瑰宝。目前已开发建成了八大景区,138个景点,是旅游观光、祭拜朝圣、休闲度假、科考探险、动植物观赏的理想目的地。</p>
</div>
<img src="./images/4.jpg" alt="">
</div>
<footer class="auto">
<p>咨询电话:xxx-xxx 邮箱:xxx@126.com</p>
<p>微信服务号:xxx</p>
</footer>
</body>
</html>
...
2.CSS
html{
font-family: "microsoft yahei,arial, helvetica, sans-serif";
font-size: 16px;
}
*{
margin: 0;
padding: 0;
}
li,ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.flex{
display: flex;
}
.auto{
margin: 0 auto;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
header{
width: 1100px;
height: 80px;
background-color: #B0C2D8;
font-size: 40px;
font-weight: 600;
letter-spacing: 8px;
}
header img{
width: 70px;
height: 70px;
margin: 5px 14px 0 14px;
vertical-align: middle;
}
.hd{
width: 1100px;
height: 40px;
margin: 10px auto;
justify-content: space-between;
}
.hd p{
width: 300px;
line-height: 40px;
font-family: "楷体";
font-size: 30px;
color: skyblue;
}
.hd ul{
width: 460px;
height: 40px;
justify-content: space-between;
}
.hd ul li{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 24px;
}
.hd ul li a{
display: block;
}
.banner,.banner img{
width: 1100px;
height: 450px;
}
...
四、要点解析
1.页头引用CCS样式:
2.应用DIV布局,设置菜单栏:
3.插入主图:
4.div布局“地理位置”分栏,设置二级目录及其介绍说明:
html代码
css定义“main1”的样式
5.页脚设置:
6.文字向上轮翻设置:
五、更多推荐
【关注作者|获取更多源码|优质文章】Web前端网页制作、大学生毕业辅导和期末大作辅导、案例模板源码、技术交流,有兴趣的联系我!
您的支持是我创作的动力!看到这里就【点赞收藏博文】,3Q!
更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客。