HTML
frameset(已淘汰)
页面框架，可以分层分列<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Frameset</title>
</head>
<!-- 使用frameset不能使用body标签 -->
<!-- rows 分两行，一行200px，剩余页面是第二行 -->
<frameset rows="200px, *" border="20px" bordercolor="yellow" noresize>
<frame src="01-top.html">
<!-- cols两列 200px 第一列的宽度，*第二列 -->
<frameset cols="200px, *">
<frame src="01-left.html">
<!-- 左边A标签连接点击，页面展示到name=right的frame中 -->
<frame src="01-right.html" name="right">
</frameset>
</frameset>
</html>特殊字符
< 小于号
> 大于号
& 与字符
空格
" 双引号
® 已注册
©：版权声明
&trade：商标声明CSS
什么是CSS
CSS，全称是Cascading Style Sheet 层叠样式表
word文档中多个样式层层叠加，相互 之间共同修饰一个文本...
CSS里面也是各种样式，各种修饰完成对于HTML页面的美化过程
CSS能干什么
1.美化HTML
2.提高代码的复用性
3.HTML和CSS样式分离，后期好维护
4.HTML和CSS样式分离，还能降低公司带宽成本CSS的三种引入方式和初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
内联样式
head标签内定义一个style标签，在style标签内都是CSS样式
-->
<style>
/*
.cls选择器 修饰HTML标签属性class为cls的标签
大括号内是CSS样式
*/
.cls {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<!--
外联样式
使用link标签连接外联样式表
rel 声明连接的类型
type text/css 可视化的CSS样式
href 表示CSS样式的地址，该地址可以是一个网络地址
-->
<link rel="stylesheet" type="text/css" href="./css/03-CSS三种引入方式.css">
</head>
<body>
<!--
行内样式表
HTML标签的Style属性
CSS样式是一个键值对形式 width:200px;
属性名:属性值;
-->
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<div class="cls"></div>
<div id="id1"></div>
</body>
</html>三种引入方式对比
1.行内样式表权重高
2.外联样式表强烈推荐，这里可以节约资源，同时提高服用度CSS选择器
用于明确当前CSS样式，尤其是内联样式表和外联样式表考虑当前CSS样式修饰的是哪一个或者哪些HTML标签
三个基本选择器
元素选择器
HTML标签名作为选择器名字，可以用于修饰所有的对应当前标签名的HTML标签
ID选择器
针对HTML标签ID属性进行选择修饰，并且ID属性具有唯一性
class选择器
针对HTML标签class属性进行选择修饰，class属性可以复用多个HTML标签
以上三个选择器权重排序
id > class > 元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-三大基本选择器</title>
<style>
/* 标签选择器 */
div {
font-size: 50px;
color: red;
}
/* ID选择器 【要求】#号开头*/
#id1 {
font-size: 30px;
color: brown;
}
#id2 {
font-size: 30px;
color: red;
}
#id3 {
font-size: 30px;
color: blueviolet;
}
#id4 {
font-size: 60px;
color: indianred;
}
/* class选择器 */
.cls1 {
font-size: 30px;
color: chocolate;
}
</style>
</head>
<body>
<!-- 标签选择器 -->
<div>烤羊排</div>
<div>羊肉串</div>
<div>羊肉汤</div>
<!-- ID选择器 【要求】ID不可以重复-->
<span id="id1">胡辣汤</span>
<span id="id2">羊杂汤</span>
<span id="id3">羊肉烩面</span>
<!-- class选择器 class属性可以复用 -->
<div id="id4" class="cls1">擀面皮</div>
<div class="cls1">肉夹馍</div>
<div class="cls1">冰峰</div>
<div class="cls1">油泼面</div>
</body>
</html>属性选择器
根据属性名以及属性值进行选择元素，比如 from表单中的input标签<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>05-属性选择器</title>
<style>
/* 属性选择器 */
/* 根据属性名和属性值来约束修饰的HTML标签 */
input[type='text'] {
background-color: lightpink;
}
input[type='password'] {
background-color: #7c1823;
}
/* 根据属性名来约束修饰的HTML标签 */
font[size] {
color: greenyellow;
}
font[face] {
color: #7c1823;
font-size: 30px;
}
</style>
</head>
<body>
<font size="7">你好CSS</font> <br>
<font face="黑体">你好CSS</font> <br>
<form action="02-特殊字符.html" method="get">
<span>姓名:</span><input type="text" name="name"><br>
<span>密码:</span><input type="password" name="password"><br>
<span>头像:</span><input type="file" name="icon"><br>
<input type="submit" value="提交">
</form>
</body>
</html>伪类选择器
伪类选择器语法：
静止状态 a:link
鼠标悬浮 a:hover
出发状态 a:active
已访问状态 a:visited<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
}
/*
a标签伪类选择器是有严格顺序的
hover必须跟在link和visited的后面
active必须跟在hover的后面
*/
a:link {
color: chocolate;
}
a:visited {
color: purple;
}
a:hover {
color: lightpink;
}
a:active {
color: greenyellow;
}
</style>
</head>
<body>
<h1><a href="http://www.dangdang.com">当当网</a></h1>
</body>
</html>层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-层级选择器</title>
<style>
/* 层级选择器 */
#id1 .cls1 {
color: red;
font-size: 30px;
}
#id2 .cls1 {
color: greenyellow;
font-size: 50px;
}
</style>
</head>
<body>
<div id="id1">
<div class="cls1">
82的农夫山泉
</div>
</div>
<div id="id2">
<div class="cls1">
20年雪碧
</div>
</div>
</body>
</html>组合选择器
1.CSS样式中多个选择器使用
2.HTML标签class属性可以有多个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-组合选择器</title>
<style>
div, span, p, strong {
color: red;
font-size: 30px;
}
.size_class {
width: 200px;
height: 200px;
}
.font_class {
color: #7c1823;
font-size: 30px;
}
.bg_class {
background-color: greenyellow;
}
</style>
</head>
<body>
<div>外星人</div>
<span>MacBook Pro</span>
<p>ThinkPad P</p>
<strong>神舟笔记本</strong>
<hr>
<!-- class属性有多个，空格隔开 -->
<div class="size_class font_class">烤面筋</div>
<div class="size_class bg_class">炸鸡</div>
<hr>
</body>
</html>CSS属性
文字属性
1.font-size 字体大小
2.font-family 文字字体
3.font-style 字体样式
normal 默认值正常显示
italic 斜体
4.font-weight 文本字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-文字属性</title>
<style>
div {
/* 字体大小 */
font-size: 30px;
/* 字体样式 */
font-family: 楷体;
/* 斜体 italic 默认 normal正常显示*/
font-style: italic;
/* 加粗字体 */
font-weight: bold;
}
</style>
</head>
<body>
<div>
美国新冠肺炎确诊人数达到8W，超过中国
</div>
</body>
</html>文本属性
1.color：文本颜色
2.test-indent：文本缩进
3.text-decoration：
none 文本什么标记都没有[默认]
underline：下划线
overline：上划线
line-through：删除线
blink：
4.text-algn：
文本对齐方式，center，left，right
5.line-height：行高<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1 {
font-size: 30px;
color: red;
text-decoration: underline;
}
#id2 {
font-size: 30px;
color: blueviolet;
text-decoration: line-through;
text-indent: 2em;
line-height: 100px;
}
</style>
</head>
<body>
<div id="id1">
壮哉我大中华！！！
</div>
<div id="id2">
预祝下一届美国总统还是特朗普！！！
</div>
</body>
</html>背景属性
1.background-color：背景颜色，默认透明
2.background-img：需要给一个url，可以是网络地址，也可以是本机地址
3.background-repeat：重复方式
默认全屏平铺
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
no-repeat：只显示一张
4.background-position：背景图片位置
top，left，bottom，right<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-背景属性</title>
<style>
body {
/*background-color: #7c1823;*/
background-image: url("img/QQ图片20200326112539.png");
background-repeat: no-repeat;
/* 50px 100px 从左上角，50px是水平，100px垂直 */
background-position: -50px -100px;
/*background-position-x: 100px;*/
/*background-position-y: 100px;*/
}
</style>
</head>
<body>
</body>
</html>列表属性
list-style：列表标记样式 disc none square circle
list-style-image：url("图片地址") 列表图片
list-style-position：inside 图片内部展示<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-列表属性</title>
<style>
li {
font-size: 30px;
/*list-style-type: none;*/
list-style-image: url("img/QQ图片20200326112539.png");
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>奥巴马</li>
<li>武大郎</li>
<li>罗斯福</li>
<li>华盛顿</li>
<li>特朗普</li>
</ul>
</body>
</html>尺寸属性
width：宽 px 像素
height：高 px 像素显示属性
block：
块级显示
inline：
行级显示
none：
不显示float浮动属性
HTML页面中所有元素的解析过程是在文档流操作的，HTML页面解析从上至下，从左至右依次完成，如果元素使用了float操作，会脱离文档流<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-浮动float属性</title>
<style>
div {
width: 200px;
height: 200px;
margin-right: 20px;
background-image: url("img/QQ图片20200326112539.png");
background-repeat: no-repeat;
}
.float-class {
float: left;
}
/*#id1 {*/
/* float: left;*/
/*}*/
/*#id2 {*/
/* float: left;*/
/*}*/
</style>
</head>
<body>
<div style="width: 1200px; height: 200px;">
<div class="float-class" style="background-color: red"></div>
<div class="float-class" style="background-color: yellow"></div>
<div class="float-class" style="background-color: blue"></div>
<div class="float-class" style="background-color: green"></div>
<div class="float-class" style="background-color: paleturquoise"></div>
</div>
<div style="width: 1200px; height: 200px; margin-top: 20px">
<div class="float-class" style="background-color: red"></div>
<div class="float-class" style="background-color: yellow"></div>
<div class="float-class" style="background-color: blue"></div>
<div class="float-class" style="background-color: green"></div>
<div class="float-class" style="background-color: paleturquoise"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-list列表float浮动</title>
<style>
ul {
list-style-type: none;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
</head>
<body>
<ul style="float:left;">
<li class="float-left">JavaEE </li>
<li class="float-left">HTML5 </li>
<li class="float-left">Python </li>
<li class="float-left">C/C++ </li>
<li class="float-left">C# </li>
</ul>
<ul style="float:right;">
<li class="float-left">Perl </li>
<li class="float-left">Swift </li>
<li class="float-left">OC </li>
<li class="float-left">PHP </li>
<li class="float-left">JavaScript </li>
</ul>
</body>
</html>定位属性
相对定位：
绝对定位：
固定定位：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-相对定位</title>
<style>
div {
width: 200px;
height: 200px;
}
#id1 {
/* 相对定位，相对于原本位置的定位 */
position: relative;
/*left: 200px;*/
}
</style>
</head>
<body>
<div style="background-color: red">我是一个参照物</div>
<div id="id1" style="background-color: green">这里要进行相对定位
<div style="background-color: yellow; width: 100px; height: 100px; position: relative; left: 150px;"></div>
</div>
<div style="background-color: red">我是一个参照物</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-绝对定位</title>
<style>
#outer {
position: absolute;
left: 100px;
}
#inner {
/* 绝对定位 */
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="outer" style="background-color: red; width: 200px; height: 200px"></div>
<div id="inner" style="background-color: yellow; width: 100px; height: 100px;"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-固定定位</title>
<style>
div {
width: 200px;
height: 200px;
}
#left {
background-color: red;
position: fixed;
top: 0;
left: 50px;
}
#right {
background-color: green;
position: fixed;
bottom: 0;
right: 50px;
}
</style>
</head>
<body>
<div id="left">帕萨特撞断A柱</div>
<div id="right">丰田机油增多</div>
<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>CSS盒子模型
什么是盒子模型
盒子模型是CSS样式修饰之后一个元素占用整个HTML页面的空间大小操作方式，存在外边距，边框，内边框和元素本身
边框，内外边距的界限
border-width:边框宽度
border-style:边框样式
solid 实线 double 双实线/空心线
dashed 虚线 dotted 圆点虚线
border-color:边框颜色
border: 边框宽度, 边框样式, 边框颜色;
例如: border: 10px solid black;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-盒子模型边框</title>
<style>
div {
width: 200px;
height: 200px;
b ackground-color: red;
/* 边框的宽度，样式和颜色 */
border: 10px solid black;
/*border-width: 10px;*/
/*border-style: dashed;*/
/*border-color: green;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>内边距，边框以内的世界
/* 内边距 padding */
/*padding-top: 50px;*/
/*padding-left: 100px;*/
/*padding-right: 200px;*/
/*padding-bottom: 150px;*/
/*
一个尺寸：所有的内边距都是该尺寸
二个尺寸: 第一个尺寸对应上下内边距，第二个尺寸对应左右内边距
三个尺寸: 第一个尺寸对应上内边距，第二个尺寸对应左右内边距，第三个尺寸对应下内边距
四个尺寸: 顺时针顺序，上右下左
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-盒子内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: greenyellow;
border: 5px solid red;
/* 内边距 padding */
/*padding-top: 50px;*/
/*padding-left: 100px;*/
/*padding-right: 200px;*/
/*padding-bottom: 150px;*/
/*
一个尺寸：所有的内边距都是该尺寸
二个尺寸: 第一个尺寸对应上下内边距，第二个尺寸对应左右内边距
三个尺寸: 第一个尺寸对应上内边距，第二个尺寸对应左右内边距，第三个尺寸对应下内边距
四个尺寸: 顺时针顺序，上右下左
*/
padding: 100px 200px 150px 50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20-盒子外边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: greenyellow;
border: 5px solid red;
float: left;
}
#id1 {
/*外边距 margin */
/*margin-top: 50px;*/
/*margin-left: 100px;*/
/*margin-right: 200px;*/
/*margin-bottom: 150px;*/
/*
一个尺寸：所有的外边距都是该尺寸
二个尺寸: 第一个尺寸对应上下外边距，第二个尺寸对应左右外边距
三个尺寸: 第一个尺寸对应上外边距，第二个尺寸对应左右外边距，第三个尺寸对应下外边距
四个尺寸: 顺时针顺序，上右下左
*/
/*margin: 100px 200px 150px 50px;*/
}
</style>
</head>
<body>
<div id="id1"></div>
<div></div>
</body>
</html>margin问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-margin问题</title>
<style>
/*
问题1
HTML中body标签和一些其他标签都带有一定的内外边距
通常情况下，在在css样式表中适用 * 通配选择器 去除HTML标签自带
的margin padding
*/
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
问题2:
以下两个元素，margin外边距实际展示效果为100px
这里存在一个margin合并问题，为了更好的展示页面
margin合并
-->
<div style="margin-bottom: 100px"></div>
<div style="margin-top: 100px"></div>
<div style="background-color: blue; border: 1px solid black">
<!--
问题3:
内部元素div，绿色如果在蓝色div没有边框的情况下，会影响原本的蓝色
div展示问题，但是如果蓝色div存在一个边框，绿色内容margin会根据
蓝色div参照物展示
margin塌陷
-->
<div style="margin: 100px; background-color: greenyellow"></div>
</div>
</body>
</html>
扫一扫
1870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
