前端
文章平均质量分 63
关于前端
kuchabuku
这个作者很懒,什么都没留下…
展开
-
Emmet语法规则
快速生成基础结构子节点(>),兄弟节点(+),上级节点(^)原创 2021-06-18 09:25:11 · 157 阅读 · 0 评论 -
全屏布局
全屏布局全屏布局就是指HTML页面铺满整个浏览器窗口,并且没有滚动条。而且可以随着浏览器的大小变化而变化,整合的解决方案 html,body { margin: 0; overflow: hidden; } header { height: 100px; position: fixed; top: 0; left原创 2020-07-26 18:55:06 · 207 阅读 · 0 评论 -
CSS3多列布局
CSS3多列布局(浏览器兼容)columns属性简写属性column-count属性:定义列的数量column-width属性:定义列的宽度column-count属性(列的数量)用于设置列的数量或者允许的最大列数auto:默认值,用于表示列的数量由其他CSS属性决定number:必须是正整数,用于表示定义列的数量column-width属性(列的宽度)用于设置列的宽度或者列的最小宽度auto:默认值,用于表示列的宽度由其他CSS属性决定length:必须是正原创 2020-07-26 15:46:48 · 233 阅读 · 0 评论 -
等高布局
等高布局等高布局就是一行被划分成若干列,每一列的高度都是相同的值实现方法display属性的值有关table实现等高布局效果padding + margin属性实现等高布局效果实现效果 第一种方法就是利用display: table;和display: table-cell;,然后就定个宽度,高度会自适应。 .parent { display: table; } .left, .righ原创 2020-07-26 10:57:46 · 135 阅读 · 0 评论 -
等分布局
等分布局等分布局就是指一行被分为若干列,每一列的宽度是相同的值实现方法float属性实现等分布局效果display属性的值相关table实现等分布局效果实现效果第一种方法(float)利用浮动,定宽 .col1, .col2, .col3, .col4 { height: 300px; width: 25%; float: left; }原创 2020-07-26 09:45:53 · 175 阅读 · 0 评论 -
双飞翼布局
双飞翼布局(优化圣杯)双飞翼最早由淘宝团队提出,是针对圣杯布局的优化方案。主要是优化了圣杯布局中开启定位的问题 .left, .right, .center { height: 300px; float: left; } .left, .right { width: 300px; } .left {原创 2020-07-24 14:26:10 · 153 阅读 · 0 评论 -
圣杯布局(三行三列布局)
圣杯布局(三行三列布局)布局效果类似圣杯,所以叫圣杯布局。就是三行三列布局核心:主要就是实现中间主体部分中的左右定宽 + 中间自适应的布局效果 .left, .right, .center { height: 300px; } /*左右定宽*/ .left, .right { width: 300px; } .left {原创 2020-07-23 16:11:59 · 819 阅读 · 0 评论 -
CSS多列布局
多列布局简单来说,多列布局就是几个元素呈现水平方式排列的效果分类:两列布局等分布局三列布局等高布局圣杯布局与双飞翼布局CSS3多列布局两列布局一般情况下是指定宽于自适应布局,两列中左列是确认的宽度,右边是自动填满剩余所有空间的一种布局效果 定宽+自适应实现方法float + margin 属性配合使用float + overflow 属性配合使用display 属性的table 相关使用(两种方法)float + margin利用float: left;原创 2020-07-23 11:01:27 · 374 阅读 · 0 评论 -
CSS居中布局
CSS居中布局既要水平方向居中,也要垂直方向居中,就是在页面中心两种实现方法table+marginabsolute+transform原创 2020-07-19 16:53:08 · 161 阅读 · 0 评论 -
HTML垂直居中布局
HTML垂直居中布局垂直居中布局就是指当前元素在父元素容器中,垂直方向是居中显示的实现方法:table-cell+ vertical-align属性配合使用absolute + transform 属性配合使用 table-cell+ vertical-align设置display: table-cell;父元素设置为单元格再使用vertical-align: middle;设置为垂直方向对齐方式 .parent { width: 200px;原创 2020-07-18 16:15:14 · 764 阅读 · 0 评论 -
HTML水平居中布局
HTML水平居中布局水平居中布局就是指当前元素在父级元素容器中,水平方向是居中显示的实现方法:inline-block + text-algin 属性配合使用table + margin 属性配合使用absolute + transform 属性配合使用 inline-block + text-align这是个成熟的水平居中解决方案利用text-align把具有inline属性(内联属性)的元素进行居中对齐 .parent { width: 1原创 2020-07-18 15:04:00 · 974 阅读 · 0 评论 -
JS数学对象
JS数学对象,还有8个数学常量原创 2020-07-14 15:08:16 · 109 阅读 · 0 评论 -
JS时间
JS时间,Date对象,日期输出,日期获取方法原创 2020-07-14 11:17:18 · 257 阅读 · 0 评论 -
JS数组
第一次上传——2020-7-13原创 2020-07-13 15:42:03 · 243 阅读 · 0 评论 -
JS复习
简单复习第一次上传——20200-7-12原创 2020-07-12 10:50:01 · 291 阅读 · 0 评论 -
【案例】简单图片和段落上下排版制作
小米官网,淘宝,哔哩哔哩,数字尾巴,澎湃新闻的卡片式排版制作第一次上传——2020.6.20原创 2020-06-20 13:59:04 · 678 阅读 · 0 评论 -
CSS复习回顾
第一次上传——2020.6.19原创 2020-06-19 09:15:19 · 589 阅读 · 1 评论 -
HTML复习回顾
HTML复习原创 2020-06-06 08:59:00 · 236 阅读 · 0 评论 -
【编程题】编写函数实现点击change按钮,为div元素添加红色双线边框。
编写函数实现点击change按钮,为div元素添加红色双线边框。先在body中编写一个div原创 2019-09-26 06:59:39 · 14300 阅读 · 0 评论 -
【编程题】省份城市的三级联动
省份城市三级联动原创 2020-03-18 12:48:59 · 645 阅读 · 0 评论