一周HTML5以及CSS的学习

最新推荐文章于 2023-01-03 20:23:42 发布

i_am_yy

最新推荐文章于 2023-01-03 20:23:42 发布

阅读量294

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/i_am_yy/article/details/77152082

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上周学习了HTML5，CSS，JS，对他们有了个初步的认识。

HTML5新增结构标签：section，article, header, hgroup, footer, nav, figure, video, audio, embed, mark, ruby.....等

他们大部分是自定义标签，比如nav是导航标签，可有可无，为了规范化html语言的一种方式

css样式大部分使用的类选择器进行修饰，css中不管是有类选择器，还有id选择器，兄弟选择器，子选择器......等

常用的是这么几个，建议使用类选择器，少用id选择器，一个id只能存在一次，一般用在后面的js中数据传递中。

section:页面中的一个内容快，比如章节，页眉，页脚，可以和h1 h2 结合使用，表示文档结构

article:表示夜魔暗中一块与上下不想管的独立内容，用在一篇文章比较合适

header:表示页面中一个内容区块或整个页面的标题

hgroup:对整个页面或页面中的一个内容区块的标题进行整合

footer:表示整个页面的内容块的脚注

nav:导航标签

figure:表示一段独立的内容

video:表示视频标签

audio:表示音频标签

embed:用来嵌入内容，包括各种媒体

mark:标记的意思，用来在视觉上呈现突出显示或高亮显示的文字

ruby:中文拼音注释

以上是新增常用的那几个。

上周利用HTML5+css做了一道练习题

reset.css主要是为了将里面的元素标签自带的效果清除，比如margin=0,padding=0，清除外边距，内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/menu.css"/>
		<style>
			
			@font-face {
				font-family:'myfont';
				src: url('font/FZLTXHJW.TTF');
			}
			/*对h1标签进行样式设置*/
			h1{
				color:#FFF;
				font-family: "myfont";
				text-align: center;
				line-height: 60px;
				font-size: 1.5em;
			}
			.header{
				position: absolute;
				top:0;
				left:0;
				right:0;
				height: 60px;
				min-width: 1024px;
				background-color: rgb(58, 179, 255);
			}
			.middle{
				display: flex;/*弹性盒子*/
				min-width: 1024px;
			}
			.menu{
				flex: 1;/*权重*/
				background-color: rgb(51,51,51);
				min-height: 550px;
				min-width: 150px;
				float:left;/*左浮动:脱离正常的文档流，元素会按照浮动方式(left,right,none)排列*/
			}
			.content{
				flex: 5;/*权重*/
				min-height: 550px;
				min-width: 874px;
				padding-top:20px;
			}
			.footer{
				clear:both;/*清除浮动*/
				position: relative;
				width: 100%;
				min-width: 1024px;
				height: 92px;
				background-color: rgb(255, 140, 59);
				text-align: center;
				line-height: 100px;
			}
			.footer span{
				line-height: 30px;
				color: #fff;
				font-family: 'myfont';
			}
			/*menu类下的nav标签*/
			.menu nav{
				position: relative;
				top:60px;
			}
			nav *{
				border-radius: 0 !important;
			}
			.menu,.menu li{
				width: 100%;;
			}
			/*id选择器*/
			#main-frame{
				width: 100%;
				height: 100%;
				border:0;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h1>J1711教学质量管理系统</h1>
		</div>
		<div class="middle">
			<div class="menu">
				<nav>
					<ul class="menu-main">
						<li><a href="student_list.html" target="mainFrame">学员管理</a></li>
						<li><a href="#">作业管理</a></li>
						<li><a href="#">日志管理</a></li>
						<li><a href="vote_list.html" target="mainFrame">民主活动</a></li>
						<li><a href="#">系统设置</a></li>
					</ul>
				</nav>
			</div>
			<div class="content">
				<iframe id="main-frame" name="mainFrame" scrolling="no"></iframe>
			</div>
		</div>
		<div class="footer">
			<span>版权所有&copy; since 2006</span>
		</div>
	</body>
</html>

使用link元素外链接css样式，这样有助于将css样式和HTML5代码块分隔开，结构更清晰

自定义字体

/*
 重置样式：将html元素默认的样式去除，主要通过css代码进行样式控制，能够最大限度的兼容各种类型浏览器
 * */
*{
	margin:0;
	padding:0;
}

a,span{
	display: inline-block; /*设置为行内块级元素*/
	color:#000;
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6,i,u,b,del,ruby,address,abbr,code,a,p,input,button{
	font: 100%/1.6 "微软雅黑";
}

img{
	border:0;
}

ul,ol,dl{
	list-style: none;
}
input,textarea,a{
	outline: none; /*重置浏览器交互控件的默认交互效果*/
}

/*清除浮动*/
.clear{
	clear:both;
	zoom: 1;
}

menu.css主要是为了给所有的按键设置属性，比如，悬停在按钮上方的时候，字体颜色，按钮大小之类的

.menu li{
	background-color: rgba(51,51,51,1);
	width: 150px;
	height:40px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
a{
	display: inline-block;
	width: 100%;
	height: 100%;
	color:#fff;
	text-decoration: none;
	text-align: center;
	line-height:40px;
	font-family: "微软雅黑";
	font-size: 1.1em;
}
/*设置当悬停到li上时触发效果*/
li:hover{
	background-color: rgba(51,51,51,.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
ul>li:first-child{
	/*border-top-left-radius: 10px;
border-top-right-radius: 10px;*/
	border-radius: 10px 10px 0 0;
}
ul>li:last-child{
	border-radius: 0 0 10px 10px;
}

界面效果如下：