期末
CSS基础 : 里面有字体样式等
动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局
这是一个合集 , 动画讲解
a标签的详解 : 还可以
问题
图片和字体对齐
vertical-align:middle : vertical-align:middle 这个属性
vertical-align 属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
CSS
二级菜单
其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ul导航实例——二级菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul > li {
float: left;
background: pink;
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
}
ul > li:hover {
background: purple;
cursor: pointer;
}
ul > li:hover ol {
display: block;
}
a {
text-decoration: none;
color: #333;
}
ol {
background: #ccc;
display: none;
}
ol > li:hover {
background: #f99;
}
</style>
</head>
<body>
<ul>
<li>
首页
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
<li>
选项1
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
<li>
选项2
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
<li>
选项3
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
<li>
选项4
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
<li>
选项5
<ol>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
<li>分类4</li>
</ol>
</li>
</ul>
</body>
</html>图标变色
本质就是设置hover换成另一个带颜色的图片
右边固定导航栏
带回到顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.mode1 {
height: 500px;
width: 100%;
background-color: aqua;
}
.mode2 {
height: 500px;
width: 100%;
background-color: rgb(184, 196, 196);
}
.mode3 {
height: 500px;
width: 100%;
background-color: rgb(184, 121, 160);
}
.mode4 {
height: 500px;
width: 100%;
background-color: rgb(212, 223, 58);
}
.right-mode {
display: block;
position: fixed;
right: 0%;
margin-top: 25%;
}
a {
display: block;
font-size: large;
}
a:hover {
color: violet;
}
</style>
</head>
<body>
<div class="father">
<div class="right-mode">
<a href="#mode1">一楼</a>
<a href="#mode2">二楼</a>
<a href="#mode3">三楼</a>
<a href="#mode3">四楼</a>
<a href="#mode1">回到顶部</a>
</div>
<div class="right">
<div class="mode1" id="mode1">一楼</div>
<div class="mode2" id="mode2">二楼</div>
<div class="mode3" id="mode3">三楼</div>
<div class="mode4" id="mode4">四楼</div>
</div>
</div>
</body>
</html>JQuery
方法用法 :
prop() 方法设置或返回被选元素的属性和值。
:checked : 为选中设置