---恢复内容开始---
这是我学习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整数(占 ...
随机推荐
-
android-Service和Thread的区别
1.服务不是单一的进程.服务没有自己的进程,应用程序可以不同,服务运行在相同的进程中. 2.服务不是线程.可以在线程中工作. 一.在应用中,如果是长时间的在后台运行,而且不需要交互的情况下,使用服务. ...
-
U3D C#脚本的生命周期
MonoBehaviour是每个脚本的基类. 每个Javascript脚本自动继承MonoBehaviour,使用C#或Boo时,需要显式继承MonoBehaviour. 一开始实例化,直到结束实例被 ...
-
HTTP缓存缓存机制
http协议无状态,所以缓存设定从两方面考虑.客户端浏览器和服务器端. 浏览器端实现过期机制. 服务器端实现验证机制. 缓存机制. 为了减轻服务器负担,也减少网络传输数量.http1.0定义了Expi ...
-
Spring Boot 整合 rabbitmq
一.消息中间件的应用场景 异步处理 场景:用户注册,信息写入数据库后,需要给用户发送注册成功的邮件,再发送注册成功的邮件. 1.同步调用:注册成功后,顺序执行发送邮件方法,发送短信方法,最后响应用户 ...
-
python config.ini的应用
config.ini文件的结构是以下这样的:结构是"[ ]"之下是一个section,一部分一部分的结构.以下有三个section,分别为section0,section1,sec ...
-
细说log4j之概述
log4j官网:https://logging.apache.org/ log4j目前存在2个版本:log4j 1.x 和log4j 2.x,目前官方主推2.x版本(log4j 1.x已于2015.0 ...
-
Caffeine缓存
在本文中,我们来看看 Caffeine — 一个高性能的 Java 缓存库. 缓存和 Map 之间的一个根本区别在于缓存可以回收存储的 item. 回收策略为在指定时间删除哪些对象.此策略直接影响缓存 ...
-
【读书笔记】iOS-分类与协议
分类与协议是Object-C特有概念,分类(Category)可以认为是一种继承性的扩展,而协议(Protocol)可以理解为Java中的Interface(接口)或者C++的纯虚类. 参考资料:&l ...
-
UBUNTU 安装教程
玩过linux,只是博主觉得现在的很多服务器都是linux系统的,而自己属于那种前端也搞,后台也搞,对框架搭建也感兴趣,但是很多生产上的框架和工具都是安装在服务器上的,而且有不少大公司都要求熟悉在li ...
-
java.util.concurrent.RejectedExecutionException 线程池饱和
java.util.concurrent.RejectedExecutionException at java.util.concurrent.ThreadPoolExecutor$AbortPoli ...