Online web

学习CSS布局
Web前端实验室

http://www.jianshu.com/p/56d8672ccb0f

详解CSS position属性

详解CSS position属性
position四种类型

1. static
    static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示
2. relative
    relative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。
3. absolute
    元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。
4. fixed
    fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移

详解CSS float属性

详解CSS float属性

float特性:

  1. 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕
  2. 浮动元素在浮动的时候，其margin不会超过包含块的padding
  3. 有多个浮动元素，后面的浮动元素的margin不会超过前面浮动元素的margin
  4. 两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻
  5. 如果包含块宽度不够，后面的浮动元素将会向下浮动，其顶端是前面浮动元素的底端
  6. 浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个浮动元素的底端
  7. 浮动元素会尽可能地向顶端对齐、向左或向右对齐

float特殊情况:

  1. 浮动元素的延伸性

清除浮动:

为什么要清除浮动:

我们知道，一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

如何清除浮动:

  1. 增加额外的div
    这是最简单直接的方法，哪里有浮动元素，就在其父级元素的内容中增加一个（作为最后一个子元素）
    优点：简单直接，初学者常常使用的方法，也易于理解
    缺点：增加额外的无意义标签，不利于语义化，每次清除都要添加额外的空标签，造成浪费
  2. 父级元素添加overflow:hidden
    优点：代码量少，没有额外的标签
    缺点：如果子元素超出父元素的范围，会造成超出的部分被隐藏
  3. after伪元素(推荐使用这种方法)
    优点：没有额外标签，综合起来算是比较好的方法
    缺点：稍显复杂，但是理解其原理后也挺简单的
    after表示子元素的后面，通过它可以设置一个具有clear的元素，然后将其隐藏

float的应用

1. 文字环绕效果
    float最初的应用就是文字环绕效果，这对图文并茂的文章很有用。
2. 横向菜单排列

3. 布局

详解CSS dispaly属性

去除inline-block元素间间距的N种方法

屏幕尺寸

戴尔台式：1536*482；
从网易与淘宝的font-size思考前端设计稿与工作流
pageResponse移动端响应式框架

百分比布局

rem布局

不足： rem只能在某个局部范围内适应，在某些分辨率下效果不好

transfer：scale布局

Flex布局

Flex布局部分属性困惑解析

图片float后怎样在DIV中垂直居中

图片float后怎样在DIV中垂直居中?
大小不固定的图片和多行文字的垂直水平居中

border-bottom: 3px solid #FD904B !important;

收起/展开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var zk = document.getElementById("zk");
var iszk = false;
zk.onclick = function () {
    if (iszk) {
        document.getElementById("banner2").style.padding = "20px 0";
        zk.innerHTML = '<p style="text-indent: 2em;margin-top: 10px">中国文化馆年会是全国性，最大规模文化馆行业盛会，迄今已成功举办四届，具有较高的行业知名度与社会影响力．文化艺术博览会（以下．．．<span style="color: dodgerblue;">展开全文</span></p>';
        iszk = false;
    } else {
        document.getElementById("banner2").style.padding = "0 0 20px 0";
        zk.innerHTML = '<p style="text-indent: 2em;margin-top: 10px">中国文化馆年会是全国性、最大规模文化馆行业盛会，迄今，已成功举办四届，具有较高的行业知名度与社会影响力。文化艺术博览会（以下简称“博览会”）是年会的重要版块，汇聚了数百家文化馆行业相关企、事业单位，集合展示行业内顶尖文化、科技与旅游供应商以及优秀文化团体的优质产品与服务，为年会举办地广大市民和行业参会代表奉献一场文化交流盛宴。</p><div class="_underline"></div><p>展会名称：2017年中国文化馆年会?文化艺术博览会</p><p>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：2017年11月29日-12月1日（展期3天）</p><p>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：马鞍山市会展中心</p><p>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模：室内外展览面积约30000平方米，拥有3个展厅，面积11000平方米，分四大展区。</p><div class="_underline"></div><p>第一展区：互联网+：助力文化馆行业供给侧改革</p><p>第二展区：流光溢彩：优秀传统文化的创新与创造</p><p>第三展区：文化旅游产品交易</p><p>第四展区：李白国际户外旅游文化节暨户外运动商品展</p><div><p style="color: dodgerblue;text-align: right">收起</p></div><br>';
        iszk = true;
    }
}
//寻宝
function findGold() {
    window.location.href = "?r=wbh/findgold";
}

自定义按钮

1
2
3
4
5
6
.custombtn {
    padding: 10px;
    border-radius: 5px;
    background-color: #6A9FFD;
    color: white !important;
}

图文框下划线

1
2
3
4
5
.underline {
    padding: 10px 0;
    margin: 0 5px;
    border-bottom: 1px solid #eeeeee;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="underline">
    <a href="?r=site/cominfo&amp;id=5" class="cusBtn">
    <div class="row">
        <div class="col-xs-3" align="center">
                                            <img src="company/5.png" width="100%" style="max-height: 50px">
                                        </div>
        <div class="col-xs-9">
            <h4 style="color: #AE923F;">华夏数图（北京）科技发展有限公司</h4>
            <p style="margin:15px 0;">华夏数图是一家以弘扬中华文化、传播华夏文明为宗旨的文化创新企...</p>
        </div>
    </div>
    </a>
</div>

下拉三角形

1
2
3
4
5
6
7
8
9
<div class="triangle"></div>
.triangle {
    margin: 1em auto;
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.6em solid #222;
}
1
2
3
4
5
6
7
8
.researchFormTop .triangle {
    margin: 1em auto;
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.6em solid #222;
}

微信分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
wx.config({
    debug: false,
    appId: 'wxe0e045abe94b1536', // 必填，公众号的唯一标识
    timestamp: '1512444969', // 必填，生成签名的时间戳
    nonceStr: '53ee6134-5e1e-495d-b2d4-edac4fbed2e2', // 必填，生成签名的随机串
    signature: "ca62c5cdcc0b88b62c9b52783d4dcf4aad141ad7",
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
	console.log("微信验证成功");
	wx.hideMenuItems({
	    menuList: ['menuItem:copyUrl','menuItem:originPage','menuItem:openWithQQBrowser','menuItem:openWithSafari','menuItem:share:qq','menuItem:share:weiboApp','menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
	});
	
	//朋友圈
	var title="中国文化网络电视直播集锦";
	var link=location.href;
	if(location.href.indexOf("sub")==-1){
		link+="&sub=0";
	}
	var imgUrl=location.protocol+location.host+"/liveimage/zgwhwlds.jpg"
	var desc="点击此处，开启精彩，第一时间观看全国群众文化活动高清直播。";
wx.onMenuShareTimeline({
    title: title, // 分享标题
    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    success: function () { 
        layer_show("分享成功");
    },
    cancel: function () { 
    },fail:function(){
    	layer_show("分享失败");
    }
});
//分享给朋友
 wx.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
    	layer_show("分享成功");
    },
    cancel: function () { 
    },fail:function(){
    	layer_show("分享失败");
    }
});
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("微信验证失败");
});