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 ...
随机推荐
- ASP.NET MVC Razor
Razor是MVC3中才有的新的视图引擎.我们知道,在ASP.NET中,ASPX的视图引擎依靠<%和%>来调用C#指令.而MVC3以后有了一套新的使用@标记的Razor语法,使用起来更灵活 ...
- mac xcode c++ cin cout注意细节一
#include <iostream> using namespace std; 要同时存在 要不然std命名空间无法生效
- WPF 自定义ListBox
如题,要实现一个如下的列表,该如何实现? 在设计过程中,会遇到如下问题: 1.ListBox中ListBoxItem的模板设计 2.ListBox中ListBoxItem的模板容器设计 3.List ...
- 迅为-iMX6开发板 飞思卡尔iMX6Q开发板 工业级开发板
了解详情请点击迅为官网:http://topeetboard.com 迅为-i.MX6开发板是采用Freescale Cortex-A9 四核i.MX6Q处理器,主频1GHz,2G DDR3内存,16 ...
- 谈谈Redis的SETNX
谈谈Redis的SETNX 发表于2015-09-14 在 Redis 里,所谓 SETNX,是「SET if Not eXists」的缩写,也就是只有不存在的时候才设置,可以利用它来实现锁的效果,不 ...
- Redis学习总结
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API,其实当前最热门的NoSQL数据库之一,NoSQL还包括了Mem ...
- Shell基础学习小结
0 shell基础概念 Shell是解释性语言,使用脚本编程语言的好处是,它们多半运行在比编译型语言还高的层级,能够轻易处理文件与目录之类的对象:缺点是它们的效率通常不如编译型语言.Shell命令有本 ...
- 深入理解Java反射
要想理解反射的原理,首先要了解什么是类型信息.Java让我们在运行时识别对象和类的信息,主要有2种方式:一种是传统的RTTI,它假定我们在编译时已经知道了所有的类型信息:另一种是反射机制,它允许我们在 ...
- OpenCV 之 编译和配置
“工欲善其事,必先利其器”,下面介绍在 Win7 32位系统下,用 cmake 编译 OpenCV 的过程. 1 开发环境 1.1 Win7 Windows 7 家庭普通版,Service Pac ...
- Linux系统1.md
计算机 介绍 电子计算机(英语:computer),亦称电脑,是一种利用电子学原理,根据一系列指令对数据进行处理的工具. 在现代,机械计算机的应用已经完全被电子计算机所替换,其所相关的技术研究叫计算机 ...