bootstrap

前端

　　这里主要记录前端页面的问题。

　　要写个官网，好吧，此处简单记录下。

简单css

1、透明：rgba(255, 135, 36, 0.9)
2、垂直居中：

1
2
3
4
5
.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3、背景图片：

1
2
3
4
5
6
7
8
.bg-img {
  background: url(../images/banner-about.png);
  background-position: center 0;  /*屏小，背景居中*/
  background-repeat: no-repeat; /*背景图像将仅显示一次，不重复*/
  background-attachment: fixed; /*设置固定的背景图像*/
  background-size: cover;
  -webkit-background-size: cover;
}

4、公司发展历程（台阶上坡式）：使用bootstrap的列偏移：http://v3.bootcss.com/css/

滚动翻页

整个界面分N屏，垂直滚动。示例：http://www.swiper.com.cn/demo/090-vertical.html ， 使用的是swiper4：http://www.swiper.com.cn/

1
2
3
4
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  mousewheel: true,
})

返回顶部

1
2
3
4
5
6
7
<!-- 第一种 -->
<a href="javascript:void(0);" onclick="slideToTop();"><i class="fa fa-arrow-up"></i></a>
function slideToTop() {
    mySwiper.slideTo(0, 1000, false); //切换到第一个slide，速度为1秒
}
<!-- 第二种 -->
<a href="javascript:scroll(0,0)"><i class="fa fa-arrow-up"></i></a>

图片动态

1、鼠标移至图片上，下方展开内容。使用slideUp()，slideDown();
2、图片底部透明遮罩文字标题效果：http://www.qdxw.net/xwhtml/559.html

背景图满屏

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
<html>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
<title>背景图宽度高度满屏</title>
<style>
.index_bgimg{
    width: 100%;
    height: 100%;
    /*height: 1079px;*/
    background: url(../img/bg_img.png);
    background-position: center 0;  /*屏小，背景居中*/
    background-repeat: no-repeat; /*背景图像将仅显示一次，不重复*/
    background-attachment: fixed; /*设置固定的背景图像*/
    background-size: cover;
    -webkit-background-size: cover;
}
</style>
<body>  
	<!--
		<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">  
			<img src="1.png" width="100%" height="100%"/>  
		</div>
	-->  
	<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
		<div class="index_bgimg" width="100%" height="100%">
	</div>
</div>  	
</body>  
</html>

滚动条样式

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
*{
    scrollbar-face-color:rgba(0,0,0,0.2); !*面子*!
    scrollbar-arrow-color:rgba(0,0,0,0.2); !*箭头*!
    scrollbar-3dlight-color:rgba(0,0,0,0.2); !*最外左*!
    scrollbar-highlight-color:rgba(0,0,0,0.2); !*左二*!
    scrollbar-shadow-color:rgba(0,0,0,0.2); !*右二*!
    scrollbar-darkshadow-color:rgba(0,0,0,0.2); !*右一*!
    scrollbar-track-color:rgba(0,0,0,0.2); !*滑道*!
}
!*滚动条整体*!
::-webkit-scrollbar{
    width: 4px;     !*高宽分别对应横竖滚动条的尺寸*!
    height: 4px;
}
!*滚动条按钮*!
::-webkit-scrollbar-button {
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-track-piece{
    background-color:rgba(0,0,0,0.2);  !*滑道*!
    -webkit-border-radius:4px; !*滑道圆角宽度*!
}
::-webkit-scrollbar-thumb{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
    !*background-color:#F3F3F3; !*滑动条表面*!*!
    !*border:solid 1px #C0C0C0; !*滑动条边框*!*!
    !*border-radius:4px;  !*滑动条圆角宽度*!*!
}
!*横竖滚动条交角*!
::-webkit-scrollbar-corner {
    background-color: rgba(0,0,0,0.2);
}
!*横竖滚动条交角图案*!
::-webkit-resizer {
    !*background-image: url(/public/img/resizer-inactive.png);*!
    background-repeat: no-repeat;
    background-position: bottom right;
}
!*鼠标滑过滑动条*!
::-webkit-scrollbar-thumb:hover{
    background-color:rgba(0,0,0,0.2);
}

本文标题:bootstrap

文章作者:hfy

发布时间:2017-11-26, 20:37:11

最后更新:2018-01-30, 10:59:05

原始链接:https://haofangyuan.github.io/2017/11/26/bootstrap/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 简单css
  2. 2. 滚动翻页
  3. 3. 返回顶部
  4. 4. 图片动态
  5. 5. 背景图满屏
  6. 6. 滚动条样式
|