我的第一个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中的代码为(链接和图片在宁夏博物馆官网上)：

<!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>

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

我的第一个html网页（完整代码）相关推荐

pygelet做一个飞行模拟器完整代码
pyglet是一个跨平台的Python库,可以用来制作2D和3D图形和游戏.如果你想用pyglet做一个飞行模拟器,你可以这样做: 导入pyglet库创建一个窗口加载飞机模型和背景图片在每一帧中 ...
弹窗悬浮一个新网页php代码,一个简单的图片悬浮窗，点击可关闭
一个简单的图片悬浮窗,点击可关闭作者: 2015.05.02 本文发布于1793天前分类: #btnClose{ cursor:pointer;font-family:Arial;backgrou ...
css3实现动画效果完整代码demo
过渡渐隐适合两张图片调整其中一个透明度,完整代码: <!doctype html> <html lang="en"> <head><me ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
chrome动态ip python_用Python爬虫爬取动态网页，附带完整代码，有错误欢迎指出！...
系统环境: 操作系统:Windows8.1专业版 64bit Python:anaconda.Python2.7 Python modules:requests.random.json Backgro ...
html 倒计时字体消失,最简单的一个网页倒计时代码时间到期后会显示出提醒内容收藏版...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼很多时候我们都是需要提醒自己做什么事情的,像我这么健忘的,更加需要倒计时之类的记录来提醒自己,这是我找到最简单简介的代码了! 最简单的一个网页倒计时代码 ...
dw选项卡代码_DW软件新建一个html网页
使用Dreamweaver(简称DW)软件新建一个html网页,dw新建一个标准的HTML超文本网页前面DIVCSS5介绍过使用记事本来新建HTML网页,记事本弊端,编码容易出错导致网页乱码,接下来 ...
Python实现网页截图，附带完整代码
Python实现网页截图,附带完整代码在现代化的互联网时代,我们经常需要对网页进行截图以便于保存.共享以及其他种种用途.Python是一种功能强大的编程语言,可以帮助我们轻松地实现网页截图功能.本文 ...
JavaScript实现网页计时器(有完整代码)
文章目录一.如何实现倒计时的功能? 效果图项目思路二.完整代码一.如何实现倒计时的功能? 效果图项目思路先搭建好如下的框架.其中<input type="text" ...
php编网页版计算器,php 简单网页计算器的完整代码
这篇文章主要为大家详细介绍了php 简单网页计算器的完整代码,具有一定的参考价值,可以用来参考一下. 对php实现的一个简单的网页计算器代码感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...

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

我的第一个html网页（完整代码）相关推荐

最新文章

热门文章