我的第一个html网页（完整代码）

刘学.

已于 2022-04-11 15:12:48 修改

阅读量1.4w

点赞数 17

分类专栏： HTML学习笔记文章标签： css html

于 2021-06-08 11:06:24 首次发布

本文链接：https://blog.csdn.net/weixin_51275821/article/details/117693257

版权

HTML学习笔记专栏收录该内容

4 篇文章 1 订阅

订阅专栏

下面的代码全部完整可用
~~学习四天，历时一周终于完成~~
- 首先在HBuilder X上建一个基于HTML的项目如图：

参考“宁夏博物馆”的官网，我们team共十人，我负责“公众服务”模块

global.css中设置全局样式

- liuxue.css中的代码为：

.container{
	width: 100%;
	/* height: 100%; */
	background-color:ghostwhite;
	/* background-image: url(../liuxueimg/f.jpg); */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
}
.header_above{
    width: 1900px;
    height:100px;
	background-color:#333;
	margin-bottom: 30px;
	position: fixed;
}
.headerin{
	width: 1208px;
	height: 100px;
	background-color: #333;
	margin: auto;
}
.logobox{
	width: 200px;
	height: 75px;
	background-color: #333;
	padding-top: 25px;
}
.menubox{
	width: 1008px;
	height: 100px;
	background-color:#333;
}
.menubox1{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox1right{
	width: 896px;
	height: 100px;
	/* background-color:hotpink; */
}
.menubox2{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox2right{
	width: 784px;
	height: 100px;
	/* background-color: azure; */
}
.menubox3{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox3right{
	width: 672px;
	height: 100px;
	/* background-color:chartreuse; */
}
.menubox4{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox4right{
	width: 560px;
	height: 100px;
	/* background-color:chartreuse; */
}
.menubox5{
	width: 112px;
	height: 60px;
	background-color:black;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox5right{
	width: 448px;
	height: 100px;
	/* background-color:chartreuse; */
}
.menubox6{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox6right{
	width: 336px;
	height: 100px;
	/* background-color:chartreuse; */
}
.menubox7{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox7right{
	width: 224px;
	height: 100px;
	/* background-color:chartreuse; */
}
.menubox8{ 
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.menubox9{
	width: 112px;
	height: 60px;
	background-color:#333;
	padding-top: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	/* color: blanchedalmond; */
}
.main{
	width:1200px;
	height:700px;
	/* padding-left: 340px; */
	/* padding-right: 340px; */
	/* background-color: skyblue; */
	margin-top: 20000px;
	margin-bottom: 20px;
	margin: auto;
	/* background-image: url(../liuxueimg/g.jpg); */
	/* background-image: url(../liuxueimg/f.jpg); */
}
.box1{
	width: 200px;
	height: 100%;
	/* background-color: hotpink; */
	/* margin: fl; */
	text-align: center;
	font-size: 22px;
	font-weight: bold;
}
.box2{
	width:900px;
	height: 100%;
	/* background-color: hotpink; */
}
.text{
	height:150px;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 20px;
	padding-right: 20px;
	/* background-color: blue; */
}
.imgbox{
	height: 110px;
	width: 160px;
	margin-right: 20px;
	background-color: #333;
}
.imgboxright{
	height: 100px;
	width: 680px;
	/* background-color: chartreuse; */
	padding-top: 10px;
}
.header_below{
	width:1900px;
	height:120px;
	background-color: #333;
	/* margin-top: 20px;	 */
}
.imformation{
	width: 500px;
	height:50px;
	text-align: center;
	background-color: #333;
	padding-top: 40px;
	padding-left : 150px;
}
.imformation_min{
	width: 100%;
	height: 10px;
	background-color: #333;
	font-size: 10px;
	margin-bottom: 5px;
	color: white;
	/* padding-right: 30px; */
}
.team_image{
	width: 100px;
	height: 100%;
	background-color: #333;
	padding-top: 10px;
}
.btn:hover{
	background-color:sandybrown;
}
.xllb{
	display: none;
	position: absolute;
	background-color: #333;
	/* background:transparent ; */
	width: inherit;
}
/* .xllb a {
	color: black;
	display: block;
} */
/* .xllb1 a:hover {
	background-color: #F4A460;
} */
.menubox1:hover .xllb{
	display: block;
}
.menubox2:hover .xllb{
	display: block;
}
.menubox4:hover .xllb{
	display: block;
}
.menubox7:hover .xllb{
	display: block;
}
.fanhuidingbu{
	background: transparent;
	border-width: 0px;
	outline: none;
	padding-top: 180px;
	padding-left: 830px;
}
#screen{
	width: 5000px;
	height: 400px;
	/* display: inline; */
	/* display: block; */
	float:left;
	/* margin-left: 0px; */
	animation: 10s dhmc infinite;
}
#tv{
	width: 3000px;
	height: 400px;
	/* overflow: hidden; */
	/* margin-left: 0px; */
}
@keyframes dhmc{
	0%{}
	10%{transform: translateX(0px);}
	20%{transform: translateX(-400px);}
	30%{transform: translateX(-800px);}
	40%{transform: translateX(-1200px);}
	50%{transform: translateX(-1600px);}
	60%{transform: translateX(-2000px);}
	70%{transform: translateX(-2400px);}
}

- liuxue.html中的代码为(链接和图片在宁夏博物馆官网上)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>宁夏博物馆 - 共众服务</title>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/liuxue.css"/>
		<style>
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 上标题开始 -->
			<div class="header_above">
				<div class="headerin">
					<div class="logobox fl">
						<a href="https://www.baidu.com/"><img src="liuxueimg/logo-nx.png" width="100%"/></a>
					</div>
					<div class="menubox fr" >
						<div class="menubox1 fl">
							<a href="https://www.baidu.com/">
								<p style="color: blanchedalmond;">
								<span class="btn">馆情概括</span>
								</p>
							</a>
							<div class="xllb">
								<a href="www.baidu.com">
									<p style="color: blanchedalmond;">
										<span class="btn">馆情介绍</span>
									</p>
								</a>
								<a href="www.baidu.com">
									<p style="color: blanchedalmond;">
										<span class="btn">现任领导</span>
									</p>
								</a>
								<a href="www.baidu.com">
									<p style="color: blanchedalmond;">
										<span class="btn">组织机构</span>
									</p>
								</a>
								<a href="www.baidu.com">
									<p style="color: blanchedalmond;">
										<span class="btn">大事纪要</span>
									</p>
								</a>
							</div>
						</div>
						
						<div class="menubox1right fr">
							<div class="menubox2 fl">
								<a href="https://www.baidu.com/">
									<p style="color: blanchedalmond;">
										<span class="btn">动态信息</span>
									</p>
								</a>
								<div class="xllb">
									<a href="www.baidu.com">
										<p style="color: blanchedalmond;">
											<span class="btn">本馆要闻</span>
										</p>
									</a>
									<a href="www.baidu.com">
										<p style="color: blanchedalmond;">
											<span class="btn">通知公告</span>
										</p>
									</a>
									<a href="www.baidu.com">
										<p style="color: blanchedalmond;">
											<span class="btn">文博动态</span>
										</p>
									</a>
								</div>
							</div>
							<div class="menubox2right fr">
								<div class="menubox3 fl">
									<a href="https://www.baidu.com/">
										<p style="color: blanchedalmond;">
											<span class="btn">党建工作</span>
										</p>
									</a>
								</div>
								<div class="menubox3right fr">
									<div class="menubox4 fl">
										<a href="https://www.baidu.com/">
											<p style="color: blanchedalmond;">
												<span class="btn">展览展示</span>
											</p>
										</a>
										<div class="xllb">
											<a href="www.baidu.com">
												<p style="color: blanchedalmond;">
													<span class="btn">常设展览</span>
												</p>
											</a>
											<a href="www.baidu.com">
												<p style="color: blanchedalmond;">
													<span class="btn">临时展览</span>
												</p>
											</a>
											<a href="www.baidu.com">
												<p style="color: blanchedalmond;">
													<span class="btn">近期展览</span>
												</p>
											</a>
											<a href="www.baidu.com">
												<p style="color: blanchedalmond;">
													<span class="btn">数字展览</span>
												</p>
											</a>
										</div>
									</div>
									<div class="menubox4right fr">
										<div class="menubox5 fl">
											<a href="https://www.baidu.com/">
												<p style="color: blanchedalmond;">
													<span class="btn">公众服务</span>
												</p>
											</a>
										</div>
										<div class="menubox5right fr">
											<div class="menubox6 fl">
												<a href="https://www.baidu.com/">
													<p style="color: blanchedalmond;">
														<span class="btn">精品文物</span>
													</p>
												</a>
											</div>
											<div class="menubox6right fr">
												<div class="menubox7 fl">
													<a href="https://www.baidu.com/">
														<p style="color: blanchedalmond;">
															<span class="btn">学术研究</span>
														</p>
													</a>
													<div class="xllb">
													<a href="www.baidu.com">
														<p style="color: blanchedalmond;">
															<span class="btn">学术成果</span>
														</p>
													</a>
													<a href="www.baidu.com">
														<p style="color: blanchedalmond;">
															<span class="btn">历史文化</span>
														</p>
													</a>
													<a href="www.baidu.com">
														<p style="color: blanchedalmond;">
															<span class="btn">文物保护</span>
														</p>
													</a>
													</div>
												</div>
												<div class="menubox7right fr">
													<div class="menubox8 fl">
														<a href="https://www.baidu.com/">
															<p style="color: blanchedalmond;">
																<span class="btn">宣传教育</span>
															</p>
														</a>
													</div>
													<div class="menubox9 fr">
														<a href="https://www.baidu.com/">
															<p style="color: blanchedalmond;">
																<span class="btn">文化创意</span>
															</p>
														</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 上标题结束 -->
			<div style="width: 1900px;height: 120px ;background-color:ghostwhite;"></div>
			<!-- 主体开始 -->
			<div class="main">
				<!-- 左边副栏开始 -->
				<div class="box1 fl">
					<p>公众服务</p>
					<div style="height: 10px;"></div>
					<hr size="2" color="#000000" />
				</div>	
				<!-- 左边副栏结束 -->
				<!-- 正文开始 -->
				<div class="box2 fr">
				<p style="text-indent: 20px;">
					<a href="https://www.baidu.com/">首页</a>
					 / 公众服务</p>
					<div style="height: 18px;"></div>
						<hr size="2" color="burlywood"/>
					<div style="height: 5px;"></div>
					<div class="text">
						<div style="height: 50px;">
							<a href="http://www.nxbwg.com/a/34.html">
								<p style="font-weight: bold;">参观须知</p>
							</a>
							<p style="text-align:right" >2020.03.12</p>
						</div>
					    <p style="text-indent: 32px;">
					     一、服务设施：  1、地上一层南门厅：讲解联系处、咨询台、寄存处、轮椅、婴儿车领取处(需押有效证件)。 2、地上一层东南方向：文创旅游纪念品店、青少年活动中心、贵宾接待室、 电教室。 3、地上一层西北方向：多功能会议厅  4、地上三层北向：网络视听室、图书阅览室、多媒体互动区。
					     </p>
					</div>
					<hr size="1" color="darkgray"/>
					<div class="text">
						<div style="height: 50px;">
							<a href="http://www.nxbwg.com/a/33.html">
								<p style="font-weight: bold;">其他服务</p>
							</a>
							
							<p style="text-align:right" >2020.03.12</p>
						</div>
						<div class="imgbox fl">
						<img src="liuxueimg/a.jpg" width="100%" height="100%" />
						</div>
						<div class="imgboxright fr" >
					    <p style="text-indent: 32px;">
						1.宁夏博物馆一到三楼回廊大厅及展厅有固定放置的椅櫈供观众休息，前台有专业的存包设备，运行良好，环境优美、空气清新。博物馆寄存柜  2.参观引导：我馆在安检处及博物馆大厅设有志愿者引导、程序维护。  3.宁夏博物馆前台观众服务处设有专供残障弱势群体使用的轮椅、婴儿车等专用设施。  4.我馆采用观众抽样调查表放置在咨
					    </p>
						</div>
					</div>
					<hr size="1" color="darkgray"/>
					<div class="text">
						<div style="height: 50px;">
							<a href="http://www.nxbwg.com/a/32.html">
								<p style="font-weight: bold;">服务讲解</p>
							</a>
							<p style="text-align:right" >2020.03.12</p>
						</div>
						<div class="imgbox fl">
						<img src="liuxueimg/b.jpg" width="100%" height="100%" />
						</div>
						<div class="imgboxright fr" >
					    <p style="text-indent: 32px;">
						宁夏博物馆前台有公示定时免费讲解服务：上午10：00，下午15：00，需要听讲解的观众可在前台讲解联系处等候。同时，对全区所有大中小学学生团体进行免费讲解服务;对重要来宾及特殊群体全部实行免费讲解服务。
					    </p>
					    </div>
					</div>
					<hr size="1" color="darkgray"/>
					<!-- <div class="fanhuidingbu">
						返回顶部
					</div> -->
				</div>
				<!-- 正文结束 -->
			</div>
			<!-- 主体结束 -->
			<div id="tv">
				<div id="screen">
					<img src="liuxueimg/tv1.jpg" width="800px" height="400px"/>
					<img src="liuxueimg/tv2.jpg" width="800px" height="400px"/>
					<img src="liuxueimg/tv3.jpg" width="800px" height="400px"/>
					<img src="liuxueimg/tv4.jpg" width="800px" height="400px"/>
					<img src="liuxueimg/tv5.jpg" width="800px" height="400px"/>
				</div>
			</div>
			<!-- 下标题开始 -->
			<div class="header_below">
				<div class="headerin">
					<div class="logobox fl">
						<a href="https://www.baidu.com/"><img src="liuxueimg/logo-nx.png" width="100%"/></a>
					</div>
					<div class="menubox fr">
						<div class="imformation fl">
							<div class="imformation_min">
								<a href="http://www.xbmu.edu.cn/">
									<p style="color: white;">宁夏回族自治区博物馆 版权所有 山西云汉文化传媒有限公司 技术支持</p>
								</a>
							</div>
							<div class="imformation_min">
								地址：宁夏回族自治区银川市金凤区人民广场东街
								
							</div>
							<div class="imformation_min">
								网站备案：宁ICP备20000299号-1
							</div>
							<!-- <div class="imformation_min">
								2021 年 6 月 4 日
							</div> -->
						</div>
						<div class="team_image fr">
							<img src="liuxueimg/erweima.png" width="100px" height="100%" />
						</div>
					</div>
				</div>
			</div>
			<!-- 下标题结束 -->
		</div>
	</body>
</html>

以上代码可直接复制粘贴使用，但是图片和链接请自己去官网找一下就好了

刘学.

关注

17
点赞
踩
99

收藏

觉得还不错? 一键收藏
打赏
0
评论
我的第一个html网页（完整代码）

下面的代码全部完整可用学习四天，历时一周终于完成- 首先在HBuilder X上建一个基于HTML的项目如图：参考“宁夏博物馆”的官网，我们team共十人，我负责“公众服务”模块- liuxue.css中的代码为：.container{ width: 100%; /* height: 100%; */ background-color:ghostwhite; /* background-image: url(../liuxueimg/f.jpg); */ /* background
复制链接

扫一扫