html5 css3中的一些笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>css选择器</title>
<style type="text/css">
/* HTML 文档css
:root{
border: solid 1px red ;
};
*/
/*字选择器 带>号 也可以不用带*/
/*ul > li{
color: red;
}*/
/*ul > li:first-child{
color: red;
}
ul > li:last-child{
color: red;
} */
/*输入框的启用和禁止输入的CSS*/
/*input:enabled{
border: 1px solid red;
}
input:disabled{
border: 1px solid blue;
}*/
/*验证成功就显示blue,验证不成功显示green*/
/*input:valid{
border: 1px solid blue;
}
input:invalid{
border: 1px solid green;
}*/
/*必填表单 和 不必填表单*/
/*input:required{ }
input:optional{ }*/
/*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*/
/*a:link{ }
a:visited{ }
a:hover{ }
a:active{ }*/
/*获取光标时 谷歌不兼容*/
/*input:focus{
border: 1px solid red;
}*/
/*a标签 href!=baidu 的a元素*/
/*a:not([href*="baidu"]){
color: red;
}*/
/*em是相对的 跟字号大小挂钩,很灵活*/
p{
margin: 0;
padding: 0;
background: gray;
font-size: 20px;
width: 50%;
}
</style>
</head> <body>
<ul>
<li>ul第1个子元素</li>
<li>ul第2个子元素</li>
<li>ul第3个子元素</li>
<li>ul第4个子元素</li> </ul> <input type="text" />
<input type="email" />
<br/>
<a href="http:www.baidu.com" >baidu</a>
<a href="http:www.google.com" >google</a>
<a href="http:www.haosou.com" >haosou</a>
<p>em单位的讲解
em单位的讲解em单位的讲解em单位的讲解em单位的讲解
</p>
</body>
</html>
/*
display重要的概念
块级元素(display: block;) 1.能设置大小（height,width）2. 能自动的换行 div p
内联元素(display: inline;) 1.不能设置大小 2.不能自动换行 span b
内联-块(display: inline-block;) 1.能设置大小 2.不能自动换行 img
float浮动 理解：如果有div A,B。 A浮动B不浮动，相当于水下面的物体A浮动起来，然后在A后面的B就会跑到A的位置，A就会浮动到水面上，则就会挡住B。就相当于div A凸起来了，B就跑到A原来的位置了、
clean 为了下面的元素不受上面元素的浮动干扰，可以使用
clean:left|right|both; (清除浮动)
*/
div{
width: 400px;
height: 300px;
/*css3中的透明度*/
opacity: 0.5;
border: 10px solid green;
/*
阴影效果
1. 左右阴影 正是右边 负是左边
2. 上下
3. 阴影的模糊值 默认是0
4. 阴影的延伸半价
5. 颜色（可选）
6. inset值 （可选，内阴影）
*/
box-shadow: 5px 5px 5px 5px;
/*轮廓*/
outline: red solid 1px;
}
/*
em 和 rem单位的用法，都是相对的
*/
html{
font-size: 10px;
// 等价于 6.25% (默认字体大小16px,10/16)
}
.p1{
font-size: 1.7em; // em 相对于父元素的字体大小
}
.p2{
font-size: 17px;
}
.p3{
font-size: 1.7rem; // rem 直接相对于根目录（设置html的字体大小）
}
html5 css3中的一些笔记的更多相关文章
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 《HTML5与CSS3基础教程》笔记
以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
- HTML5&CSS3练习笔记(二)
HTML5&CSS3 练习CSS3伪选择器使用 1.first-line 格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
随机推荐
- WPF学习笔记（一）：数据绑定之元素到元素绑定
前言 作为一只菜鸟,之前学了一段时间的WPF,但是没有总结,过了一学期发现好多东西都忘记了,很多东西还是需要记下来,以备后续复习. 数据绑定在事件中应用非常广泛,可以有效地减少代码量,那么什么是数据绑 ...
- stl学习（一）优先队列
优先队列priority queue 头文件 #include<queue> 优先队列,也就是原来我们学过的堆,按照自己定义的优先级出队时.默认情况下底层是以Vector实现的heap. ...
- Zygote进程【1】——Zygote的诞生
在Android中存在着C和Java两个完全不同的世界,前者直接建立在Linux的基础上,后者直接建立在JVM的基础上.zygote的中文名字为"受精卵",这个名字很好的诠释了zy ...
- html实现弹框，并伴随遮罩层，且弹框居中
本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...
- Java 8特性探究(1)：通往lambda之路与 lambda表达式10个示例
本文由 ImportNew 函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口.比如Java标准库中的ja ...
- SPM paired t-test步骤
首先感谢大神空里流霜耐心的讲解,这篇笔记内容主要是整理他的谆谆教导,虽然他也看不到>< 所有数据都要经过平滑. Paired t-test虽然在2nd-level analysis中,但是 ...
- 030医疗项目-模块三：药品供应商目录模块——供货商药品目录查询功能----------Dao层：基本的查询语句的编写
我们安装显示的要求: 我们能看到显示的目录里面有:供货企业的名字(这个数据来自于供货商的表[usergys]),流水号,通用名,剂型(这些都来自药品信息表),供货的状态(这个呢在gysypml_con ...
- Html5 Egret游戏开发 成语大挑战（六）游戏界面构建和设计
本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用EgretWing就可以达到目的,本篇可能是篇幅最少的一个,但是涉及自定 ...
- Theano2.1.2-基础知识之第一步：代数
来自:http://deeplearning.net/software/theano/tutorial/adding.html Baby Steps - Algebra 一.两个标量相加 在学习the ...
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...