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 ...
随机推荐
- java获取注册ip
String ip = request.getHeader("x-forwarded-for"); if (ip == null || ip.length() == 0 || &q ...
- PostgreSQL-数据目录与pg_ctl
# tail /etc/profile PATH="$PATH":/usr/lib/postgresql/9.2/bin/ export PATH export PGDATA=/v ...
- 实战:rsync+inotify实现数据实时同步
Linux 内核从 2.6.13 版本开始提供了 inotify 通知接口,用来监控文件系统的各种变化情况,如文件存取.删除.移动等.利用这一机制,可以非常方便地实现文件异动告警.增量备份,并针对目录 ...
- vim 命令详解
vi: Visual Interface 可视化接口vim: VI iMproved VI增强版 全屏编辑器,模式化编辑器 vim模式: 编辑模式(命令模式) 输入模式 末行模式 模式转换: 编辑-- ...
- 移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
- 报表开发工具Finereport移动端app js接口列表【全】
应用报表工具Finereport的开发人员会发现其移动端app 同样也推出了很多js接口,那这些接口到底有多少,其移动端又有哪些地方支持调用js,这些接口具体又该如何调用呢.根据我平时的开发经验,给大 ...
- 【第一篇献给markdown】markdown入门
Markdown 是一种轻量级的「标记语言」,语法十分简单,常用的标记符号也不超过十个.虽然功能很强大,但是上手估计不用十分钟. 一些认识 Markdown 官方文档 这里可以看到官方的 Markdo ...
- 重新走过HTML，那些让我amazing 的标签
这一次我用了短暂的时间重新梳理了html的标签(包括html5 新增),发现我以前忽略了很多又轻巧又精美且实用的标签,总结如下: 格式标签: <address> 标签: 定义文档或文章的作 ...
- app端微信支付（二） - 生成预付单
前一篇文章的时序图中说了,app端调用微信支付必须先由后台调用微信后台生成预付单,再构建参数给手机端,而数据的构建要以xml形式,那么看看代码具体实现吧,代码已经精简过了,自己的业务已经除去,精简的 ...
- iOS 3D Touch实践
本文主要讲解3DTouch各种场景下的开发方法,开发主屏幕应用icon上的快捷选项标签(Home Screen Quick Actions),静态设置 UIApplicationShortcutIte ...