# HTML && CSS 学习笔记
https://www.zybuluo.com/denglongku/note/532786
1.Div左右居中
<div>1<div>
div{
width;300px;
height:300px;
margin:0 auto;
}
2.Div上下左右居中
<div class='father'>
<div class='son'></div>
</div>
.son{
position:absolute;
top:50%;
left:50%;
width:300px;
heigeht:300px;
margin-top:-150px; /*等于高度的一半*/
margin-left:-150px; /*等于宽度的一半*/
}
3.背景图片上下左右居中
background-position:center;
4.边框变成小三角
得到一个 宽为10px,黑色向下的小三角,背景色为红色
div{
width:0;
height:0;
border:10px solid red;
border-top-color:black;
}
5.关于换行
white-space:nowrap;/*不换行*/
white-space:normal;/*换行*/
6.关于margin-top的传递问题
为其父元素加上边框,就可以解决
7.清除默认样式
body,h1,h2,h3,h4,h5,h6,dl,dd,p{marhon:0;}
ul,ol{margin:0; padding:0;}
th.td{padding:0;}
8.表格
<table border='1'>
<thead><tr><th>sex</th><th>age</th></tr></thead>
<tbody>
<tr><td>man</td><td>18</td></tr>
<tr><td>female</td><td>28</td></tr>
</tbody>
table{border-collapse:collapse;}
跨行合并:rowspan;
跨列合并:colspan;
9.表单
/*for和id相同*/
<label for='username'>用户名</lable>
<input type='text' id='username' value='Input your name'/>
10.清除浮动
.clearfix:after{
display:block;
content:'';
clear:both;
}
.clearfix{
zoom:1; /* for IE6*/
}
# HTML && CSS 学习笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- (剑指Offer)面试题36:数组中的逆序对
题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 思路: 1.顺序扫描 顺序扫描整个数组,每扫描到一个数字,就将该数 ...
- Why isn't there a SendThreadMessage function?
Here's an interesting customer question: Windows has PostMessage and SendMessage. It also has PostTh ...
- 战舰少女 黑暗炼钢 按键精灵 代码及apk下载
注: 该代码仅仅适用于1920*1080分辨率的android手机,因为我只有这个分辨率的手机TnT 代码其实蛮简单的,都是比较简单的模拟就好了…… 要改也比较轻松吧 APK下载地址:链接: http ...
- C++ CopyFile
复制文件 关键点 CopyFile The CopyFile function copies an existing file to a new file. The CopyFileEx functi ...
- 【JavaScript】关于prototype原型的一些链接
http://www.cnblogs.com/slowsoul/archive/2013/05/30/3107198.html http://www.thinksaas.cn/group/topic/ ...
- [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects
Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...
- vs2012运行c语言出现:无法查找或打开 PDB 文件
1.点 调试2.然后 选项和设置3.右边勾上 启用源服务器支持4.左边点 符号5.把微软符号服务器勾6.运行的时候等一下 莫慌!!7.问题解决
- JVM系列文章(四):类载入机制
作为一个程序猿,只知道怎么用是远远不够的. 起码,你须要知道为什么能够这么用.即我们所谓底层的东西. 那究竟什么是底层呢?我认为这不能一概而论.以我如今的知识水平而言:对于Web开发人员,TCP/IP ...
- SQL Server事务日志介绍
SQL Server中的数据库都是由一或多个数据文件以及一或多个事务日志文件组成的. 顾名思意,数据文件主要存储数据库的数据,包括数据库内容结构,数据页,索引页等等.那么事务日志到底是干什么的呢?它主 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...