37 CSS（概念 基础 常用属性 补充属性）
一CSS概念
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
CSS:Cascding Style Sheet 层叠样式表
1.作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
2.CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
我们的CSS代码 就可以写在 style 属性里面
每个CSS样式 写法 属性名:属性值;属性名2:属性值2;属性3:属性值3
举例: <font style="color:#ff66ff;font-size:20px">这段文字的样式</font>
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
2.内部方式:将style属性写在<head>标签内部 常用
3.外联样式:CSS样式写在一个单独文件中 这种方式常用
</body>
</html>
二.CSS基础
1.CSS基础
链接：https://pan.baidu.com/s/1pmc1mUxlBDuxcrOCzPnTvw
提取码：6er6
三.CSS常用属性
1.CSS常用属性
div中css的部分属性（部分属性必须使用支持HTML5的浏览器）
position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style="clear:both;"
background: #99FFcc;//层的背景颜色
background-image:url('top.jpg');为层设置背景图片
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;
//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
2.CSS属性详解
链接：https://pan.baidu.com/s/1Vm4M_KATOZFNp1FMjY1NVw
提取码：8fnv
四.CSS补充属性
transparent 透明
<!-- list的值就是要关联列表的id名 -->
<input type="text" list="mydata" placeholder="请输入邮箱"/>
<datalist id="mydata">
<option label="第一个">xxx@qq.com
<option label="第二个">xxx@163.com
<option label="第三个">xxx@gmail.com
<option label="第四个">xxx@139.com
</datalist>
垂直对齐属性
vertical-align:text-top/middle
可设置的值有以下
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
opacity:0.0; 透明度
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素 但会占位置
//轮廓
outline:#00ff00 dotted thick;
//轮廓外边距
outline: 2px solid red;
outline-offset: 10px;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;//自定义一个鼠标图片
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
五：CSS代码案例
链接：https://pan.baidu.com/s/1JJgV6t__3366L6Y08wEvGw
提取码：anej
1.a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/a.css"/>
</head>
<body>
<div id="">
阿斯顿发送到发送多福多寿
</div>
</body>
</html>
2.b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/b.css"/>
</head>
<body>
<div id="">
asdfasdfasfd
</div>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择器：就是选中一个或多个标签的一种语法 */
/* id选择器 一次只能选中一个标签 */
#myh1{
color: red;
font-size: 50px;
}
#myh2{
color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<!-- id 是唯一的 多个标签的id值不要相同 -->
<h1 id="myh1">标题标签</h1>
<h2 id="myh2">标题标签2222</h2>
</body>
</html>
4.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
</head>
<body>
<!--
HTML：定义网页元素
CSS: 美化网页元素，控制HTML标签展示样式。
CSS 与HTML结合方式，
内联样式：CSS代码复用性太低，书写凌乱。不推荐 缺点就是一次只能控制一个标签端的展示样式
内部样式：配合选择器，进行标签的选择，进而对标签进行样式的控制，一次可以控制一个或多个标签的展示样式，复用性高一些。
外部样式：将CSS代码抽取到一个单独的文件中，页面来引用即可，一次可以控制多个页面中元素的展示样式，开发首选。
页面定位：相对定义，绝对定位
-->
<div id="" style="width: 100px;height: 100px;background: red;">
</div>
</body>
</html>
5.包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 h1 span{
color: #0000FF;
}
#d2 h1 span{
color: blueviolet;
}
h1,h2,h3{
font-size: 150px;
}
</style>
</head>
<body>
<div id="d1">
<h1>
<span>你好</span>
</h1>
</div>
<div id="d2">
<h1>
<span>你好</span>
</h1>
</div>
<h1>asdfasdf</h1>
<h2>asdfasdfasdf</h2>
<h3>阿斯顿发送到发送到发送到</h3>
</body>
</html>
6.标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签名选择器：一次可以选中多个标签 */
h1{
color: red;
}
font{
font-size: 200px;
}
</style>
</head>
<body>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaa</h1>
<font size="" color="">cccccccccccccccccccccc</font>
</body>
</html>
7.类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器 一次可以选择多个标签进行控制*/
.myh1{
color: red;
font-size: 50px;
}
#b1{
font-size: 20px;
}
</style>
</head>
<body>
<!-- class的值可以一样，归为一类 -->
<h1 class="myh1">aaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaa</h1>
<b id="b1" class="myh1">bbbbbbbbbbbbbbbb</b>
<h1>aaaaaaaaa</h1>
<h1>aaaaaaaaa</h1>
<h1>aaaaaaaaa</h1>
<h1>aaaaaaaaa</h1>
<h1>aaaaaaaaa</h1>
</body>
</html>
8.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* h1[align]{
color: red;
} */
h1[align='center']{
color: red;
}
div::first-letter{
color: #0000FF;
font-size: 50px;
}
</style>
</head>
<body>
<h1 align="center">abc</h1>
<h1 align="right">abc</h1>
<h1>abc</h1>
<div id="">
你fadfasdfasdfasdfasdf
</div>
</body>
</html>
9.统配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 全局通配 */
/* *{
color: #0000FF;
} */
/* 局部通配 */
#d1>*{
color: red;
}
</style>
</head>
<body>
<div id="">
``````````````
</div>
<font size="" color="">
asdfasdfasf
</font>
<div id="d1">
asdfasdfasdfadsf
<font size="" color="">
asdfasdfasf
</font>
<h1>阿斯顿发送到发的</h1>
</div>
<h1>阿斯顿发送到发的</h1>
</body>
</html>
10.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 伪类选择器，最初就是针对a标签的 伪类选择器就是选择状态的 */
a:link {
color: #FF0000;
/* 线条的样式 none 不要线条 underlinex下划线 line-through 删除线 overline 上划线*/
text-decoration:none;
}
a:hover {
color: aqua;
font-size: 50px;
text-decoration: none;
}
a:active {
color: yellow;
font-size: 220px;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 超链接标签有四种状态
1.链接状态
2.鼠标悬浮状态
3.鼠标按下状态
4.链接访问过后的状态
其中 鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签，也是有用的
-->
<a href="http://www.baidu.com">进入百度</a>
<a href="http://www.baidu.com">进入百度</a>
</body>
</html>
11.伪类选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 500px;
width: 500px;
background: red;
}
div:hover{
height: 500px;
width: 500px;
background:blue;
}
div:active{
background:yellow;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
12.相邻选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
background: red;
}
#d2 {
height: 200px;
width: 200px;
background: yellow;
}
/*+ 相邻选则器 */
#d1:hover+div {
background: black;
}
/* ~相邻所有选择器 */
#d1:hover~div {
background: black;
}
#d3 {
height: 200px;
width: 200px;
background: brown;
}
</style>
</head>
<body>
<div id="d1">
11111111111111111
</div>
<div id="d2">
222222222222222
</div>
<div id="d3">
33333333333
</div>
</body>
</html>
13.选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 多个选择器，选中了同一个标签，控制的样式如果没有冲突，那就叠加生效。
如果说有冲突时：根据选择器的优先级来的，优先级高的选择器他的控制强度比较大。
内联样式>id选择器>类选择器>标签名选择器
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
*/
#d1{
height: 200px;
width: 500px;
}
.divclass{
width: 200px;
background: #FFFF00;
}
div{
background: red;
}
</style>
</head>
<body>
<div id="d1" class="divclass" style="background: green;height: 500px;">
</div>
</body>
</html>
14.子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul>li{
color: red;
}
#d1{
color:greenyellow
}
#sp{
color: #0000FF;
}
#d2 >div>#sp1{
color: #00FFFF;
}
</style>
</head>
<body>
<ul>
<li><span>assdfasdfasf</span></li>
<li>asdfasdfasf</li>
<li>asdfasdfasf</li>
<li>asdfasdfasf</li>
<li>asdfasdfasf</li>
</ul>
<div id="d1">
<!-- 子标签没有单独去设置样式，会继承父标签的样式 -->
<span id="sp">abc</span>
</div>
<div id="d2">
<div id="">
abc
</div>
<div id="">
<span>
dddddddddddddddddddddddddd
</span>
</div>
<div id="">
cccccccccccc
</div>
<div id="">
ccccccccccc
<span id="sp1">
dddddddddddddddddddddddddd
</span>
</div>
</div>
</body>
</html>
15.子选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
height: 500px;
width: 500px;
background: red;
}
#nei{
height: 300px;
width: 300px;
background:yellow;
}
#wai:hover>#nei{
background: #ADFF2F;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>
16.CSS浮动属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mydiv {
width: 200px;
height: 200px;
border: 1px black solid;
/* 浮动，让块标签，一字排开 */
/* float:left; */
margin-left: 20px;
}
#d1 {
background: yellow;
float: left;
}
#d2 {
background: red;
float: left;
}
#d3 {
background: gold;
float: left;
}
#d4 {
background: blue;
float: left;
}
#d5 {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="d1" class="mydiv">
</div>
<div id="d2" class="mydiv">
</div>
<div id="d3" class="mydiv">
</div>
<div id="d4" class="mydiv">
</div>
<!-- 下面的层如果不想浮动了，可以清除浮动 -->
<div style="clear:both"></div>
<div id="d5">
</div>
</body>
</html>
17.div+css来布局页面
img:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin-left: 10%;
margin-right: 10%;
}
#hf {
width: 100%;
height: 200px;
border: 1px black solid;
background-image: url(img/hf.jpg);
background-size: 100% 100%;
}
#dh {
width: 100%;
height: 80px;
border: 1px black solid;
margin-top: 10px;
}
#zt {
width: 100%;
height: 600px;
border: 0px black solid;
margin-top: 10px;
}
#bq {
width: 100%;
height: 400px;
border: 1px black solid;
margin-top: 10px;
}
.btn {
font-size: 15px;
height: 40px;
width: 100px;
border: 1px black solid;
float: left;
margin-left: 11%;
margin-top: 20px;
/* 文本对齐方式 */
text-align: center;
/* 行高 */
line-height: 40px;
/* 边框弧度 */
border-radius: 5px;
background: thistle;
/*阴影： 左右位置 上下位置 阴影大小 阴影颜色 */
box-shadow: 5px 5px 10px gray;
}
.btn:hover {
box-shadow: 5px 5px 10px yellowgreen;
color: #0000FF;
font-size: 17px;
}
.zhuti {
height: 600px;
border: 1px black solid;
float: left;
}
#zt1 {
width: 25%;
}
#zt2 {
width: 40%;
margin-left: 5%;
}
#zt3 {
width: 25%;
float: right;
margin-right: -2px;
}
a:link {
color: white;
text-decoration: none;
}
#gd{
left:0px;
top:200px;
height: 400px;
width: 200px;
background: yellowgreen;
/* 固定 */
position:fixed;
}
</style>
</head>
<body>
<div id="gd">
固定的一个层
</div>
<div id="hf">
横幅
</div>
<div id="dh">
<div class="btn"><a href="#">关于西开</a></div>
<a href="#">
<div class="btn">与我联系</div>
</a>
<div class="btn">课程介绍</div>
<div class="btn">视频下载</div>
<div class="btn">来网路线</div>
</div>
<div id="zt">
<div id="zt1" class="zhuti">左</div>
<div id="zt2" class="zhuti">中</div>
<div id="zt3" class="zhuti">右</div>
</div>
<div id="bq">
版权栏
</div>
</body>
</html>
18.index.html
19.背景属性的css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #98FB98;
background-image: url(img/buyanqi.jpg);
/* 背景图片不要重复 */
background-repeat:no-repeat;
/* 背景图片尺寸 左右拉伸 上下拉伸 */
background-size: 100% 800px;
/* 固定背景图片 */
background-attachment: fixed;
}
div{
height: 8000px;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
20.背景图片2
img/aa:png:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 500px;
width: 500px;
border: 1px black solid;
background-image: url(img/aa.png);
background-repeat: no-repeat;
/* 背景图片位置 */
/* background-position: center center; */
background-position: 10% 60px;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
21.边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 500px;
width: 500px;
/* border: 1px black solid; */
border-width:5px ;
border-color: red;
border-style: solid;
border-top-color:green;
border-right-width:15px ;
border-bottom-style:dotted;
border-left-style: double;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
22.边框圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 0px black solid;
background-image: url(img/bb.png);
background-size: 100% 100%;
border-radius: 100px;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
23.段落的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
/* 首行缩进2个字符 */
text-indent: 2em;
}
p{
/* 设置行高 */
line-height: 2em;
}
</style>
</head>
<body>
<p id="p1">
报道称，李家超表示，现在香港和加拿大平均每年移交1至2名逃犯，针对的都是严重罪行，如果加拿大是担心有特工被捕可以理解，但香港国安法条例是针对一般罪行，希望加拿大不要忘记国际责任。
</p>
<p>另据香港电台网站报道，出席同一节目的香港律政司司长郑若骅，也对加拿大做法感到失望和极度遗憾。郑若骅称，加拿大如果是想利用此方法，影响中国的国家安全，就是尝试干预中国内政。加拿大的做法，好大机会违反国际法，对法治也带来打击。
香港是中国的特别行政区，香港事务纯属中国内政，不容外部势力干预。香港国安法旨在维护中国国家主权、安全、发展利益，保障香港长治久安和长期繁荣稳定，确保“一国两制”行稳致远，针对的只是极少数严重危害国家安全的行为和活动，得到广大香港居民广泛拥护和国际社会绝大多数成员的理解与支持。加等个别西方国家出台任何错误举措都绝不会影响香港国安法的实施，其借涉港问题对华施压完全是逆潮流而动，无异于蚍蜉撼树、螳臂当车，绝不会得逞。
香港是中国的特别行政区，香港事务纯属中国内政，不容外部势力干预。香港国安法旨在维护中国国家主权、安全、发展利益，保障香港长治久安和长期繁荣稳定，确保“一国两制”行稳致远，针对的只是极少数严重危害国家安全的行为和活动，得到广大香港居民广泛拥护和国际社会绝大多数成员的理解与支持。加等个别西方国家出台任何错误举措都绝不会影响香港国安法的实施，其借涉港问题对华施压完全是逆潮流而动，无异于蚍蜉撼树、螳臂当车，绝不会得逞。
</p>
<p>中国驻加拿大大使馆网站7月4日消息：7月3日，加拿大领导人和外长分别公开就中国全国人大常委会通过香港国安法妄加评论，并宣布加方不允许对香港出口敏感军品、中止加港引渡条约等措施。中方对此表示强烈不满和坚决反对。</p>
<p>香港是中国的特别行政区，香港事务纯属中国内政，不容外部势力干预。香港国安法旨在维护中国国家主权、安全、发展利益，保障香港长治久安和长期繁荣稳定，确保“一国两制”行稳致远，针对的只是极少数严重危害国家安全的行为和活动，得到广大香港居民广泛拥护和国际社会绝大多数成员的理解与支持。加等个别西方国家出台任何错误举措都绝不会影响香港国安法的实施，其借涉港问题对华施压完全是逆潮流而动，无异于蚍蜉撼树、螳臂当车，绝不会得逞。
中方敦促加方切实恪守国际法和国际关系基本准则，立即纠正错误做法，停止以任何方式干涉中国内政，以免进一步损害中加关系。
点击进入专题：
聚焦香港局势</p>
</body>
</html>
24.固定一个层
25.列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#ul1 {
list-style: none;
/* border: 1px solid black;
height: 150px; */
}
#ul1>.myli {
height: 50px;
width: 100px;
float: left;
border: 1px solid black;
/* padding: 20px; */
margin-left: 20px;
text-align: center;
line-height: 50px;
border-radius: 5px;
}
#nei {
list-style: none;
display: none;
}
#nei>.neili {
border-radius: 5px;
height: 50px;
width: 100px;
border: 1px solid black;
margin-left: -40px;
}
#li1:hover>ul{
display: block;
}
</style>
</head>
<body>
<ul id="ul1">
<li class="myli" id="li1">
一级菜单
<ul id="nei">
<li class="neili">二级选项</li>
<li class="neili">二级选项</li>
<li class="neili">二级选项</li>
<li class="neili">二级选项</li>
</ul>
</li>
<li class="myli">菜单按钮</li>
<li class="myli">菜单按钮</li>
<li class="myli">菜单按钮</li>
<li class="myli">菜单按钮</li>
</ul>
</body>
</html>
26.内间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
width: 500px;
height: 500px;
border: 1px solid black;
background: yellowgreen;
/*站在外框的角度去设置 内间距 */
padding-top: 200px;
padding-left: 100px;
/* 设置内间距时，不要撑大外框 */
box-sizing:border-box;
}
#nei{
width: 200px;
height: 200px;
border: 1px solid black;
background: cyan;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>
27.鼠标悬浮上拉一个层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
width: 500px;
height: 350px;
background: url(img/bb.png);
background-size: 100% 100%;
/* 溢出层的范围就隐藏 */
overflow: hidden;
transition:background-size 0.5s ;
}
#nei{
width:100%;
height: 50px;
background: rgba(0,0,0,0.5);
margin-top: 350px;
color: white;
transition:margin-top 0.5s ;
}
#wai:hover>div{
margin-top: 300px;
transition:margin-top 0.5s ;
}
#wai:hover{
background-size: 110% 110%;
transition:background-size 0.5s ;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
点击进入
</div>
</div>
</body>
</html>
28.相片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: pink;
}
div {
height: 400px;
width: 250px;
border-color: white;
border-width: 20px;
border-style: solid;
border-bottom-width: 30px;
float: left;
margin-left: 100px;
box-shadow: 10px 10px 5px gray;
}
#d1 {
background-image: url(img/girl1.jpg);
background-size: 100% 100%;
transform: rotate(45deg);
transition: transform 1s;
}
#d1:hover {
transform: rotate(15deg);
transition: transform 1s;
}
#d2 {
background-image: url(img/girl2.jpg);
background-size: 100% 100%;
transform: rotate(15deg);
transition: background-size 1s;
}
#d2:hover {
background-size: 110% 110%;
transition: background-size 1s;
}
#d3 {
background-image: url(img/girl3.jpg);
background-size: 100% 100%;
filter: grayscale(80%);
filter: gray;
transform: rotate(-45deg);
transition: all 1s;
}
#d3:hover {
filter: grayscale(0%);
filter: gray;
transform: rotate(45deg);
transition: all 1s;
}
#d4 {
margin-left: 100px;
margin-top: 30px;
background-image: url(img/girl4.jpg);
background-size: 100% 100%;
filter: grayscale(80%);
filter: gray
}
#d5 {
margin-top: 30px;
background-image: url(img/girl5.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<div id="d4">
</div>
<div id="d5">
</div>
</body>
</html>
29.页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin-left: 20%;
margin-right: 20%;
}
#box {
height:650px;
width: 100%;
border: 0px black solid;
text-align: center;
}
#top{
color:palevioletred;
font-size: 15px;
font-family: 楷体;
text-align:center;
}
#line{
width:80%;
height: 1px;
background: gray;
margin: auto;
}
#content{
margin-top: 50px;
width: 100%;
height: 300px;
border: 0px black solid;
}
#myimg{
height: 300px;
width: 350px;
background-image: url(img/buyanqi.jpg);
background-size: 100% 100%;
float: left;
}
#text1{
height:300px ;
width: 15px;
border: 1px black solid;
float: left;
margin-left: 50px;
}
#text2{
height:300px ;
width: 15px;
border: 1px black solid;
float: left;
margin-left: 50px;
}
#bt{
height:50px ;
width:100%;
border: 1px black solid;
margin-top: 50px;
background: gold;
font-family: 黑体;
font-size: 40px;
color:white;
/* 字符间距 */
letter-spacing: 50px;
}
</style>
</head>
<body>
<div id="box">
<div id="top">
每个人的内心深处都有美好的回忆！在这里我永远不会忘记，有的事情，让我如此心动……
</div>
<div id="line"></div>
<div id="content">
<div id="myimg"></div>
<div id="text1">
v
我们的信念是否依然坚定
v
</div>
<div id="text2">
v
我们的信念是否依然坚定
v
</div>
</div>
<div id="bt">
似 水 年 华 网
</div>
<div id="">
<h4><a href="#">点击进入</a></h4>
</div>
<div id="" style="margin-top: 50px;width: 100%;height: 20px;">
<img src="img/002.gif" >
</div>
<div id="" style="margin-top: 20px;text-align: center;">
<img src="img/8.gif" >
</div>
</div>
</body>
</html>
30.字母大小写转换的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 50px;
width: 120px;
font-size: 20px;
border: 1px black solid;
text-align: center;
letter-spacing: 10px;
/* 把行高 设置为外框的高度，就可以上下居中 */
line-height: 50px;
/* 字母大小写转换 uppercase大写 lowercase 小写 */
text-transform: uppercase;
}
div:hover{
/* 鼠标指针的样式 */
cursor: pointer;
}
</style>
</head>
<body>
<div id="">
abc
</div>
</body>
</html>
31.字体的css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* body {
background-color: rgba(255, 0, 0, 0.2);
}
*/
div {
/* 颜色的取值 英文单词 16进制颜色值 */
/* color:rgb(100,250,255); */
/* a 透明度 0-1 */
color: rgba(0, 0, 0, 0.5);
/* 单位 px mm cm pt */
font-size: 15pt;
font-family: 隶书;
/* 字体样式，比如斜体 */
font-style: italic;
}
#sp {
font-size: 20pt;
/* 字重 加粗效果 100--900 */
font-weight: bolder;
}
h1 {
/* 文字阴影：左右位置 上下位置 阴影范围 阴影颜色 */
text-shadow: 10px 10px 20px greenyellow;
}
</style>
</head>
<body>
<div id="">
一行文字
</div>
<span id="sp">
好好学习，天天向上
</span>
<h1>这行字加个阴影</h1>
</body>
</html>
（二）W3School离线电子书（Web技术教程免费）
链接：https://pan.baidu.com/s/1u1F-7cslHsODVLd7CZljjQ
提取码：hn2u
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
