开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS移动端学习第六周 -> 正文阅读

[JavaScript知识库]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中份数是不会变的

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-03-21 20:40:43 更:2022-03-21 20:41:32

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 6:00:31-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码