学习HTML5的第二周
---恢复内容开始---
这是我学习H5的第二周,在本周,我独立完成了一个网站的首页和一个二级页,虽然在做网页的时候我遇到了许多问题,但我自己想办法解决了其中的大部分,只留下了一小部分没有头绪的问题等待解决。接下来我将记录本周的主要学习内容。
周一,我们学习了css的盒子模型,我们主要用的有两种,第一个是content-box,也叫标准盒模型,给它设置宽高的时候只包括content;
第二个是border-box,它叫做怪异盒子,它的宽高包括padding,border和content。在实际操作中我比较常用这一种盒子模型来操作,调整方式:box-sizeing: ;。
接下来我们学习的是四个属性,包括:margin 外边距,border 边框,padding 内边距,
它们的属性值:
一。margin属性值最多有四个
1.只写一个值:四个方向margin均为这个值.
2.写两个值:上,右两个方向,下默认等于上,左默认等于右.
3.写三个数:上,右,下三个方向,左默认等于右.
4.写四个数:上右下左四个方向
5.写三个值加auto:控件居右显示
margin: 10px 10px 10px auto;居父容器右侧10px。
6.margin:0 auto;设置控件在父容器中水平居中。
二。border有三个属性值:宽度 width 样式style 颜色color
原则上三个都要指定。(color不写时默认为黑色。)
三。padding使用方式同margin1-4.
注意:使用padding会将整个控件撑大,使用时需注意控件可视区域的实际大小.(content-box中)
之后我们又学了几个新的属性:
[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个值均相等。
[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
接下来就是很重要的定位属性
[绝对定位 absolute]
1.使用position: absolute;设置元素为绝对定位元素。
2.绝对定位的定位机制:
(1).相对于第一个非static(用了relative,absolute,fixed)
的祖先元素来定位。
(2).如果所有祖先元素均无定位,则相对与浏览器左上角定位。
(3).使用absolute定位会使元素从文档流中被完全删除。原有空间被释放不再占有。
[固定定位 fixed]
1.position: fixed;是一种特殊的绝对定位,父容器无法使用relative
锁定。
2.定位机制:永远相对于浏览器定位。
[z-index 属性]
1.作用设置定位元素的z轴层叠顺序。
2.使用要求:
(1).必须是定位元素才可以使用。absolute,relative,fixed。
(2).使用z-index需考虑父容器的约束,如果父容器的z-index为auto则
子元素的z-index不受其约束,若父容器z-index进行了设置,则子容器
的层叠以父容器为准。(同一父容器的不同子元素仍可用z-index调节)
3.z-index:auto和z-index:0的异同
(1).auto为默认值,与0处于同一平面。
(2).z-index:auto不会约束子元素的z-index层次,而z-index
会约束子元素必须与父元素在同一平面。
4.z-index处于同一平面的定位元素的层叠关系:后来者居上。
clip: rect(top,right,bottom,left);
用于裁剪元素。
绝对定位的一些应用方式:
绝对定位元素的水平居中方式 垂直居中将left改为top,margin-left改为margin-top。
一.实现块级元素在块级元素中的居中方式。需设置子容器为定位元素。
1.left: 50%;
2.设置margin-left为负width的一半。
margin-left: -50px;
二.使用负边距可以扩大元素宽度。使用这个方式不能指定元素宽度。
1.不指定子容器宽度,指定宽度或填充内容。
2.margin:0px -50px;使子元素左右超出父容器50px。
3.双飞翼布局(了解)。可保证主布局的优先加载。
三。第二部分应用:解决div中多个li间距问题。(ul中加负margin)。
display属性设置元素的级别
属性值
none:隐藏元素,元素所占空间释放。
block 把元素变为块级元素。
inline-block:设为内联块级元素(本身是行级元素但是有块级元素的各种属性
如宽,高,text-align等)。
linline:设为内联元素(行级元素)。
[相对定位 relative]
1.使用position: relative;设置元素为相对定位的元素;
2.定位机制:
(1).相对于自己原来文档流中的位置进行定位,
当不指定top等定位值时不会改变元素位置。
(2).相对定位元素仍会占据原有文档流中的位置,而不会释放。
3.使用top,left,right,bottom调整位置,当left和right
同时存在left生效,top,bottom同时存在,top生效。
CSS3长度单位
em:相对长度单位。相对于当前对象内文本的字体尺寸。
rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 。
px:像素
%:
background-origin:(背景图从那开始铺满,不改变背景图大小。)
padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
background-clip:(背景图和背景色的显示区域,会改变背景图背景色大小。)
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果.
transform:定义变换
常用变换:translate() 平移
rotate() 旋转
scale() 缩放
可同时进行多个变换,变换之间用空格分割。
例:transform:scale(1.5,1.5) translatey(0px) rotate();
transform-origin:定义变形起点。
可选值:left、center、right top、center、bottom。
或者直接写xy坐标
例:transform-origin:right bottom;
transition:属性定义过渡:
1.参与过渡的属性:可单独指定某个css属性,也可以用all、none。
2.过渡开始到结束的时间 .3s .5s等
3.过渡样式函数:常选ease
4.过渡开始前的延迟时间,可省略。
transition可以同时定义多个属性的过渡效果,用逗号分隔
必须加在选择器上不能加在伪类选择器上。
[css3动画的使用]
1.声明一个动画(关键帧)
keyframes name{
from{}
to{}
2.在css选择器中使用动画Animation属性调用声明好的关键帧。
Animation属性:
name: 检索或设置对象所应用的动画名称
duration: 检索或设置对象动画的持续时间
timing-function: 检索或设置对象动画的过渡类型
delay: 检索或设置对象动画延迟的时间
iteration-count: 检索或设置对象动画的循环次数
direction: 检索或设置对象动画在循环中是否反向运动
(normal: 正常方向
reverse: 反方向运行
alternate: 动画先正常运行再反方向运行,并持续交替运行)
fill-mode: 检索或设置对象动画时间之外的状态
(forward停留在结束状态,backword停留在开始状态)
动画名称和动画持续时间必须设置,Animation可以设置多个动画,之间用逗号分隔。
【注意事项】
1.每个阶段用百分比表示从0%到100%
2.起止必须设置即0%和100%或from和to
最后是html的新增属性:
【HTML5表单属性】
1.form:指向特定表单id,实现input无需放于form中,即可通过form提交。
2.formaction/formmethod:设置某个submit按钮提交到指定的action地址,
使用指定的method方法,会覆盖form中的action和method方法。
3.placeholder:自动提示
4.autofocus:自动获得焦点
5.autocomplete:自动输入完成
6.list:为input绑定一组指定的datalist提示信息写法:
<input type="text" name="" value="" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>1234</option>
<option>1234</option>
<option>1234</option>
</datalist>
datalist具有和autocomplete类似的自动筛选完成功能。
这是我做的首页和二级页:
学习HTML5的第二周的更多相关文章
- 红帽学习笔记[RHCSA] 第二周
目录 红帽学习笔记[RHCSA]第二周 环境 第七课[网络配置相关] 在Vmware中添加网卡 将网卡添加到虚拟机上 关于网卡命名规则 配置网络 网络配置命令总结 更改hostname 关于SSH的一 ...
- Python学习之旅--第二周--元组、字符串、运算、字典
一.元组 另一种有序列表叫元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出同学的名字: # Author:Tim Gu tuple = (" ...
- 201521123103 《Java学习笔记》第二周学习笔记
一.本周学习总结 1.学习了数据类型的使用:整数类型.浮点类型. boolean类型.数组等以及类型的转换,最重要的是学会了import引用包: 2.学习了string类对象的拼接.字符串池.枚举类型 ...
- Python 学习日记(第二周)
从这周开始我就正式学习Python 语言了.以后每周都会有一篇有关于学习Python的见闻与大家分享! Python的安装 学习的第一步首先要有一个运行的环境.所以接下来介绍一下安装的步骤. 通过Py ...
- 201521123047 《Java学习笔记》第二周学习总结
1. 本周学习总结 -知道并了解到浮点数的误差关系,懂得运java.math.BigDecimal来进行浮点数的精确计算 -对于"="与"=="的区分 -字符串 ...
- Python学习之旅--第二周--python基础
一.什么是pyc? 1.Python是解释性语言,那么.pyc是什么文件? 2.解释性语言和编译型语言区别: 计算机是不能够识别高级语言的,所以当我们运行一个高级别语言程序时,就需要一个&quo ...
- 从零开始,SpreadJS 新人学习笔记(第二周)
Hello,大家好,我是Fiona.经过上周的学习,我已经初步了解了SpreadJS的目录结构,以及如何创建Spread项目到我的工程目录中.>>还不知如何开始学习SpreadJS的同学, ...
- cousera 吴恩达 深度学习 第一课 第二周 作业 过拟合的表现
上图是课上的编程作业运行10000次迭代后,输出每一百次迭代 训练准确度和测试准确度的走势图,可以看到在600代左右测试准确度为最大的,74%左右, 然后掉到70%左右,再掉到68%左右,然后升到70 ...
- 20155304田宜楠 2006-2007-2 《Java程序设计》第二周学习总结
20155304田宜楠 2006-2007-2 <Java程序设计>第二周学习总结 教材学习内容总结 一.类型与变量 1.类型 整数: 可细分为为short整数(占2字节),int整数(占 ...
随机推荐
- 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)
这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...
- 球谐光照(Spherical Harmonics Lighting)及其应用-应用篇
上一篇介绍了球谐函数的一些原理和性质,本篇主要介绍如何实现球谐光照,将这种光照应用到实际的场景中去. 我们知道,球谐光照实际上就是将周围的环境光采样成几个系数,然后渲染的时候用这几个系数来对光照进行还 ...
- Swift_字符串详解(String)
Swift_字符串详解(String) 类型别名 //类型别名 fileprivate func testTypeAliases() { let index = String.Index.self p ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- ORM 实现数据库表的增删改查
这次通过反射技术来实现一下数据库表的增删改查对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping) 注:引用时约束了以下几点: 数据 ...
- asp.net 将ppt,word转化为pdf实现在线浏览详解
1.首先添加应用:COM里面的Micsosoft Office 12.0 Object Library(VS2013基本都有14.0或者15.0 有的话一样的添加,因为我的没有只有12.0) : 2. ...
- 初识Windous程序
文本框Label MaxLength 设置输入文本最大字符 Multiline 表示是否输入多行文本 passwodechar 指示在文本框显示的字符,而不是实际内容 ReadeOnly 表示是否可 ...
- Prerender.io - 预渲染架构,提高AngularJS SEO
近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多 ...
- 利用instsrv和srvany来手动安装服务
Windows提供了两个小工具instsrv.exe和srvany.exe来把任何应用包装成windows服务.顾名思义instsrv(install service)是用来安装服务的,而srvany ...
- MySQL分区表的局限和限制
禁止构建 分区表达式不支持以下几种构建: 存储过程,存储函数,UDFS或者插件 声明变量或者用户变量 可以参考分区不支持的SQL函数 算术和逻辑运算符 分区表达式支持+,-,*算术运算,但是不支持DI ...