css3(2)
来源:互联网 发布:国服mac版魔兽世界 编辑:程序博客网 时间:2024/05/26 09:57
- 表格样式
<caption></caption>表格标题:
<table><caption>年度收入2016-2017</caption>
<tr><th></th></tr><tr><td></td></tr></table>
属性:caption-side:bottom;
表格边框:border:solid 1px red;
边框重叠:border-collspse:collapse; - cursor:pointer;鼠标放上去之后显示小手。
- list-style-type:circle;
list-style-type:square;
list-style-image:url(“ ”); 前面的做法不太方便控制图片的方位。
ul{
list-style-type:none;
list-style-image:url(“../img/1.png”);
}
我们可以这样:
li{
background-image:url(“./img/1/png”);
background-repeat:no-repeat;
padding-left:20px;
background-position:0px 3px;
}<ul type=”square”;><li>12</li><li>45</li></ul>
不用css的话可以用type属性。 - 浮动
块元素特点:
a .块元素是单独占满一行(占满文档流)
b .块元素的内容默认显示在块的左上角。
常见块标签:<table></table> <p></p> <div></div>
<ul><li></li></ul> <ol></ol> <dl></dl>
<dt></dt> <dd></dd> h1-h6
样式会受到左边或右边浮动的影响:
clear:left; 清除影响在他左边的块的浮动。
clear:both; 清除影响在他左边右边块的浮动
解决盒子坍塌问题:
我想给container一个高度自适应,这时候出现了盒子坍塌
<div id="header">头部</div> <div id="container"> <div id="mleft"></div> <div id="mright"></div> <div style="clear:both;"></div> </div> <div id="footer"></div> 加一个div清除浮动对下面块的影响。
- 行内元素
a .不单独占满一行。
b .设置height,width不起作用。
常见行内元素:
a,i,img,input,label,textarea,span,strong。 - 行内元素和块元素可以相互转化
display:block;
display:inline;
display:inline-block;
margin:0px auto; 居中 - 盒子模型-边框,内间距,外间距。
内间距:
padding:10px;上下左右**撑开**10px
padding:10px 20px; 上下,左右
padding:10px 5px 2px; 上,左右,下
padding:1px 3px 5px 7px; 上,右,下,左
div{
width:100px;
height:100px;
border:solid 2px red;
padding:10px;
box-sizing:border-box;
}上下左右都撑开了10px,
box-sizing:border-box使得盒子的宽高不变。
外间距:
Margin-top:10px;
Margin-bottom:10px;
Margin-left:10px;
Margin-right;
Margin:0px auto;块元素在父元素剧中。 - *{
padding:0px;
margin:0px;
}
阅读全文
0 0
- CSS3-2
- CSS3-2
- css3(2)
- css3做幻灯片2
- css3加载动画2
- CSS3 2D 转换
- HTML5+CSS3教程2
- CSS3 2D转换
- css3--2D变化
- CSS3画图2
- CSS3 2D
- CSS3 入门2
- <css3>2D动画
- 【整理】CSS3知识点2
- CSS3 2D 转换
- css3 2D,详解
- CSS3 2D 转换
- CSS3学习笔记2
- 进阶高级!帮你做能落地的界面之TAB的小短线
- Spring事务管理基础概念讲解 (重点)
- (四)Tomcat分析
- (hdu 1907)John (Misère Nim,Nim博弈的变形)
- Android settings使用详解之设置优先网络
- css3(2)
- git 常见命令记录
- SWF播放器object DEMO
- deep-visualization-toolbox可视化安装
- 模仿微信最近联系人列表长按功能
- WPF 的毛玻璃效果
- linux常用命令
- java 防SQL注入 html编码入侵 特殊字符转义 方法入参检测工具 (Spring)
- Java基础篇第一节