HTML与CSS学习笔记(7)
1、响应式布局
利用媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局。
常见选项:
媒体类型
and、not
min-width、max-width:
例如
@media all and (min-width:500px) and (max-width: 700px){
.box{background: blue;}
}
当分辨率大于最小宽度并小于最大宽度时,执行{}内的样式(注意and两边要空格隔开)
在all前面加not表示取反;多个响应时要注意操作顺序:
@media all and (min-width:500px) {
.box{background: blue;}
}
@media all and (min-width: 700px){
.box{background: yellow;}
}
这样写width=500~700时显示蓝色,大于700时显示黄色,顺序反过来则只显示蓝色
orientation:portrait、orientation:landscape:
针对横竖屏的响应式触发,先写条件,选择器和样式写在{}内,注意and两边一定要用空格隔开:
@media all and (orientation: portrait){
.box{ background: blue;}
}
@media all and (orientation: landscape){
.box{ background: yellow;}
}
<link>:
<link rel="stylesheet" href="style1.css" media="all and (min-width:400px/orientation: portrait)">
当满足()内条件时,引入相应的css文件,条件也可以写横竖屏,实现横竖屏不一样的样式
常见修改样式:
display
float
width
注:响应式代码写到要适配的css后面
两种常见的响应式方法:
1、被动的:
@media all and (min-width: 1200px){
.container{max-width: 1140px;}
}
{}内的选择器不变,当()内条件改变时,相同的选择器内样式不同。
2、主动式:
@media all and (min-width:768px){
.mt-md-50{margin-top: 50px;}
}
{}内的选择器不同,当需要不同样式时,在body里添加相应的类:
<div class="container mt-lg-50">hello media</div>
*重要的一个小细节,在浏览器页面按住ctrl+鼠标滚轮,向前滚,表面上是放大,其实是减小分辨率;同理向后滚,表面上是页面缩小,实际上是增大分辨率。浏览器右上角的百分数100%时为正常页面分辨率;超过100%为减小浏览器分辨率(这个浏览器显示的像素);小于100%表示增大浏览器分辨率;别弄混了!
2、Bootstrap
Bootstrap是最受欢迎的Html、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目
特色:
1、响应式布局
2、基于flex的栅格系统
3、丰富的组件和工具方法
4、常见的交互使用
官网:https://getbootstrap.com/
熟悉相应类名的定义,了解其功能,通过使用相关类名达到布局的效果。
(意思就是,某个类名框架已经给你写好样式了,你只需要记住这个类名,当需要用到这种样式时,为相关标签添加该类名就可以了)
*具体可以参考官网文档与例子
Containers:版心属性
container
container-fluid
Responsive breakpoints
Grid system:栅格系统
Grid options:网格配置
Responsive classes:响应式的类
Gutters:间距
Alignment:对齐方式
Reordering:排序
Offsetting:位置边距
....
[class*=col]{border: 1px black solid;}该选择器表示,所有包含col的类
*即该框架向当于把几乎所有的新特性样式集成到各个类名里面,编写程序时,把直接添加(调用)样式的方式变为为标签添加封装有相应样式的类名即可。主要的意义在于省的让我们自己去写样式;只要背几个class就不用了写任何样式的设计网页,就是该框架的初衷。
常见的margin类:
mr-auto:margin-top:auto;
mt-5:margin-top:5rem; 注意了这些类的单位都是rem
mt-md-5:margin-top:5rem; md响应式范围内生效
mx-5:margin-left:5em; margin-right:5rem;
my-5:margin-left:5em; margin-right:5rem;
mt-n5:margin-top:-5rem;
py-5:padding-top:5rem;padding-bottom:5rem;
Content
Reboot:重置默认样式
Typography:针对设备
Code:代码
Image:图片
Tables:表格
Figures:图片描述
..
*使用时去官网看文档:很多的类都是以样式名来命名的
Components:组件
Alerts:弹出提示
Badge:徽章
Breadcrumb:面包屑(导航的一搬叫面包屑)
Buttons:按钮
Button group:按钮组
Card:卡片
....
*多看参考文档,多练习,才能掌握Bootstrap
(非常重要)*利用Bootstrap插件可以快速创建相关样式,格式为b4-相关样式名称。
Utilities:工具方法
Borders:边框
Clearfix:清除浮动
Close icon:关闭icon
Colors:颜色
Display:显示类型
Embed:媒体
...
*通過Blog首页的制作,熟悉了Bootstrap的基本使用,它适合快速搭建中小型项目,不适合搭建大型项目,因为类会太多。还有一个优点是,适合用来做针对不同设备的响应式布局。
3、CSS新特性之自定义属性
CSS自定义属性(也称为了"CSS变量"),在目前所有的现代浏览器中都得到了支持。
定义与使用: --color:red;通过"--"来定义; background: var(--color);这样来使用
计算
默认值
作用域
CSS新特性之shapes
CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用。
shape-outside
clip-path
shape-margin
4、CSS新特性之scrollbar
CSS scrollbar用于实现自定义滚动条样式(主要利用伪元素实现)
::-webkit-scrollbar: widht: 1px;定义的是滚动条的横向宽度,即它有多粗
::-webkit-scrollbar-thumb:设置拖拽块的样式
::-webkit-scrollbar-track:定义滚动条上下移动的容器样式
5、CSS 新特性之Scroll Snap
CSS Scroll Snap(滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置,即是滚动条移动到相应区域。
scroll-snap-type
x
mandatory
例如: scroll-snap-type: x mandatory;与scroll-snap-align配合使用
scroll-snap-align
start:每个子元素靠左对齐(即防止出现滚动条拖动的位置只显示某个子元素的一部分)
center
end
HTML与CSS学习笔记(7)的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- configparser读取配置文件时的相对路径问题
学习接口测试时,当我把配置文件xx.config和读取配置文件的模块read_config.py放在项目下的同一个包config里时,只需传入文件名xx.config即可实现对配置文件的读取. 但是当 ...
- AcWing 795. 前缀和
题目地址 https://www.acwing.com/solution/AcWing/content/2075/ 题目描述输入一个长度为n的整数序列. 接下来再输入m个询问,每个询问输入一对l, ...
- Python爬虫大作业
一.题目: 获取并保存目标网站的下图所示的所有英文名,网页转换通过点击more names刷新名字并将各个英文名子目录下,去获取并保存每一个英文名的名字.性别.寓意.简介如下图所示内容红色标记框内的内 ...
- Python程序中的进程操作-进程间数据共享(multiprocess.Manager)
目录 一.进程之间的数据共享 1.1 Manager模块介绍 1.2 Manager例子 一.进程之间的数据共享 展望未来,基于消息传递的并发编程是大势所趋 即便是使用线程,推荐做法也是将程序设计为大 ...
- 安全NA第一天笔记:Firewall基本理论
防火墙的三种类型:<1>包过滤(packet filtering):也就是我们常用的访问控制列表(ACL)1.ACL类型:标准,扩展,命名,自反2.ACL其他特性:(1)重新排列序列号: ...
- 创 PHP RSA2 签名算法
什么是RSA2 ? RSA2 是在原来SHA1WithRSA签名算法的基础上,新增了支持SHA256WithRSA的签名算法. 该算法比SHA1WithRSA有更强的安全能力. 为了您的应用安 ...
- [03]使用 VS2019 创建 ASP.NET Core Web 程序
使用 VS2019 创建 ASP.NET Core Web 程序 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开 ...
- Scala,Java,Python 3种语言编写Spark WordCount示例
首先,我先定义一个文件,hello.txt,里面的内容如下: hello sparkhello hadoophello flinkhello storm Scala方式 scala版本是2.11.8. ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- GO的执行原理以及GO命令
Go的执行原理以及Go的命令 一.Go的源码文件 Go 的源码文件分类: 如上图,分为三类: 1.命令源码文件: 声明自己属于 main 代码包.包含无参数声明和结果声明的 main 函数. 命令源码 ...