HTML & CSS
文章平均质量分 58
笔记
Raccom
这个作者很懒,什么都没留下…
展开
-
H5 video
如果播放失败video会继续看下一个source标签,直到兼容。</原创 2023-07-07 10:44:22 · 212 阅读 · 0 评论 -
常用Css
笔记原创 2022-12-14 09:53:17 · 129 阅读 · 0 评论 -
HTML标签
HTML5标签h1-h6 标题大小p 文本段落b/strong 加粗i/em 倾斜…/ 路径选择返回上一级br 换行hr 横线div 区域划分span 独立内容del 删除线u 下划线marquee 弹幕滚动效果a href="#" 超链接 其他属性 title=" 悬停提示 target="打开方式 =-self(默认) 本窗口打开 =-blank 新窗口打开注:在原创 2021-11-22 11:30:11 · 220 阅读 · 0 评论 -
H5新增
HTML5快速html结构语法1.生成多个相同标签 div*3 div{div内的内容} div[div的属性]2.有父子关系 用> 如ul>li3.有兄弟关系 用+ 如div+p4.生成带有类名或id 直接写.demo或者#two5.如果生成div类名有顺序,可以用自增$6.如果想在生成的标签内部内容可以用{}表示7.tab+shift 删除代码前空格HTML5新语义标签 主要针对搜索引擎 可以使用多次 (在ie9中要转换成块)移动端使用更多head原创 2021-11-22 11:42:30 · 1352 阅读 · 0 评论 -
HTML的列表样式
HTML5无序列表 <ul type="disc(实心圆)/circle(空心圆)/square(方块)/none(无)"> <li>无序列表</li> </ul>有序列表 <ol type="1/A/a/i/I(罗马) start="定位开始位置> <li>无序列表</li> </ol>自定义列表<dl> <dt>自定义问题原创 2021-11-22 11:46:49 · 337 阅读 · 0 评论 -
HTML的表格样式
HTML5表格<table> <tr> <th>1</th>(th为列标题 自动加粗居中) <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr></table>属性:宽度:width高度:原创 2021-11-22 13:56:02 · 1298 阅读 · 0 评论 -
HTML的表单样式
HTML5表单<from method="get/post(更安全) action="传给谁> <input type="text(文本)/password(密码)/submit(提交按钮)/radio(单选)/checkbox(多选)/button(单纯按钮)/file(文件上传)/hidden(隐藏的输入字段)/image(图像形式的提交按钮)/reset(重置按钮)> 其他属性:value="值 name="名称原创 2021-11-22 13:51:49 · 952 阅读 · 0 评论 -
CSS的选择器
CSS<style> 关联css:<link rel="stylesheet" href="*">(style外) 或@import url("*")</style><link rel="icon" href=""> 引入网页标题旁的小图标行内样式<div style="*">1</div>!important 重要的 选择器权重无限大书写顺序布局定位:display/position/fl原创 2021-11-22 14:12:44 · 373 阅读 · 0 评论 -
CSS的文本属性
CSS文本属性font-size 字体大小 单位:px.pt.em等 12pt=16px 1em=16px 浏览器默认是16px 设计图多为12px em是相对父级单位 最小字号是12px 建议设置偶数像素color 字体颜色 color:red/#ff0/rgb(255,0,0);(0-255)font-family 字体 字体为中文或英文有空格时加引号 多个字体一起用时用逗号隔开font-weight 加粗 font-原创 2021-11-22 14:28:34 · 274 阅读 · 0 评论 -
CSS的列表属性
CSS列表属性定义列表样式list-style-type:disc(实心圆)/circle(空心圆)/square(方块)/none(无) 图片设置为列表样式(图片大小位置不可调)list-style-image:url(); 设置列表项标记位置list-style-position:outside(列表外)/inside(列表内) list-style 简写(任意排)...原创 2021-11-22 14:29:36 · 136 阅读 · 0 评论 -
CSS的边框属性
CSS边框属性border-width 设置边框宽度border-color 边框颜色border-style:solid(实现)/dashed(虚线)/double(双线)/dotted(点状线) 边框线型border 简写(任意排)注:宽高为0时边框为正方形CSS3border-radius:length; 设置圆角边框,参数用数值或百分比。正方形要设置成圆时,需把数值修改为高度或宽度的一般,或直接写成50%;矩形时,设置为高度的一半就可以做两边为圆形。为简写属性,4个值原创 2021-11-22 14:36:36 · 691 阅读 · 0 评论 -
CSS的背景属性
CSS背景相关属性背景颜色background-color:#ccc; 背景图片(背景图不占位且平铺)background-image:url();背景图平铺background-repeat:no repeat/repeat/repeat-x/repeat-y;背景图大小 background-size:(背景图片宽度 背景图片高度) 单位: 长度|百分比|cover|contain cover 把背景图片拓展到足够大,以使背景图片完全覆盖背景区域。原创 2021-11-23 08:50:12 · 270 阅读 · 0 评论 -
CSS的元素类型
CSS元素类型块元素 自上而下排列 可定义宽高 p不能包自己和其他块 h1-h6不能包自己和同类,其他可以行内元素 左右排列 不可定义宽高 对于margin和padding显示不正确(left right 可以) 识别回车为空格行内块元素 左右排 可定义宽高 可以转成块元素 不可以转成行内元素注:图片为行内块元素 会向下撑3元素 给img设置display:block;(转换成块元素) 给img设置 vertical-align:top;(设置垂直靠上对齐)原创 2021-11-23 08:55:03 · 98 阅读 · 0 评论 -
溢出,浮动与间距
CSS溢出隐藏overflow:属性visible 不剪切内容也不添加滚动条hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉scroll 总是显示滚动条auto 超出自动显示滚动条 不超出不显示注:有定位的盒子慎用overflow:hidden;会隐藏多余部分浮动float:none/left/right;(脱离文档流)清除浮动选择器{clear:属性值;}left 清除左侧浮动right 清除右侧浮动both 清除两侧浮动(一般只用这个)原创 2021-11-22 14:18:53 · 155 阅读 · 0 评论 -
CSS的定位
CSS定位默认position:static;绝对定位 脱离文档流position:absolute;(top left right bottom移动) 参照物:当没有父元素或父元素没有定位时参照物是浏览器的第一屏 当有父元素且父元素有定位,参照物为父元素(常用相对定位)固定定位 脱离文档流position:fixed; 参照物:浏览器当前窗口(视口)相对定位 不脱离文档流position:relative; 参照物:自己的初始位置(移动后原创 2021-11-23 09:03:15 · 54 阅读 · 0 评论 -
CSS的居中
CSSvertical-align : 垂直居中用于设置图片或表单(行内块元素)和文字垂直对齐。(行内或行内块元素有效)属性baseline 默认 元素放置在父元素基线上top 把元素的顶端与行中最高元素顶端对齐middle 把此元素放置在父元素的中部bottom 把元素的顶端与行中最低的元素的顶端对齐定位(垂直水平居中)注 top:clac(50% - 150px);四则运算 支持加减乘除 加或减前后加空格垂直水平居中(盒子300px 300px):1.pos原创 2021-11-23 09:07:55 · 464 阅读 · 1 评论 -
CSS的2D3D动画
CSSCSS32D2D转换 移动translate 改变元素在页面中的位置 类似定位(且不会影响其他盒子)transform:translate(x,y);或transform:translateX(n);transform:translateY(n);xy可以为百分比 填入百分比是相对于自身元素尺寸translate(50%,50%);注:对行内标签没有效果2D转换 旋转rotate 使元素在页面中按设定的焦点旋转transform:rotate(度数);rotate里原创 2021-11-23 09:40:54 · 260 阅读 · 0 评论 -
CSS的盒模型
CSSCSS3怪异盒box-sizing:border-box;属性值 content-box 默认 边框及内边距会将盒子撑大 border-box 盒子大小为width弹性盒flex是flexible box的缩写 任意一个容器都可以指定为flex布局。当把父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。通过给父盒子添加flex属性,来控制子盒子的位置和排列方式父项属性flex-direction 设置主轴的方向原创 2021-11-23 09:47:39 · 371 阅读 · 0 评论 -
多列布局及网格布局
多列布局1.column-count规定元素分隔的行数适用于:除table外的非替换块级元素, table cells, inline-block元素2.column-gap属性规定列之间的间隔大小3.column-rules设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间规则的样式。column-rule-width规定列之间规则的宽度。4.column-fill设置或检索对象所有列的高原创 2021-12-06 11:09:01 · 561 阅读 · 0 评论 -
CSS的精灵图
精灵图把网站里面的小图标有规则的整合在一起,利用background-position 改变背景图的位置优点:1.CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;2.CSS Sprites能减少图片的字节;3.CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。4.CSS Sprites只需要修改一原创 2021-12-09 19:57:55 · 92 阅读 · 0 评论 -
meta移动端
CSSmeta属性width 宽度设置的是viewport宽度,可以设置device-width特殊值initial-scale 初始缩放比,大于0的数字maximum-scale 最大缩放比 ,大于0的数字minimum-scale 最小缩放比,大于0的数字user-scalable 用户是否可以缩放,yes或no(1或0)各大浏览器私有前缀-moz- firefox 浏览器私有属性-ms- ie 浏览器私有属性-webkit- safari原创 2021-11-23 09:53:03 · 827 阅读 · 0 评论 -
Less
CSS3css3预处理less变量赋值@变量:值; 必须以@为开头 不能包含特殊字符 不能以数字开头 大小写区分less嵌套内层选择器的前面没有&符号,则被解析为父选择器的后代;如果有&符号,则被解析为父元素自身或者父元素的伪类。less运算任何数字、颜色或者变量都可以参与运算提供加(+)减(-)乘(*)除(/)算法运算运算符中间用空号隔开两个不同单位的值之间的运算,运算结果取第一个值的单位两个值只有一个单位则运算结果取该单位...原创 2021-11-25 19:34:43 · 91 阅读 · 0 评论 -
Sass
SASSSASS官网世界上最成熟、最稳定、最强大的专业级CSS扩展语言!sass 是一个 css 的预编译工具也就是能够 更优雅 的书写 csssass 写出来的东西 浏览器不认识依旧是要转换成 css 在浏览器中运行这个时候就需要一个工具来帮我们做安装 sass 环境以前的 sass 需要依赖一个 ruby 的环境现在的 sass 需要依赖一个 python 的环境但是我们的 node 强大了以后,我们只需要依赖 node 环境也可以原创 2022-01-10 19:37:41 · 84 阅读 · 0 评论 -
网页优化
CSS网页优化BUG和HACK1.图片添加超链接,在ie上有边框 给img的边框写成0,img{border:0;}2.表单元素距顶部间距不一致(IE MOZ C O S) 给表单元素添加声明float:left; text和button的边框不同(text边框朝外 botton边框朝内 (高度调高加上边框的距离));3.cursor:hand属性值只有在IE9一下浏览器识别 如统一某元素鼠标指针形状为手型,应添加声明 cursor:pointer;4.同名的兼容原创 2021-11-23 09:58:37 · 197 阅读 · 0 评论