web前端基础篇③
1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放
例:<video/audio src=“地址” controls=“controls” loop autoplay>
2.块级元素 行内元素
独占一行 不独占一行
设宽高 不能设宽高
内容不影响边框 内容影响元素大小
可嵌套块级、行内 嵌套会乱
margin四周都变 margin仅左右变
padding四周都变 padding四周都变
3.html5语义化标签
article文章 aside侧边栏 footer页脚 head页眉 nav导航 section节、区段
4.css引入方式
内联(内嵌) body里添加样式
例: <div style="border: 1px solid red;">我是一个div ,我想有一些css样式</div>
内部样式 head里添加
例:<style type="text/css">
div{
color: green;
}
</style>
外部样式 head里添加 通过外部链接
例:<link rel="stylesheet" href="../css/css测试.css">
@import 不常用
内联最先显示;内部和外部看谁在前面谁就先显示。
5.css选择器
元素选择器 head里加div
<style type="text/css">
div{
color: red;
}
class选择器 head里加.div
<style type="text/css">
div1{
color: red;
}
id选择器 head里加#div
<style type="text/css">
div1-id{
color: red;
}
后代选择器 head里加 h1空格span
<style type="text/css">
h1 span{
color: red;
}
子元素选择器、相邻兄弟选择器(不常用)
通配符选择器 *(重置技术)现在都是用normalize技术解决兼容性问题。
web前端基础篇③的更多相关文章
- web前端基础篇⑨
1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...
- web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...
- web前端基础篇⑧
1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...
- web前端基础篇①
html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- web前端基础篇⑦
1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...
- web前端基础篇⑥
LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...
- web前端基础篇⑤
1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...
- web前端基础篇④
1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...
随机推荐
- spring.net
Spring.Net有两个很重要的感念就是IoC(控制反转)和DI(依赖注入). IoC.英文全称Inversion of Control.控制反转.DI.英文全称Dependency Injecti ...
- httpclient调用https
httpclient调用https报错: Exception in thread "main" java.lang.Exception: sun.security.validato ...
- AS3语言注意事项汇总
1. 在IE中,主DisplayObject加入stage后,可能其大小还是0,这时可以通过监听resize信息,在主DisplayObject获得正确的大小后,运行主要程序.需要注意的是在这个过程中 ...
- 远程读取json数据并写入数据库
参考:http://www.jb51.net/article/39937.htm $curlPost = 'a=1&b=2';//模拟POST数据$ch = curl_init();curl_ ...
- 2016年12月22日 星期四 --出埃及记 Exodus 21:17
2016年12月22日 星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...
- 使用exec命令删除前几天产生的日志
上次学习了访问某个网站并产生相应的日志保存在指定位置,但是时间长了,日志会占用磁盘大量的空间,下面使用exec这个命令删除之前的日志: 命令格式: find 目录绝对路径 -mtime +n(时间) ...
- java初学知识点
public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; Size t=Size.LARG ...
- 【Unity3D游戏开发】NGUI之多分辨率下完美分布式协同开发 (五)
NGUI多分辨率下完美分布式协同开发:不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 NGUI多分辨率下完美分布式协同开发不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 开发问题 原因分析 ...
- 后勤数据抽取流程图 Logistic Data Extraction
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Deep Learning 6_深度学习UFLDL教程:Softmax Regression_Exercise(斯坦福大学深度学习教程)
前言 练习内容:Exercise:Softmax Regression.完成MNIST手写数字数据库中手写数字的识别,即:用6万个已标注数据(即:6万张28*28的图像块(patches)),作训练数 ...