我的技术与生活——通过Web前端（html, css, javascripte）相关学习，设计并完成了一个简单的关于家乡介绍的网页界面

date: 2025-02-20 20:18:15
tags: web

一，整体思路及相关准备

1.主要分为登录界面和主界面
登录界面：body部分以一张背景图完全覆盖容器，整个登录表单被包裹在

标签中，并设计表单登录容器
2.主界面：多种背景图片、导含航栏、、底部导航栏、侧边导航栏以及背景音乐播放功能。运用 HTML 进行内容布局，通过 CSS 实现样式设计，借助 JavaScript 实现简单交互。
3这是准备的一些图片,音频

二，登录界面实现

1.html部分,构建div class=”yi” 容器，内部有一个表单，实现登录样式，但未完成交互功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="yi">
        <form>
            <div class="er">
         <span id="si">登录</span>
  <span>账号：</span>
  <input type="text" placeholder="请输入账号" class="san" style="width:170px;height:30px;"
        pattern="^[0-9]{10}$"><br>
                <span>密码：</span>
     <input type="password" placeholder="请输入密码" class="qi" style="width:170px;height:30px;"
                    pattern="^(?=.*[a-z])(?=(?:.*[A-Z]){2})   <input
                    type="submit"value=""class="ba" style="width:45px;height:35px;">
                <input type="submit" value="注册" class="shi" style="width:45px;height:35px;">
            </div>
        </form>
    </div>
</body>

</html>

2.css部分

* {
    margin: 0;
    padding: 0;
    font-family: "宋体";
}

