HTML
文章平均质量分 68
liu1992452008
这个作者很懒,什么都没留下…
展开
-
4:--1margin的塌陷现象.html
***源代码 Document /* margin的塌陷现象:在标准文档流中,竖直方向的margin不会叠加,以较大的为准*/ div { width: 300px; height: 900px; border: 1px solid bla原创 2017-07-18 23:02:17 · 202 阅读 · 0 评论 -
4:--2相对定位
Document div { width: 200px; height: 200px; } .box1 { background: yellowgreen; } .box2 {原创 2017-07-18 23:08:53 · 138 阅读 · 0 评论 -
5---(1)语义化标签
2.1语义化标签对于语义化标签我们并不陌生,如表示一个段落、表示一个无序列表 ~ 表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内《》容。传统的做法我们通过添加类名如class="header"、class="footer",使HTML页面具有语义性的,但是不具有通用性(如class="header"也可能被写成cl原创 2017-07-19 10:16:51 · 198 阅读 · 0 评论 -
7:---(3)CSS3中的变形--缩放 scale()
CSS3中的变形--缩放 scale()缩放 scale()函数 让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况:1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)例如:div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5原创 2017-07-24 11:00:05 · 311 阅读 · 0 评论 -
7:---(5) 动画
二:动画动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。1、必要元素:a、通过@keyframes指定动画序列;b、通过百分比将动画序列分割成多个节点;c、在各节点中分别定义各属性d、通过animation将动画应用于相应元素;2、关键属性a、animation-name设置动画序列名称b、animat原创 2017-07-19 09:39:51 · 179 阅读 · 0 评论 -
7:----(4) CSS3中的变形--位移 translate()
translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。translate我们分为三种情况:1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)2、translateX(x)仅水平方向移动(X轴移原创 2017-07-19 09:38:46 · 361 阅读 · 0 评论 -
7:---(1)2D转换 (transform)-旋转
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果 一:2D转换 (transform)CSS3变形--旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的原创 2017-07-19 09:14:30 · 371 阅读 · 0 评论 -
4-14z-index从父现象.html
Document * { margin: 0; padding: 0; } .shayi { width: 200px; height: 200px; background: skyblue;原创 2017-07-18 23:55:47 · 268 阅读 · 0 评论 -
4-3相对定位的用途
Document /* 相对定位的用途:做位置的调整*/ .btn { position: relative; top: 30px; right: 180px; }原创 2017-07-18 23:11:16 · 229 阅读 · 0 评论 -
4-4绝对定位
Document div { width: 200px; height: 200px; } .box1 { background: yellowgreen; } .box2 {原创 2017-07-18 23:15:00 · 133 阅读 · 0 评论 -
4-5绝对定位脱标
Document /*绝对定位:脱标,可以让行内元素设置宽高*/ span { position: absolute; top: 100px; left: 100px; width: 100px; height: 100原创 2017-07-18 23:18:53 · 644 阅读 · 0 评论 -
自学之路
刚入门前端是在一位学长的带领下开始的,花了两节课的时间教授了有关于html和css的基础知识,学会盒式模型的布局,当然每一节课都是有作业的,仿站是一个很好的学习机会,第一节课仿了百度和google的首页,第二节课仿了锤子官网。网上的学习站点w3school,菜鸟教程。之后开始在学长手下接一下小的切图外包,绿城教育首页,surf公司首页,另外自己也接了一个比赛的外包mato众筹,这个时候还停转载 2016-12-21 19:20:11 · 252 阅读 · 0 评论 -
4-12固定定位的用途顶部导航栏
Document * { margin: 0; padding: 0; } .nav { position: fixed; top: 0; left: 0; width: 100%原创 2017-07-18 23:47:51 · 192 阅读 · 0 评论 -
4-11固定定位的用途返回顶部按钮
Document .backtop { position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background-color: gray;原创 2017-07-18 23:44:04 · 234 阅读 · 0 评论 -
4-9绝对定位盒子居中
Document /* 绝对定位的盒子居中:1:left:50% 2:margin-left:-宽度的一半 */ div { width: 600px; height: 60px; position: absolute; left原创 2017-07-18 23:35:39 · 167 阅读 · 0 评论 -
4-8绝对定位儿子无视父亲的padding
Document * { margin: 0; padding: 0; } div { width: 200px; height: 200px; border: 10px solid red;原创 2017-07-18 23:31:51 · 567 阅读 · 0 评论 -
4-7绝对定位的参考点的就近原则
Document /*绝对定位的盒子参考点:就近原则,任何定位都可以作为参考*/ * { margin: 0; padding: 0; } .box1 { width: 400px; heigh原创 2017-07-18 23:27:13 · 337 阅读 · 0 评论 -
4-6绝对定位以盒子为参考点
Document * { margin: 0; padding: 0; } div { width: 400px; height: 400px; border: 10px solid red;原创 2017-07-18 23:21:02 · 490 阅读 · 0 评论 -
4-13z-index值大的压住小的
Document * { margin: 0; padding: 0; } .box1 { width: 200px; height: 200px; background: yellowgreen;原创 2017-07-18 23:53:21 · 171 阅读 · 0 评论