根据以下学习视频，个人整理的笔记
https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0&vd_source=7a8946d22777450e46486d5fd60d8d4d
CSS
HTML + CSS + JavaScript
结构 表现 交互
什么是CSS
CSS：层叠级联样式表
CSS：美化网页
CSS发展史
- CSS1.0
- CSS2.0 DIV+CSS,HTML 与 CSS分离 网页变得简单 SEO搜索引擎化
- CSS2.1 浮动，定位
- CSS3.0 圆角，阴影，动画。。。浏览器兼容性
写项目的时候：css的文件放在同一个目录，html文件放在同一个目录
基本入门
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<!-- <style> 可以编写CSS的代码 每一个声明，最好使用分号结尾
语法：
选择器{
声明1;
声明2;
}
-->
<style>
h1{
color: crimson;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用html和css分离的方式
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<!-- <style> 可以编写CSS的代码 每一个声明，最好使用分号结尾
语法：
选择器{
声明1;
声明2;
}
-->
<link rel="stylesheet" href="CSS/style.css"/>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: blue;
}
CSS优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录
四种CSS的导入方式
三种导入方式
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部样式 -->
<style>
/* 这里要写CSS的注释代码，HTML的注释代码不管用 */
h1{
color: yellow;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<!-- 样式优先级： 就近原则-->
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red;">我是标题</h1>
</body>
</html>
/* 外部样式 */
h1{
color: darkgreen;
}
拓展：外部样式两种写法
-
链接式
- html标签
<!-- 外部样式 --> <link rel="stylesheet" type="text/css" href="css/style.css"/> -
导入式
- css标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入式 --> <style > @import url("css/style.css"); </style> </head> <body> <h1>狂神说Java</h1> </body> </html>
三种基本选择器
选择页面上的某一个或某一类元素
- 标签选择器
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器会选择页面上所有带这个标签的元素 */
h1{
color: red;
background: #00FFFF;
border-radius: 24px;
}
p{
font-size: 5rem;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>
- 类选择器
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器的格式
好处：可以多个标签归类，可以复用
*/
.qinjiang{
color: #0000FF;
}
.kuangshen{
color: pink;
}
</style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang">标题3</h1>
<p class="qinjiang">P标签</p>
</body>
</html>
- ID选择器
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id选择器 id必须保证全局唯一
#id名称{
}
不遵循就近原则
选择器优先级
id选择器 > class选择器 > 标签选择器
*/
#qinjiang{
color: #FFC0CB;
}
.style1{
color: #FF0000;
}
h1{
color: #0000FF;
}
</style>
</head>
<body>
<h1 id="qinjiang" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
<h1>标题7</h1>
<h1>标题8</h1>
</body>
</html>
层次选择器（只需了解）
- 后代选择器：在某个元素的后面
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p{
background-color: greenyellow;
} */
/* 后代选择器 */
/* body 后面的所有p标签 */
body p{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
- 子选择器 只有一代
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p{
background-color: greenyellow;
} */
/* 后代选择器 */
/* body 后面的所有p标签 */
/* body p{
background-color: #FFC0CB;
} */
/* 子选择器 */
/* 只有body后面的第一代所有p标签才有 */
body>p{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
- 相邻兄弟选择器 同辈
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p{
background-color: greenyellow;
} */
/* 后代选择器 */
/* body 后面的所有p标签 */
/* body p{
background-color: #FFC0CB;
} */
/* 子选择器 */
/* 只有body后面的第一代所有p标签才有 */
/* body>p{
background-color: #FFC0CB;
}
*/
/* 相邻兄弟选择器 只有一个*/
/* class="active" 向下相邻的一个p标签*/
.active + p{
background-color: aquamarine;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p8</p>
</body>
</html>
- 通用选择器
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p{
background-color: greenyellow;
} */
/* 后代选择器 */
/* body 后面的所有p标签 */
/* body p{
background-color: #FFC0CB;
} */
/* 子选择器 */
/* 只有body后面的第一代所有p标签才有 */
/* body>p{
background-color: #FFC0CB;
}
*/
/* 相邻兄弟选择器 只有一个*/
/* class="active" 向下相邻的一个p标签*/
/* .active + p{
background-color: aquamarine;
} */
/* 通用选择器 当前选中元素的向下的所有兄弟元素*/
/* class="active" 向下的所有p标签*/
.active~p{
background-color: darkorange;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p8</p>
</body>
</html>
结构伪类选择器
伪类：相当于条件
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 避免使用class，id选择器 -->
<style type="text/css">
/* 选择ul的第一个子元素 */
ul li:first-child{
background-color: #0000FF;
}
/* 选择ul的最后一个子元素 */
ul li:last-child{
background-color: #FF0000;
}
/* 选择 p2
选中当前p元素的父级元素：选中父级元素的第二个，并且是当前元素类型
*/
p:nth-child(2){
background-color: #FF8C00;
}
/* 选择父元素下类型为p的第二个元素 */
p:nth-of-type(2){
background-color: #00FFFF;
}
/* a:hover{
background-color: darkorchid;
} */
</style>
</head>
<body>
<a href="" >链接</a>
<h1>一级标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器（常用）
标签 + id + class 结合
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo a{
float: left;
display: block;
height: 3.125rem;
width: 3.125rem;
border-radius: 0.625rem;
background-color: #0000FF;
margin-right: 5px;
text-align: center;
color: #FFC0CB;
/* 取消下划线 */
text-decoration: none;
/* 20px/50px 20px为字体大小 50px为行高*/
font: bold 20px/50px Arial;
}
/*
= 绝对等于
*= 包含
^= 以这个开头
$= 以这个结尾
*/
/* 选中存在id属性的元素的a标签
a[]{}
*/
/* a[id]{
background-color: #FFFF00;
} */
/* 选中标签为a，id属性为first */
/* id = （这里可用正则表达式） */
/* a[id=first]{
background-color: #FFFF00;
} */
/* 选中a标签中有class属性，且属性值中有links的元素 */
/* 这里用双引号是因为class可以有多个 */
a[class*="links"]{
background-color: fuchsia;
}
/* 选中href中以http开头的元素 */
a[href^=http]{
background-color: #FF0000;
}
a[href$=pdf]{
background-color: lightseagreen;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item ">3</a>
<a href="images/123.png" class="links item ">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
CSS的作用及字体样式
为什么要美化网页
- 有效地传递页面信息
- 吸引用户
- 凸显页面的主题
- 提高用户体验
span标签：重点要突出的字，使用span套起来
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>
字体样式
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
font-family 字体风格
font-weight 字体粗细
-->
<style >
body{
font-family: "arial black", 楷体;
color: #FF00FF;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
张生在普救寺相遇相国小姐崔莺莺，一见钟情，而无计亲近。恰遇叛将孙飞虎率兵围寺，
要强索莺莺为压寨夫人；张生在崔母亲口许婚下，依靠友人白马将军的帮助，解除了危难。
不料崔母却食言赖婚，张生相思成疾。莺莺心爱张生而不愿正面表白；
几经波折，在红娘的帮助下，莺莺终于至张生住处私会。
</p>
<p>
崔母觉察迹象，拷问红娘，反被红娘几句话点中要害，勉强答应了婚事，
却又以门第为由，令张生立即上京应试。十里长亭送别之后，张生到京考中状元；
而郑恒借机编造谎言，说张生已在京另娶，老夫人又一次赖婚，要莺莺嫁于郑恒。
后张生赶来，郑恒撞死，崔、张完婚
</p>
<p>Last year, I went to Guilin for travel.</p>
</body>
</html>
文本样式
- 颜色
- 文本的对齐方式
- 首行缩进
- 行高
- 装饰
- 文本图片水平对齐
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
颜色： 单词
RGB 0~F
RGBA 透明度 A:0~1
text-align： 排版
text-indent: 2em：段落首行缩进2个字
line-height: 行高和块的高度一致，就可以上下居中
-->
<style type="text/css">
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #FF00FF;
height: 300px;
line-height: 300px;
}
/* 下划线 */
.l1{
text-decoration: underline;
}
/* 中划线 */
.l2{
text-decoration: line-through;
}
/* 上划线 */
.l3{
text-decoration: overline;
}
/* 水平对齐 */
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="l1">1232131231</p>
<p class="l2">1232131231</p>
<p class="l3">1232131231</p>
<h1>故事介绍</h1>
<p class="p1">
张生在普救寺相遇相国小姐崔莺莺，一见钟情，而无计亲近。恰遇叛将孙飞虎率兵围寺，
要强索莺莺为压寨夫人；张生在崔母亲口许婚下，依靠友人白马将军的帮助，解除了危难。
不料崔母却食言赖婚，张生相思成疾。莺莺心爱张生而不愿正面表白；
几经波折，在红娘的帮助下，莺莺终于至张生住处私会。
</p>
<p>
崔母觉察迹象，拷问红娘，反被红娘几句话点中要害，勉强答应了婚事，
却又以门第为由，令张生立即上京应试。十里长亭送别之后，张生到京考中状元；
而郑恒借机编造谎言，说张生已在京另娶，老夫人又一次赖婚，要莺莺嫁于郑恒。
后张生赶来，郑恒撞死，崔、张完婚
</p>
<p class="p3">Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.Last year, I went to Guilin for travel.</p>
<p >
<img src="images/39.jpg" alt="" height="300px" width="300px">
<span>水平对齐！！！</span>
</p>
</body>
</html>
文本阴影和超链接伪类
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 默认的颜色 */
a{
text-decoration: none;
color: black;
}
/* 鼠标悬浮的状态 （重点）*/
a:hover{
color: #FF8C00;
font-size: 50px;
}
/* 鼠标按住未释放的状态 */
a:active{
color: #006400;
}
/* 阴影颜色，水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: black 5px 5px 2px ;
}
</style>
</head>
<body>
<a href="#">
<img src="./images/39.jpg" alt="">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="">作者：孤尽老师</a>
</p>
<p id="price">
$99
</p>
</body>
</html>
列表样式练习
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="nav1">
<h2 class="title">全部图书分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音响</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav1{
width: 300px;
}
.title{
font-size: 1.125rem;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background-color: red;
}
ul{
background-color: gray;
}
/*
list-style:
none; 去掉原点
circle; 空心圆
decimal; 数字
square; 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000000;
}
a:hover{
color: #FF8C00;
text-decoration: underline;
}
背景图像应用及渐变
背景图像
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 62.5rem;
height: 43.75rem;
border: 1px solid #000000;
/* 默认全部平铺的 */
background-image: url(images/39.jpg);
}
/*
background-repeat: repeat-x; 水平平铺
background-repeat: repeat-y; 垂直平铺
background-repeat: no-repeat; 不平铺
*/
#div1{
background-repeat: repeat-x;
}
#div2{
background-repeat: repeat-y;
}
#div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
列表样式练习的加强练习
例子
.title{
font-size: 1.125rem;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/* 颜色 图片 图片位置 平铺方式 */
background: red url(../images/r.png) 250px 10px no-repeat;
}
ul{
background-color: gray;
}
/*
list-style:
none; 去掉原点
circle; 空心圆
decimal; 数字
square; 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url(../images/r.png);
background-repeat: no-repeat;
background-position: 200px 2px;
}
渐变
代码建议上网找
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 径向渐变 圆形渐变 -->
<style type="text/css">
body{
/* background-color: #08AEEA; */
/* background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%); */
background: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}
</style>
</head>
<body>
</body>
</html>
盒子模型及边框使用
- margin 外边距
- border 边框
- 粗细
- 样式
- 颜色
- padding 内边距
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 常见初始化操作 */
/* body{
margin: 0;
padding: 0;
text-decoration: none;
} */
/* border 粗细 样式 颜色 */
#app{
width: 18.75rem;
border: 1px solid red;
}
h2{
font-size: 1rem;
background-color: #FF00FF;
line-height: 30px;
}
form{
background-color: #FFC0CB;
}
/*
dashed 虚线
solid 实线
*/
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed palegreen;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登录</h2>
<form action="#" method="get">
<div id="">
<span>用户名：</span>
<input type="text" name="" id="" value="" />
</div>
<div id="">
<span>密码：</span>
<input type="text" name="" id="" value="" />
</div>
<div id="">
<span>邮箱：</span>
<input type="text" name="" id="" value="" />
</div>
</form>
</div>
</body>
</html>
内外边距及div居中
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外边距的妙用：居中
margin: 0 auto; 上下 左右
-->
<style type="text/css">
#app{
width: 18.75rem;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 1rem;
background-color: #FF00FF;
line-height: 30px;
margin: 0px 5px;
}
form{
background-color: #FFC0CB;
}
input{
border: 1px solid black;
}
/* 内边距 */
div:nth-of-type(1){
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登录</h2>
<form action="#" method="get">
<div id="">
<span>用户名：</span>
<input type="text" name="" id="" value="" />
</div>
<div id="">
<span>密码：</span>
<input type="text" name="" id="" value="" />
</div>
<div id="">
<span>邮箱：</span>
<input type="text" name="" id="" value="" />
</div>
</form>
</div>
</body>
</html>
元素的最终大小：margin+border+padding+内容宽度
圆角边框
4个角
可以完成网站上的圆形头像
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
border-radius: 50px 20px; 左上右下 右上左下
-->
<!--
圆圈：圆角 = 半径
-->
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 0.625rem solid red;
border-radius: 50px 20px;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
阴影
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 0.625rem solid red;
/* 阴影 */
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
浮动和display
标准文档流：默认自上而下的排列顺序
float
display
display也是一种实现行内元素排列的方式，但是我们很多情况都是用float实现
对比
- display方向不可以控制
- float浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
display: inline-block; 既是行内元素，又是块元素
*/
div{
width: 6.25rem;
height: 100px;
border: 1px solid red;
display: inline;
}
/*
display: block; 块元素
display: inline; 行内元素
display: none; 消失
*/
span{
width: 6.25rem;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div id="">
div块元素
</div>
<span>span行内元素</span>
</body>
</html>
overflow和父级边框塌陷问题
父级边框塌陷问题解决方案
- 增加父级元素的高度（不建议使用，很low）
- 增加一个空的div标签，清除这个div的浮动
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" ></div>
<div class="layer02"><img src="images/2.jpg" ></div>
<div class="layer03"><img src="images/3.jpg" ></div>
<div class="layer04">
该剧具有较浓的反封建礼教的色彩，作者写青年人对爱情的渴望，
写情与欲的不可遏制与正当合理，写青年人自身的愿望与家长意志的冲突；
表达了“愿天下有情的都成了眷属”的爱情观。
</div>
<div class="clear">
</div>
</div>
</body>
</html>
div{
margin: 0.625rem;
padding: 5px;
}
#father{
border: 1px #000000 solid;
/* height: 800px; */
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
}
/*
clear: right; 清除右侧浮动，右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧都不允许有浮动元素
clear: none;
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}
.clear{
clear: both;
margin: 0;
padding: 0;
}
- overflow
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
overflow: scroll; 滚动条
*/
#content{
width: 200px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/1.jpg" >
<p>
该剧具有较浓的反封建礼教的色彩，作者写青年人对爱情的渴望，
写情与欲的不可遏制与正当合理，写青年人自身的愿望与家长意志的冲突；
表达了“愿天下有情的都成了眷属”的爱情观。
</p>
</div>
</body>
</html>
- 父类添加一个伪类：after（推荐使用）
例子
#father:after{
content: "";
display: block;
clear: both;
}
相对定位的使用及练习
- 相对定位
- 相对定位后，它仍然在标准文档流中，原来的位置会被保留
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 相对定位
相对于自己原来的位置进行偏移
-->
<style type="text/css">
div{
margin: 10px;
padding: 5px;
font-size: 0.75rem;
line-height: 25px;
}
#father{
border: 1px solid #666666;
padding: 0;
}
#first{
background-color: #00FFFF;
border: 1px dashed #666666;
/* 相对定位 ：上下左右*/
position: relative;
top: -20px;
left: 20px;
}
#second{
background-color: #98FB98;
border: 1px dashed #666666;
}
#third{
background-color: #20B2AA;
border: 1px dashed #666666;
/* 相对定位 ：上下左右*/
position: relative;
bottom: 10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
方块定位练习
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 18.75rem;
border: 2px red solid;
padding: 10px;
}
a{
width: 100px ;
height: 100px;
text-decoration: none;
background-color: #FF00FF;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background-color: #0000FF;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
- 绝对定位
绝对定位
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，通常会相对于父级元素进行偏移
- 在父级元素范围内移动
- 相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
margin: 10px;
padding: 5px;
font-size: 0.75rem;
line-height: 25px;
}
#father{
border: 1px solid #666666;
padding: 0;
position: relative;
}
#first{
background-color: #00FFFF;
border: 1px dashed #666666;
}
#second{
background-color: #98FB98;
border: 1px dashed #666666;
/* 绝对定位 */
position: absolute;
left: 100px;
}
#third{
background-color: #20B2AA;
border: 1px dashed #666666;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
- 固定定位
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
height: 1000px;
}
/* 绝对定位相对于浏览器 */
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0px;
bottom: 0px;
}
/* position: fixed; 固定定位 */
div:nth-of-type(2){
width: 3.125rem;
height: 50px;
background-color: yellow;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
- z-index
z-index: 默认是0，最高无限 999
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#app{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/* 父级元素相对定位 */
#app ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
top: 216px;
width: 23.75rem;
height: 25px;
}
.tipText{
color: #FF0000;
/* z-index: 图层 */
z-index: 999;
}
.tipBg{
background-color: #000000;
/* opacity: 透明度*/
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><img src="images/39.jpg" ></li>
<li class="tipText">学习微服务，找狂神</li>
<li class="tipBg"></li>
<li>时间：2099-1-1</li>
<li>地点：月球一号基地</li>
</ul>
</div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
