微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS移动端学习第六周

目录

背景渐变

bootstrap框架

container类

container-fluid类

栅格系统


背景渐变

background:-webkit-linear-gradient(方向,颜色1,颜色2)

要先添加浏览器私有前缀,否则不能显现出来

而电脑端的浏览器前缀要添加太多了,所以此功能一般不在电脑端使用

而手机端一般添加-webkit就可以了

方向可以写left,表示左边从颜色1往右渐变到颜色2

也可以写top-left,表示从左上角开始渐变到右下角

<!DOCTYPE html>
<html>
	<head>
		<Meta charset="utf-8">
		<title></title>
		<style>
			div {
				background: -webkit-linear-gradient(top left,red,blue);
			}
		</style>
	</head>
	<body>
		<div>123</div>
	</body>
</html>

bootstrap框架

bootstrap最受欢迎的前端框架,使web开发更快捷

它是前端开发者无人不知的存在

官网:http://bootstrap.css88.com/

用途之一:通过命名特殊的类名,可以实现在网页里出现不同的字体符号,按钮

使用bootstrap四部曲:

一,去官网下载bootstrap文件,放在每个界面的bootstrap文件夹去即可

二,创建html骨架

三,引入bootstrap的样式文件

四,书写内容

对不同的div起不同的类名可以实现不同的样式

若想修改bootstrap的样式,可再起一个类名,对其进行修饰(权重问题)

container类

响应式布局的容器,其宽度为

大屏 >1200的 宽度定为1170px

中屏 >=992的 宽度为970px

小屏 >=768的 宽度为750px

超小屏 100%

container-fluid类

流式布局容器,百分比宽度

占据全部视口的容器

适合移动端开发使用

container类和container-fluid类都可以在任意标签命名类名为二者其一即可

栅格系统

页面,视口分成多个栅格,而rem是把屏幕分成多等分

系统自动最多分成12列

就是说栅格系统里的container会随着屏幕大小而变,而分成多少列也会变

而rem中份数是不会变的

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