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 ...
随机推荐
- W3School-CSS 伪元素 (Pseudo-elements) 实例
CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin ...
- WPF 提示框、确认框、确认输入框
1.提示框 分为提示.异常.失败.成功几种类型 方法: /// <summary> /// 弹出提示 /// 标题:提示 /// </summary> /// <para ...
- mac 安装mysql + 修改root用户密码 + 及报Access denied for user 'root'@'localhost' (using password:YES)解决办法
1.下载MySQL 到mysql的官网http://dev.mysql.com/downloads/mysql/然后在页面中会看到“MySQL Community Server”下方有一个“downl ...
- hortonworks2.5.3 install step log
1.创建本地YUM源,下载TAR.GZ HDP,HDP-UTILS,AMBARI介质安装HTTPD,在/VAR/WWW/HTML/下创建三个相应的目录,把以上解压的三个目录链接过来在三个目录中执行命令 ...
- WPFTookit Chart 高级进阶
数据源增加SeriesSource 使用方式 <Charting:Chart x:Name="chart" Helper:ChartHelper.DependentValue ...
- 从一个url输入浏览器到页面渲染出来，这个过程都发生了哪些事情？
经典问题:在浏览器输入一个url后,会发生什么事情呢? (1)假设是简单的http请求(GET),IPV4,无代理. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,若缓存中有,请略过中间步骤,直接跳到 ...
- Excellent Articles
Lisp The roots of lisp Recursive Functions of Symbolic Expressions and Their Computation by Machine, ...
- angular的跨域（angular百度下拉提示模拟）和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- jQuery取得select选择的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...
- 20145208 《Java程序设计》第0周学习总结
20145208 <Java程序设计>第0周学习总结 阅读心得 读了老师推荐的几个文章,虽然第四个文章"为什么一定要自学"报告资源不存在而无法阅读,其他的三篇文章都言之 ...