![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
html+css
该睡觉觉了
这个作者很懒,什么都没留下…
展开
-
响应式布局之grid网格布局
响应式布局之grid网格布局二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfRzQDyJ-1607600417627)(media/grid布局容器.png)]<div class="container"> <div class="item"> <p>1</p> </div> <div原创 2020-12-10 19:40:46 · 1045 阅读 · 1 评论 -
视口布局
day16视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : viewport width 视口宽度,浏览器可视区域的宽度100vh : viewport height 视口高度,浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100p原创 2020-12-10 19:39:47 · 119 阅读 · 1 评论 -
流式布局+rem布局+js样式引入
导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子 嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类 ;.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a:hovr { }继承.a ..原创 2020-12-06 19:48:53 · 142 阅读 · 0 评论 -
弹性盒布局CSS3
传统布局的局限性1.清除浮动的额影响2.很难实现居中3.结构不灵活,不能随时添加盒子弹性盒布局非常灵活 提供一套浏览器内置布局特点:一位布局 固定的CSS属性 决定了这个布局一般用在移动端加在弹性父盒子身上的属性1.声明弹性盒子-webkit-display:flex;display:flex;2.设置主轴方向flex-direction:row 水平方向(默认)row-reverse(水平反向)column(垂直)column-reserve(垂直反向)3.设置主轴方原创 2020-12-03 22:56:59 · 120 阅读 · 0 评论 -
新增本文选择器+新增背景选择器+新增盒子阴影
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀;选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字案例:修改单选框和复选框的默认样式基本思路:自己写一原创 2020-12-02 22:15:41 · 166 阅读 · 0 评论 -
动画+3D+关键帧
day13动画: 过渡, 变形, 关键帧动画过渡从一个状态到另外一个状态 (两个状态的连接 最初,最终)的变化 ,并且时间的持续transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-colo原创 2020-12-02 22:04:51 · 293 阅读 · 0 评论 -
1. 语义化标签 2. 解决语义化兼容性问题 3. 表单控件类型 4. 表单控件属性 5. 音视频标签 6. css3新增选择器
新增语义化布局标签header.footer,nav ,aside, article>section, figure (推荐在移动端使用)ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElement("标记名字");//默认是行内类型 header,footer ,nav,article,section,figure原创 2020-11-30 22:13:53 · 101 阅读 · 0 评论 -
简单数独游戏遇到的问题(js还没有学,没有看)
1.html,body{ width: 100%;height: 100%;}的解释是当前浏览器窗口的大小2.cursor: pointer; 设定鼠标的形状为一只伸出食指的手3.-webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。4.text-shadow[原创 2020-11-29 21:09:52 · 84 阅读 · 0 评论 -
文本溢出+BFC规则+常见游览器问题
day08文件命名规范统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊字符。原则: 1)方便理解,见名之意2)方面查找例如:首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus,contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分,用下划线隔开,头部表示原创 2020-11-29 20:12:21 · 291 阅读 · 0 评论 -
微信滑动门案例和PS的基本操作
day07微信滑动门技术什么?特殊背景图技术(特点:背景图颜色单一,对称的,阴影,边框…)原理: 是一张宽度大小固定的图片铺到宽度不确定的盒子里 ,需要父子关系的两个盒子 ,内部盒子(子元素span)铺图片的右上角位置(backgrpund-position:100% 0%),外侧盒子(父元素a)铺图片的左上角位置(backgrpund-position:0% 0%) <style> * { padding: 0; mar原创 2020-11-24 18:58:47 · 149 阅读 · 0 评论 -
定位
day06布局核心: 盒模型(间距) 浮动 (并排) 定位 (覆盖+ 特殊位置)定位类型position静态定位position:static; 默认值静态定位不能使盒子位置变化 不适合布局作用:解决低版本浏览器兼容问题相对定位position:relative;能不能使盒子发生位置变化 yes 2. 参考对象:自身初始位置 3. 脱离不脱离标准流 不脱离标准(保留原来位置 ) 4. 是否适合布局:不适合原创 2020-11-23 21:19:12 · 82 阅读 · 0 评论 -
铁路练习遇到的问题
铁路练习遇到的问题1.注意父子塌陷问题2.ul前面的原点怎么去掉 list-style:none3.清除浮动:.clearfix::after{content: ‘’;display: block;clear: both;}4.background背景属性5.用省略号显示文本.cut{ display: inline-block; /*让span 标签变成行内标签但具有宽高属性*/ white-space: nowrap; /*文本不原创 2020-11-23 09:24:53 · 85 阅读 · 0 评论 -
浮动
浮动布局第二大块 盒模型 行内块行内块并排缺点:中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用:专业解决并排float:left(左侧浮动) right(右侧浮动) none 不浮动float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8jUHLmw-1606033014027)(E:/%E5%BC%A0原创 2020-11-22 16:17:08 · 92 阅读 · 0 评论 -
语义化,外边距塌陷问题,background-image:属性问题,标签类型之间的转化
day04盒模型 组成以及用法背景属性语义化理解选择器进阶 ,优先级计算外边距margin使用:上边距可以使盒子移动 左边距可以使盒子向右移动 右下外边距不可以使盒子发生移动,只能将这个盒子与其他的盒子距离拉开 外边距可以设置负值margin:10px;margin: 0 auto ;水平居中(1.块类型 2.明确可以计算的宽度)内边距padding使用:上下左右内边距全部有用,移动内容位置加了内边原创 2020-11-19 21:54:45 · 322 阅读 · 0 评论 -
css和三个模块转化
day03在线的css手册地址:http://css.cuishifeng.cn/text-decoration-line.html字体属性font: 字体是否为斜体 字体粗细 字体大小/行高字体类型字体是否为斜体: font-style:normal(正)/italic(斜)/oblique(斜体)font-weight:100-900 100最细 900最粗 400正常font-size:px/em/rem/% 字体大小不写% 最小是12px 默认是16px字体类原创 2020-11-18 21:28:18 · 146 阅读 · 2 评论 -
CSS引入方式;基本选择器;常用标签
day02超链接<a href='连接地址' target:_self(当前页打开/_blank(新页打开)></a>base标记<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-11-17 20:56:55 · 67 阅读 · 0 评论