古韵敦煌壁画主题期末网页成品布局丰富轮播图小图标超美视觉HTML CSS

从前有个范特西

已于 2024-03-22 11:25:05 修改

阅读量1.1k

点赞数 3

文章标签： html css 前端

于 2024-03-22 11:24:38 首次发布

本文链接：https://blog.csdn.net/lxidw7/article/details/136935702

版权

本套大作业共计10个页面，网页中包含：Div+CSS、Table、下拉菜单栏、banner轮播图、二级页面、视频、侧边导航栏、小图标及按钮设计，同时设计了logo，如图所示，首页有着美观大方的排版和充实的内容；子页面版式也各不相同，基本期末作业所需的知识点全覆盖。

古韵敦煌主题期末网页成品布局丰富轮播图小图标超美设计10页html

<!doctype html>
<html>
<head> 
<meta charset="utf-8">
<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: #622014;
	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 #622014;/* 鼠标滑过出现边框，做出被选中的效果 */
	margin-top: -5px;/* 鼠标滑过使盒子向上移动  */
}
.main {
	background-image: url(images/main.jpg);    /* 中间视频引导左图右文排版 设定大盒子尺寸 */
	height: 381px;
	width: 1150px;
	margin-