CSS-学习笔记二
1. table标签中的标题
caption {
caption-side: top;
}
2.table标签中边框重合
table {
width: 300px;
height: 200px;
border-collapse: collapse; /*边框可以重合*/
}
3. table表中的项居中
th, td {
border: solid 2px red;
text-align: center;
}
4. 列表头和行表头
<!--默认列表头 scope="col"-->
<table >
<caption >学生信息表</caption>
<tr><th>姓名</th><th>学号</th><th>性别</th></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>李四</td><td>002</td><td>男</td></tr>
<tr><td>王五</td><td>003</td><td>女</td></tr>
<tr><td>赵六</td><td>004</td><td>女</td></tr>
</table> <!--横表头-->
<table >
<caption >学生信息表</caption>
<tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
<tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
<tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
</table>
5. 按钮和文本框的边框，不显示或者只显示下划线
.btn {
border-width: 0px;
}
.txt {
border-width: 0px;
border-bottom: solid 2px black;
}
6. 去掉超链接的下划线
a {
text-decoration: none;
}
7. 设定鼠标的显示形状
p {
cursor: pointer;
}
8. 无序列表，更改无序编号样式
ul {
list-style-type: none;
}
9. 块级元素和行内元素
内联元素，行内元素：1. width和height不起作用 2.不会占满一行
内联元素包含：span input a label img textarea select等 行内元素用来做内容
块级元素：1. 设置width,height 2. 块级元素里面的内容，默认显示在块的左上角 3. 块级元素单独占满一行
块级元素包含：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form等 块级元素用来做布局
<span>1</span><span>2</span>
span {
/*width :100px; 不起作用*/
/*height :100px;不起作用*/
/*border :solid 1px red;*/
/*display :block 行内元素转化为块级元素*/
/*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}
对于块级元素的两个重要CSS属性：float和clear
<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
.c1 {
width: 100px;
height: 100px;
border: solid 1px red;
/*display :inline 块级元素转化为行内元素*/
float: left; /*浮动，靠左对齐*/
}
.c2 {
width: 100px;
height: 100px;
border: solid 1px red;
clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/
float: right;
}
.c3 {
width: 100px;
height: 100px;
border: solid 1px red;
float: right;
}
10. 盒子模型 padding margin
<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
#d1 {
width: 100px;
height: 100px;
border: solid 1px red;
clear: both;
/*padding :10px; 上下左右都撑开10px*/
/*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
/*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
/*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/
padding-top: 20px;
padding-left: 15px;
}
#d2, #d3 {
width: 100px;
height: 100px;
border: solid 1px red;
float :left ;
}
#d3 {
/*margin :20px; 这个用法和padding一样*/
margin-left :20px;
}
11.所有的元素都顶住浏览器的边框
*{
padding :0px;
margin :0px;
}
12. 在google浏览器中调试，右键-Inspect
<div id="d4">
<ul >
<li>盒子模型调试</li>
<li>盒子模型调试</li>
<li>盒子模型调试</li>
</ul>
</div>
#d4{
width: 200px;
height: 100px;
border: solid 1px red;
clear :both ;
margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/
}
#d4 ul{
width: 120px;
height: 60px;
margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/
}
13. padding和Magin对行内元素一样有作用
<div>
<span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
</div>
#d5,#d6{
border: solid 1px red;
padding :20px;
margin :50px;
}
看代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/demo.css" rel="stylesheet" />
</head>
<body> <!--默认列表头 scope="col"-->
<table >
<caption >学生信息表</caption>
<tr><th>姓名</th><th>学号</th><th>性别</th></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>李四</td><td>002</td><td>男</td></tr>
<tr><td>王五</td><td>003</td><td>女</td></tr>
<tr><td>赵六</td><td>004</td><td>女</td></tr>
</table> <!--横表头-->
<table >
<caption >学生信息表</caption>
<tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
<tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
<tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
</table> <!--按钮，文本框的边框-->
<input type="button" value="我是一个按钮" class="btn"/>
<input type="text" class="txt"/> <!--去掉超链接的下划线-->
<a href="http://www.baidu.com" target="_blank">百度</a> <!--设定鼠标的形状-->
<p>鼠标形状</p> <ul>
<li>1111</li>
<li>3333</li>
<li>5555</li>
</ul> <!--内联元素，行内元素：1. width和height不起作用 2.不会占满一行
内联元素包含：span input a label img textarea select 行内元素用来做内容-->
<span>1</span><span>2</span>
<br/>
<br />
<!--块级元素：1. 设置width,height 2. 块级元素里面的内容，默认显示在块的左上角 3. 块级元素单独占满一行
有哪些块级元素：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form 块级元素用来做布局-->
<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
<br />
<br />
<!--盒子模型-->
<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div> <!--在google浏览器中调试-->
<div id="d4">
<ul >
<li>盒子模型调试</li>
<li>盒子模型调试</li>
<li>盒子模型调试</li>
</ul>
</div> <!--padding和Magin对行内元素一样有作用-->
<div>
<span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
</div>
</body>
</html>
body {
font-size: 20px;
font-family: "微软雅黑";
}
caption {
caption-side: top;
}
table {
width: 300px;
height: 200px;
border-collapse: collapse; /*边框可以重合*/
}
th, td {
border: solid 2px red;
text-align: center;
}
.btn {
border-width: 0px;
}
.txt {
border-width: 0px;
border-bottom: solid 2px black;
}
a {
text-decoration: none;
}
p {
cursor: pointer;
}
ul {
list-style-type: none;
}
span {
/*width :100px; 不起作用*/
/*height :100px;不起作用*/
/*border :solid 1px red;*/
/*display :block 行内元素转化为块级元素*/
/*display :inline-block ; 即有行内元素特点又有块级元素的特点*/
}
.c1 {
width: 100px;
height: 100px;
border: solid 1px red;
/*display :inline 块级元素转化为行内元素*/
float: left; /*浮动，靠左对齐*/
}
.c2 {
width: 100px;
height: 100px;
border: solid 1px red;
clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/
float: right;
}
.c3 {
width: 100px;
height: 100px;
border: solid 1px red;
float: right;
}
#d1 {
width: 100px;
height: 100px;
border: solid 1px red;
clear: both;
/*padding :10px; 上下左右都撑开10px*/
/*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/
/*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/
/*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/
padding-top: 20px;
padding-left: 15px;
}
#d2, #d3 {
width: 100px;
height: 100px;
border: solid 1px red;
float :left ;
}
#d3 {
/*margin :20px; 这个用法和padding一样*/
margin-left :20px;
}
/*所有的元素都顶住浏览器的边框*/
*{
padding :0px;
margin :0px;
}
#d4{
width: 200px;
height: 100px;
border: solid 1px red;
clear :both ;
margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/
}
#d4 ul{
width: 120px;
height: 60px;
margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/
}
#d5,#d6{
border: solid 1px red;
padding :20px;
margin :50px;
}
CSS-学习笔记二的更多相关文章
- css学习笔记二
下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2) ...
- CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- Html+css学习笔记二 标题
学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...
- css学习笔记二之inline-block
1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"i ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- amazeui学习笔记二（进阶开发3）--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
随机推荐
- mysql中类似indexOf的方法LOCATE()
LOCATE(substr,str), LOCATE(substr,str,pos) 第一个语法返回substr在字符串str 的第一个出现的位置. 第二个语法返回子符串 substr 在字符串st ...
- 笔记整理之BCP
很多时候,需要批量的导数据,可能大家想到的第一反应就是右键数据库->任务->导入导出数据.但是其实微软自身提供的大容量导入导出工具,有bcp, bulkinsert 之类的也是很好用.今天 ...
- Tips for Planning Your Business Startup
原文链接:http://domaintree.me/?p=1037 By Robert Thibodeau – Starting a business can be a very daunting ...
- MVC中的ActionLink生成的属性名称 中划线的解决办法
当使用ActionLink来生成链接属性时,由于中划线的变量名称不符合命名规则,那么直接写中划线的变量时无法编译,此时只要改为下划线即可.Razor 引擎会自动转为中划线. 即 data_icon ...
- RSA加密算法的简单案例
RSA加密算法是目前最有影响力的公钥加密算法,它能够抵抗到目前为止已知的绝大多数密码攻击. 那关于RSA加密算法有哪些应用呢?以下举一个数据库身份验证的案例. 在使用数据集进行身份认证时,密码存在数据 ...
- Chrome Developer Tools：Network Panel说明
官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...
- 洛谷P1372 又是毕业季I&&P1414 又是毕业季II[最大公约数]
P1372 又是毕业季I 题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚 ...
- [NOIP2014]自测
这两天做完了2014年的noip提高. 因为以前看了SDSC2016时gty的课件,题目思路都知道了一点,做起来没多大困难. 100+100+75+100+100+70=545 里面水分好多,好多题都 ...
- vi快捷键
/** * eclipse内置快捷: * * * 导入包:Ctrl+Shift+O * Ctrl+T 查看一个类的继承关系树,是自顶向下的,再多按一次Ctrl+T, 会换成自底向上的显示结构. 提示: ...
- weka
第一次接触weka这个东西,貌似是数据挖掘用的比较多.接下来一个月里,希望能够对weka有更深一步的了解,并用博客记录下学习weka用法.原理.数据预处理的过程,与君分享,期待!