html知识总结1

最新推荐文章于 2022-11-01 16:21:33 发布

东风应笑我

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量101

点赞数

分类专栏：学习总结文章标签： html css

本文链接：https://blog.csdn.net/weixin_41963346/article/details/95398468

版权

学习总结专栏收录该内容

6 篇文章 2 订阅

订阅专栏

前言
今天java没讲，主要讲了HTML的应用，css样式的设计
选择器
元素选择器：直接以网页标签名称定义的选择器（直接用标签名定义样式）
所有样式都有id和class
id选择器：唯一标识某一个标签，即不存在两个id相同的标签，特定标识某个内容
类选择器:可以应用于多个标签
*选择器：所有的通用(一般在网页样式设计中只有一个用处：去除所有元素默认的边距)
属性选择器：略过
下面两个有共同点：多个div嵌套时对里面的内容
子选择器：只作用于父类元素
派生选择器：作用于所有元素
伪类选择器：只有满足条件时才生效

伪类选择器可以用来设置鼠标放到上面的情况，可以用来设计下拉菜单

某个小项目
结合伪类选择器，class选择器等可以设计一些简单的控件，如下拉列表，下面是实现效果

具体的实现思路：
首先使用ul列表嵌套下层列表，然后应用a标签设置成超链接
代码如下
//图片的部分是因为我想试验一下图片的变透明效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟实现工学新闻</title>
		<link rel="stylesheet" href="css/News.css" />
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="#">要闻</a>
				</li>
				<li>
					<a href="#">时讯</a>
				</li>
				<li>
					<a href="#">科教</a>
					<ul>
						<li><a href="#">科研在线</a></li>
						<li><a href="#">教学信息</a></li>
						<li><a href="#">合作交流</a></li>
					</ul>
				</li>
				<li>
					<a href="#">学事</a>
				</li>
				<li>
					<a href="#">言论</a>
					<ul>
						<li><a href="#">领导讲话</a></li>
						<li><a href="#">师生观点</a></li>
						<li><a href="#">热门访谈</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="tpk">
			<div class="tp1"></div>
			<div class="tp2"></div>
			<div class="tp3"></div>
		</div>
	</body>
</html>

接下来是样式的设计

 * {padding:0;margin: 0;}
ul {list-style: none;}/*清除默认样式*/
a {text-decoration: none;}/*清除下划线*/
ul>li{float: left;}/*浮动样式改成水平排列*/
.nav a{
	font-weight: bold;font-size: 20px;color:#054fbc;
	height: 40px;width: 80px;display: inline-block;
	text-align: center;/*水平居中*/
	line-height: 40px;/*行高与框一致，则竖直居中*/
}
.nav a:hover{
	background-color: #054fbc;color:white;
}
/*
 * 相对定位：relativer
 * 绝对定位：absolute
 */
.nav>ul{position: relative;left: 200px;top: 100px;}
.nav>ul>li>ul{display:none;}
.nav>ul>li:hover>ul{display: block;}
/*设置二级导航项的高和宽*/
.nav>ul>li>ul>li>a{height: 30px;width: 120px;display: inline-block;line-height: 30px;}
/*当元素是绝对定位以后，将会离开原本的文档流。所以会往后走留出空间，绝对以后就不再占原来的控件*/
.nav>ul>li>ul{position: absolute;}
div.tpk>div{
	height: 400px;width: 400px;opacity: 0.5;
	background-size: 400px 400px;
}/*默认半透明显示*/
div.tp1{background-image: url(../img/QQ截图20190709103126.png);}
div.tp2{background-image: url(../img/u=3984729544,2312409831&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG.jpg);}
div.tpk>div:hover{opacity: 1;}
div.tpk{position: absolute;top:150px}

这里最值得注意的我认为有两点
1：选择器的应用与查找，通过>进行精准定位控制其中的属性
2：inline-block的应用，让它成为可换行的块属性，这样可以对其控制长宽高，而不是只占一行。事实上用表格也可以实现，而且个人认为表格的应用或许会让界面更规范
3：用绝对定位取消占用原本控件的问题
4：伪类的应用，实现一些简单的效果
不过更复杂的事件肯定是要用js做的

总结
今天学的内容很多很杂，今天大部分时间是跟着老师和各种标签打交道，研究它们的用法，想要作出漂亮的网页是要通过实践来解决。

东风应笑我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html知识总结1

前言今天java没讲，主要讲了HTML的应用，css样式的设计选择器元素选择器：直接以网页标签名称定义的选择器（直接用标签名定义样式）所有样式都有id和classid选择器：唯一标识某一个标签，即不存在两个id相同的标签，特定标识某个内容类选择器:可以应用于多个标签*选择器：所有的通用(一般在网页样式设计中只有一个用处：去除所有元素默认的边距)属性选择器：略过下面两个有共同点：...
复制链接

扫一扫