CSS魔法（二）
# 文档类型<!DOCTYPE>
<!DOCTYPE html>
# 字符集
<meta charset="UTF-8" />
# 换行标签
<br />
# div span标签
后代选择器 子代选择器 >
交集选择器
div.one{
}
并集选择器
行内元素和块级元素的区别
块级元素：独占一行 能设置大小
行内元素：不能设置大小 display：inline-block可将行内元素转为块级元素
行高 line-height 文字居中
<style>
div {
height: 50px;
width: 200px;
background-color: pink;
line-height: 50px;
}
</style>
<div>我是行高</div>
权重
权重值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ya { /*权重 0,1,0,0*/
color: blue;
} .yase { /* 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0*/
color: green;
} div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: red;
} div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: hotpink!important;
} * { 0 0 0 0 } /** 0000
div 0001
.one 0010
#two 0100
行内 1000
important ∞*/
</style>
</head>
<body>
<div class="yase" id="ya" style="color: orange">亚瑟</div>
</body>
</html>
权重相同 则就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div { 0001
color: red;
}
div { 000
color: green;
}*/
div p {/* 0001 + 0001 = 0002*/
color: green;
} p { /*0001*/
color: red;
}
.feng { /* 0010*/
color: blue;
} /*1. 权重相同 则就近原则*/
/*2. 权重会叠加0001 + 0001 = 0002*/
</style>
</head>
<body>
<div>
<p class="feng"> 凤姐 </p>
</div>
</body>
</html>
透明
div {
width: 200px;
height: 200px;
/*background-color: #000;*/
color: #fff;
background: rgba(0, 0, 0, .3); /* red green blue alpha 0~1 */
}
表格细线边框
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>
a链接
a:link {color: #FF0000} /* 未访问时的状态 */
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */
内边距问题
padding:0px,5px,10px,15px;就是上为0，右为5，下为10，左为15，
padding的顺序是顺时针方向的
padding会撑开 带有widht 和height盒子，要记得减去padding值
<style>
div {
width: 160px;
height: 160px;
border: 1px solid red;
padding-left: 20px;
/*非常严重的问题， padding 会撑开 带有 widht 和height盒子*/
/* 1. 我们要求这个 div 就是标准的 200 * 200
2. 但是我们给了padding就撑开盒子了 240
3. 问我们怎样能保证盒子 不超过 200 * 200 */
}
</style>
外边距
控制盒子与盒子之间的间距
盒子居中三种方式
/* margin: 0 auto; 通俗写法 0 auto 上下是 0 左右是auto 自动 水平居中对齐 */ /* margin-left: auto;
margin-right: auto; 自动充满*/ /* margin: auto; 上下左右都是auto*/
外边距塌陷
外边距合并 尽量避免
圆角边框（border-radius: 150px）
<style>
div {
width: 312px;
height: 312px;
/*background-color: pink;*/
margin: 100px auto;
/*border-radius: 50%; 让一个正方形 变成圆圈*/
border: 1px solid red;
border-radius: 150px 0;
}
</style>
圆角练习
<style>
body {
background-color: #ccc;
}
.radius a {
width: 172px;
height: 172px;
background-color: #fff;
display: inline-block;
margin: 30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
color: red;
text-decoration: none;
font-weight:;
}
.radius a:hover {
background-color: red;
color: #fff;
}
</style>
<div class="radius">
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
</div>
效果
盒子阴影
<style>
div {
width: 200px;
height: 200px;
/*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/
/*transition: all 1s;*/ }
div:hover { /*鼠标经过div时候的样子。。。*/
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
</style>
浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.one {
width: 300px;
height: 200px;
background-color: red;
float: left;
}
.two {
width: 320px;
height: 200px;
float: left;
background-color: greenyellow;
}
.three {
width: 320px;
height: 200px;
float: left;
background-color: blue;
}
.four {
width: 320px;
height: 200px;
float: right;
background-color: cyan;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
CSS魔法（二）的更多相关文章
- 邓布利多拍了拍你，并递来一份CSS魔法
校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
随机推荐
- CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
- PP-物料清单用户处理手册
1 系统操作时间 1. 新旧物料的替换需有BOM的产生2. BOM中组件发生变化时需有BOM的更改2 系统操作权限角色编码 角色名称Z:PP_PS_007_1000_200 PP主数据维护员 3 适应 ...
- html 響應式web設計
RWD(響應式web設計)可以根據尺寸大小傳遞網頁,對於平板和移動設備是必須的. <html lang="en-US"> lang表示頁面的主要語言.http://ww ...
- CentOS常用包安装
安装rz和sz命令: yum install lrzsz 安装unzip:yum install unzip
- BZOJ2135 刷题计划（贪心+二分）
相邻数作差后容易转化成将这些数最多再切m刀能获得的最小偏差值.大胆猜想化一波式子可以发现将一个数平均分是最优的.并且划分次数越多能获得的偏差值增量越小.那么就可以贪心了:将所有差扔进堆里,每次取出增量 ...
- 【ZOJ2276】Lara Croft（bfs）
BUPT2017 wintertraining(16) #4 D ZOJ - 2276 题意 n个数字绕成环,有两个指示数字的方块,每次可以顺时针或逆时针移动其中一个,步数是它当前位置的数字a[i], ...
- Codeforces Round #487 (Div. 2) E. A Trance of Nightfall (矩阵优化)
题意 有一个平面 , 给你 \(n\) 个点构成一个点集 \(S\) , 一开始可以选择一个平面上任意点 \(P\) . 存在一种操作 : 1 选择一条至少 通过 \(S\) 中任意两个点以及 \(P ...
- luogu1972 HH的项链(树状数组)
无修改.询问区间种类数的问题可以很容易地用树状数组解决 我们先给询问按右端点排序,然后推着做,每次让a[i]++,表示i处新增了一个种类 但是这样会和前面的有重复,我们只要记下每个种类上次在哪里出现过 ...
- 最长上升子序列LIS（51nod1134）
1134 最长递增子序列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递 ...
- VLC1.2 播放视频迟滞卡
用libvlc 提供的示例,用1080p播放本事是720p的视频,会有卡住的现象. 后改用32位播放后正常.(R,G,B的掩码需要适当调换.我在ubuntu上编译两个项目,掩码值都需要调换,不知道为什 ...