HTML CSS JS
关注
分享
扫一扫
HTML超文本语言，它并不是编程语言
CSS层叠样式表单，它并不是编程语言
JS是编程语言，解释型语言
cathy18c
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
为什么有时候用:last-child不起作用
el:last-child 匹配规则：第一步：查找el选择器匹配元素的所有同级元素第二步：查找同级元素中最后一个元素第三步：检验最后一个元素是否和el匹配html：<p class="list">aaaaa</p><p class="list">aaaaa</p><p class="list">aaaaa</p>...原创 2019-10-26 16:01:23 · 4330 阅读 · 2 评论 -
CSS3其他
resize多行文本框右下角有个箭头可以拖动大小，我们也可以用resize控制textarea{ resize:none} /*不能拖动了*/resize: none | both | horizontal | vertical | inherit属性值取值说明none用户不能拖动元素修改尺寸大小both用户可以拖动元素，同时修改元素的宽度和高度ho...原创 2019-09-21 16:01:22 · 122 阅读 · 0 评论 -
CSS flex布局
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。 首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。<style> .container{ width: 600px;...原创 2019-09-21 12:00:29 · 202 阅读 · 0 评论 -
CSS3盒子模型,flex布局
盒子模型 box-sizingbox-sizing有3个值，content-box(默认值) | border-box | inheritcontent-box值代表的意思是：元素的内容的width和height决定了元素的宽高，padding和border无论多少都不影响元素的宽高，它是由内容的width和height值决定的。在这里元素的宽高和元素内容的宽高一样的border-bo...原创 2019-09-21 11:17:34 · 278 阅读 · 0 评论 -
css多列
column-count 被分隔的列数column-width 被分隔后每列的宽度上面两个可以用column简化，column：column-width,column-countcolumn-gap 被分隔后每列之间的间隔column-span：all 横跨所有列column-rule：3px outset red; 列与列之间的红色竖条线要实现下面的效果：实...原创 2019-09-20 16:21:42 · 139 阅读 · 0 评论 -
css动画
使用@keyframes创建动画 @keyframes理解为帧 和 animation 配合使用使用百分比来规定变化发生的事件，也可以使用from和to关键词，但为了兼容建议百分比0%动画的开始 100%动画结束animation：animation-name(必须) animation-duration(必须) animation-timing-functiona...原创 2019-09-19 17:16:28 · 160 阅读 · 0 评论 -
css3过渡
把元素从一种样式逐渐改变为另一种样式 就要用css3过渡transitiontransition 需要四个过渡属性transition-property 应用过渡的 CSS 属性的名称 必须transition-duration 过渡效果花费的时间 默认0 必须 如果是0不会有效果 注意0也是要带s的transition-timing-function 过渡效果的时间曲...原创 2019-09-19 11:27:08 · 205 阅读 · 0 评论 -
css3 2D转换（transform）
transform是css3的属性，向元素应用2d或3d转换，可以运行元素移动，旋转，倾斜，伸缩translate()方法 位移 单位px三种参数方式：translate(x,y) x轴y轴同时移动 translateX(x) 仅x轴移动 translateY(y) 仅y轴移动div{transform: translate(50px,100px);-ms-transf...原创 2019-09-19 10:59:26 · 363 阅读 · 0 评论 -
px，em，rem
在css中单位长度用的最多的是px、em、rem，这三个的区别是：px是固定的像素，一旦设置了就无法因为适应页面大小而改变。em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素em子元素字体大小的em是相对于父元素字体大小 元素的width/height/pa...原创 2019-09-17 16:14:52 · 221 阅读 · 0 评论 -
css选择器
元素选择器：p{ color:red } 所有p元素字都是红色ID选择器：#first 选择 id="firstname" 的所有元素类选择器：.info 选择class="info"的所有元素选择器分组/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}...原创 2019-09-12 15:48:42 · 234 阅读 · 0 评论 -
border-collapse,定位
一，border-collapse: collapse设置表格的边框是否被折叠成一个单一的边框或隔开：不设置，table就是这样的设置table { border-collapse:collapse}二，position：static fixed relative absolutestatic定位不受top left right bottom影响，fix...原创 2019-08-30 17:00:44 · 257 阅读 · 0 评论 -
CSS3背景图片
一，background-origin 背景图片的定位区域看下面一个例子<div class="wrap"> <span>padding</span> <div class="content">content</div></div><style>.wrap{ width:...原创 2019-08-30 15:47:07 · 1710 阅读 · 0 评论 -
CSS3(嵌入字体，文字阴影)
一，@font-face@font-face{font-family:字体名字；src : 字体文件在服务器上的相对或绝对路径;}@font-face{ font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");}.demo { width:...原创 2019-08-29 16:07:36 · 538 阅读 · 0 评论 -
CSS3文本
长字母或数字自动换行word-wrap: break-word;word-break: break-all;单行文本超出显示省略号overflow:hidden;text-overflow:ellipsis;white-space: nowrap;一，text-overflow 用来设置当文字溢出时是用省略号还是切断但是text-overflow只是说明了文字溢...原创 2019-08-29 15:21:24 · 167 阅读 · 0 评论 -
CSS3颜色(rgba，渐变)
一，rgbargb我们都知道，r(red) g(green) b(blue) 这三个参数取值范围0-255 rgba是在rgb的基础上增加alpha透明度的参数，a的取值范围0-1之间不可为负数//把文字的背景设置为透明度为 0.5的白色<!DOCTYPE html><html><head> <meta charset="utf...原创 2019-08-29 11:58:37 · 2500 阅读 · 0 评论 -
css3边框(圆角，阴影，边框应用图片)
一，圆角使用border-radius。border-radius: 5px 4px 3px 2px;/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */实心圆方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：div{ height:100px;/*与width设置一致*/ ...原创 2019-08-29 11:14:22 · 1902 阅读 · 1 评论