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高度时, ...
随机推荐
- Web开发的常见面试题HTML和HTML5等
作为一名前端开发人员,HTML,HTML5以及网站优化都是必须掌握的技术,下面列举一下HTML, HTML5, 网站优化等常见的面试题: HTML常见面试题: 1. 什么是Semantic HTML( ...
- Effective_Python mapreduce
完全吊炸天构造器的写法... import os import threading,time class GenericInputData(object): def read(self): raise ...
- 怎样使用 GitHub?
作者:珊姗是个小太阳链接:https://www.zhihu.com/question/20070065/answer/79557687来源:知乎著作权归作者所有,转载请联系作者获得授权. 作为一个文 ...
- 【noip新手入门向】OpenJudge1.3-14大象喝水
一.写在前面 我也不知道我为什么要写这个鬼畜的东西←_←才不是为了水blog量什么的(划掉),其实是为了明天给学弟学妹们传教准备. 这道题对完全对c语言没有概念的小萌新们极度友好,可以锻炼小萌新们的代 ...
- hadoop2.0初识1.3
1.配置分布式hadoop 1.1 准备三台测试机(虚拟机就可以) 1.1.1 将life-hadoop虚拟机克隆2个分别为life-hadoop02和life-hadoop03 1.1.2 查看ip ...
- [像黑客一样生活] shell终端听音乐之网易云shell版
这是一个Python程序,使用Python构建,并以mpg123作为后端.Follow me... 特点: Vim 式的流畅操作,支持快捷键绑定 支持电台.收藏等各种特色功能 支持 OS X 及各类 ...
- 使用jquery中height()方法获取各种高度大全
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...
- ie兼容问题整理
1.连续发请求问题 * jquery(document).ready(function(){}) * 连续发请求ie8出问题,被拦截问题,url后边加时间戳 * 例 url : url+ ...
- servlet学习笔记_1
一.动态页面和静态页面 动态页面&静态页面:如果浏览器在不同时刻不同条件下访问web服务器的某个页面,浏览器所获得的页面内容会发生变化,那么这种页面称之为动态页面.动态页面和静态页面的区别在于 ...
- QQ(iOS)客户端的粘性动画效果
qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈 ...