HTML5周记（二）

大家好，很高兴又跟大家见面了！本周更新博主将给大家带来更精彩的HTML5技术分享，通过本周的学习，可实现大部分的网页制作。以下为本次更新内容。

第四章 css盒模型

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
/* [margin 外边距]
* margin属性值最多有四个：
* ① 写一个值：四个方向的margin均为这个值
* ② 写两个值：上、右两个方向，下默认=上，左默认=右
* ③ 写三个值：上、右、下三个方向，左默认=右
* ④ 写四个值：上、右、下、左四个方向
* ⑤ 写三个值+auto：控件居右显示
* margin: 50px 30px 20px auto; 距离父容器右侧30px
* ⑥ margin: 0 auto; 设置控件在父容器中，水平居中
*/

/*注意！！！当子盒子的上边界与父盒子的上边界重合时，调整margin-top会影响到父盒子的外边距，
使用overflow: hidden消除影响。*/
margin: 0 auto;

/* [border 边框]
* border 有三个属性值：宽度width 样式style 颜色color
* 原则上，三个属性都需要手动指定(color不写时，默认为黑色)
*/
border: 10px solid green;

/* [padding 内边距]
* 使用方式，同margin①~④
* 注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大小。
*/
padding: 50px;

/* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*/
border-radius: 20px 30px/40px 50px;

/* [box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移负——左移
* y轴阴影距离：(必选) 可正可负，正——下移负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*/

/* [border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
*/
box-shadow: 0px 0px 10px 0px blue inset;

}

input:focus{
box-shadow: 0px 0px 1px 0px cornflowerblue inset;
}

</style>
</head>

<body>

<input type="text"/>

<div style="width: 200px; height: 200px; background-color: blue; margin: 0 auto;">
<div class="div1">
这是div中的文字
</div>
</div>

</body>
</html>

第五章 css定位机制

一、css相对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
/* [相对定位 relative]
* 1、使用position: relative; 设置元素为相对定位的元素；
* 2、定位机制：
* ① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
* ② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
* 3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
*/
position: relative;
/*top: 50px;*/
/*left: 50px;*/
left: 50px;
top: 50px;
z-index: 0;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
/*position: relative;
bottom: 50px;*/
/*z-index: -10;*/
}
.img{position: absolute;
clip:rect(0px 126px 126px 0px) ;
}
.img:hover{
clip:rect(0px 252px 252px 126px) ;
margin-left: -126px; }
</style>
</head>

<body>

<div class="div1">
这是第一个div
</div>

<div class="div2">
这是第一个div
</div>

<img src="css/ip_ico.png" class="img"/>

</body>
</html>

