共计10个页面,网页中包含:Div+CSS、Table、下拉菜单栏、banner轮播图、表单验证、二级页面、视频、侧边导航栏、小图标及按钮设计,同时设计了logo,如视频所示,首页有着美观大方的排版和充实的内容;子页面版式也各不相同啦,还有7000字论文、11页的PPT~
三星堆HTML网页设计论文报告答辩PPT案例分享 计算机专业毕业设计
部分代码展示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />
<title>三星堆文明 - 古蜀文化遗址</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet type=text/css href="css/banner.css">
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;/*定义页面上下左右边距为0*/
font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字体集 */
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #e3ffff;
}
a:active {
text-decoration: none;
}
.c-title {/* 栏目标题样式设置 */
height: 26px;
width: 140px;
margin-right: auto;
margin-left: auto;
font-size: 1.3em;
font-weight: bold;
color: #000;
text-align: center;
line-height: 26px;
padding-top: 50px;
}
.a_line {/* 分割线 */
background-color: #2c7864;
height: 4px;
width: 60px; /* 设置一个固定尺寸的盒子作为装饰分割线 */
margin-top: 20px;
margin-right: auto;
margin-left: auto;
border-radius: 4px; /* 圆角设置 */
}
.column {/* 版块分类父级盒子 */
width: 1150px; /* 在pc页面宽度固定 */
margin-right: auto;
margin-left: auto;
font-size: 0.85em;
line-height: 30px;
padding-top: 25px; /* 使内部小盒子距离顶部和底部有距离 */
padding-bottom: 25px;
display: -webkit-flex;/* 定义内部为弹性布局 */
display: flex; /* 定义内部为弹性布局 */
flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */
justify-content: space-around; /* (横轴)方向上均匀排列每个元素 */
overflow: hidden; /* 防止塌陷 */
}
.column .m-156-130 {/* 图标小盒子属性设置 */
float: left;
height: 100px;
width: 110px;
margin-top: 10px;
border-radius: 12px;
background-color: #f6faff;
border: 1px solid #f6faff;
cursor:pointer; /* 鼠标在此处的效果为“小手”样式 */
}
.column .m-156-130 .m-22-22 {/* 小盒子内小图标所在盒子 */
height: 40px;
width: 40px;
margin-top: 17px;
margin-right: auto;
margin-left: auto;
}
.column .m-156-130 .m-50-20 {/* 小盒子内文字所在盒子 */
height: 20px;
width: 70px;
margin-top: 8px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
line-height: 20px;
color: #000;
text-align: center;
}
.column .m-156-130:hover {/* 鼠标滑过变色、变形 */
background-color: #ffffff;
transform: rotateY(20deg);/* 鼠标滑过 使盒子翻转一定角度 */
transition: 0.3s;
border: 1px solid #2c7864;/* 鼠标滑过出现边框,做出被选中的效果 */
margin-top: -5px;/* 鼠标滑过使盒子向上移动 */
}
.main {
background-image: url(images/main.jpg); /* 中间视频引导左图右文排版 设定大盒子尺寸 */
height: 381px;
width: 1150px;
margin-right: auto;
margin-left: auto;
margin-top: 80px;
}
.main .anytext { /* 设定左侧视频播放的大盒子尺寸 */
height: 340px;
width: 581px;
float: left;
}
.main .anytext .anytext-img { /* 设定左侧视频播放图片尺寸 */
height: 339px;
width: 581px;
}
.main .anytext .anytext-img img:hover { /* 鼠标滑过图片不透明度降低 */
opacity : 0.9;
}
.main .main-text { /* 右侧文本框设置 */
height: 180px;
width: 340px;
margin-top: 120px; /* 顶部边距设计出错位的感觉 */
margin-left: 120px;
float: left;
font-size: 0.8em;
line-height: 27px;
color: #909090;
padding-right: 109px;
}
.index-iamges { /* 此处为横向滚动背景图 */
height: 410px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-image: url(images/skin01.jpg); /* 背景图链接 */
background-repeat: no-repeat;/* 背景图像将仅显示一次 */
background-attachment: fixed; /* 图片固定不动 */
overflow: hidden; /* 防止塌陷 */
margin-top: 60px;
}
.index-iamges .index-iamges-text {
font-size: 0.72em;
line-height: 36px;
color: #f2f2f2;
height: 150px;
width: 950px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
text-align: justify; /* 文字两端对齐 */
}
.recommend {
height: auto;
width: 1150px;
margin-right: auto;
margin-left: auto;
display: -webkit-flex;/* 定义内部为弹性布局 */
display: flex; /* 定义内部为弹性布局 */
flex-wrap: wrap; /* 让弹性盒元素在需要的时候拆列 */
justify-content: space-around; /* (横轴)方向上均匀排列每个元素 */
overflow: hidden; /* 防止塌陷 */
margin-right: auto;
margin-left: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.recommend1 {
height: 304px;
width: 250px;
margin-top: 30px;/* 使得盒子顶部和底部均有安全空间 */
margin-bottom: 30px;
border: 1px solid #e4e4e4;
line-height: 29px;
text-align: center;
font-size: 0.85em;
color: #333;
background-color: #FFF;
float: left;/* 左侧浮动 */
}
.recommend1:hover {/* 鼠标滑过盒子效果 */
-webkit-transform:scale(1.04,1.04);/* 放大1.04倍 */
-moz-transform:scale(1.04,1.04);/* 兼容设置 */
-transform:scale(1.04,1.04);
transition-duration: 0.4s;/* 过渡时间 */
}
.t-bold {
font-size: 1.3em;
font-weight: bold;
color: #000;
line-height: 45px;
}
.index-iamges .button-01 { /* 滚动图下方添加了一个按钮 */
background-color: rgba(44,120,100,0.92); /* 背景色和透明度 */
height: 42px;
width: 160px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
text-align: center;
line-height: 42px;
border-radius: 42px; /* 圆角设置 */
font-size: 0.9em;
color: #ffffff;
letter-spacing: 1px; /* 字间距 */
}
.index-iamges .button-01:hover {
width: 180px; /* 鼠标滑过后改变宽度 */
background-color:rgba(44,120,100,0.8); /* 背景色改变 */
transition:all .4s; /* 0.4s过渡效果 */
letter-spacing:3px; /* 字间距加宽,这样随着盒子变宽字间距跟着变宽看起来更协调一些 */
}
</style>
</head>
<body>
<div class="topbar"><!-- 顶栏通栏 -->
<div class="titleblock"><!-- 顶栏中部 -->
<div class="logo"><!-- logo --><a href="index.html"><img src="images/logo.png"></a></div>
<div class="search"><!-- 搜索框 -->
<input type="text" value="搜索" onmouseover="this.style.borderColor='#2c7864'" onmouseout="this.style.borderColor=''" onFocus="if (value =='搜索'){value =''}" onBlur="if (value ==''){value='搜索'}"/>
</div>
</div>
</div>
<!-- 横向导航开始 -->
<div class="nav01">
<div id="bar" class="clear">
<ul>
<li><a href="index.html">网站主页</a></li>
<li><a href="exhibition.html">展览陈列</a></li>
<li><a href="card.html">文物典藏</a></li>
<li><a href="video.html">精彩视频</a></li>
<li><a href="#">更多相关 <img src="images/down.svg" width="10" height="10"></a>
<ul>
<li><a href="page.html">最新资讯</a></li>
<li><a href="shop.html">文创精品</a></li>
</ul></li>
</ul>
</div>
</div>
<!-- 横向导航END -->
<!-- 轮播图开始 -->
<div class="banner">
<ul class="list"><!-- 图片序列 -->
<a href="#">
<li class="item active"><img src="images/banner01.jpg" alt="" width="100%" ></li>
</a>
<a href="#">
<li class="item"><img src="images/banner02.jpg" alt="" width="100%"></li>
</a>
<a href="#">
<li class="item"><img src="images/banner03.jpg" alt="" width="100%"></li>
</a>
<a href="#">
<li class="item"><img src="images/banner04.jpg" alt="" width="100%"></li>
</a>
<a href="#">
<li class="item"><img src="images/banner05.jpg" alt="" width="100%"></li>
</a>
</ul>
<ul class="pointList"><!-- 圆点 -->
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button class="btn" id="left"><img src="images/left.png" width="20" height="20"></button><!-- 轮播图左右按钮 -->
<button class="btn" id="right"><img src="images/right.png" width="20" height="20"></button>
</div>
<script type="text/javascript" src="js/banner.js"></script> <!-- 引入js代码 -->
<!-- 轮播图结束 -->
<!-- 版块分类开始 -->
<div class="c-title">版块分类</div>
<div class="a_line"></div>
<div class="column">
<div class="m-156-130"><!-- 单独的小盒子 -->
<div class="m-22-22"><img src="images/icon1.png" width="40" height="40"></div>
<div class="m-50-20">参观服务</div>
</div>
<div class="m-156-130">
<div class="m-22-22"><img src="images/icon2.png" width="40" height="40"></div>
<div class="m-50-20">地址导航</div>
</div>
<div class="m-156-130">
<div class="m-22-22"><img src="images/icon3.png" width="40" height="40"></div>
<div class="m-50-20">社会教育</div>
</div>
<div class="m-156-130">
<div class="m-22-22"><img src="images/icon4.png" wclassth="40" height="40"></div>
<div class="m-50-20">文化遗产</div>
</div>
<div class="m-156-130">
<div class="m-22-22"><img src="images/icon5.png" width="40" height="40"></div>
<div class="m-50-20">学术研究</div></div>
<div class="m-156-130">
<div class="m-22-22"><img src="images/icon6.png" width="40" height="40"></div>
<div class="m-50-20">展览推荐</div>
</div>
</div><!-- 版块分类结束 -->
<!-- 中间内容引导开始 -->
<div class="main">
<div class="main-text">
<span class="t-bold">三星堆文明 - 古蜀文化遗址</span><br>
三星堆,一个神秘的国度,一块神奇的土地。在这片热土上,蕴含着古蜀文化的奥秘,珍藏着古蜀先民的足迹。她在华夏文明史的长河中塑起了一座历史的丰碑,是中华文明宝库中的一颗耀眼的明珠!你是远古积攒下来的神的精灵,你深埋在成都平原那么多年,默默无闻,静静等待。</div>
<div class="anytext">
<div class="anytext-img"><a href="list.html"><img src="images/main01.jpg" alt="" width="100%" ></a></div>
</div>
</div>
<!-- 中间内容版块结束 -->
<!-- 图片滚动部分开始 -->
<div class="index-iamges">
<div class="index-iamges-text">三星堆古遗址位于四川省广汉市西北的鸭子河南岸,分布面积12平方千米,距今已有3000至5000年历史,是迄今在西南地区发现的范围最大、延续时间最长、文化内涵最丰富的古城、古国、古蜀文化遗址。三星堆遗址被称为20世纪人类最伟大的考古发现之一,昭示了长江流域与黄河流域一样,同属中华文明的母体,被誉为“长江文明之源”。其中出土的文物是宝贵的人类文化遗产,在中国的文物群体中,属最具历史、科学、文化、艺术价值和最富观赏性的文物群体之一。在这批古蜀秘宝中,有青铜大立人、有青铜面具、更有高达3.95米的青铜神树等,均堪称独一无二的旷世神品。而以金杖为代表的金器,以满饰图案的边璋为代表的玉石器,亦多属前所未见的稀世之珍...</div>
<a href="card.html"><div class="button-01">了解更多</div></a>
</div>
<!-- 图片滚动部分结束 -->
<!-- 下方三图并列开始 -->
<div class="c-title">明星文物</div>
<div class="a_line"></div>
<div class="recommend">
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="page.html"><img src="images/index01.jpg" width="245" height="245"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">三星堆-金面具残片</td>
</tr>
</table>
</div>
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="page.html"><img src="images/index02.jpg" width="245" height="245"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">青铜太阳轮 相关介绍</td>
</tr>
</table></div>
<div class="recommend1"><table width="100%" border="0">
<tr>
<td height="220"><a href="page.html"><img src="images/index03.jpg" width="245" height="245"></a></td>
</tr>
<tr>
<td height="42" align="center" valign="top">首页推荐 相关介绍</td>
</tr>
</table></div>
</div>
<!-- 下方三图并列end -->
<!-- footer栏开始 -->
<footer class="down">
<div class="down_center">
<div class="down_c_side">
<div class="logo1"><a href="index.html"><img src="images/Logo_01.png"></a></div>
<div class="f_gotop"><table width="100%" border="0">
<tr>
<td width="18" height="37" valign="middle"><img src="images/up.png" width="12" height="12"></td>
<td width="119"><a href="#top">返回顶部</a></td>
</tr>
</table>
</div>
</div>
<div class="down_c_center"> © SANXINGDUI 蜀ICP备22220911号-1</div>
<div class="down_c_side"><a href="#"><img src="images/icon_1.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_2.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_3.svg" alt="" width="31" height="31"></a> <a href="#"><img src="images/icon_4.svg" alt="" width="31" height="31"></a></div>
</div>
</footer>
</body>
</html>