css
This commit is contained in:
157
csspress/1.css基础.md
Normal file
157
csspress/1.css基础.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# css 基础
|
||||
|
||||
## 定义
|
||||
|
||||
css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言 。我们用来给html的元素选择性的添加样式
|
||||
|
||||
## 在页面中使用css
|
||||
|
||||
方式1（行内样式）：
|
||||
|
||||
在html标签中 用style属性 给选中元素写入css样式
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
</head>
|
||||
<body style="background:blue">
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
方式2（内部样式表）：
|
||||
|
||||
在head 标签中写入 style标签，然后从style标签内写css的内容
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
body{
|
||||
background:blue
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
方式3 （外部样式表）
|
||||
|
||||
从head标签中 通过link 标签引入外部的css文件 从而建立html文件和css文件之间的连接
|
||||
|
||||
> <link rel="stylesheet" href="./css/index.css">
|
||||
>
|
||||
> link 标签中的rel=“stylesheet”必须加上
|
||||
>
|
||||
> href 为url地址
|
||||
>
|
||||
> type 链接文件的格式 可省略 省略的部分为：type="text/css"
|
||||
>
|
||||
> rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果同上：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## css 语法
|
||||
|
||||
那让我们解读一下刚才写的css代码
|
||||
|
||||
```
|
||||
body{
|
||||
background:blue
|
||||
}
|
||||
```
|
||||
|
||||
其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了
|
||||
|
||||
{} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）
|
||||
|
||||
{} 中的一行为一个声明，声明由 属性:属性值 组成，用来指定添加样式元素的属性 如本例的background:blue
|
||||
|
||||
声明中冒号左边的部分为属性，冒号右边的部分为属性值
|
||||
|
||||
|
||||
|
||||
重要的语法归纳：
|
||||
|
||||
- 除了选择器的部分都应该包含在成对的大括号里，即{} 里面
|
||||
- 每个声明中要用 : 将属性名和属性值分割开
|
||||
- 每个规则集中，要用 ; 把各个声明分割开
|
||||
|
||||
|
||||
|
||||
## css选择器
|
||||
|
||||
基本选择器：
|
||||
|
||||
| 选择器名称 | 选中的内容 | 示例 |
|
||||
| ----------------------- | -------------------------- | ------------------------------------------------------------ |
|
||||
| 标签选择器 | 页面上所有该标签的html元素 | p 选中页面上所有的p标签 |
|
||||
| id选择器 | 具有特定id的html元素 | #name 选中页面上所有<p id="name ">或<span id=“name"> ...这种id为name 的元素 |
|
||||
| 类选择器 | 具有特定类的元素 | .box 选中页面上所有<p class="box">或<span class=“box">... 这种class 为box的元素 |
|
||||
| 属性选择器 | 具有特定属性的元素 | a[title] 选中页面上所有存在title属性的<a>元素 并且可以通过a[title='xxx']来匹配特定的属性值 |
|
||||
| 通配符 | 所有元素 | * |
|
||||
| 多个元素 | 不同选择器用 , 连接 | div,span 同时匹配到页面中所有的div和span元素 |
|
||||
| 选择后代元素 | 用空格连接 A B | div span 匹配所有div中的所有span元素 |
|
||||
| 伪类 ：hover | a:hover | 匹配所有鼠标移入状态下的a标签 |
|
||||
|
||||
|
||||
|
||||
## css 优先级
|
||||
|
||||
优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义
|
||||
|
||||
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
|
||||
2. 作为style属性写在元素内的样式
|
||||
3. id选择器
|
||||
4. 类选择器
|
||||
5. 标签选择器
|
||||
6. 通配符选择器
|
||||
7. 浏览器自定义或继承
|
||||
|
||||
**总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|
||||
61
csspress/2.盒模型.md
Normal file
61
csspress/2.盒模型.md
Normal file
@@ -0,0 +1,61 @@
|
||||
# css 基础（二）
|
||||
|
||||
## 块级元素和内联元素
|
||||
|
||||
- 块级元素
|
||||
|
||||
- 特点：
|
||||
|
||||
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
|
||||
- 每个盒子都会换行
|
||||
- width和height 都可以发挥作用
|
||||
- padding , margin, border 会将其他元素从当前盒子周围推开
|
||||
|
||||
|
||||
|
||||
- 内联元素
|
||||
|
||||
- 特点：
|
||||
- 盒子不会换行
|
||||
- width和height 不能发挥作用
|
||||
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
|
||||
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
|
||||
|
||||
> 块级元素display默认属性值为 block
|
||||
>
|
||||
> 内联元素 dipslay的属性默认值为inline
|
||||
>
|
||||
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
|
||||
|
||||
|
||||
|
||||
## 盒模型 （box model）
|
||||
|
||||
css 盒模型包括如下要素
|
||||
|
||||
- 元素内容 （content）
|
||||
- 内边距 （border）
|
||||
- 边框（border）
|
||||
- 外边距（margin）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 上图中 最内层的蓝色色块是 元素内容（content）
|
||||
>
|
||||
> 蓝色外侧的 绿色的是内边距（padding）
|
||||
>
|
||||
> padding外侧的橙黄色的部分是边框（border）
|
||||
>
|
||||
> border 外侧 也就是最外侧的部分是外边框（margin）
|
||||
|
||||
盒模型计算元素的总宽度和总高度：
|
||||
|
||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||
>
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
251
csspress/3.定位.md
Normal file
251
csspress/3.定位.md
Normal file
@@ -0,0 +1,251 @@
|
||||
# 定位(position)
|
||||
|
||||
position 用来定义元素在网页上的位置，常用的有五种：
|
||||
|
||||
- static 正常的页面流，position属性的默认值
|
||||
- absolute 绝对定位
|
||||
- relative 相对定位
|
||||
- fixed 固定定位
|
||||
- sticky 粘性布局
|
||||
|
||||
|
||||
|
||||
### static
|
||||
|
||||
这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
css：
|
||||
|
||||
```
|
||||
<style>
|
||||
/*
|
||||
去掉浏览器默认的标签自带样式
|
||||
*/
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
/*
|
||||
position不写默认是static
|
||||
*/
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### absolute
|
||||
|
||||
absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定元素的位置
|
||||
|
||||
当父元素不定义position属性时，选中的元素依照整个网页的html根元素定位
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html 不变 css如下：
|
||||
|
||||
```
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
|
||||
上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流 然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
right:0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### relative
|
||||
|
||||
相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
|
||||
|
||||
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
right:90px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 常用技巧是给父元素定义绝对定位 子元素定义相对定位 这样就会使子元素相对于父元素定位
|
||||
|
||||
|
||||
|
||||
### fixed
|
||||
|
||||
fixed 固定定位，将某个元素固定在浏览器的某个位置，无论如何滚动滚动条，元素位置不变。 即元素相对于可视窗口固定位置
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: fixed;
|
||||
left: 90px;
|
||||
height: 60px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### sticky 粘性布局（拓展）
|
||||
|
||||
从效果来说 sticky更像是混合体，使用sticky的元素在页面滑动到临界点之前，表现为relative, 到达临界点之后，表现为fixed
|
||||
|
||||
#### css 使用：
|
||||
|
||||
> 1. 用 position: sticky 声明目标元素
|
||||
> 2. top/bottom/left/right 任意一个赋予有效值 ，甚至是负值也可以
|
||||
|
||||
|
||||
|
||||
注： 如果元素定义了overflow，那么sticky就会失效
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
height: 60px;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
滚动前：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
滚动后：
|
||||
|
||||
|
||||
46
csspress/4.flex.md
Normal file
46
csspress/4.flex.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# flex
|
||||
|
||||
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||||
|
||||
### flex 使用
|
||||
|
||||
任何一个元素都能被指定为flex 容器
|
||||
|
||||
```
|
||||
/*
|
||||
选中元素为块级元素时
|
||||
*/
|
||||
display:flex
|
||||
|
||||
|
||||
/*
|
||||
选中元素为内联元素时
|
||||
*/
|
||||
display:inline-flex
|
||||
```
|
||||
|
||||
### 基本概念
|
||||
|
||||
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
||||
|
||||
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
||||
|
||||
水平主轴的起点叫做 main start 结束位置叫做 main end
|
||||
|
||||
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||||
|
||||
### 容器的属性
|
||||
|
||||
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||||
- row 水平
|
||||
- column 垂直
|
||||
- justify-content 声明排列的方式
|
||||
- center 居中
|
||||
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||
- space-between 两端对齐 项目之间的间隔都相等
|
||||
- align-items 定义项目在交叉轴上的排列方式
|
||||
- center 居中
|
||||
- flex-start 交叉轴起点对齐（拓展）
|
||||
- flex-end 交叉轴终点对齐
|
||||
- baseline 第一行文字的基线对齐
|
||||
- stretch 默认占满整个容器的高度
|
||||
199
csspress/5.自适应和响应式.md
Normal file
199
csspress/5.自适应和响应式.md
Normal file
@@ -0,0 +1,199 @@
|
||||
# 自适应和响应式
|
||||
|
||||
为了适配移动端终端设备
|
||||
|
||||
### 实现途径：
|
||||
|
||||
1.媒体查询
|
||||
|
||||
将设备按照不同的分辨率条件筛选，使符合条件的设备显示对应的样式，从而实现不同分辨率样式不同的效果
|
||||
|
||||
语法：
|
||||
|
||||
```
|
||||
@media (max-width: 屏幕最大宽度){
|
||||
|
||||
... 符合条件的样式 跟style样式表一样 含多个元素样式
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
@media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
|
||||
body{
|
||||
background: gold;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
|
||||
body{
|
||||
background: blue;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
|
||||
body{
|
||||
background:gray
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果参考b.html
|
||||
|
||||
> 使用媒体查询时，需要对应不同分辨率终端写多套所对应的样式，比较繁琐
|
||||
>
|
||||
|
||||
2.百分比
|
||||
|
||||
通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时，通过百分比单位可以使元素的高和宽随着浏览器的变化而变化，从而实现响应式效果
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 使用百分比做单位时，如果要定义一个元素的宽高，需要根据设计稿手动计算 换算成% 单位，容易出现误差
|
||||
|
||||
|
||||
|
||||
### rem
|
||||
|
||||
rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。**其实rem布局的本质是等比缩放，一般是基于宽度**.
|
||||
|
||||
这样我们就有了一个可控的统一参考系。我们现在有两个目标：
|
||||
|
||||
- rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
|
||||
- rem单位和px单位很容易进行换算，方便我们按照标注稿写css
|
||||
|
||||
使用：
|
||||
|
||||
借助js
|
||||
|
||||
```
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
;(function(designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width>maxWidth && (width=maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function() {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function(e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function(e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
/*
|
||||
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
|
||||
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
|
||||
*/
|
||||
```
|
||||
|
||||
1.复制上面这段代码到你的页面的头部的script标签的最前面。
|
||||
|
||||
2.根据设计稿大小，调整里面的最后两个参数值。
|
||||
|
||||
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
|
||||
|
||||
32
csspress/demo/a.html
Normal file
32
csspress/demo/a.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
height: 60px;
|
||||
position: sticky;top: 10px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
</html>
|
||||
36
csspress/demo/b.html
Normal file
36
csspress/demo/b.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user