CssFoundation
- 一. 引入CSS样式
- 二. 选择器
- 三. 颜色赋值
- 四. background 背景设置
- 五. text 文本样式
- 六. font 字体样式
- 七. display 元素的显示方式
- 八. 盒子模型
- 九. CSS的三大特性
- 十. position 定位方式
- 十一. overflow 溢出设置
- 十二. vertical-align 设置行内元素垂直对齐方式
- 十三. z-index 设置显示层级
- 十四. transition 过度动画
Cascading Style Sheet, 作用: 美化页面, 相当于装修
一. 引入CSS样式
1.1 内联样式kj
-
<h1 style="color: red">内联样式1</h1> <h1 style="color: red">内联样式2</h1>
1.2 内部样式
- 选择h2 标签
<head> <style> h2{ color: blue; } </style> </head> <body> <h2>内部样式1</h2> <h2>内部样式2</h2> </body>
1.3 外部样式
- html文件中 head标签 中 引用css文件
ref 引入文件和页面的关系 href 文件名<link rel="stylesheet" href="my.css">
- html页面编写代码
<h3>外部样式1</h3> <h3>外部样式2</h3>
- 编写my.css
h3{ color: green; }
1.4 引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
1.5 CSS书写顺序
1.5.1 布局定位属性
- display / position / float / clear / visibility / overflow(建议display第一个写,毕竟关系到模式)
1.5.2 自身属性
- width / height / margin / padding / border / background
1.5.3 文本属性
- :color / font / text-decoration / text-align / vertical-align / white- space / break-word
1.5.4 其他属性
- content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient .
1.6 页面整体思路
- 必须确定页面的版心(可视区),我们测量可得知
- 分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则.
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
- 制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要.
- 所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累
二. 选择器
用来查找元素的, 找到之后才能添加样式
2.1 标签选择器
标签名{样式代码}
- 通过标签的名称选择页面中所有同名元素
h3{ color: green; }
2.2 id选择器
#id{样式代码}
- 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复
<h4 id="id01">id选择器</h4> #id01{ color: coral; }
2.3 类选择器
class{样式代码}
- 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择
<h4 class="class01">id选择器</h4> .class01{ color: green; }
2.4 分组选择器
div,#id,.class{样式代码}
- 将多个选择器合并成一个选择器
<h5>分组选择器</h5> <h5 id="fz">分组选择器</h5> <h5 class="fz">分组选择器</h5> h5,#fz,.fz{ background-color: aqua; }
2.5 属性选择器
标签名[属性名=‘值’]{样式代码}
- 通过元素的属性选择元素
<h4 id="id01">id选择器</h4> <br> <h4 class="class01">id选择器</h4> input[type='text']{ background-color: coral; } input[type='password']{ background-color: antiquewhite; }
2.6 任意元素选择器
*{样式代码}
- 选取页面中所有标签
*{ background-color: aqua; border: 1px solid red; }
2.6.1 选择器练习
通过内部样式实现以下功能
- 把张学友改成绿色
- 把刘德华和悟空改成蓝色
- 修改取经3人和刘备的背景为黄色
- 修改提交按钮的背景为红色,自定义按钮的字为粉色
- 给所有元素添加红色的边框
- html
<body> <ul> <li id="id01">张学友</li> <li class="class02">刘德华</li> <li class="class02">郭富城</li> </ul> <h1 class="class03">悟空</h1> <h1 class="class03">八戒</h1> <h1 class="class03">沙僧</h1> <h2 class="class03">刘备</h2> <input type="submit"> <input type="button"> </body>
- css
#id01{ color: green; } .class02{ color: blue; } .class03{ background-color: yellow; } input[type='submit']{ background-color: red; } input[type='button']{ color: azure; } *{ border: 1px solid red; }
2.7 子孙后代选择器
子孙后代选择器: 通过元素和元素之间的关系匹配元素
- HTML
<body> <p>p2</p> <div> <p>p3</p> </div> <div> <p>p4</p> <div> <p>p5</p> </div> </div> </body>
2.7.1 后代选择器 (空格)
格式: body div div p{样式代码}
- 匹配body里面的div里面的div里面的所有p(包括后代)
body div div p{ color: red; }
2.7.2 子元素选择器 (>)
body>div>div>p{样式代码}匹配body里面的div里面的p子元素(不包括后代)
- css
body>div>div>p{ color: red; }
2.8 伪类选择器
伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态
- html
<a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com">京东</a> <a href="https://www.baidu.com">淘宝</a>
2.8.1 link 未访问
- 未访问
a:link{ color: red; }
2.8.2 visited 访问过
- 访问过
a:visited{ color: }
2.8.3 hover 悬停
- 悬停
a:hover{ color: yellow; }
2.8.4 active 点击
- 点击
a:active{ color: blue; }
2.8.2 练习
通过内部样式实现以下效果
- 关羽绿色
- 张飞和苹果黄色
- 文本框和所有水果背景红色
- p2字体粉色
- p2和p3背景黄色
- 腾讯官网未访问绿色,访问过红色悬停黄色,点击粉色
- html
<body> <ul> <li>刘备</li> <li id="gy">关羽</li> <li class="hs">张飞</li> </ul> <p>香蕉</p> <p class="hs">苹果</p> <input type="text"> <input type="password"> <div> <p>p1</p> <div><p>p2</p></div> <div><div><p>p3</p></div></div> </div> <a href="http://www.qq.com">腾讯官网</a> </body>
- css
#gy{ color: green; } .hs{ color: yellow; } input[ype='text'],body>p{ background-color: red; } body>div>div>p{ color: azure; } div div { background-color: yellow; } a:link{ color: green; } a:visited{ color: red; } a:hover{ color: yellow; } a:active{ color: azure; }
2.9 选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
类选择器 | 选出一个或多个标签 | 可以根据需求选择 | 非常多 | .red {color: red;} |
id选择器 | 一次只能选择一个标签 | id属性只能在HTML文档中出现一次 | 一般和js搭配使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 特殊情况使用 | * | {color: red;} |
三. 颜色赋值
三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
3.1 颜色单词赋值
- red
- green
- blue
- yellow
- pink
- …
3.2 6位 16进制
- #ff 00 00
3.3 3位 16进制
- #f 0 0
3.4 3位10进制
- rgb(255,0,0)
3.5 4位10进制
- rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
四. background 背景设置
4.1 background-color 背景颜色
- background-color设置颜色为purple
background-color: purple;
4.2 background-image 背景图片
- 设置图片
background-image: url("a.png");
4.4 background-size背景大小
- length 设置宽高
background-size: 100px 100px;
- contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
background-size: contain;
4.5 background-repeat 禁止重复
- no-repeat
background-repeat: no-repeat;
- 属性表
属性值 作用 repeat 背景图片在纵向和横向上平铺(默认) no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图片在纵向上平铺
4.6 background-position 背景图片偏移背景位置
- 根据像素偏移
background-position: 20px 50px;
- 根据百分比位置偏移
background-position: 50% 50%;
4.6.1 属性表
- 属性
参数值 说明 lenght 百分比数 position top/center/bottom/left/center
4.7 background 复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
- 复合写法
background: transparent url(url) repeat-y fixed top;
五. text 文本样式
5.1 text-align 水平对齐方式
行内元素 和 文本居中
- 水平居中
text-align: center;
- 左对齐
text-align: left;
- 右对齐
text-align: right;
5.2 text-decoration 文本修饰(线条)
- 删除线
text-decoration: line-through;
- 上划线
text-decoration: overline;
- 下划线
text-decoration: underline;
- 无文本修饰 可去掉超链接的下划线
text-decoration: none;
5.3 text-shadow 文本阴影
- 文本阴影:颜色 x偏移值 y偏移值 模糊值(值越小,越清晰)
text-shadow: green -5px 5px 1px;
5.4 line-height 行高
- 行高 若只有一行可以实现垂直居中
line-height: 40px;
5.5 text-indent 文本首行缩进
em是一个相对单位,是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
- 像素
text-indent: 20px;
- 相对当前字号
text-indent: 2em;
5.6 文本属性总结
- 属性表
属性 表示 注意点 color 文本颜色 通常使用16进制书写 text-align 文本对齐 设定文本的水平对齐格式 text-indent 文本缩进 首行缩进2字符:2em; text-decoration 文本修饰 下划线:underline;取消下划线:none text-height 行高 控制行间距
六. font 字体样式
6.1 font- size 字体大小
-
font-size: 20px;
6.2 font-weight 加粗
- 加粗
font-weight: bold;
- 取消加粗
font-weight: normal;
- 值说明
属性值 说明 normal 默认值(不加粗) bold 加粗 bolder 特加粗 lighter 细体 100-900 400等同于normal,700等同于bold,注意这个数字后面不加单位
6.3 font-style 斜体
- 斜体
font-weight: italic;
- 属性值
属性值 说明 normal 默认值 浏览器会显示标准的字体样式 italic 浏览器会显示斜体的样式
6.4 font-family 设置字体
font-family:字体1,备用字体1,备用字体2
- 方式1 cursive字体
font-family: cursive;
- 方式2 字体大小+字体设置
font: 30px cursice;
6.5 font 总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 通常使用px 像素,一定要写上单位 |
font-family | 字体 | 实际开发中,团队约定字体 |
font-weight | 字体粗细 | blod,加粗,数值700;normal,不加粗,数值是400 |
font-style | 字体样式 | italic,斜体;normal,不倾斜 |
font | 字体连写 | 1.顺序;2.字号和字体必须保留 |
6.6 文本和字体相关练习
文本和字体相关练习
- 刘德华 宽度100 高度30 绿色背景红色字体 横向和纵向居中
- 苹果和香蕉 字体大小25px 斜体
- 冰箱去掉加粗 蓝色阴影 方向是左下 浓度3
- 洗衣机添加下划线
- 百度去掉下划线字体加粗 字体大小20px
- html
<div id="ldh">刘德华</div> <div>张学友</div> <span>香蕉</span> <span>苹果</span> <h1 id="bx">冰箱</h1> <h1 id="xyj">洗衣机</h1> <h1>h1</h1> <a href="baidu.com">百度</a>
- css
#ldh{ width: 100px; height: 30px; background-color: green; color: red; text-align: center; line-height: 30px; } span{ font-size: 25px; font-style: italic; } #bx{ font-weight: normal; text-shadow: blue -5px 5px 3px; } #xyj{ text-decoration: underline; } a{ text-decoration: none; font-weight: bold; font-size: 20px; }
七. display 元素的显示方式
7.1. block 块级元素
块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div
7.2. inline 行内元素
行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b加粗,i斜体,u下划线,s删除线,a超链接等
7.3. inline-block 行块元素
行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img
7.4. none 隐藏元素
display隐藏元素后,不在占有原来的位置
- display 隐藏元素后,不在占有原来的位置
display: none; 隐藏对象
- visibility 可见性 隐藏元素后,继续占有原来的位置
visibility: visible; 元素可见; visibility: hidden; 元素隐藏
- overflow 溢出
overflow:hidden; 隐藏 overflow:auto; 超出显示滚动条
7.5 设置display
- 设置块级元素
display: block;
- 设置行内元素
display: inline ;
- 设置行块元素
display: inline-block;
- 设置隐藏元素
display: none ;
7.6 百度一下按钮小练习
- html
<a href="baidu.com">百度</a>
- css
a{ background-color: #0aa1ed; display: block; width: 132px; height: 40px; text-align: center; line-height: 40px; color: white; text-decoration: none; font-size: 20px; /*设置圆角,值越大越远*/ border-radius: 3px; }
八. 盒子模型
盒子模型= content内容+margin外边距+padding内边距+border边框
8.1 盒子模型的作用
控制元素的显示效果
- content内容: 控制元素的显示大小
- margin外边距: 控制元素的显示位置
- padding内边距: 控制元素内容的位置
- border边框: 控制元素的边框效果
8.2 Content 盒子模型的内容
行内元素不能修改宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素
8.2.1 width 宽
-
p{ width: 10px; } <p> h1 </p>
8.2.2 height 高
-
p{ height: 10px; } <p> h1 </p>
8.2.3 赋值方式 像素 或 上级元素的百分比
-
p{ width: 20%; height: 10px; } <p> h1 </p>
8.2 margin 外边距
8.2.1 Margin 单独设置
- margin-top 上外边距
margin-top: 100px;
- margin-top 下外边距
margin-bottom: 100px;
- margin-top 右外边距
margin-right: 150px;
- margin-top 左外边距
margin-left: 80px;
8.2.2 Margin 同时设置
- 四个方向添加相同的边距
margin: 50px;
- 上下和左右添加外边距
margin: 10px 20px;
- 上右下左添加外边距
margin: 10px 20px 30px 40px;
8.2.3 行内元素设置 Margin 上下外边距无效
上下间距无效 左右相邻彼此添加外边距是两者相加
- html
<span id="s1">span1</span> <span id="s2">span2</span>
- css
#s1{ margin-right: 50px; /*上下间距无效*/ /*margin-top: 100px;*/ } #s2{ margin-left: 30px; }
8.2.4 上外边距 粘连问题
当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题
- 给上级元素添加overflow:hidden解决
<div id="big"> <div></div> </div>
- css
#big{ width: 200px; height: 200px; background-color: green; /*添加此解决*/ overflow: hidden; } #big>div{ width: 50px; height: 50px; background-color: blue; margin-left: 50px; /*当元素的上边缘和上级元素的上边重叠时,给元素添加上外边距会出现粘连的问题,给上级元素添加overflow:hidden解决*/ margin-top: 50px; }
8.2.5 自带Margin的标签
- h1-h6 标题标签
- p段落标签
- 列表标签
- body标签
8.3 border 边框
作用: 控制元素边框的效果
8.3.1 border 的赋值方式
- border: 粗细 样式 颜色 四个方向添加边框
border: 1px solid red; /*添加1像素的红色实线边框
- border-left/right/top/bottom: 粗细 样式 颜色单独方向添加边框
border-left: 1px solid red; /*左*/ border-right: 1px solid red;/*右*/ border-top: 1px solid red;/*上*/ border-bottom: 1px solid red;/*下*/
- 属性表
属性 作用 border-width 定义边框粗细,单位是px border-style 边框的样式,重点记住solid、dashed、dotted border-color 边框颜色
8.3.2 border-radius 圆角
设置圆角 值越大越圆, 超过宽高的一半时为正圆
- border-radius
border-radius:10px;
8.3.3 border-collapes 合并单元格
- 设置为collapse,相邻边框会合并
border-collapes: collapse;
8.4 padding 内边距
作用: 控制元素内容的位置
8.4.1 单独某个方向添加
- padding-left/right/top/bottom:10px; 单独某个方向添加
padding-left: 20px;
8.4.2 四个方向添加
- padding-left/right/top/bottom:10px; 单独某个方向添加
padding:10px;
8.4.3 上下和左右
- 上下 和 左右
padding:10px 20px;
8.4.4 上右下左顺时针添加
- 上下 和 左右
padding:10px 20p 30px 40px;
8.4.5 列表标签自带内边距
- html
<ul> <li>1</li> <li>2</li> </ul>
8.4.6 总结
8.5 盒子模型练习
- html
<div id="d1"> <div></div> </div> <div id="d2">哈喽</div>
- css
#d1{ background-color: red; } div{ width: 100px; height: 100px; border: 1px solid red; margin-left: 25px; margin-top: 25px; } div>div{ width: 50px; height: 50px; border: 1px solid red; background-color: blue; margin-top: 25px; margin-left: 25px; } #d2{ border: 5px solid green; border-radius: 10px; width: 50px; height: 50px; margin-top: 0; margin-left: 125px; padding-top: 50px; padding-left: 50px; }
九. CSS的三大特性
9.1 继承性
元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色
- html
<div id="d1"> <p>这是p标签</p> <span>这是span</span> <a href="#">超链接</a> </div>
- css
body{ /*通过继承可以把全局样式写在body中,整个页面可全部继承下来*/ font-family: cursive; } #d1{ color: red; }
9.2 层叠性
多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效
- html
<div id="d1"> <p>这是p标签</p> <span>这是span</span> <a href="#">超链接</a> </div>
- 同一个元素可以设置字体 也可以设置字体的颜色
body{ /*通过继承可以把全局样式写在body中,整个页面可全部继承下来*/ font-family: cursive; } #d1{ color: red; }
9.3 优先性
指选择器的优先级, 作用范围越小优先级越高
- !important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)
9.3.1 !important 优先级提权
- html
<p id="id001">这是1标签</p> <p>这是2标签</p>
- css
p{ color: green !important; } #id001{ color: red; }
9.4 练习
- html
<div id="zuida"> <div id="id-zuo" class="cs-zuo"> <div id="zuo-wen-an"> <p class="s1">灵越 燃700系列</p> <p>酷睿双核i5处理器|256GB SSD| 8GB内存 英特尔HD显卡620含共享显卡内存 </p> <p class="d4">$4999.00</p> <a href="#">查看详情</a> </div> </div> <div id="id-you" class="cs-you"> <div id="you-wen-an"> <p class="s1">颜值 框不住</p> <p>酷睿双核i5处理器|256GB SSD| 8GB内存 英特尔HD显卡620含共享显卡内存 </p> <p class="d4">$6888.00</p> <a href="#">查看详情</a> </div> </div> </div>
- css
#zuida{ width: 1000px; height: 376px; margin: auto; } #id-zuo,#id-you{ text-align: left; display: inline-block; background-color: #e8e8e8; background-repeat: no-repeat; } #id-zuo { width: 611px; height: 376px; background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img1.png"); background-position: 200px 60px; } #id-you { width: 375px; height: 376px; background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img2.png"); background-position: 80px 120px; } #zuo-wen-an,#you-wen-an{ width: 300px; height: 200px; padding-top: 5px; padding-left: 20px; } p{ margin-top: 20px; font-size: 5px; font-family: '微软雅黑 Light',serif; } a{ margin-top: 20px; display: block; text-decoration: none; width: 100px; height: 40px; text-align: center; line-height: 40px; background-color: #0aa1ed; color: white; } .s1 { font-size: 40px; font-weight: bold; } .d4 { font-size: 30px; color: #0aa1ed; }
十. position 定位方式
10.1 static 静态定位
元素默认的定位方式
10.1.1 特点
- 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列
- 一般情况下不能实现元素层叠效果. 通过外边距控制元素的位置
10.1.2 格式
- html
position:static;
10.1.3 例子
- html
position:static;
10.2 relative 相对定位
10.2.1 特点
- 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移
10.2.2 格式
- html
position:relative;
10.2.3 应用场景
- 当需要对某个元素位置进行调整,并且不影响其它元素时使用
10.3 absolute 绝对定位
10.3.1 特点
- 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移
- 如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.
10.3.2 格式
- html
position:absolute;
10.3.3 应用场景
- 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位
10.4 fixed 固定定位
10.4.1 特点
- 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.
10.4.2 格式
- html
position:fixed;
10.4.3 特点
- 当需要让某个元素固定在窗口某个位置时使用
10.5 浮动定位
10.5.1 特点
- 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止
- 浮动元素一行装不下时会自动折行, 折行时有可能被卡住
-
- 当某个元素的所有子元素全部浮动时, 元素自动识别的高度为0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加overflow:hidden解决此问题
10.5.2 格式
- 左
float:left;
- 右
float:right;
10.5.3 应用场景
- 当需要将纵向排列的元素改成横向排列时使用
10.5.4 overflow 解决全部浮动父容器高度为0情况
- html
<div> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> <p>111</p>
- css
body>div{ width: 500px; border: 1px solid red; /*overflow: hidden;*/ } #d1{ width: 80px; height: 50px; background-color: red; float: left; /*float: left;*/ } #d2{ width: 80px; height: 50px; background-color: green; float: left; } #d3{ width: 80px; height: 50px; background-color: blue; float: left; }
10.5.5 综合练习01
- html
<div id="big"> <div id="bt"> <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/computer_icon1.png" alt=""> <span >电脑,办公/1F</span> </div> <div > <p>电脑整机</p> <ul class="right-float"> <li><a href="">笔记本</a></li> <li><a href="">游戏机</a></li> <li><a href="">台式机</a></li> <li><a href="">一体机</a></li> <li><a href="">服务器</a></li> <li><a href="">联想</a></li> </ul> </div> <div> <p>电脑整机</p> <ul class="right-float"> <li><a href="">笔记本</a></li> <li><a href="">游戏机</a></li> <li><a href="">台式机</a></li> <li><a href="">一体机</a></li> <li><a href="">服务器</a></li> <li><a href="">联想</a></li> </ul> </div> <div> <p>电脑整机</p> <ul class="right-float"> <li><a href="">笔记本</a></li> <li><a href="">游戏机</a></li> <li><a href="">台式机</a></li> <li><a href="">一体机</a></li> <li><a href="">服务器</a></li> <li><a href="">联想</a></li> </ul> </div> </div>
- css
*{ font: 12px 'simhei',Arial,sans-serif; margin: 0; color: #666; } #big{ width: 378px; height: 198px; background-color: #e8e8e8; /*border: 1px solid red;*/ } #bt{ /*border: 1px solid red;*/ } #bt>img{ margin: 5px 0 0 5px; } #bt>span{ position: relative; bottom: 5px; } #bt{ height: 30px; line-height: 30px; background-color:rgba(150,150,0,0.2); /*border: 1px solid red;*/ } .right-float{ margin-top: 5px; overflow: hidden; padding: 0; } .right-float>li{ float: left; list-style-type: none; margin-left: 10px; } a{ color: #0aa1ed; text-decoration: none; } div>p{ margin: 10px 10px; } a:hover{ color: #8a7eb8; }
10.5.6 综合练习02
- html
<div> <div id="t_div"> <div id="t_l_div" ></div> <div id="t_r_div"></div> </div> <div id="b_div"> <div id="b_l_div"></div> <div id="b_r_div"> <div></div> <div></div> <div></div> </div> </div> </div>
- css
body>div{ width: 1000px; background-color: red; margin: 0 auto; } #t_div{ overflow: hidden; margin-bottom: 10px; } #t_l_div{ width: 611px; height: 376px; float: left; } #t_r_div{ margin: 0; width: 375px; height: 376px; float: right; } #b_l_div{ width: 394px; height: 233px; float: left; } #b_div{ overflow: hidden; } #t_div>div,#b_l_div,#b_r_div>div{ background-color: #e8e8e8; } #b_r_div>div{ width: 192px; height: 233px; float: left; margin-left: 10px; }
10.5.7 综合练习03
- html
<div id="t_div"> <div id="t_l_div" > <div> <p class="title_p">灵越 燃700</p> <p>酷睿双核 <br> 显卡内存</p> <p class="price_p">4999.00</p> <a href="">查看详情</a> </div> <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img1.png" alt=""> </div> <div id="t_r_div"> <div> <p class="title_p">灵越 燃700</p> <p>酷睿双核 <br> 显卡内存</p> <p class="price_p">4999.00</p> <a href="">查看详情</a> </div> <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img2.png" alt=""> </div> </div> <div id="b_div"> <div id="b_l_div"></div> <div id="b_r_div"> <div></div> <div></div> <div></div> </div> </div> </div>
- css
body{ font: 12px Arial; color: #666; } body>div{ width: 1000px; background-color: red; margin: 0 auto; } #t_div{ overflow: hidden; margin-bottom: 10px; } #t_l_div{ width: 611px; height: 376px; float: left; position: relative; } #t_r_div{ margin: 0; width: 375px; height: 376px; float: right; position: relative; } #b_l_div{ width: 394px; height: 233px; float: left; } #b_div{ overflow: hidden; } #t_div>div,#b_l_div,#b_r_div>div{ background-color: #e8e8e8; } #b_r_div>div{ width: 192px; height: 233px; float: left; margin-left: 10px; } .title_p{ font-size: 32px; color:#333; margin-bottom: 12px; } .price_p{ font-size: 24px; color: #8a7eb8; margin-bottom: 12px; font-weight: bold; } #t_l_div>div{ width: 245px; height: 232px; margin: 68px 0 0 36px; } #t_div a{ background-color: #0aa1ed; width: 132px; height: 40px; display: block; text-align: center; line-height: 40px; text-decoration: none; border-radius: 3px; color: white; font-size: 20px; } #t_l_div>img{ position: absolute; right: 50px; top: 50px; width: 318px; height: 319px; } #t_r_div>img:hover,#t_l_div>img:hover{ /*设置动画持续时间*/ transition-duration: 0.5s; transform: scale(1.1); } #t_r_div>div{ width: 253px; height: 232px; margin: 39px 0 0 25px; } #t_r_div>img{ position: absolute; right: 50px; bottom: 50px; width: 292px; height: 232px; } a{ position: relative; z-index: 100; }
十一. overflow 溢出设置
当元素大小超出分区标签,用此可以设置显示或隐藏
11.1 hidden 隐藏
- overflow: hidden 隐藏
body>div{ width: 200px; height: 200px; border: 1px solid red; overflow: hidden; } <div> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi3%2F415197070%2FO1CN01b0rF3z2266r4oVEiv_%21%21415197070.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680963893&t=3593e02a099fed061022d9652a15b72b" alt=""> </div>
11.2 scroll 滚动条方式显示
- overflow: scroll 滚动条方式显示
body>div{ width: 200px; height: 200px; border: 1px solid red; overflow: scroll ; } <div> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi3%2F415197070%2FO1CN01b0rF3z2266r4oVEiv_%21%21415197070.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680963893&t=3593e02a099fed061022d9652a15b72b" alt=""> </div>
十二. vertical-align 设置行内元素垂直对齐方式
- html
<img src="" alt=""> <input type="text" value="11">
12.1 top 把元素的顶端与行中最高元素的顶端对齐
- top
img{ width: 200px; height: 300px; } input[type='text']{ vertical-align: top; }
12.2 middle 中间对齐
- middle 中间对齐
img{ width: 200px; height: 300px; vertical-align: middle; } input[type='text']{ }
12.3 bottom 把元素的顶端与行中最低的元素的顶端对齐
- css
img{ width: 200px; height: 300px; vertical-align: bottom ; } input[type='text']{ }
12.4 baseline 默认值,元素放置在父元素的基线上
- css
img{ width: 200px; height: 300px; vertical-align: baseline ; } input[type='text']{ }
十三. z-index 设置显示层级
当元素脱离文档流出现层叠显示时,可以通过z-index设置显示层级z-index的值越大显示约靠前
- 此样式只能添加给非静态定位的元素,静态定位添加无效
13.1 z-index 设置
- 越高展现的越靠前
z-index: 4;
十四. transition 过度动画
- transition
/*设置动画持续时间*/ transition-duration: 0.1s; /*设置动画缩放比*/ transform: scale(1.02);
14.1 综合练习
- html
<div id="wai_div"> <div class="nei_div"> <div class="t_div"> <a href=""> <img src="https://www.itheima.com/2020gw/images/indeximg/maptest.png" alt="111" width="224px" height="125px"> </a> </div> <div class="b_div"> <a class="a_bt" href=""> 【软件测试】这么入行更轻松 </a> <div class="all_span"> <span class="f_span">免费</span> <span class="c_span">1,232人报名</span> </div> </div> </div> <div class="nei_div"> <div class="t_div"> <a href=""> <img src="https://www.itheima.com/2020gw/images/indeximg/maptest.png" alt="111" width="224px" height="125px"> </a> </div> <div class="b_div"> <a class="a_bt" href=""> 【新媒体】这么入行更轻松 </a> <div class="all_span"> <span class="f_span">免费</span> <span class="c_span">1,232人报名</span> </div> </div> </div> <div class="nei_div"> <div class="t_div"> <a href=""> <img src="https://www.itheima.com/2020gw/images/indeximg/mapxmt.png" alt="111" width="224px" height="125px"> </a> </div> <div class="b_div"> <a class="a_bt" href=""> 【新媒体】玩转新媒体运营 </a> <div class="all_span"> <span class="f_span">免费</span> <span class="c_span">1,232人报名</span> </div> </div> </div> <div class="nei_div"> <div class="t_div"> <a href=""> <img src="https://www.itheima.com/2020gw/images/indeximg/mapweb.png" alt="111" width="224px" height="125px"> </a> </div> <div class="b_div"> <a class="a_bt" href=""> 【前端工程师】轻松入门快速进阶 </a> <div class="all_span"> <span class="f_span">免费</span> <span class="c_span">1,929人报名</span> </div> </div> </div> <div class="nei_div"> <div class="t_div"> <a href=""> <img src="https://www.itheima.com/2020gw/images/indeximg/mapjavaee.png" alt="111" width="224px" height="125px"> </a> </div> <div class="b_div"> <a class="a_bt" href=""> 【JAVA路线图】0基础快速入门 </a> <div class="all_span"> <span class="f_span">免费</span> <span class="c_span">1,929人报名</span> </div> </div> </div> </div>
- css
body{ font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif; font-size: 14px; background-color: #f6f5fa; } .t_div{ width: 224px; height: 125px; } .b_div{ width: 194px; height: 69px; padding: 15px; } .all_span{ position: relative; } .f_span{ position: absolute; left: 0; color: #0aa1ed; } .c_span{ position: absolute; right: 0; color: #888888; } a{ text-decoration: none; display: inline-block; } a:link,a:visited{ color: black; } .a_bt{ margin-bottom: 12px; width: 194px; height: 40px; } .nei_div{ float: left; margin: 0 10px 20px 10px; border-radius: 5px; overflow: hidden; background-color: #FFFFFF; } .nei_div:hover{ /*设置动画持续时间*/ transition-duration: 0.1s; transform: scale(1.02); } #wai_div{ width: 1220px; height: 224px; margin: 0 auto; }