我的第一个html网页（完整代码）
下面的代码全部完整可用
学习四天，历时一周终于完成
- 首先在HBuilder X上建一个基于HTML的项目如图：
参考“宁夏博物馆”的官网，我们team共十人，我负责“公众服务”模块
- 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中的代码为(链接和图片在宁夏博物馆官网上)：
<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.12p>
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.12p>
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.12p>
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>
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>
<div class="team_image fr">
<img src="liuxueimg/erweima.png" width="100px" height="100%" />
div>
div>
div>
div>
div>
body>
html>
以上代码可直接复制粘贴使用，但是图片和链接请自己去官网找一下就好了