class1
<!DOCTYPE html> <!-- html版本号 -->
<html>
<!-- //HTML为最大标签，根标签 //要么包含关系，要么并列关系 -->
<head>
<!-- //vscode及其插件安装 -->
<html lang="zh-CN"></html> <!-- 提示说此网站用中文显示但也可以写英文，同理en提醒为英文显示，还会出现翻译提醒。 -->
<meta charset="utf-8"> <!-- 中文，这句话不写会出现乱码，这三行一定要写，要记住作用就行，会自动生成，utf-8是万国码 -->
<title>第一个页面</title> <!-- //在网页标题显示 -->
</head>
<body>
<!-- //在网页界面显示 -->
<h1>标题一共六级选</h1> <!-- h1-h6标题标签 -->
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新显</h6>
<p>分段作用的一个段落标签</p>
我是<strong>加粗</strong>的文字
<!-- strong，em，del语义更强更好记 -->
<em>倾斜</em>
<i>也倾斜哦</i>
我是<del>删除线</del>
我是<ins>下划线</ins>
我也是<ul>下划线</ul>
<br /> <!-- 换行单标签，break -->
<div> 我是一个div标签一个人占一行</div> <!-- 没有语义，当盒子装内容 -->
<span>用来布局的小盒子，一行多个小盒子</span>
<h4>图像标签的使用：<br /></h4>
<h4>alt 替换文本 图像显示不出来的时候用文字替换(有图片时就没有文字)</h4>
<img src="./img/666.jpg" alt="我是wz" width="50" ,height="50" border="20"> <!-- 图像URL -->
<h4>提示文本 显示到图片上文字</h4>
<img src="./img/img.jpg" title="我是wz" width="100" ,height="100" border="20"> <!-- border给图像设定边框及其粗细 -->
<h4>width 给图片修改宽度，height给图片修改高度</h4>
<img src="./img/666.jpg" alt="我是wz" title="我是wz" width="100" height="200" border="20">
<!-- 属性可以有多个标签，之间要空格，必须写在标签名后 -->
<border="15"></border="15"> <!-- 根目录为目录文件夹的第一层 -->
</body>
</html>
<html>
class2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二课</title> <!-- 相对路径在同一级，绝对路径一个在同级目录的下一级 -->
</head>
<body> <!-- 图片在HTML的上一级 加 ../img.jpg ，在下一级加 /img.jpg 同一级写 img.jpg-->
<img src="img/666.jpg" title="我是wz" width="100",height="100" border="20"> 下一级相对路径写法 <br> <br>
<img src="../img.jpg" title="我是wz" width="100",height="100" border="20"> 上一级相对路径写法 <br><br>
<img src="C:\Users\wz2020\Desktop\HBuild\html项目\2021-1\img\666.jpg" width="100" height="200" border="20"> 绝对路径注意是“\”<br>也可以用网站地址找到图片
<h4>1.外部链接</h4>
<a href="https://www.csdn.net/" target="_blank"> CSDN </a> <br> <!-- 外部链接，不同打开方式-一个下划线，-->
<a href="http://www.qq.com" target> 腾讯</a> <!-- target是窗口的打开方式，默认值是_self 当前窗口打开页面， _blank是新窗口打开页面 -->
<h4>2.内部链接</h4>
<a href="class1.html">第一课</a> <!-- 内部链接， -->
<h4>2.空连接：#</h4>
<a href="#">待定地址可之后再确定</a>
<h4>4.下载链接：地址链接的是 文件.exe 或者是zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu"> <img src="img/img.jpg"width="100",height="100" > </a> <!-- 点击图片即可百度 -->
<h4>6.锚点链接</h4> <!-- 点击链接跳转到网页中的某个位置，#标识，设置id对应标识 -->
<a href="#work">跳转到作品</a>
<h4>空格要用特殊字符，否则只能空一格</h4>
讲 究
<h4>左括号和右括号</h4>
< p > 是一个段落标签 <!-- 等效< p > -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="work">作品：<br>wz1，wz2，wz3</h3>
<br><br><br><br><br><br>
</body>
</html>
class3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<h3>表格标签</h3>
tr用于定义表格中的行，必须嵌套在table标签中。<br>
td用于定义表格中的单元格，必须嵌套在tr标签中。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="300">
<!-- 这些属性要写到table里面 align对齐，border边框，cellpadding与单元格与其内容的距离 ，cellspacing单元格之间的边框“小缝隙”距离
，width设置表格的宽度，height高度-->
<!-- 表头与th不同的是thead是一行 -->
<thead>
<tr>
<th>名字</th> <th>性别</th> <th>年龄</th>
</tr>
</thead> <!-- td==table data单元格内文字 -->
<tbody>
<tr> <td>小魏 </td> <td rowspan="4">男</td> <td>19</td> </tr> <!-- tr==table row 表格一行-->
<tr> <td>小李 </td> <!-- 多余删了 --><td>20</td> </tr> <!-- th ==table head HTML表头部分，文字在单元格中加粗居中 -->
<tr> <td>小陈 </td> <!-- 多余删了 --><td>19</td> </tr>
<tr> <td>小傅 </td> <!-- 多余删了 --><td>19</td> </tr> <!-- 跨列合并rowspan加合并格数,，跨行合并clospan，目标单元格最左或最上的格 -->
</tbody> <!-- 合并三部曲，先确定跨行或跨列，再找到目标单元格，删除多余的单元格 -->
<h4>您喜欢吃的食物是？</h4>
<ul><!-- ul无序列表，整齐的同级排列 --> 规范：ul中只放li标签，只在li标签中输入文字
<li>列表项</li>
<li>榴莲</li>
<li>臭豆腐</li>
<li>秘制小汉堡</li>
</ul>
<h4>粉丝排行榜</h4>
<ol> <!-- 有序列表 -->
<li>刘德华 10000</li>
<li>小魏 110</li>
<li>David 1</li>
</ol>
<dl> <!-- 自定义列表 -->
<dt>名词 关注我们</dt> <!-- 这里不一样哦 -->
<dd>名词解释1 官方微博</dd>
<dd>名词解释2 官方微信</dd>
<dd>名词解释3 联系我们</dd>
<dd>名词解释4 加入我们</dd>
</dl>
</table>
</body>
</html>
class4
<!DOCTYPE html>
<html>
<head> <!-- 颜色区分：蓝色为标签，红色为属性，绿色为值 -->
<meta charset="utf-8">
<title>表单域</title>
</head>
<body>
<form action="class1.html" method="post" name="name1"> <!-- 表单域标签 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/> <br> <!-- maxlength限制最多能输入多少字符 -->
<!-- 表单元素有很多属性，type属性的属性值可以用来指定不同的控件类型 --> <!-- text表示文本框 -->
<!-- name 是表单元素的名字，这里radio的name性别单选按钮必须有相同的名字name，才可以实现多选一 -->
密码：<input type="password" name="password"/> <br><!-- 密码框，用户看不见输入的密码 --> <!-- radio是单选按钮，可以实现多选一 -->
性别: 男<input type="radio" name="sex" value="男" checked="checked"/> <!-- check设置初始勾选 -->
女<input type="radio" name="sex" value="女"/>
人妖<input type="radio" name="sex" value="人妖"/> <br> <!-- value在文本框中显示，表示input元素值 -->
爱好： 吃饭<input type="checkbox" /> 睡觉<input type="checkbox" /> 打豆豆<input type="checkbox" /> <br> <!-- checkbox复选框，可实现多选 -->
<input type="submit" value="免费注册" /> <!-- submit点击提交按钮把表单信息送给后台 ，value更改（提交）文字-->
<input type="reset" vlaue="重新填写" /> <!-- reset重置按钮，变成初始默认状态 -->
<input type="button" value="获取短信验证码" /> <!-- button普通按钮，后期结合js使用 -->
上传头像：<input type="file" /> <!-- file上传文件 -->
<!-- label标签为input标签定义注释，点击注释图标即可选中 --><br><br><br>
<label for="text">点击文字或图标可选中文本框：</label> <input type="text" id="text"/> <!-- for 与 id相同 -->
<label for="1"> 男：<input type="radio" id="1" /> </label>
<!-- 下拉元素选择，节约空间 -->
籍贯：<select >
<option >福建</option>
<option >湖南</option>
<option >河南</option>
<option >陕西</option>
<option selected="selected">中国</option> <!-- selected="selected"默认选项 -->
<option >地球</option>
<option >火星</option>
</select> <!-- textarea文本框区域可写很多，可换行，用于留言、介绍 --> <!--（不用记 ，实际大小用CSS改） row限制显示的行数，cols限制每行的字符数-->
今日反馈：<textarea >
默认提示内容：请输入文字
</textarea>
</form>
</body>
</html>
class5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体验CSS语法规范</title>
<style> /* style里面是CSS的内容 */ /* CSS（层叠样式表）--网页的美容师 */
/* 选择器 */ p {
color: red; /* 属性: 值 ； */
font-size:12px ; /* 文字大小修改成了12像素 */
} /* 1.规范全部小写,除了特殊情况 2.属性：与 值 留个空格， 3. p 与 { 留个空格*/
.div {
color: pink;
font-size: 0.9375rem;
} /* .类名 {} 类选择器，可实现差异化 */
.black { /* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用 */
color: black;
}
.box {
width: 150px;
height: 100px;
font-size: 25px; /* font-size才是设置格子内的文字大小 */
}
.redground {
width: 100px;
height: 100px;
background-color: #FF0000;
}
.greenground {
width: 100px;
height: 100px;
background-color: green;
}
/* id选择器 ，样式#定义，结构id调用，只能调用一次，别人切勿使用*/
#pink {
color: pink;
}
* {
color: black; /* * {}通配符选择器,修改页面的所有元素 */
} /* 选择所有标签更改样式 特殊情况使用 */
</style>
</head>
<body>
<p class="black">男生1</p>
<p>男生2</p>
<p>男生3</p>
<p>男生4</p>
<div class="black">女生1</div>
<div class="div">女生2</div> <!-- div就是一个盒子 -->
<div class="black">女生3</div>
<div class="box redground">背景红</div> <!-- 可以多个类一起调用 -->
<div class="box greenground">背景绿</div>
<div class="box redground">背景红</div>
<div id="pink">小魏</div> <!-- 其他地方就不使用id"pink"了 -->
<div >pink</div>
<p>有点意思<p/> <!-- 选择器：选择标签 -->
</body>
</html>
class6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体</title>
<style >
.bold {
font-weight: bold; /* 写700不加单位等效 加粗bold,实际开发更提倡数字 */
}
.bold2 {
font-weight: 1000; /* 写400不加单位等效 正常normal默认值不检测,实际开发更提倡数字 */
}
div {
font-style: initial;
font-weight: 700;
font-size: 16xp;
font-family: "Microsoft yahei"; /* 字体 */
/* 简写一行的规范—(不可以颠倒顺序)按照font：font-style font-weight font-size/line-height font-family */
/* 简写font-size font-family必须要写才有用 */ /* 字号 字体 字体粗细 字体样式 */
/* 倾斜的文字不倾斜 font-style: normal; 加粗的字体不加粗 font-size: 400; */
/* font: italic 700 16px "Microsoft yahei" */
text-align: center; /* 水平对齐 */
/* text-decoration: none; */
}
h2 {
font-family: "微软雅黑"; /* 尽量使用系统默认字体,保证不同浏览器都能正确显示 */
font-size: 20px;
font-weight: bold;
text-align: center; /*对齐 还有left right */
text-decoration: overline; /* 下划线 */
}
p {
font-family: "Microsoft yahei"; /* 这是谷歌默认,最常见的几个字体 'Microsoft yahei','Tahoma', 'Arial' */
font-size: 20px; /* 文字大小 */
font-style: italic; /* italic倾斜 ，normal默认正常 */
text-indent: 2em; /* 常用text-indent: 2em; 首行缩进em为一个文字大小 ，也可用-20px负的左移，+正的右移*/
line-height: 25px; /*行高 ，与h中设置的行高相减，多出来的平分为上下间距*/
}
a {
text-decoration: none; /* 链接默认下划线,可以这样去掉 */
}
/* color #十六进制多用于开发 英文单词 RGB代码 rgb(255,0,0)或rgb(100%,100%,0%) */
</style>
</head>
<body>
<h2 class="bold2">小魏的秘密</h2>
<p>思想的启示</p>
<p>工作的方法上思想的方法论以及典型事例前无古人后无来者！战略上藐视敌人战术上重视敌人有胆有识。
在做任何事时，要对自己有信心，不要一开始就觉得自己不行，
又不能过于自信要摆正自己的位置，
看清自己，和别人对比，沟通交流，知道自己的差距。</p>
<p>工作的方向上思想具有普遍的指导作用。
就如拉车很辛苦.但方向不明.看不清.轻则白忙.重则就可能人仰马翻！
要会梳理自己要做什么事，做到心中有数，而不是一味的埋头苦干，
要有方向有目标，明白接下来要做什么，在什么时候要完成什么任务，理清思路。</p>
<p>以上这些就是我目前从思想中得到的一些启示。</p>
<p class="bold">8868868848</p>
<h2> <a href="#">小帅</a></h2>
<div > <a href="#">小朋友</a> </div>
</body>
</html>
class7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引入方式</title>
</head> <!-- 行内式、嵌入式、链接式 -->
<!-- 行列式把CSS单独提出来，全部放到<style >中,style可以包括body，一般放head上方-->
<!--行内样式表，单独设定一行比较简单的操作 <p style=""></p> -->
<!-- 外部样式表，把CSS写到一个文件中，新建一个CSS文件 -->
<body>
<link rel="stylesheet" href="style.css" />
</body>
</html>
class8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS第二天</title> <!-- Emmet语法，如快捷生成 div*10加Tap键-->
<style>
/* w100,h,w,tac,ti,加Tab键
.one {如下显示
width: 100px;
width: ;
height: ;
text-align: center;
text-indent: ;
} */
ol li {
/* ol为父,li为子 最终效果只对子有效，ol相当于标记位置作用 */
color: #FF0000;
/* 只有li中的文字变红色 */
}
ol li a {
/* 只改a ，只作用于最后一个*/
color: aqua;
}
.nav li a { /* 就只写三个，不用写ol，标签写最后两个 */
/* nav导航到相同ol li a的标记的那一组，起作用 */
color: yellow;
}
.nav>a { /* 子选择器 */
color: #008000;
}
.pig>a {
color: #888888;
}
</style>
</head>
<body>
1.
<!-- .nav Tap默认是div生成<div class="nav"></div>，但可p.nav生成 <p class="nav"></p> -->
2.
<!-- div{写文字内容}*5，生成
<div>写文字内容</div>
<div>写文字内容</div>
<div>写文字内容</div>
<div>写文字内容</div>
<div>写文字内容</div> -->
3.
<!-- 自增符,$在输入法英文模式的4上面
div{$}*5生成
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div> -->
4.
<!-- 快速生成CSS样式sytle中 -->
5.
<!-- CSS的复合选择器 -->
后代选择器（包含选择器）
可以是儿子，孙子
例如：把li选出来改为p
<ol>
更精确选择特定区域的li
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
<li>我是ol的孩子</li>
</ol>
<ol class="nav">
<!-- nav导航到相同ol li a的标记的那一组，起作用 -->
更精确选择特定区域的li
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
<li>我是ol的孩子</li>
</ol>
6.子选择器（“亲儿子”选择器）
只选择最近一级元素，也就是只选亲儿子元素
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
<!-- 问题1：怎么把百度改为红色？ -->
<div class="pig">
<a href="#">大猪蹄子</a>
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>
<!-- 答： .nav ul li a { （li可省略）
color: #FF0000;
} -->
</body>
</html>
class9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div,
p {
/* 要求一：把熊大熊二都改成粉红色 */
color: pink;
}
/* 要求二:把小猪佩奇一家和熊大熊二都要改成粉红色 */
div,
p,
.pig li {
/* 最后一个不加逗号！！！ */
color: #FFC0CB;
}
a:link { /* 把未访问过的链接选出来 */
color: pink;
text-decoration: none;
}
a:visited { /* 把访问过的链接选出来 */
color: #FF0000;
}
a:hover { /* 选择鼠标经过的链接 */ /* 第二个红色如hover字段才对，可判断是否写错 */
color: green;
}
a:active { /* 选择鼠标正在按下,但还没弹出的链接 */
color: #00FFFF;
}
/* 平时开发的状态 */
/* a {
color: #000000;
}
a:hover {
color: #FF0000;
} */
input:focus { /* 把获得的光标的input表单元素选出来 */
background-color: pink;
color: skyblue;
}
</style>
</head>
<body>
7.并集选择器 可选择多组标签，可以用任何形式的选择器，用逗号分割，最后一个不加逗号！！！，并集选择器喜欢竖着写
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>弟弟乔治</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
8.链接伪选择器 <br> <!--顺序不能颠倒link、visited、hover、active LVHV love hate -->
重点记住a{}和a: hover的开发状态<br>
<a href="#">小猪佩奇动画片</a> <br>
<a href="http://www.baidu.com">未点开的网站</a> <br>
9.focus 伪类选择器 <!-- 用于获取焦点的表单元素 --><br>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
class10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的元素显示模式</title>
<style>
div {
background-color: #FFC0CB;
width: 200px;
height: 200px;
display: inline;
background: transparent; /* 默认透明的 */
}
span {
width: 200px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
a {
background-color: #008000;
width: 200px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<h1>Snipaste提高制作相同图片效率的软件</h1>
1.常见的块级元素有h1到h6，p，div，ul，ol，li
<div>块级元素特点:比较霸道，独占一行，高度，宽度外边距都可以style设计控制，宽度默认是容器的100%，是一个容器或盒子</div>瑟瑟发抖
<p>文字类的元素内不能放块级元素，如h1到6标题也不能放块级元素</p>
<div>
这里有问题，不允许p中放块级元素如div
<br>同理h1也不行放其他块级元素
</div>
2.行内元素特点：相邻行内元素在一行上，一行可以显示多个，高宽设置无效，默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
常见的行内元素：a strong b em i del s ins u span最典型的）
<span>小魏</span>
<strong>的礼物呀</strong>
<a href="http://www.baidu.com">不允许再嵌套a标签，链接中不允许放链接</a>
3.行内块元素 ：img input td 同时具有行内元素和块元素的特点
和相邻行内元素在一行上，之间有空白间隙，一行可以显示多个。默认宽度就是本身内容宽度，高宽可以style设置
<input type="text" />
<input type="text" />
在style中把a转换成块元素 用display block
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>
我是块级元素
</div>
<div>
我是块级元素
</div>
<span>
行内元素转行内块元素
</span>
<span>
行内元素转行内块元素
</span>
</body>
</html>
class11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
h3 {
width: 118;
height: 40;
background-color: pink;
font-size: 14px;
font-weight: 400;
background-image: url(img/title_sprite.png);
background-repeat: no-repeat;
background-position:left center ;
text-indent: 1.5em;
}
div {
width: 100px;
height: 100px;
background: transparent;
/* 默认透明 */
background-image: url(img/666.jpg);
/* 默认none空，url（）引用图片 */
background-repeat: no-repeat;
/* 默认平铺,no-repeat背景不平铺 ，平铺是铺满整个盒子达到铺满盒子大小*/
/* background-repeat:repeat-y;沿y轴平铺;
background-repeat:repeat-x;沿x轴平铺 *
页面原色也可以添加背景颜色和背景图片一起，只不过图片会压住颜色*/
background-color: #00FFFF;
background-position:center right ;/* 方位名词顺序任意 ，省略第二个默认居中*/
/* background-position: right; */
/* background-position:top ; */ /* 写水平的,就缺少垂直 */
}
body {
background-image: url(img/背景图片.jpg);
background-repeat:no-repeat ;
background-position: center top;
}
</style>
</head>
<body>
<h3>
<img src="img/title_sprite.png" >成长守护平台</h3> <!-- F12小箭头 点击查看图片代码，另外打开另存为 -->
<div id="1">
</div>
</body>
</html>
class12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景位置-精确方位</title>
<style>
/* div {
background-color: #aaffff;
background-image: url(./img/logo.png);
} */
body {
background-image: url(./img/logo.png);
background-image: url(img/背景图片.jpg);
background-attachment: fixed;
/* 背景图片固定 ，默认是滚动 scroll*/
background-repeat: no-repeat;
background-position: center 40px;
/* (x，y) 默认先x后y */
/* 背景复合型写法 */
/* background: black url(img/logo.png) no-repeat fixed center top; */
/* 顺序为:背景颜色,背景图片,背景平铺设置,背景图像滚动设置,背景图片位置设置 */
}
p {
color: #666666;
font-size: 16px;
}
</style>
</head>
<!-- 精确坐标，第一个肯定是x，第二个y坐标 -->
背景图像固定（背景附着）
</head>
<body>
<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>开心快乐每一天呀</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>
</body>
</html>
class13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景半透明写法</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
/* background-color: #000000; */
/* 透明度写法，rgba分别对应四个参数，前三个表示元素，最后一个参数表示透明度，取值在0-1之间，0全透明看不见 */
background:rgba(0,0,0,0.3) ; /* 0.3的0可以省略 */
/* 背景颜色半透明,盒子里的内容不受影响 */
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
class14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS层叠性</title>
CSS三大特性（层叠性，继承性，优先级）<br>
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。<br>
层叠性主要解决样式冲突的问题：<br>
层叠性原则：<br>
样式冲突：遵循的是就近原则，那个样式里结构近，就执行哪个。<br>
样式不冲突：不会层叠。<br>
<style>
.test {
color: #008000;
/* 级别更高 */
}
div {
color: red !important;
/* !最重要，最高级别 */
font: 12px/1.5 "microsoft yahei";
/* 行高也可以不跟单位，指当前文字大小的1.5倍 */
/* 子元素没有行高时,会继承行高为文字的1.5倍 */
/* 这样设置行高好处是可以根据文字大小自动调整行高 */
}
div {
/* 记（后来居上）这个样式距离结构近，但这里没有size，可执行上一个div的size */
color: skyblue;
}
/* 父亲的权重是100 ，甚至改到无穷大但 */
#father { /* 继承 */
color: red!important;
}
/* 但是子类的继承权重是0 ，即没继承*/
/* 所以我们以后看标签到底执行那个样式,就先看这个标签有没有直接被选出来 */
p {
color: pink;
}
body {
color: #000000;
}
ul li {
color: red;
}
li {
color: green;
}
.nav {
color: indianred;
}
.nav .pink { /* 增加pink权限 大于nav，否则颜色先执行nav*/
color: pink;
font-weight: 700; /* 加粗 */
}
h2 {
color: gray;
}
</style>
</head>
<body>
<div>
这是层叠性<br>
长江后浪推前浪，前浪死在沙塘上<br><br>
<p>在当p没有设置样式时</p>
<p>龙生龙，凤生凤，老鼠的儿子会打洞，继承父标签样式，body继承所有字标签</p>
<!-- 继承颜色字体行高 -->
</div>
3.优先级：当一个元素指定多个选择器，就会有优先级产生<br>
选择器相同，则执行层叠性<br>
选择器不同时，则根据选择器权重执行<br>
继承或* 0,0,0,0 <br>
元素选择器 0,0,0,1 <br>
类选择器 伪类选择器 0,0,1,0 <br>
ID选择器 0,1,0,0 <br>
行内样式 style ="" 1,0,0,0 <br>
!important 重要的 无穷大 <br>
简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）标签选择器为10，
id选择器100，行内样式表1000，！important无穷大<br>
所以我们以后看标签到底执行那个样式,就先看这个标签有没有直接被选出来设置风格<br>
<!-- 选择器比较原理：从左到右按每位数值比较，较大的执行 -->
<div class="test" style="green">
你笑起来真好看<br>
</div>
<p>你还是很好看</p><br>
<a href="#">我是单独的样式（a的浏览器原有默认设置，等效单独选出，则body类无法改变a样式）</a>
4.权重叠加<br>
复合选择器会叠加权重，权重虽然会叠加，但不会有进位问题，即第四位1叠加多个也不会超过第三位为1的权重<br>
如：ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 <br>
而li 0,0,0,1 小于 ul li 的权重则执行ul li样式 ，当li嵌套在ul中时执行ul li，再嵌套.test0,0,1,0叠加了更高<br>
<ul class="test">
<li>我身而为绿却被染红</li>
</ul>
<h2> 权重练习</h2>
<ul class="nav"> <!-- 继承权重为0 -->
<li class="nav">人生四大悲</li>
<li class="pink">家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>显示快没电</li>
</ul>
</body>
</html>
class15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border-width: 5px ; /* 边框的粗细，一般都用px */
/* border-style: solid; 实线边框 */
/* border-style: dashed; 虚线边框 */
/* border-style: dotted; 点线边框 */
/* border-color: pink; /*边框颜色配合使用，默认黑色 ？ */
/* border: 5px solid pink; /* ----简洁写法，没有顺序 大小样式颜色----- */
border: 5px solid #000000;
/* 下面层叠性，覆盖上面 */
border-top:5px solid black ;
border-bottom:5px dashed green;
border-left:5px solid yellow;
border-right:5px dotted red;
}
</style>
</head>
<body>
<h1>网页布局最终点：用CSS设置好盒子的位置</h1>
border 边框
<div >
</div>
</body>
</html>
class16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style >
div {
width: 200px;
height: 200px;
background-color: pink;
/* padding-left:20px ; */ /* padding 为内边距 */
/* padding-right:20px ;
padding-top: 20px;
padding-bottom: 20px; */
/* padding的复合写法 */
/* padding: 5px; padding后只跟1个值,代表设置上下左右一样 都记住!!!，无论几个参数四个方向都有被设置 */
padding: 5px 10px; /* padding后只跟2个值,代表设置 上下一样--左右一样 */
/* padding: 5px 10px 20px; padding后只跟3个值,代表设置上-左右-下 */
/* padding: 5px 10px 20px 30px; padding后只跟4个值,代表设置上右下左--顺时针 */
}
/* 如果这个盒子已经有了宽度和高度,padding会撑大盒子两边，撑到过大会挤掉其他盒子，
所以要减去每个方向对应的内边距 调整高度，宽度不变 */
</style>
</head>
<body>
边框会额外增加盒子实际大小，解决办法：<br>
1.测量盒子大小的时候，不量边框<br>
2.如果测量时包括边框就减去宽width*2，高height*2求出盒子实际大小<br>
<div id="">
盒子的内容是content盒子的内容是content盒子的内容是content盒子的内容是content盒子的内容是默认紧贴边框的
</div>
</body>
</html>
class17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
color: #000000;
height: 200px;
background-color: #00FFFF;
}
div {
/* 没有设置width height属性padding就不会影响盒子大小 */
height: 100px;
width: 300px;
background-color: skyblue;
}
div p {
/* width: 100%; 没有width padding不影响盒子大小 */
padding: 30px;
background-color: pink;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
class18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
color: #000000;
height: 200px;
background-color: #00FFFF;
}
div {
/* 没有设置width height属性padding就不会影响盒子大小 */
height: 100px;
width: 300px;
background-color: skyblue;
}
div p {
/* width: 100%; 没有width padding不影响盒子大小 */
padding: 30px;
background-color: pink;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
class19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
color: #000000;
height: 200px;
background-color: #00FFFF;
}
div {
/* 没有设置width height属性padding就不会影响盒子大小 */
height: 100px;
width: 300px;
background-color: skyblue;
}
div p {
/* width: 100%; 没有width padding不影响盒子大小 */
padding: 30px;
background-color: pink;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
class20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS浮动</title>
<style>
span,
div {
width: 150px;
height: 200px;
background-color: skyblue;
display: inline-block;
/* float: left; 往左边并排*/
}
.box1 {
float: left; /* 上面浮动的盒子会压住下面的和盒子 */
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(0,153,255);
}
p {
float: right;
height: 200px;
background-color: purple;
}
.fatherbox {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: right;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
之前学习的都是标准流（块级元素或行内元素按照规定排列）
1.行内块中间有间隙，我们很难控制<br>
利用浮动改变你元素标签默认的排列方式<br>
浮动最经典的应用：任意可以让多个标签并排无缝隙<br>
float属性用于创建浮动框，将其移动到一边，知道左边缘或有边缘触及包含块或另一个浮动框的边缘<br>
语法：float :属性值; <!-- 先看左浮动还是右浮动到边缘，边缘有盒子时就依次拼接 -->
浮动元素特性：<br>
1.浮动元素会脱离标准流，浮动的盒子不再保留原来的位置，“飞到空中不在平面上”，即原位置不被占用，可添加别的盒子占用（拖标）<br>
2.浮动的元素会一行内显示并且元素顶部对齐<br> <!-- 把div的浮动注释启用即可看效果 -->
3.浮动的元素会具有行内块元素的特性<br>
如果行内元素有了浮动，就不需要转换块级或行内快元素就可以有行内块元素的特性，即直接给宽度和高度<br>
<h2>网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动</h2>
<div>左青龙</div>
<div>2</div>
<div>右白虎</div> <!-- <br> -->
<div class="box1">
浮动的盒子
</div>
<div class="box2">
标准流的盒子
</div>
<div>div</div>
<p>ppppppppp</p> <!-- 行内块元素特性 --><br> <br><br><br><br> <br><br><br>
为了约束浮动元素的位置，我们网页布局一般采用的策略是：<br>
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页第一布局准则<br>
<div class="fatherbox">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
class21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动注意点</title>
<style>
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 400px;
height: 150px;
background-color: red;
}
.sanmao {
float: left;
width: 300px;
height: 240px;
background-color: blue;
}
</style>
</head>
<body>
1.先用标准流排列上下位置，之后内部子元素再用浮动排列左右位置<br>
2.一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题<br>
浮动的盒子值影响后面的标准流，不会影响前面的 （会贴在前面的（标准流独占一行）下面浮动）<br>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="sanmao">三毛</div>
</body>
</html>
class22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为什么需要清除浮动</title>
<style type="text/css">
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
content: "";
display: black;
height: 0;
clear: both;
visibility: hidden;
}
.claerfix {
/*IE6、7专有*/
*zoom: 1;
}
.box {
/*清除浮动*/
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.clear {
clear: both;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 400px;
height: 150px;
background-color: red;
}
.sanmao {
float: left;
width: 300px;
height: 240px;
background-color: blue;
}
</style>
</head>
<body>
文章很长，高度不写死<br>
由于父盒子很多情况下不定高度，但浮动会让复合组高度为0，影响下面的标准流盒子被覆盖<br>
清除浮动本质:清除浮动影响<br>
语法：<br>
选择器{clear: 属性;}<br>
1.额外标签法 （在每个浮动元素的末尾加一个空的标签，这个标签必须是块级元素，也叫隔墙法，书写方便易懂但结构性差）
<div class="damao">大毛</div> <!-- 如<br>，div是（不占用一行的)块级元素 -->
<div class="ermao">二毛</div>
<div class="clear"></div> <!-- 三毛的浮动就被清除了 -->
<!-- <span class="clear"></span> 占一行的行元素不行 -->
<div class="sanmao">三毛</div>
<!-- <div class="clear" ></div> -->
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 ，br可以 -->
<div class="box claerfix">
<div class="sanmao">三毛</div>
<div class="sanmao">三毛</div>
</div>
<br>
2.清除浮动，在父级添加overflow ，属性值设为hidden，auto或scroll <br>
3.after伪元素法，额外标签的升级版，也是给父元素添加(在大盒子的后面插入盒子)<br>
4.双伪元素清除浮动(在大盒子的前面和后面插入盒子)<br>
</body>
</html>
style css
/* CSS在这里只有样式,没有标签 */
/* 外部调用此文件<link rel="stylesheet" href="style.css"/> */
div {
color: #FF0000;
}对应名字的图片可以自己找
这里给一些图片
logo.jpg
iMIX4拍摄.jpg
小米.jpg
百里.jpg
背景图片.jpg
波吉.jpg
结束语：初学仅到了浮动过程，应为这些是课后部分时间自习，没有开设这门课，为了应付考试放弃了继续跟进，杂碎时间大概自学一星期，虽然结束但还不是最后...
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
