base.css

本文深入探讨了CSS样式的布局技巧,包括容器、浮动、响应式设计等关键概念,旨在帮助前端开发者掌握高效、灵活的页面布局方法。
.container {
	margin-right: auto;
	margin-left: auto
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}
.clearfix,
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after{
  clear: both;
}
.clearfix,
.container,
.container-fluid,
.row{*zoom:1;}
.selnone {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.oz{
	overflow: auto;
	zoom: 1;
}
.container-fluid {}

.disB {
	display: block;
}

.disIb {
	display: inline-block;
}

.pull-left {
	float: left!important
}

.pull-right {
	float: right!important
}

.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto
}

.text-center {
	text-align: center
}

.list-unstyled {
	padding-left: 0;
	list-style: none
}


/*width start*/

.w_31 {
	width: 31px;
}

.w_34 {
	width: 34px;
}

.w_157 {
	width: 157px;
}


/*width end*/


/*height start*/

.h_28 {
	height: 28px;
	margin-right: 5px;
}

.h_35 {
	height: 35px;
}


/*height end*/

.otows {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	white-space: nowrap;
}


/*a start*/

a:link {
	/* 未访问的链接 */
	color: inherit;
	text-decoration: none;
}

a:visited {
	/* 已访问的链接 */
	color:inherit
}

a:hover {
	/* 鼠标移动到链接上 */
	color: inherit;
}

a:active {
	/* 选定的链接,即鼠标按下去的时候不松开显示的状态 */
	color: inherit
}

.list-inline {
	list-style: none
}

.list-inline>li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px
}

.color1 {
	color: #000000;
}

.color2 {
	color: #AB2C23;
}

.color3 {
	color: #879CAD;
}

.color4 {
	color: #888888;
}

.color5 {
	color: #FFFFFF;
}

.bgc1 {
	background-color: #FFFFFF;
}

.hide{
	display: none!important;
}
/*a end*/


/*大屏幕 start*/

@media (min-width:1200px) {
	.container {
		width: 1200px
	}
	.show{
		display: block!important;
	}
	/*栅格系统 start*/
	.col-pc_100 {
		width: 100%;
		float: left;
	}
	.col-pc_52d7 {
		width: 52.703%;
		float: left;
	}
	.col-pc_47d3 {
		width: 47.298%;
		float: left;
	}
	.col-pc_39d1 {
		width: 39.19%;
		float: left;
	}
	.col-pc_60d9 {
		width: 60.812%;
		float: left;
	}
	.col-pc_50 {
		width: 50%;
		float: left;
	}
	.col-pc_33 {
		width: 33.33333333%;
		float: left;
	}
	.col-pc_20 {
		width: 20%;
		float: left;
	}
	.col-pc_80 {
		width: 80%;
		float: left;
	}
	.col-pc_65d {
		float: left;
		width: 70.4%;
	}
	.col-pc_29d6 {
		width: 29.6%;
		float: left;
	}
	.col-pc_56 {
		width: 56%;
		float: left;
	}
	.col-pc_68 {
		width: 68%;
		float: left;
	}
	.col-pc_70 {
		width: 70%;
		float: left;
	}
	.col-pc_30 {
		width: 30%;
		float: left;
	}
	.col-pc_39 {
		width: 39%;
		float: left;
	}
	.col-pc_32 {
		width: 32%;
		float: left;
	}
	.col-pc_72 {
		width: 72%;
		float: left;
	}
	.col-pc_28 {
		width: 28%;
		float: left;
	}
	.col-pc_25 {
		width: 25%;
		float: left;
	}
	.col-pc_54d6 {
		width: 54.6%;
		float: left;
	}
	.col-pc_45d4 {
		width: 45.4%;
		float: left;
	}
	.col-pc_52d3 {
		width: 52.3%;
		float: left;
	}
	.col-pc_47d7 {
		width: 47.7%;
		float: left;
	}
	.col-pc_66 {
		width: 66%;
		float: left;
	}
	.col-pc_34 {
		width: 34%;
		float: left;
	}
	.col-pc_1c6 {
		width: 16.66666666666667%;
		float: left;
	}
	/*栅格系统 end*/
	.hidePc {
		display: none!important;
	}
}


/*大屏幕 end*/


/*小屏幕 start*/

@media (max-width:1200px) {
	.container {
		padding-right: 10px;
		padding-left: 10px;
	}
	.show{
		display: block!important;
	}
	/*栅格系统 start*/
	.col-pcN_100 {
		width: 100%;
	}
	.col-pcN_33 {
		width: 33.33333333333333333333333333333%;
		float: left;
	}
	.col-pcN_20 {
		width: 20%;
		float: left;
	}
	.col-pcN_25 {
		width: 25%;
		float: left;
	}
	.col-pcN_50 {
		width: 50%;
		float: left;
	}
	.col-pcN_1c6 {
		width: 16.66666666666667%;
		float: left;
	}
	/*栅格系统 end*/
	.hideNotPc {
		display: none!important;
	}
	.hideNotPcs {
		display: none
	}
}


/*小屏幕 end*/

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值