1.阿里巴巴矢量图标库的使用
<!DOCTYPE html>
<html lang="zh-CN">
<link rel="stylesheet" href="./font/iconfont.css">
<script src="./font/iconfont.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon {
width: 10em;
height: 10em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Unicode引入 -->
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<br>
<!-- Font class引入 -->
<span class="iconfont icon-feiji"></span>
<span class="iconfont icon-zhifeiji1"></span>
<span class="iconfont icon-zhifeiji2"></span>
<br>
<!-- Symbol引入 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhifeiji3"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-feiji_qifei_o
"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhifeiji4"></use>
</svg>
</body>
</html>
2.溢出
| 属性名 | 属性值 | 作用 |
|---|---|---|
| overflow | hidden | 溢出部分隐藏 |
| auto | 根据溢出与否决定显示滚动条 | |
| scroll | 显示滚动条 |
3.border边框
基本边框样式：
| 属性 | 描述 |
|---|---|
| border-style | solid 实线 dotted 点线 dashed 虚线 double 双线 groove 3D凹槽边框线 ridge 3D垄断边框 inset 3Dinset边框 outset 3Doutset边框 大使谈判有点心虚 |
| border-top-style | 设置边框的样式 |
| border-color | 设置边框颜色 |
| border-top-color | 设置某一边边框的颜色 |
| border-width | 设置边框的宽度 |
| border-top-width | 设置某一边边框的宽度 |
| border | 边框属性连写 |
| border-top | 某一边边框属性连写 |
| border-spacing | 设置表格的边框间距 格式：左右间距+空格+上下间距 |
| border-collapse | collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 inherit 规定应该从父元素继承 border-collapse 属性的值 |
边框圆角样式：
| 属性 | 描述 |
|---|---|
| border-radius:左上角(1) 右上角(2) 右下角(3) 左下角(4) | 一个值：全部统一个圆角 两个值：1(1,3) 2(2,4) 三个值：1(1) 2(2,4) 3(3) 这里设置的是直径 |
扩张属性：参考border设置轮廓线outline
4.伪类选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.max{
height: 90px;
width: 300px;
border: 0px solid yellow;
margin: 0 auto;
background-color: pink;
}
.min1,.min2,.min3{
background-color: pink;
text-align: center;
height: 30px;
}
img{
width: 300px;
height: 170px;
}
.img1,.img2,.img3{
height: 0px;
background-color: pink;
overflow: hidden;
}
.min1:hover .img1{
height: 170px;
transition: all 2s;
}
.min1:hover{
height: 200px;
}
.min2:hover .img2{
height: 170px;
transition: all 2s;
}
.min2:hover{
height: 200px;
}
.min3:hover .img3{
height: 170px;
transition: all 2s;
}
.min3:hover{
height: 200px;
}
.max:hover{
height: 260px;
transition: all 2s;
}
</style>
</head>
<body>
<div class="max">
<div class="min1"> 穿越火线
<div class="img1"><img src="./穿越火线.PNG" alt=""></div>
</div>
<div class="min2">地下城与勇士
<div class="img2"> <img src="./地下城与勇士.PNG" alt=""></div>
</div>
<div class="min3">英雄联盟
<div class="img3"><img src="./英雄联盟.PNG" alt=""></div>
</div>
</div>
</body>
</html>
5.超链接锚点
锚点用法一：
<a name="name">+<a href="#name">
锚点用法二：
<标签名 id="name">+<a href="#name">
5.1锚点练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
</style>
</head>
<body>
<!-- 超链接 锚点 -->
<a href="#dibu" name="ding" id="ding">点击我跳转到底部</a>
<br>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<a href="#aaa">跳转</a>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h1>我是h1</h1>
<a href="#ding" name="dibu" id="aaa">我是底部</a>
<div name="111">11111111111</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 0px solid yellow;
overflow: hidden;
margin: 0 auto;
}
#hong{
background-color: red;
}
#lan{
background-color: blue;
}
#lv{
background-color: green;
}
#huang{
background-color: yellow;
}
#hei{
background-color: black;
}
p{
text-align: center;
}
</style>
</head>
<body>
<!-- 颜色案例 -->
<p>
<a href="#lan">1</a>
<a href="#lv">2</a>
<a href="#huang">3</a>
<a href="#hei">4</a>
<a href="#hong">5</a>
</p>
<div>
<div id="lan"></div>
<div id="lv"></div>
<div id="huang"></div>
<div id="hei"></div>
<div id="hong"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.max {
width: 600px;
/* height: 800px; */
background-color: black;
margin: 0 auto;
/* border: 5px solid yellow; */
}
.min {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
/* border: 5px solid green; */
}
.min img {
width: 500px;
height: 500px;
}
.min1 {
width: 600px;
height: 150px;
/* margin: 0 auto; */
text-align: center;
/* line-height: 150px; */
padding-top: 10px;
/* border: 5px solid red; */
}
.min1 img {
width: 150px;
height: 150px;
/* border: 5px solid blue; */
}
</style>
</head>
<body>
<div class="max">
<div class="min">
<div id="aaa">
<img src="./地下城与勇士.PNG" alt="">
</div>
<div id="bbb">
<img src="./穿越火线.PNG" alt="">
</div>
<div id="ccc">
<img src="./英雄联盟.PNG" alt="">
</div>
</div>
<div class="min1">
<a href="#aaa">
<img src="./地下城与勇士.PNG" alt="">
</a>
<a href="#bbb">
<img src="./穿越火线.PNG" alt="">
</a>
<a href="#ccc">
<img src="./英雄联盟.PNG" alt="">
</a>
</div>
</div>
</body>
</html>
6.后代选择器
/* 后代选择器
选择器1 选择器2{
css属性名:css属性值
}*/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器
选择器1 选择器2{
css属性名:css属性值
}*/
/* div下的所有span标签 */
/* div span{
color: yellow;
} */
.max span{
color: green;
}
.max .min{
color: red;
}
</style>
</head>
<body>
<!-- 子后代选择器 -->
<div class="max">
<span class="min">我是div的儿子</span>
<p>
<span class="min">
我是div的孙子
</span>
</p>
<span>我是div的儿子</span>
</div>
<span class="min">
我是div的兄弟
</span>
</body>
</html>
7.子代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 */
div>span{
color: #00FFFF;
}
.max>.min{
color: gold;
}
</style>
</head>
<body>
<div class="max">
<span class="min">我是div的儿子</span>
<p>
<span class="min">我是div的孙子</span>
</p>
<span>我是div的儿子</span>
</div>
<span class="min">我是div的兄弟</span>
</body>
</html>
8.继承性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fu{
/* 不可继承 */
width: 300px;
height: 300px;
border: 10px solid yellow;
padding: 10px;
margin: 10px;
/* 可继承 */
color: yellow;
font-style: italic;
font-size: 50px;
font-family: "宋体";
text-align: center;
line-height: 50px;
/* 超链接标签不会继承颜色 */
}
.zi{
width: 300px;
height: 100px;
background-color: pink;
}
.max{
width: 300px;
background-color: green;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="fu">
我是父亲
<div class="zi">我是儿子</div>
</div>
<div class="max">
<p>
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
</p>
<p>
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
</p>
</div>
</body>
</html>
扫一扫
7126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
