Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
108a9d131d | ||
|
|
3b074958ed |
32
15_CSS鼠标相关属性/01_鼠标相关属性.html
Normal file
32
15_CSS鼠标相关属性/01_鼠标相关属性.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>01_鼠标相关属性</title>
|
||||
<style>
|
||||
/*cursor 修改鼠标样式 */
|
||||
div {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: skyblue;
|
||||
cursor: url("../images/normal.cur"),pointer;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>把鼠标放进来看一看
|
||||
<input type="text"/>
|
||||
<br>
|
||||
<a href="#">首页</a>
|
||||
<button>点我</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
16_CSS盒子模型/01_CSS中常用的长度单位.html
Normal file
74
16_CSS盒子模型/01_CSS中常用的长度单位.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>01_CSS中常用的长度单位</title>
|
||||
<style>
|
||||
html {
|
||||
font-size: 40px;
|
||||
}
|
||||
#d1 {
|
||||
/* 第一种长度单位: px（像素） */
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
/* 第二种长度单位: em(相对于当前元素或其父元素的font-szie倍速)
|
||||
font-size设置为0时不会真的为0，父元素又没有设置font-size时，
|
||||
浏览器有一个最小默认值
|
||||
*/
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
font-size: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
#d3 {
|
||||
/* 第三种长度单位: rem（相对于根元素的font-size的倍数）
|
||||
*/
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
font-size: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
#d4 {
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
background-color: gray;
|
||||
}
|
||||
.inside {
|
||||
/* 第四种长度单位: % (相对其父元素的百分比)）
|
||||
*/
|
||||
width: 50%;
|
||||
height: 25%;
|
||||
/* 20px(父元素的font-size) * 1.5 */
|
||||
font-size: 150%;
|
||||
background-color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
background-color: yellowgreen;
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">1</div>
|
||||
<hr>
|
||||
<div id="d2">2</div>
|
||||
<hr>
|
||||
<div id="d3">3</div>
|
||||
<hr>
|
||||
<div id="d4">
|
||||
<div class="inside">4</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="test">好好学习，天天向上</div>
|
||||
</body>
|
||||
</html>
|
||||
82
16_CSS盒子模型/02_元素的显示模式.html
Normal file
82
16_CSS盒子模型/02_元素的显示模式.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>02_元素的显示模式</title>
|
||||
<style>
|
||||
|
||||
|
||||
/* body {
|
||||
background-color: gray;
|
||||
} */
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#d1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#d3 {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.two {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
span {
|
||||
/* 行内元素设置宽高无效 */
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 块元素 block
|
||||
|
||||
块级元素独占一行，
|
||||
默认宽度: 宽度撑满整个body，
|
||||
默认高度: 高度由内容撑开
|
||||
可以通过CSS设置宽度
|
||||
-->
|
||||
<div id="d1">山回路转不见君</div>
|
||||
<div id="d2">雪上空留马行处</div>
|
||||
<div id="d3">风里雨里我在这里等你</div>
|
||||
<!--行内元素（内联元素） inline
|
||||
1. 在页面中不独占一行，一行中不能容纳下行内元素，
|
||||
会在下一行继续从左到右排列。
|
||||
2.默认宽度： 由内容撑开。
|
||||
3.默认高度： 由内容撑开。
|
||||
4.无法通过CSS设置宽高
|
||||
-->
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<hr>
|
||||
<!-- 行内块元素inline-block
|
||||
1. 在页面中不独占一行，一行中不能容纳下行内元素，
|
||||
会在下一行继续从左到右排列。
|
||||
2.默认宽度： 由内容撑开。
|
||||
3.默认高度： 由内容撑开。
|
||||
4.可以通过CSS设置宽高
|
||||
-->
|
||||
<img src="../images/FDC2B7E3580241292A2F5E0FBC180F1A.jpg" alt="图片">
|
||||
<img src="../images/FDC2B7E3580241292A2F5E0FBC180F1A.jpg" alt="图片">
|
||||
<img src="../images/FDC2B7E3580241292A2F5E0FBC180F1A.jpg" alt="图片">
|
||||
</body>
|
||||
</html>
|
||||
44
16_CSS盒子模型/03_总结各元素的显示模式.html
Normal file
44
16_CSS盒子模型/03_总结各元素的显示模式.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>03_总结各元素的显示模式</title>
|
||||
<style>
|
||||
#s1 {
|
||||
background-color: pink;
|
||||
}
|
||||
#d1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
3.总结各元素的显示模式
|
||||
块元素(block)
|
||||
1.主体结构标签:<html>、<body>
|
||||
2.排版标签:<h1>~<h6>、<hr>、<p>、<p>、<div>
|
||||
3.列表标签:<ul>、<ol><11><dl><dt>、<dt>、<dd>
|
||||
4.表格相关标签:<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
|
||||
5.<form>与<option>
|
||||
|
||||
行内元素(inline)
|
||||
1.文本标签:<br>、<em>、<strong>、<sup>、<sub>、<de1>、<ins>
|
||||
2.<a>与<label>
|
||||
|
||||
行内块元素(inline-block)
|
||||
1.图片:<img>
|
||||
2.单元格:<td>、<th>
|
||||
3.表单控件:<input>、<textarea>、<select>、<button
|
||||
4.框架标签:<iframe>
|
||||
-->
|
||||
|
||||
<span id="s1">123</span><br>
|
||||
<div id="d1">123</div><br>
|
||||
<div id="d2">456</div>
|
||||
</body>
|
||||
</html>
|
||||
63
16_CSS盒子模型/04_修改元素的显示模式.html
Normal file
63
16_CSS盒子模型/04_修改元素的显示模式.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>04_修改元素的显示模式</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* 修改显示模式 */
|
||||
display: inline-block;
|
||||
}
|
||||
#d1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#d3 {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
/* 可以修改显示模式 display*/
|
||||
display: block;
|
||||
}
|
||||
#a1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#a2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#a3 {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
|
||||
4.修改元素显示模式
|
||||
通过CSS中的display属性可以修改元素的默认显示模式,常用用值如下:
|
||||
值 描述
|
||||
none 元素会被隐藏。
|
||||
block 元素将作为块级元素显示。
|
||||
inline 元素将作为内联元素显示。
|
||||
inline-block 元素将作为行内块元素显示。
|
||||
-->
|
||||
<div id="d1">你好1</div>
|
||||
<div id="d2">你好2</div>
|
||||
<div id="d3">你好3</div>
|
||||
<hr>
|
||||
<a id="a1" href="https://hexo.zyjblogs.cn">去博客</a>
|
||||
<a id="a2" href="https://yun.zyjblogs.cn">去网盘</a>
|
||||
<a id="a3" href="https://gogs.zyjblogs.cn">去仓库</a>
|
||||
<span>123</span>
|
||||
</body>
|
||||
</html>
|
||||
39
16_CSS盒子模型/05_盒子模型的组成部分.html
Normal file
39
16_CSS盒子模型/05_盒子模型的组成部分.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>05_盒子模型的组成部分</title>
|
||||
<style>
|
||||
/*
|
||||
CSS会把所有的HTML元素都看成一个盒子,所有的样式也都是基于这个盒子
|
||||
1.margin(外边距):盒子与外界的距离。
|
||||
2.border(边框):盒子的边框。
|
||||
3.padding(内边距):紧贴内容的补白区域。
|
||||
4.content(内容):元素中的文本或后代元素都是它的内容。
|
||||
|
||||
盒子的大小=content+左右padding+左右border.
|
||||
注意:外边距margin不会影响盒子的大小,但会影响盒子的位置,
|
||||
|
||||
*/
|
||||
div {
|
||||
/* 内容区域的宽 */
|
||||
width: 400px;
|
||||
/* 内容区域的高 */
|
||||
height: 400px;
|
||||
/* 内边距 设置的背景颜色会填充内边距区域*/
|
||||
padding: 20px;
|
||||
/* 边框 设置的背景颜色会填充到边框区域*/
|
||||
border: 10px dashed skyblue;
|
||||
/* 外边距 */
|
||||
margin: 50px;
|
||||
background-color: pink;
|
||||
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
40
16_CSS盒子模型/06_盒子的内容区content.html
Normal file
40
16_CSS盒子模型/06_盒子的内容区content.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>06_盒子的内容区content</title>
|
||||
<style>
|
||||
/*
|
||||
6.盒子内容区(content)
|
||||
CSS 属性名 功能 属性值
|
||||
width 设置内容区域宽度 长度
|
||||
max-width 设置内容区域的最大宽度 长度
|
||||
min-width 设置内容区域的最小宽度 长度
|
||||
height 设置内容区域的高度 长度
|
||||
max-height 设置内容区域的最大高度 长度
|
||||
min-height 设置内容区域的最小高度 长度
|
||||
|
||||
注意:
|
||||
max-width、min-width 一般不与 width 一起使用,
|
||||
max-height、min-height 一般不与 height 一起使用.
|
||||
|
||||
*/
|
||||
/* div宽度默认=body的宽度 */
|
||||
div {
|
||||
width: 800px;
|
||||
/* min-width: 600px; */
|
||||
/* max-width: 1000px; */
|
||||
|
||||
height: 200px;
|
||||
/* min-height: 50px; */
|
||||
/* max-height: 400px; */
|
||||
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore architecto voluptates aperiam iste similique eveniet, suscipit dignissimos nulla tempora odio laudantium corrupti aspernatur nemo temporibus illum? Aperiam, accusamus cumque! Esse, maiores. Pariatur necessitatibus eaque aliquam possimus ab et ducimus! Molestiae eligendi voluptates exercitationem itaque? Necessitatibus veritatis, eaque veniam earum culpa esse dolore beatae porro. Fugiat cupiditate placeat, quasi voluptate veniam error maxime porro quisquam vitae ullam hic reiciendis voluptatibus excepturi ipsam nemo architecto minima magnam! Omnis, nesciunt. Doloribus voluptate temporibus labore, nemo velit excepturi eligendi distinctio sed iusto a veritatis esse aperiam, ipsam odit rerum. Cumque tempora, id natus labore odit rerum eius atque a earum! Debitis qui sit veniam, esse quo magni, eveniet laboriosam cumque laudantium cum voluptates ipsam ducimus facilis. A repudiandae dolorem assumenda excepturi expedita beatae cum. Doloremque ipsam ad quos nihil tempora ullam, quaerat numquam exercitationem provident repellendus facere quam consequuntur laborum expedita assumenda facilis, praesentium quibusdam totam necessitatibus accusantium nemo? Recusandae iusto aliquam dolorem soluta corrupti, commodi, qui error veritatis laborum sed deleniti dolor! Ex reprehenderit eos illo repellat eveniet architecto iusto pariatur soluta at error nesciunt fugit minima nihil ut, accusantium veritatis? Reprehenderit, doloremque a. Ipsa a sed nihil natus ullam dolorem culpa praesentium aliquid dolor. In id iste enim at voluptates unde veniam rem inventore minus facere doloribus aliquid mollitia, eaque voluptatem officia odit rerum. Labore aliquam consequatur molestiae? Necessitatibus quasi provident eaque, magnam voluptatem odio eum quos quaerat cupiditate nulla adipisci laudantium asperiores vitae ad? Culpa vero ratione quos dolore cupiditate reprehenderit inventore expedita, deserunt ipsa debitis temporibus, impedit rerum commodi deleniti officia aliquam excepturi dicta voluptate possimus repellat nisi. Quasi, quas! Excepturi, sit, dolorum cumque culpa vitae quas nam sequi laborum iusto doloremque deserunt. Ullam aut quia obcaecati magnam, quibusdam quos iste, quis modi asperiores minus rem nobis vitae, cupiditate perferendis.</div>
|
||||
</body>
|
||||
</html>
|
||||
29
16_CSS盒子模型/07_关于默认宽度.html
Normal file
29
16_CSS盒子模型/07_关于默认宽度.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>07_关于默认宽度</title>
|
||||
<style>
|
||||
div {
|
||||
/*
|
||||
7.关于默认宽度
|
||||
所谓的默认宽度,就是不设置width属性时,元素所呈现出来的宽度。
|
||||
总宽度=父的content-自身的左右margin。
|
||||
内容区的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding.
|
||||
|
||||
*/
|
||||
/* width: 400px; */
|
||||
height: 200px;
|
||||
|
||||
margin: 50px;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/normal.cur
Normal file
BIN
images/normal.cur
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in New Issue
Block a user