- 博客(27)
- 收藏
- 关注
RSS订阅原创 python splitlines()方法
Python splitlines() 按照行界符(’\r’, ‘\r\n’, \n’等)分隔，返回一个包含各行作为元素的列表，默认不包含行界符。能被识别的换行符参数keepends – 在输出结果里是否去掉行界符(’\r’, ‘\r\n’, \n’等)，默认为 False，不包含行界符，如果为 True，则保留行界符。返回值返回一个包含各行作为元素的列表。实例以下实例展示了 splitlines() 方法的使用方法：...
2020-11-24 15:21:59
434
原创 媒体查询案例
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> *{margin...
2020-03-24 21:11:43
664
原创 移动端适配案例
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> &...
2020-03-24 21:10:32
313
原创 rem+px+vw单位计算
使用vw是为了让元素的大小能受到屏幕大小的变化而控制让整体使用rem的单位,跟随html中font-size的设置 640设计图: 100vw = 满屏 = 320px 1vw = 3.2px ?vw = 100px 100/3.2 = 31.25vw 得出 31.2...
2020-03-24 21:09:11
505
原创 移动端适配准备
视口:就是浏览器显示页面内容的屏幕区域视口分为: 布局视口 视觉视口 理想视口布局视口:一般移动端设备的浏览器都默认设置了一个布局视口,为了解决早期pc端页面在移动端上的显示问题苹果 安卓 基本上设置这个视口的分辨率980px视觉视口:你看到的网页区域,指的是网址的区域通过缩放去操作视觉视口不会影响布局视口 理想视口: 1: 是网站在移动设...
2020-03-24 21:08:35
181
原创 两栏布局
两栏布局:代码： <style> *{margin: 0;padding: 0;} html,body,.box2{ height: 100%; } .box1{ height: 100px; background: red; width: 100%; position: fixed; top: 0; left...
2020-03-23 21:24:15
81
原创 响应式布局
绝大部分项目:PC端 ~~> 官网移动端 ~~> 移动端网页,app,小程序… 响应式布局: 为了适应不同的设备,分辨率 不同的设备(pc电脑端 平板电脑 手机端) x 宽度 500px<= x <800...
2020-03-23 21:19:48
103
原创 多列布局案例
多列布局:column-count:;分列column-gap:;列间距column-rule:大小 形态 颜色;分割线column-fill:;列的高度是否统一auto 列高度自适应内容balance 所有列的高度以其中最高的一列统一column-span:;是否横跨所有列none 不跨all 横跨所有column-width:;列宽案例如下：代码如...
2020-03-23 21:18:33
475
原创 弹性盒布局案例
1-6筛子布局div{width: 100px;height: 100px;background: #ccc;margin: 100px;border-radius:10px;box-shadow:1px 1px 3px 1px #000;}p{/background: yellow;/}span{width: 20px;height: 20px;backgroun...
2020-03-22 21:40:08
1235
1
原创 Flex相关属性
弹性盒布局:display:flex; display:inline-flex;(两个元素会在一行显示)作用: 控制子集在"主轴"上排列显示规则:所有的子元素都会在主轴上排列默认x为主轴如果设置x为主轴,那y为侧轴如果设置y为主轴,那么x为侧轴设置方法: 父元素必须为弹性盒 display:flex; 设置为display:flex; 1: 弹性...
2020-03-22 21:37:36
137
原创 20号笔记
怪异盒模型：标准盒模型: box-sizing:content-box;宽高是独立的内边距是独立的,会把元素撑大,边框是独立注:宽高不包含内边距和边框 怪异盒模型: box-sizing:border-box; 宽高包含内边距和边框 怪异盒模型触发方式: 方式一: 丢失<!DOCTY...
2020-03-22 21:33:47
96
原创 css定位详解
css定位有四种不同类型position值分别为： relative，static，absolute，fixed首先是relative: 相对定位特征:1: 占据文档流,占位置2: 参考自身加载在页面中的位置解释：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，常常作为绝对定位元素的父元素其次是absolute：绝对定位特征:1:脱离文档流,不占位置2: 默认参考htm...
2020-03-22 20:32:15
123
原创 圆角制作"多来A梦"
.box1{ width: 200px; height: 200px; background: skyblue; border-radius: 100px; position: relative; margin: 0 auto; border: 3px solid black; box-shadow: 7px 5px 6px white inse...
2020-03-19 21:09:08
114
原创 css3属性
笔记:文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色;多层文本阴影的设置text-shadow:第一层阴影,第二层阴影,第三层阴影; 在单词内部换行 word-wrap:; normal 默认值,不允许在单词内部换行 break-word 允许在单词内部换行 ...
2020-03-19 20:57:43
87
原创 倾斜以及3D动画笔记
倾斜: skew() degtransform:skew(水平倾斜);transform:skew(水平,垂直);transform:skewX();transform:skewY();目标伪类选择器：选择器:target{} 当元素被点击时的指向,发生样式的改变 css样式 圆角: border-radius:; ...
2020-03-15 21:21:08
177
原创 宽度自适应以及清除浮动笔记
笔记：宽度自适应:默认宽度100%的元素width:; 单位为% 高度自适应: 不写height:;(让内容撑起来) height:; 单位为% (前提条件 html,body{width:100%;height:100%;清除浮动：问题:父级元素不给高度,子元素浮动,会造成父元素高度塌陷 解决办法: ...
2020-03-15 18:54:31
146
原创 渐变以及过渡笔记
笔记：css3渐变: 由浏览器生成的 线性渐变: background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n); background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n); 1 单一方向渐变: ...
2020-03-15 18:50:42
128
原创 清除浮动
问题:父级元素不给高度,子元素浮动,会造成父元素高度塌陷 解决办法: 1: 给父元素添加高度 缺点: 不灵活 2: 给父级元素添加overfow:hidden;(触发了一个bfc区域) 缺点: 定位出去的元素将会被隐藏 ...
2020-03-11 09:08:53
113
原创 盒模型回顾
外边距: 改变元素外边的间距内边距: 改变元素与内容的间距padding:一个值; 一个值,改变四个方向padding:上下 左右;padding:上 左右 下;padding:上 右 下 左;顺时针方向变化 padding-top:顶部内边距; padding-right:右内边距; padding-...
2020-03-09 22:21:12
52
原创 盒模型1.1-基本标签和属性
外边距: 改变元素外边的间距内边距: 改变元素与内容的间距padding:一个值; 一个值,改变四个方向padding:上下 左右;padding:上 左右 下;padding:上 右 下 左;顺时针方向变化 padding-top:顶部内边距; padding-right:右内边距; padding-...
2020-03-03 23:30:12
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人