Mar 29

frontify页面的实现

文章目录

1. CSS position 属性
2. 盒子模型
3. 伪元素和伪类
4. 一点CSS
5. 一点JS

这是我动手实现的第一个页面Frontify，前后花了一个星期的时间，目前还没有考虑响应式页面。以下是我实现过程中遇到的一些问题，及我的一些思考总结。

CSS `position` 属性

static定位

默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed定位

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
整个页面的header就是fixed定位的.
relative定位

生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。
这里就是通过相对定位设定right，left使元素相对与其正常位置进行偏移，来实现这一行图标的左右移动哒~
相对定位对象不可层叠，但将依据left(定位元素左外边距边界与其包含块左边界之间的偏移)，right，top，bottom等属性在正常文档流中偏移位置，可能会遮挡别的元素，自己在文档流中的位置依然保持。
absolute定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。对象是从文档流中脱离出来的，其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。

通常使用是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
绝对定位元素一定是相对于非static定位的祖先元素定位的~而直接使用position:absolute绝对定位，将会以<body>元素为参考进行绝对定位。
float布局与absolute定位

float属性定义元素向哪个方向浮动，在css中任何元素都可以浮动，默认生成一个块级框。浮在文档流表面并没有离开文档流（像是浮萍~），所以以往经常会应用与图像，使文本围绕在图像周围。而且浮动还是可以清除的clear：both;；定位是脱离文档流的~绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿。

盒子模型

盒子模型的示意图为：

伪元素和伪类

::before,::after两种伪元素

实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母::first-letter）、第一行(::first-line)，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。它们将在外部可见，但你不会在文档的源文件（网页源代码）中找到它们，因为它们实际上是虚假的元素。
相关代码如下所示：

/*网页中的按钮都是采用添加伪元素来实现hover时的效果的*/
.btn-signup {
    padding: 13px 25px;
    vertical-align: middle;
    position: relative;
    margin-right: 20px;
}

.btn-signup:before {
    content: '';
    position: absolute; /*在按钮的前面加一个伪元素，不影响文本流，绝对定位，相对于`.btn-signup`这个父元素定位。*/
    border: white solid 3px;
    border-radius: 40px;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.btn-signup:hover:before, .btn-signup:focus:before, .btn-signup:active:before {
    opacity: 0.4; /*不透明级别*/
}

实现的效果如图：

btn效果图

伪元素用于清除浮动

一个元素包含全部都是浮动元素的时候，它可能会出现高度折叠，即元素的上下底边重合，和高度为0效果一样。JQuery框架中ul无序列表里的每一个li都是默认浮动的，所以会出现height为0的情况。
:after为元素里面用到了content属性，这样式的意思是在ul元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除ul标签的高度折叠，并不让它显示出来,所以content:'';。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。

解释一个现象： 浮动溢出：
在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动(float为left或者right)的元素，在这种情况下，容器的高度不能自动的伸长以适应内容的高度，使得内容溢出到容器外面而影响到页面布局的情况。
1
2
3
4
5
.page-team ul:after{
content: '';
display: block;
clear: both;
}
伪类

配合选择器使用，过滤元素的某种状态，像是(:link,:visited,:hover,:actived等),当元素达到某一种状态时，它将会获得一个伪类的样式；当状态改变，它又会失去这一样式。要注意的是：

同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。

一点CSS

CSS选择器
- 相邻兄弟选择器：具有相同的父元素，如–要增加紧接在h1元素后出现的段落的上边距h1 + p{ margin-top:50px; }
- 同时包含多个类的类选择器：类之间无空格，表示并列关系，选择同时包含这些类名的元素.class1.class2{ cursor:pointer; }
- 父元素的第N个子元素选择器：如–选取其父元素的第2个子元素，这个子元素还得是段落元素p:nth-child(2){ opacity:0; }
CSS属性
- pointer-events: none;使用pointer-events来阻止元素成为鼠标事件目标—-设置或检索在何时成为属性事件的target；
- <a>标签默认的display属性是inline，这时设置width、height是无效的，使用display:block;可以设置宽高，元素自动换行，使用
  display:inline-block;可以设置宽高，元素不换行。在没有对<a>设置高度时，应用padding是相对文字而言的，定高之后，就是对
  这个链接块而言；
- border-radius: 40px;设置边框圆角，弧度由水平直径和垂直直径决定，四个角(缺省的规则：左上=右下，右上=左下)；
- transform: rotate(21deg);将图片倾斜，该属性还可以用于对元素进行旋转、缩放、移动或倾斜；
- z-index:1;设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素之前 只对定位元素有效
- tabIndex:0;使用键盘来定位html元素时，有三个值0、-1、X，当tabIndex:0;时，该元素可以用tab键获取焦点；tabIndex:-1;时，
  tab键取不到焦点，但可以通过JS获取，这样就便于我们通过JS设置上下键的响应事件来focus；tabIndex:X;X是任意大于0的整数，可以用
  tab键获取焦点，且优先级>tabIndex:0;。不过大于0时，数字越小，越先定位到
CSS中样式覆盖顺序优先级

一点JS

setInterval(code,millisec);

按照指定的周期来调用函数或者计算表达式（毫秒计），返回一个可以传递给clearInterval()来取消对code的周期性执行的值~而setTimeout() 方法也可以在指定的毫秒数后调用函数或计算表达式，但code只执行一次。在JS中无论是setInterval还是setTimeout在使用函数名作为调用句柄时都不能带有参数。
解决方法如下：

// 常用形式::缺点是参数不能周期性的改变
setInterval("foo()",10000);

//匿名函数包装::将要执行的代码包装到一个匿名函数里，就可以把变量id传进去，周期性的改变捏~
window.setInterval(function(){
  foo(id);
},10000);

fadeIn()、fadeOut()

使用淡入淡出效果来显示备选元素。$(selector).fadeIn(speed,callback)，callback是指在fadeIn()函数执行完之后要执行的函数。由于许多JQuery函数涉及动画，而JavaScript语句(指令)是按照次序逐一执行的，可能动画还没完全执行完毕，后面的语句就执行了，如果有希望在这个动画100%完成之后才效执行的语句，就可以以参数形式添加到callback函数中。以免可能会产生错误或者页面冲突，因为动画还没有完成。
1
2
3
4
// 在.tweet2完全淡出之后.tweet3再开始淡入。
$(".tweet2").fadeOut(500,function(){
$(".tweet3").fadeIn(500);
});

引用外部JS文件

公共的JS文件一定要写在本地JS文件之前，不然会存在依赖的问题！！！

1
2
3

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--JQuery类库-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!--BootStrap框架-->
<script src="frontify.js" type="text/javascript"></script><!--本地JS文件-->

代码详情： frontify

CSS position 属性

盒子模型

伪元素和伪类

一点CSS

一点JS

CSS `position` 属性