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 ...
随机推荐
- JS/JQuery针对不同类型元素的操作（radio、select、checkbox）
一.select下拉框 I:javascript方法 1:获取选中的值 F1: var myselect=document.getElementById("test");或者 ...
- 【hadoop】如何向map和reduce脚本传递参数,加载文件和目录
本文主要讲解三个问题: 1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数. 2 使用Streaming编写MapReduce程序(C/C++ ...
- SQL Server DAC——专用管理员连接
今天打开数据库刚要连接时,看到“连接到服务器”窗口,突发的想到:要是SQL Server 不再响应正常的连接请求,又想使用数据库时,我们该怎么办? 其实我们还能通过“SQL Server D ...
- 常用ADC滤波处理
#define N 70 XDATA WORD Value_buf[N]; XDATA DWORD ADCValue; static BYTE v_gu8cnt=0; static BYTE i=0; ...
- Fetch：下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- linux 搜索相关命令（2）
文件搜索相关命令 1:locate命令 需要 yum install mlocate locate 文件名 在后台数据库中按文件名搜索,搜索速度更快 /var/lib/mlocate #locate命 ...
- Linux一些经典书籍
一.linux之路 1.入门篇 <LINUX权威指南>书不错,写的很全面也比较广,涉及的不深,做为入门书籍不错,可以比较全面的了解linux .另外比较热门的也可以看看<鸟哥的私房菜 ...
- ACM练手
#include<iostream> #include<string.h> using namespace std; #define N 100 class stack { c ...
- android第一行代码－9.内容提供器
内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能, 内容提供器包括两部分:使用现有的内容提供器来读取和操作相应程序中的数据跟创建自己的内容提供器给我们程序的 ...
- rpc框架之 thrift连接池实现
接前一篇rpc框架之HA/负载均衡构架设计 继续,写了一个简单的thrift 连接池: 先做点准备工作: package yjmyzz; public class ServerInfo { publi ...