德化县住房和城乡建设局网站,建站收费标准,宿州网站建设哪家好,长沙seo网站建设袁飞最好学习菜鸟教程
火狐-moz- 谷歌 Safari -webkit- 前面都加这个#xff0c;可能才生效
边框 border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用 border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius … box-shadow: 10px 5px 10px 0 #88…学习菜鸟教程
火狐-moz- 谷歌 Safari -webkit- 前面都加这个可能才生效
边框 border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用 border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius … box-shadow: 10px 5px 10px 0 #888888 第一个右边 第二个下边 第三个模糊半径 第四个扩散半径 第五个颜色 border-image:url(./logo.png) 10 60 round 10-上下切片数量 60左右 round循环 stretch 单张拉伸
背景
背景图像边界框的相对位置 border-box 背景图像的相对位置的内容框 content-box
多个背景图片写法 background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;background-clip 限制背景从哪开始content-box padding-box
渐变 必须至少定义两种颜色节点
background-image: linear-gradient(#e66465, #9198e5); 从上到下 background-image: linear-gradient(to right, red , yellow); 从左到右 background-image: linear-gradient(to bottom right, red, yellow); 左上角到右下角
如果使用多个颜色就在后面加就行了 使用角度就把里面的to xxx 换成45deg 这样的看下面的箭头指向哪朝哪变 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 透明度0透明1不透明
文本属性 text-overflow:ellipsis 和 text-overflow:clip
字体
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;2D和3D转换
transform:translate(50px,100px); 多列 column-count: 3 三列 column-gap: 40px 两列之间的间隙是40px column-rule:1px solid lightblue 边框宽度 样式 和颜色 column-rule-style:solid 列与列之间的边框样式 column-rule-width:1px 边框宽度 column-rule-color: red 边框颜色 column-span: all; 在一个文本内容分多列显示的区域内有一个标题元素你希望它完整地显示在所有列之上不被拆分成多列显示就可以给这个标题元素设置 column-span: all; 样式使得标题更加醒目、整体性更强。 column-width:100px; 指定列的宽度
调整尺寸 Resize resize:both; 自己拉动 overflow:auto; 是否能滚动
方框大小调整(Box Sizing)
box-sizing:border-box; 高度和宽度应用于元素的所有部分: 内容、内边距和边框 box-sizing:content-box; 高度和宽度只应用于元素的内容 也就是说同等情况下content-box 比 border-box 要宽
外形修饰outline-offset border:2px solid black;outline:2px solid red;outline-offset:15px; 两个圈的间距 在border外面在加一个外圈图片 img srcparis.jpg altParis width400 height300 alt是超链接
块级元素容纳块级元素和行级元素 所有行级元素只有变成块级元素才能容纳行级元素哦 用到 display: block; 从左到右排列不会独占一行除非空间不够换行 还有dispaly: inline-block 这个好用行级元素特性保留、块级元素特性增加 两个差别图 有的行级元素没有固定的display的固定值比如a标签默认情况下其宽度是由内容撑开的。当不用inline-block的时候就不能padding值了像button和input都有display的默认值inline-block
所有行级元素 span一个通用的内联容器 a超链接 img用于在网页中插入图像 b使文本加粗 i使文本倾斜 em强调文本通常也表现为斜体 strong加强语气通常表现为加粗 sub定义下标文本 sup定义上标文本 其他的还有 button、input、select
所有块级元素 div 太常见了 p段落 h1-h6标题 ul和ol无需列表 有序列表 li元素表示 from表单 table表格 nav专门用于定义导航链接的区域 section用于对文档进行分区
两个span不会换行 两个div会换行
响应式图片
max-width: 100%;
height: auto;下面这个图片会随着页面的大小响应式缩放 放大的哦
图片文本
.文本左上角 {position: absolute;top: 8px;left: 16px;font-size: 18px;
}
.img { width: 100%;height: auto;opacity: 0.3;
}图片滤镜 filter: grayscale(100%); 其他效果百度下还有黑白的 阴影的 font-size 还管按钮大小
鼠标悬停按钮
.button1:hover {transition-duration: 4s; 颜色变化持续时间cursor: pointer; 鼠标悬停小手 background-color: #4CAF50; 鼠标放上去的颜色color: white; 完全显示后里面字体的颜色
}鼠标悬停出现阴影
.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}.disabled {opacity: 0.6; 1最大完全不透明cursor: not-allowed; 禁用
}动画 transition: 0.5s; 表示动画
定位 position: absolute; 绝对定位不占空间参考离他最近的上层定位如relative、absolute或fixed没有就根据浏览器窗口定位
position: relative; 相对定位。 相对于自身来说例如设置position: relative; left: 10px; 该元素会在自身的基础上向左偏移 10 像素 实现上面gif的效果 *padding-right 和 right 的区别*
padding-right是会影响页面布局的。right一般和position: absolute;或position: relative;用right属性是用来确定元素的右侧边缘与定位参考点
按钮动画 - 波纹效果 这个gif真实的效果应该是先收在还原。收在0s内所有没感觉 渲染的时候先after把阴影放的远远的完全透明看不见。
点击的时候收回来padding和magin都是0transition0s 所有你没感觉 。 如果你把transition变成1就能看到一个浅到深的效果因为opacity是由0过渡到1 松开鼠标 还回去。 opacity是由1过渡到0 由深入浅的动画效果
.button:after是一个伪元素。当你没有显式地设置它的宽度和高度时它的尺寸会由其内容和内边距padding、外边距margin等属性来决定
元素非激活的状态下有默认值。 激活结束后会还原
.button:active {background-color: #3e8e41;box-shadow: 0 5px #666; 像下5个像素元素向下移动4个 就有按压的效果了transform: translateY(4px);
}:active:after可能不会产生任何效果如果没有对应的伪元素来应用样式
块级元素另起一行。 行级元素在一行
弹性盒子
display: flex; 把块级元素 变成行级元素 比如两个div用flex 就不会换行了
其他的还有 display: inline; 把行级元素 变成块级。 span换行 display: block; 把块级元素变成行级。 div在一行 dispaly: inline-block 变成行-块级属性
direction: rtl; direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变
flex-direction
row-默认的 左对齐 row-reverse 右对齐 和左对齐相反方向
column - 上下排列 column-reserve 下上排列
align-items 侧轴 管竖直方向
stretch 如果没有设置height值会拉满所在行的尺寸受到min/max-height限制
flex-start 默认的
flex-end center
justify-content 内容对齐 主轴 管水平方向
行内轴是文本书写方向的轴
flex-wrap 属性 用于指定弹性盒子的子元素换行方式
nowrap 只能在一行会压缩可能溢出 wrap 换行超出的 wrap-reverse 反转
align-content 用于修改 flex-wrap 属性的行为
弹性子元素排序 order: -1 数值小的排在前面。可以为负值
align-self 元素自身在竖直方向上的对齐方式
flex 属性用于指定弹性子元素如何分配空间
多媒体查询
screen用于电脑屏幕平板智能手机等
media screen and (max-width: 480px) { body { 浏览器窗口宽度小于480背景颜色变红色background-color: red; }div.example { 浏览器窗口宽度小于480隐藏某原色 display: none; }
}大于480右侧菜单浮动到右侧小于在下面 动态添加文本或图片 网格布局 display 属性设置为 grid 或 inline-grid 后它就变成了一个网格容器这个元素的所有直系子元素将成为网格元素
grid是块级元素同级的grid不能再一行 inline-grid 是块级元素能在一行 grid-template-columns: auto auto auto 三列几个auto就几个列 单位是fr grid-template-columns: 2fr 1fr 1fr; 三列一个占一半剩下两个各个四分之一 grid-template-columns: 30px 200px auto 100px; 指定列的大小 上面都是列行也是类似的网格间距 grid-gap: 30px 100px; 上下间距30px 左右100px 是grid-row-gap 和 grid-column-gap 属性的简写 grid-row-gap: 50px; 上下间距50px grid-column-gap:45px; 左右45px
网格区域 grid-column-start从哪一列网格线开始 grid-column-end从哪一列网格线结束 grid-row-start从哪一行网格线开始 grid-row-end从哪一行网格线结束
3 * 3的grid布局行和列都各有四条网格线 .item1 {grid-column: 1 / span 2; 列 1代表起始线 2代表跨度就是到第三条线结束两个单元格grid-row: 1 / span 2; 行 同上}.item8 {grid-area: 1 / 2 / 5 / 6; 第一行 第二列 开始 第五行 第六列结束
}.item8 {grid-area: 2 / 1 / span 2 / span 3; 第二行 第一列 跨 2 跨 3
}grid-template-areas制作网页模板
可以配合 align-content和justify-content 一块使用
完