二、css绝对定位、固定定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* [绝对定位 absolute]
* 1、使用position: absolute;设置元素为绝对定位元素。
* 2、定位机制：
* ① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
* ② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
* ③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
*
* [固定定位 fixed]
* 1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住
* 2、定位机制：永远相对于浏览器进行定位。
*
* [z-index 属性]
* 1、作用：设置定位元素的Z轴层叠顺序
* 2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed
* ② 使用z-index需要考虑父容器的约束。
* 如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；
* 如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。
*
* 3、z-index:auto & z-index:0 的异同：
* ① z-index:auto为默认值，与z-index:0处于同一平面。
* ② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。
*
* 4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上
*/
.div1{
width: 100px;
height: 100px;
background-color: red;
/*margin: 0 auto;*/
position: relative;
top: 25px;
left: 25px;
/* 绝对定位元素水平居中的方式：
1、left: 50%;
2、设置margin-left为-width/2：如margin-left: -50px;
*/
z-index: auto;
}
.div1_1{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.div2{
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
/*z-index: -1;*/
}
.div2_1{
width: 50px;
height: 50px;
background-color: green;
position: relative;
/*z-index: 100;*/

}
</style>
</head>

<body>
<div class="div1">
<div class="div1_1">

</div>
</div>

<div class="div2">
<div class="div2_1">

</div>
</div>
</body>
</html>

三、负边距的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 【1、实现块级元素在块级元素中水平垂直居中】
* ① 设置子容器为定位元素；
* ② left:50%; margin-left:-width/2;
* top:50%; margin-top:-height/2;
*/
.div1{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
/*position: relative;*/
}
.div2{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 50%;
margin-left: -25px;

top: 50%;
margin-top: -25px;
}

/* 【2、使用负边距增大元素宽度】
* ① 不指定子容器宽度，指定高度或填充内容；
* ② margin: 0px -50px; 可以是左右两边，均超出父容器50px
*/
.div3{
width: 200px;
height: 50px;
border: 5px dotted #0000FF;
margin: 0 auto;
}
.div4{
background-color: red;
height: 100%;
margin: 0px -50px 0px -50px;
text-align: center;
}
/* 第二部分应用，解决div中多个li间距问题
*/
.div5{
width: 170px;
height: 110px;
background-color: #CCCCCC;
}

.div5 ul{
list-style: none;
/*width: 180px;*/
margin-right: -10px;
padding: 0px;
}

.div5 ul li{
width: 50px;
height: 50px;
margin-right: 10px;
margin-bottom: 10px;
background-color: orange;
float: left;
}

/* 3、负边距实现双飞翼布局
* ① 由于main部分写在前面，所以可以保证朱布局的优先加载
*/
.main, .sub, .extra {
float: left;
}
.main {
width: 100%;
background-color: #ccc;
}
.sub {
width: 190px;
background-color: #333;
margin-left: -100%;
}
.extra {
width: 230px;
background-color: #000;
margin-left: -230px;
}
.main-wrap {
margin: 0 230px 0 190px;
}

</style>
</head>

<body>
<div class="div1">
<div class="div2">

</div>
</div>

<div class="div3">
<div class="div4">
12345
</div>
</div>

<div class="div5">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div class="container clearfix">
<div class="main">
<div class="main-wrap">
<p>main</p>
</div>
</div>
<div class="sub">
<p>Sub</p>
</div>
<div class="extra">
<p>Extra</p>
</div>
</div>

</body>
</html>

第六章 html5新增属性

一、h5新增标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body style="margin: 0px; min-width: 300px; background-color: yellow;">



<form action="01_HTML结构之Head.html" method="get" id="form1">
用户名:<input type="text" name="name" list="data1" maxlength="6"/>

<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>

密码:<input type="password" name="pwd" />
<input type="submit" value="提交" />

<input type="submit" value="使用post提交到第二个文件" formaction="02_常见的块级标签.html" formmethod="post" />
</form>

<input type="text" name="test" form="form1" />

<video src="http://v1.jerei.com/jerei_video/banner.mp4" autoplay="autoplay" style="width: 100%;">
您的浏览器不支持 video 标签。
</video>
<div>

</div>
</body>
</html>

二、css3新增属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{
font-size: 10px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
font-size: 0.75rem;
}

.div2{
width: 100px;
height: 100px;
background-color: green;
font-size: 2rem;
}

.div3{
width: 200px;
height: 200px;
border: 20px green dotted;
background-image: url(css/yanhua1.png);
background-size: 100px 100px;
background-repeat: no-repeat;
/*
* background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，
* content-box从文字内容区开始
* background-origin不改变背景图显示区域大小，只决定左上角定位位置。

* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，
* content-box从文字内容区开始显示。不在显示区域内的背景图或背景色，会被裁切不显示
* background-clip不改变定位位置，只是通过裁切显示部分区域。
*/
/*background-origin: content-box;*/
background-clip: content-box;
background-color: blue;
padding: 30px;
}

.div4{
width: 100px;
height: 100px;
overflow: hidden;
/*background-color: gray;*/
}

.div4 img{
width: 100px;
height: 100px;
/* transition属性：定义过渡
* ① 参与过渡的属性，可以单独指定某个CSS属性，也可以all/none
* ② 过渡开始到过渡完成的时间，.3s .5s
* ③ 过渡的样式函数常选 ease
* ④ 过渡开始前的延迟时间，可以省略
*
* transition属性可以同时定义多个过渡效果，用逗号分隔
* 例如：transition: color .3s ease,border .5s linear;
*/
transition: all .3s ease;
}
.div4:hover{
height: 30px;
}
.div4:hover img{
/* transform定义变换：
* 常用变换：translate 平移
* scale 缩放
* rotate 定义旋转
* transform可同时进行多种变换，多种变换之间空格分割：
* 例如：transform: scale(1.8,3.0) translateY(0px) rotate();
* transform-origin：定义变形起点。
* 可选值：left/center/right top/center/bottom
* 或者，直接写X Y轴坐标点。
* 例如：transform: rotate(180deg);
* transform-origin: right bottom;
* 表示，绕左下角，旋转180度。
*/

/*transform: scale(3);
transform-origin: left bottom;*/
transform: scale(1.8,3.0) translateY(0px);
}

.div5{
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: myFrame 5s ease .5s infinite alternate forwards;
/*-webkit-animation-fill-mode: ;*/
}

/*[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to

2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)

Animation-duration 动画持续时间

Animtaion-timing-function动画速度曲线常选ease

Animtaion-delay 动画延迟时间

Animation-iteration-count 播放次数，默认为1，无限次Infinite

Animation-direction 设置对象动画在循环中是否反向运动（ Alternate 逆向播放）

* animation-fill-mode 设置对象动画时间之外的状态（forwards：停留在动画结束状态 backwards:停留在动画开始状态）

>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画动画之间用,分隔
animation:frame1 .3s,frame2 .5s……

@-webkit-keyframes myFrame{
0%{
background-color: red;
}
25%{
background-color: yellow;
}
50%{
background-color: blue;
}
100%{
background-color: green;
}
}

</style>
</head>
<body>
<div class="div5">

</div>

<div style="height: 100px;">
<div class="div4">
<img src="css/cat.jpg" />
</div>
</div>

<div class="div3">
口可口可口可口可口可口可口可口可
</div>

<div class="div1">
这是div1
<div class="div2">
这是div1里面的div2
</div>
</div>
</body>
</html>

本期分享就到这里，敬请下周继续关注！

HTML5周记（二）的更多相关文章

HTML5周记（一）
各位开发者朋友和技术大神大家好!博主刚开始学习html5 ,自本周开始会每周更新技术博客,与大家分享每周所学.鉴于博主水品有限,如发现有问题的地方欢迎大家指正,有更好的意见和建议可在评论下方发表,我会 ...
HTML5（二）音频视频画布
HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览 ...
HTML5(十二)——一文读懂 WebSocket 原理
一.WebSocket 由来 WebSocket 是一个持久化的协议,通过第一次 HTTP Request 建立连接之后,再把通信协议升级成 websocket,保持连接状态,后续的数据交换不需要再重 ...
HTML5系列二（标签元素、FileReader、拖放）
nav元素的使用场合页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...
初学HTML5系列二：HTML5新增的事件属性
Window事件属性: 属性值描述 onafterprint script 文档打印之后运行的脚本. 属性发生于用户设置页面打印并且打印对话框已出现之后. onbeforeprint scri ...
HTML5 微信二维码提示框
这是一个js的小案例,主要效果是显示一个微信二维码的提示框,非常简单实用. 源码如下: JS部分 <script src="js/jquery-1.8.3.min.js"&g ...
玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
HTML5进阶(二)HBuilder实现软件自动升级
HBuilder实现软件自动升级前言移动APP开发好后需要实现软件自动升级功能,经过一番搜索,发现HBuilder具有"App资源在线升级更新"的功能,遂研究之. 经过一番测试 ...
html5（二）
*{ margin:0px; padding:0px;} h1{ font:bold 20px verdana,sans-serif;} h1{ font:bold 14px verdana,sans ...

随机推荐

Prim和Kruskal最小生成树
标题: Prim和Kruskal最小生成树时限: 2000 ms内存限制: 15000 K总时限: 3000 ms描述: 给出一个矩阵,要求以矩阵方式单步输出生成过程.要求先输出Prim生成过程,再 ...
CodeForces 722B
B. Verse Pattern time limit per test:1 second memory limit per test:256 megabytes input:standard inp ...
POJ3254(入门状态压缩dp)
Corn Fields Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13203 Accepted: 6921 Desc ...
JS中常见排序算法详解
本文将详细介绍在JavaScript中算法的用法,配合动图生动形象的让你以最快的方法学习算法的原理以及在需求场景中的用途. 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements Java ...
【java设计模式】之建造者（Builder）模式
我们还是举上一节的例子:生产汽车.上一节我们通过模板方法模式控制汽车跑起来的动作,那么需求是无止境的,现在如果老板又增加了额外的需求:汽车启动.停止.鸣笛引擎声都由客户自己控制,他想要什么顺序就什么顺 ...
C#实现HttpUtility.UrlEncode输出大写字母
在c#中,HttpUtility.UrlEncode("www+mzwu+com")编码结果为www%2bmzwu%2bcom,在和Java开发的平台做对接的时候,对方用用url编 ...
Swift2.0 UITextView 和 UITextFile 的使用
在Swift2.0中,UITextFile 和 UITextView 的使用总体上和在OC中是一样的,今天只是给大家一段代码,然后说UITextView里面的光标位置的问题.先看他们使用的简单的代码 ...
border-radius属性值参数详解
border-radius是CSS3设置圆角的一个属性,其属性值得单位可以使用:em.px.百分比等等.但是,border-radius属性值得参数形式有好多种,那么具体都代表什么意思呢?下面以实际例 ...
HTML中的a标签实现点击下载
通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...
Frogs
Problem Description There are m stones lying on a circle, and n frogs are jumping over them.The ston ...

HTML5周记（二）

HTML5周记（二）的更多相关文章

随机推荐

热门专题