.yi {
    background: url(img/fj1.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 1000px;
    background-size: cover;
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.er {
    width: 300px;
    height: 380px;
    border: 3px solid gray;
    border-radius: 10px;
    box-shadow: 3px 3px 5px gray;
    text-align: center;
    color: white;
    padding-top: 40px;
    margin-top: 150px;
}

#si {
    font-size: 60px;
    display: block;
    color: white;
}

.san,
.qi {
    margin-left: 10px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid white;
}

span {
    color: black;
}

.ba,
.shi {
    margin: 50px 30px;
    border-radius: 5px;
    border: 1px solid white;
}

3.登录界面效果呈现

二，主界面实现

1.： HTML 文件中加入CSS ，style标签设置页面各元素的外观和布局
a标签加入多个超链接，实现宣城美景跳转的百度资料用JavaScript标签
写了alert警示，元素嵌套实现下拉功能。用span元素，用于对文本进行分组和样式设置。通过 id 为其添加样式。加入音频标签实现音乐播放
2.以下是主界面图片展示

———————————————

———————————————

点击图片实现网页跳转

4.主界面完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background-color: gray;
			}

			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: black;

			}

			.a {
				width: 100%;
				height: 70px;
				background-color: gray;
				opacity: 0.8;
				color: black;
				display: flex;
				justify-content: center;
				position: fixed;
				top: 0;
			}

			li {
				list-style: none;
				width: 100px;
				height: 70px;
				line-height: 70px;
				text-align: center;
			}

			.b>li {
				float: left;
			}

			.b li ul li {
				display: none;
				background-color: pink;
				transition-property: all;
				transition-duration: 1s;
				transition-timing-function: ease-out;
				transition-delay: 1ms;
			}

			.b>li:hover {
				background-color: pink;
			}

			.b>li:hover ul li {
				display: block;


			}

			.b li ul li:hover {
				background-color: white;

			}

			.c {
				height: 450px;
				width: 100%;
				position: absolute;
				top: 0;

			}

			.d {
				width: 35px;
				height: 25px;
				position: absolute;
				right: 10px;
				border: 1px solid white;
				border-radius: 5px;

			}

			.d a {
				color: white;

			}

			.d {
				margin-top: 20px;
			}

			.e {
				border-radius: 5px;
				background-color: snow;
				margin-top: 20px;
				position: absolute;
				right: 60px;
			}

			.f {
				position: absolute;
				right: 270px;
				top: 20px;
			}

			.g {
				width: 1000px;
				height: 500px;

				margin: 50px auto 0;
				border-top: 1px solid black;
				border-bottom: 1px solid black;


			}

			.l {
				width: 1000px;
				height: 500px;

				margin: 50px auto 0;
				border-top: 1px solid black;



			}

			.h {
				margin-top: 500px;
				font-size: 60px;
				color: skyblue;
				font-family: "宋体";
				text-align: center;
			}

			.k {
				margin-top: 100px;
				font-size: 60px;
				color: skyblue;
				font-family: "宋体";
				text-align: center;
			}

			.g1,
			.g2,
			.g3 {
				float: left;
				margin: 15px;
				height: 450px;
				width: 300px;
				overflow: hidden;
				border: 1px solid gray;
				overflow-y: scroll;
			}

			#wu,
			#qi,
			#ba {
				font-family: "宋体";
				font-size: 20px;
				display: block;
				text-align: center;

			}

			.m {
				width: 100%;
				height: 100px;
				background-color: green;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
			}

			.m>a {
				color: white;
			}

			.m>a:hover {
				color: red;
			}

			.l>div {
				width: 200px;
				height: 350px;
				background-color: white;
				float: left;
				margin: 40px 23px;

			}

			.l11 {
				width: 200px;
				height: 300px;
				background-color: gray;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.7;
				text-align: center;
				padding-top: 150px;
				color: yellow;
				font-size: 25px;
				display: none;
			}

			.l1 {
				position: relative;
			}

			.l1:hover .l11 {
				display: block;

			}

			.l11>a img {
				width: 20px;
				height: 20px;
				margin: 10px;
				border-radius: 50%;
				transition-duration: 0.5s;
				transition-timing-function: ease;

			}

			.l11>a:hover img {
				width: 30px;
				height: 30px;
				background-color: red;

			}

			.n {
				position: fixed;
				right: 5px;
				top: 300px;
			}

			.g1 img {
				width: 300px;
				height: 281px;
				transition-duration: 1s;
			}

			.g1:hover img {
				width: 340px;
				height: 300px;

			}

			.g2 img {
				width: 300px;
				height: 281px;
				transition-duration: 1s;
			}

			.g2:hover img {
				width: 340px;
				height: 300px;

			}

			.g3 img {
				width: 300px;
				height: 281px;
				transition-duration: 1s;
			}

			.g3:hover img {
				width: 340px;
				height: 300px;

			}

			::-webkit-scrollbar {
				width:10px;
				

			}
		

			.z {
				position: absolute;
				right: 10px;
			}
			
		</style>
	</head>
	<body>
		<script>
			alert("走进宣城")
		</script>
		<img src="img/cdf639b0368d447f53ffe8db735fbab.jpg" class="c">
		<div class="a">
			<img src="img/宣城.png">
			<ul class="b">
				<li><a href="#">网站首页</a></li>
				<li>宣城历史<ul>
						<li>徽文化</li>
						<li>行政变迁</li>
						<li>革命历史</li>
					</ul>
				</li>
				<li>风景旅游<ul>
						<li>敬亭山</li>
						<li>太极洞</li>
						<li>桃花潭</li>
						<li>徽杭古道</li>
					</ul>
				</li>
				<li>当地美食<ul>
						<li>水阳三宝</li>
						<li>麻辣粉丝</li>
						<li>山药炖鸽</li>
						<li>水东蜜枣</li>
					</ul>
				</li>
				<li>联系我们</li>
			</ul>
			<form action="https://search.xuancheng.gov.cn/searchData"><img src="img/search.png" class="f">
				<input type="text" style="width:200px;height:20px;" class="e" placeholder="输入你想了解我们的" name="keyword">
			</form>


		</div>
		<div class="h">走进宣城</div>
		<div class="g">
			<div class="g1"><img src="img/7e94ec7534bf8875295eb00c4e55f92.jpg"><br><span
					id="wu">宣城简介</span><br>宣城位于安徽省东南部，地处皖东南，毗邻苏浙，地近沪杭。全市国土面积12,340平方公里，居全省第4位 。2023年末全市户籍人口约为274.4万
				。现辖宣州区、宁国市、广德市和郎溪县、泾县、绩溪县、旌德县 。宣城是长江三角洲中心区27城之一，是南京都市圈成员城市，G60科创走廊中心城市，皖江城市带承接产业转移示范区一翼，皖苏浙交汇区域中心城市
				。2023年宣城全域纳入上海大都市圈规划范围 。</div>
			<div class="g2"><img src="img/ca65250ebaa027d7945b4547578a74c.jpg"><br><span
					id="qi">宣城文化</span><br>宣城文化丰富多彩。其有深厚的诗歌文化，敬亭山深受历代文人墨客喜爱，他们留下众多诗篇，使其成为“江南诗山”。宣城还是文房四宝之乡，宣纸、宣笔、徽墨、宣砚闻名遐迩，其中宣纸有一千五百多年历史，质地优良，是书画艺术的首选载体，宣笔制作工序繁多，徽墨独具特色，宣砚也深受文人喜爱。徽商文化在宣城也有体现，如胡氏宗祠走出许多名人，他们推动了当地文化交流与融合。民俗文化方面，有由南宋舞龙活动演变而来的云舞，还有盛行于宣州等地的皖南花鼓戏。此外，宣城的建筑文化别具一格，像龙川景区保留着完好的古徽州建筑群，充满古徽州风情。
			</div>
			<div class="g3"><img src="img/420be31e008ec39a9a2b26d95b48534.jpg"><br><span
					id="ba">宣城历史</span><br>宣城历史源远流长。在先秦时属扬州之域，春秋战国先后归属吴、越、楚。秦代归鄣郡，西汉设丹阳郡，郡治宛陵，范围较广。三国时属东吴，在两晋南北朝，虽政权交替频繁，但因北方人口南迁而得到开发。

				隋代废丹阳郡设宣州，开启宣州之名。唐朝时宣州是江南重要州府，经济繁荣，文化昌盛，与苏、杭并列江南三大中心城市。宋元时期，其归属和名称有所变化，宋代先属江南路后属江南东路，南宋处对峙前沿仍有活力，元代属宁国路。

				明清时期，明朝属宁国府直隶京师，农业和手工业较发达，也是徽商活动区域；清朝仍为宁国府，文化教育持续发展。近现代以来，宣城也在时代变迁中续写自己的历史。</div>
		</div>
		<br>
		<div class="k">秀丽宣城</div>
		<div class="l">
			<div class="l1"><img src="img/9e53479573b63f121c102f593546746.jpg" width="200px" height="400px">
				<div class="l11">敬亭山<br><a href="https://baike.baidu.com/item/%E6%95%AC%E4%BA%AD%E5%B1%B1/3295589"
						target="_blank"><img src="img/jiantou.png"></a></div>
			</div>
			<div class="l1"><img src="img/1c3b233caeb7686375a3a94118dd73e.jpg" width="200px" height="400px">
				<div class="l11">桃花潭<br><a
						href="https://baike.baidu.com/item/%E6%A1%83%E8%8A%B1%E6%BD%AD/8578966?fromModule=lemma_search-box"
						target="_blank"><img src="img/jiantou.png"></a></div>
			</div>
			<div class="l1"><img src="img/25082f472366dc449fca995adfc0373.jpg" width="200px" height="400px">
				<div class="l11">太极洞<br><a
						href="https://baike.baidu.com/item/%E5%A4%AA%E6%9E%81%E6%B4%9E/257273?fromModule=lemma_search-box"
						target="_blank"><img src="img/jiantou.png"></a></div>
			</div>
			<div class="l1"><img src="img/e7a4d161550d47d4d158d6ad6d60d5e.jpg" width="200px" height="400px">
				<div class="l11">龙川古镇<br><a
						href="https://baike.baidu.com/item/%E7%BB%A9%E6%BA%AA%E9%BE%99%E5%B7%9D%E5%8F%A4%E6%9D%91/15601234?fromModule=search-result_lemma"
						target="_blank"><img src="img/jiantou.png"></a></div>
			</div>

		</div>
		<div class="m"><a href="#">网站首页</a> |<a href="#">宣城历史</a> |<a href="#">风景旅游</a> |<a href="#">当地美食</a> |<a
				href="#">联系我们</a><img src="img/erwm.png" width="80px" height="80px" class="z">
		</div>
		<div class="n"><a href="登录.html" title="登录"><img src="img/a34089777f2c5b80e0b2fd4bd338e5f.jpg" width="40px"
					height="40px"></a>
			<br><a href="#" title="人工服务"><img src="img/kk.png" width="40px" heigth="40px"></a>
			<br><a href="#" title="回到顶部"><img src="img/hh.png" width="40px" height="40px"></a>
		</div>
 	</body>
<audio controls>
    <source src="audio/墨书扬 - 宣城 [mqms].ogg" type="audio/ogg">
</audio>
</html>

站点信息

通过Web前端（html, css, javascripte）相关学习，设计并完成了一个简单的关于家乡介绍的网页界面

一，整体思路及相关准备

二，登录界面实现

二，主界面实现

评论区

目录

公告栏