2017年5月19号课堂笔记
2017年5月19号 星期五 空气质量：轻度雾霾
内容：CSS美化:span标签的使用，字体样式，文本样式，文本阴影，列表样式，超链接伪类，背景样式，背景图像大小，渐变属性
备注：5月21号补上周五课堂笔记
一、span标签的使用
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用span标签</title>
<!-- 想让某些字体 凸显出来 使用 span标签 内联元素-->
<style type="text/css">
/*使用结构伪类来获取第一个span标签*/
span:first-child{
color:gold;
font-size: 18px;
}
/*使用结构伪类来获取第二个span标签*/
p:nth-child(6) span:nth-child(1){
color:cornflowerblue;
font-size: 18px;
}
/*使用结构伪类来获取第三个span标签*/
p:nth-child(8) span:nth-child(1){
color:purple;
font-size: 20px;
}
</style>
</head>
<body>
<p>大江东去，浪淘尽，<span>千古风流人物</span>。</p>
<p>故垒西边，人道是，三国周郎赤壁。</p>
<p>乱石穿空，惊涛拍岸，卷起千堆雪。</p>
<p>江山如画，一时多少豪杰。</p>
<p>遥想公瑾当年，小乔初嫁了，雄姿英发。</p>
<p>羽扇纶巾，<span>谈笑间</span>，樯橹灰飞烟灭。</p>
<p>故国神游，多情应笑我，早生华发。</p>
<p><span>人生如梦</span>，一尊还酹江月。</p>
</body>
</html>
二、字体样式
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
/*span{
font-family:"楷体";/!*设置字体类型*!/
font-size: 30px;/!*设置字体大小*!/
font-style: italic;/!*设置字体风格*!/
font-weight:normal; /!*设置字体粗细*!/
}*/
/*简写方式 必须有书写顺序 风格 粗细 大小 类型*/
span:nth-child(1){
font:italic bold 30px "楷体"
}
div span{
font-family: "隶书";
font-size:23px;
font-weight: normal;
font-style: italic;
}
#p span{
font-family: "小篆";
font-size:20px;
font-weight: bold;
font-style: oblique;
}
</style>
<!--
01. style="display: inline" 把块元素变成内联元素
02. style="display: block" 把内联元素变成块元素
-->
</head>
<body>
<p>反坦克炮从分向左右的队中穿过，五人分毫未伤。但<span>君莫笑、流木、包子入侵</span>还有零零刺早已急速冲往对方左翼准备跳过岩熔。</p>
<div style="display: inline"><span>风梳烟沐</span>再出一道激光炮，轰向对手右翼二人。霸气雄图的队伍，暂时性地却是被一切为二。</div>
<span> 而叶修等人正是要抓住这个机会。</span>
<span style="display: block">借短暂的人数优势迅速将张新杰的牧师击杀。</span>
<p id="p"><span>张新杰</span>却不想坐以待毙。</p>
</body>
</html>
三、文本样式
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*01.设置文本的颜色
RGB: red green blue
16进制方法标识颜色！
前2位表示红色的分量
中间2位表示绿色的分量
最后2位表示蓝色的分量
color: rgb(255,100,100);
color: rgba(255,0,0,0);
alpha:透明度 0-1
*/
/* 02.设置文本的水平对齐方式
text-align: right;
center
left
*/
/*03.设置首行文本的缩进
一般我们就使用 2em 首行缩进两个字符
*/
/* 04. line-height 文本的行高
行高和盒子的高度一致！就会垂直居中！
border: 1px solid red ; 盒子的边框 1像素 实线 红色
height: 150px;
width: 150px;
line-height: 150px;
*/
/* 05. 文本的装饰
text-decoration: overline; 上划线
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
*/
div{
color:rgba(255,50,50,0.7);
text-align: center;
text-indent: 1em;
line-height: 30px;
text-decoration: underline;
}
p{
color:rgba(150,55,150,1);
text-align: left;
text-indent: 2em;
line-height: 200%;
text-decoration: none;
}
</style>
</head>
<body>
<div>现价 5000</div>
<div>原价 10000</div>
<p>
而对于叶修他们而言，这一夜过得却和平时没什么两样，或许还更惬意一些。
除了任务刷怪，他们还存着偶遇的期望，这成了他们练级过程中的一抹点缀，非常美妙，让人充满了希望。
</p>
</body>
</html>
四、文本阴影
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本阴影</title>
<style type="text/css">
div{
text-shadow: 3px 3px 10px #FF0000;
}
</style>
</head>
<body>
<div>该组织名为“晓”。</div>
</body>
</html>
五、列表样式
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<style type="text/css">
/* 01.去掉列表中li的前缀符号
list-style-type:
square 实心的正方形
none 没有符号
circle 空心圆
upper-latin 大写的字母
02.list-style-image: url("images/cat.jpg"); 列表的前缀变成 图标
03. list-style-position: outside; inside : 设置我们的li和图标的关系
*/
li{
list-style-type: square;
list-style-image: url("image/arrow-right.gif");
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>海贼王</li>
<li>火影忍者</li>
<li>龙珠</li>
<li>灌篮高手</li>
<li>圣斗士星矢</li>
</ul>
</body>
</html>
六、超链接伪类
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超链接伪类</title>
<style type="text/css">
/*01.没有访问超链接的样式*/
a:link{
color:orange;
}
/*02.访问超链接之后的样式*/
a:visited{
color:blueviolet;
}
/*03.鼠标悬停在超链接上的样式*/
a:hover{
color:dodgerblue;
}
/*04.鼠标点击未释放 超链接的样式*/
a:active{
color:pink;
}
/*顺序： link --> visited -->hover -->active*/
</style>
</head>
<body>
<a href="#">真的想好好学习</a>
</body>
</html>
七、背景样式
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
li{
list-style: none;/*去掉li前缀标签*/
line-height: 45px;/*设置li的行高*/
background-image:url("image/arrow-right.gif");/*设置背景图片的时候必须设置平铺方式*/
background-repeat: no-repeat;/*设置图片平铺方式*/
background-position: 140px; /*设置图片的位置水平移动140px*/
}
.title{
color: white; /*文本颜色*/
text-indent: 2em; /*文本的首行缩进*/
line-height: 45px; /*设置行高*/
background:#CC0000 url("image/arrow-down.gif") no-repeat 180px ;
}
a{
text-decoration: none;/*设置超链接默认没有下划线*/
}
a:link{
color:black;/* 鼠标没有访问超链接时的样式*/
}
ul{
background-color: #D7D7D7;/*设置背景颜色*/
margin: 0px; /*设置外边距为0*/
}
#nav{
height: 500px; /*设置大盒子的高度*/
width: 300px;/*设置大盒子的宽度*/
}
</style>
</head>
<body>
<div id="nav">
<div class="title">全部商品分类</div>
<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>
八、背景图像大小
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景图片大小</title>
<style type="text/css">
div{
width: 570px;
height:320px;
border: 1px solid red;
background: url("image/sanji01.jpeg") no-repeat;
/* background-size: auto;*/
/* background-size: 200px 200px;*/
/* background-size:100%; percentage 百分比 以宽度为准*/
/* background-size:cover; 整个背景图片放大填充整个盒子*/
/* background-size:contain; 我们的背景图片自适应盒子宽度和高度*/
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
九、渐变属性
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>渐变属性</title>
<style type="text/css">
div{
height:300px;
width:300px;
border:none;
/* 从底部到头部 颜色有橙色变成蓝色 background: linear-gradient(to top,orange,blue);*/
/* 从左下到右上的渐变background: linear-gradient(to top right,orange,blue);*/;
background: linear-gradient(to top right,white,mediumpurple)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
十、作业
1、写两个MindManager：
1）盒子模型
2）浮动
2、继续看视频
十 一、老师辛苦了！
十二、生活：快半年没看电影了，今天和媳妇儿一起去看了《银河护卫队2》，果然漫威最赞！
