html 和 css
文章平均质量分 56
肖ZE
这个作者很懒,什么都没留下…
展开
-
获取 DOM 元素设置的样式属性
document.getElementById("").style 获取的是元素行间设置的样式,不能获取到css中设置的样式。如果要获取css中设置的样式,可以试试 getComputedStyle(标准浏览器)或者 currentStyle (ie低版本)let target = document.getElementById('target')// 获取目标伪元素样式getComp...原创 2019-09-02 08:49:36 · 743 阅读 · 0 评论 -
html相关前端注意点
1、一个网页中只含有一个h1标签(用来放网站重要logo) 2、最好不要在HTML中修改样式(因为HTML告诉浏览器语义,而不是起到修饰作用) 3、br hr之类标签不推荐使用(无语义),可以用css中border等设置 4、对于img标签width和height一般指定一个就好(否则可能引起原图变形) 5、引用路径使用相对路径(可移植性好) 6、假链接:1、#(点击跳转头部)2、jav...原创 2018-08-11 21:23:58 · 205 阅读 · 0 评论 -
css——background、border、margin、float、content、blur(图片模糊)、user-select:none(禁用用户选择复制),border-image
1、background 缩写形式:background:color image repeat 关联方式 position; 关联方式(不常用):background-attachment:scroll(随滚动条动)/fixed(不随滚动条动) 可同时设置背景图片和颜色,且图片会覆盖颜色 background-image:url( )选缓存小 可循环的图片平铺 优化性能 背景图片定位:b...原创 2018-08-13 11:36:46 · 585 阅读 · 0 评论 -
css——transition过度模块、perspective透视、transform、shadow、animation动画、box-sizing、border-radius
1、transition transition:property duration timing-function; property:指定哪个属性需要过度(例如 width 、bgc等) duration:过度时间 timing-function:控制过度动画速度(linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速) ...原创 2018-08-13 19:18:31 · 1264 阅读 · 0 评论 -
css——手风琴效果、翻转菜单效果
手风琴 <style> ul { width: 810px; height: 300px; } ul li{ width: 270px; height: 300px; border: 1px solid #000...原创 2018-08-13 20:27:56 · 369 阅读 · 0 评论 -
css3——flex 弹性布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; } 行内元素也可以使用Flex布局。.box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。.box{ display: -we...原创 2018-08-13 20:58:33 · 1281 阅读 · 0 评论 -
html——map标签(引用w3c)
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"&am原创 2018-08-13 21:31:40 · 642 阅读 · 0 评论 -
css——居中对齐方法
1、text-align:center 仅对文字、图片、按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中 2、margin:垂直 auto; 仅水平居中,且对浮动元素定位无效 .father{ width:500px; height:200px; background-colo...原创 2018-08-14 11:39:02 · 19315 阅读 · 0 评论 -
html——引入站点图标
<link rel="shortcut icon" href="URL" type="image/x-icon">原创 2018-08-18 09:43:46 · 2239 阅读 · 0 评论 -
html——a标签与base标签
1、a标签&amp;amp;amp;lt;a href=&amp;amp;quot;url&amp;amp;quot;&amp;amp;amp;gt;content&amp;amp;amp;lt;/a&amp;amp;amp;gt;a标签样式需要单独设置 不继承父元素a{ display:block; //或inline-block之后设置w/h text-decoration: n原创 2018-08-12 10:39:08 · 1128 阅读 · 0 评论 -
html——P标签 文字超出省略、 首字下沉效果 和 两端对齐
1、P标签: 块级标签 居中方式:height=line-height 文字超出省略:p{ width:100px overflow:hidden; text-overflow:ellipsis; //加省略号 white-space:nowrap; //强制不换行}text-overflow: clip 修剪文本。 测试 elli...原创 2018-08-12 10:52:51 · 12185 阅读 · 0 评论 -
html——ul(无序列表)ol(有序列表)dl(自定义列表)
1、ul标签: 应用场景:导航 图文混排 列表&lt;ul type="circle"&gt; //disc(实心圆点)circle(空心圆点)square(实心方块) &lt;li&gt;content1&lt;/li&gt; &lt;li&gt;content2&lt;/li&gt;原创 2018-08-12 11:09:16 · 3382 阅读 · 0 评论 -
css——选择器 选择器优先级 优先级提升 选择器权重计算 继承性
1、选择器 :focus——选择具有焦点的输入元素 :first-letter——选择元素的第一个字母 :first-line——选择元素的第一行 :before——在元素之前插入内容 :after——在元素之后插入内容id选择器:#id{ } 命名时,仅数字、字母、下划线可用,且数字不可开头,标签也不可用于id命名 id选择器不可重复 独一无二类选择器:.className...原创 2018-08-13 10:24:16 · 4131 阅读 · 0 评论 -
css——font 样式和对照表 颜色格式和颜色渐变
1、font 常用字体:宋体(SimSon)、黑体(SimHei)、微软雅黑{ font:italic bold 12px/20px arial,sans-serif; }font简写中size和family位置固定 size在前 且都不可省略font-style:字体样式 normal—— 默认值。浏览器显示一个标准的字体样式。 italic——浏览器会显示...原创 2018-08-13 09:25:32 · 7545 阅读 · 0 评论 -
html——marquee标签(走马灯)
&lt;marquee behavior="alternate" direction="left"&gt;hello&lt;/marquee&gt;scrollamount:速度(数越大 速度越快) direction:方向 loop:循环次数 behavior:slide(边停)/ alernate(来回流动)...原创 2018-08-12 17:36:02 · 9236 阅读 · 0 评论 -
html5——details和summary标签(详情概要)
&amp;amp;amp;lt;details&amp;amp;amp;gt; &amp;amp;amp;lt;summary&amp;amp;amp;gt;农夫与蛇&amp;amp;amp;lt;/summary&amp;amp;amp;gt; 一个农夫在寒冷的冬天里看见一条蛇冻僵了,觉得它很可怜,就把它拾起来,小心翼翼地揣进怀里,用暖热的身体温暖着它。那条蛇受到了暖气,渐渐复苏了,又恢原创 2018-08-12 17:30:33 · 3482 阅读 · 0 评论 -
html5——video标签 audio标签
1、video标签:&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;video src=&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;l原创 2018-08-12 17:23:01 · 2309 阅读 · 0 评论 -
html5——datalist标签
&amp;amp;amp;lt;input list=&amp;amp;quot;cars&amp;amp;quot; /&amp;amp;amp;gt;&amp;amp;amp;lt;datalist id=&amp;amp;quot;cars&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;option va原创 2018-08-12 12:45:36 · 756 阅读 · 0 评论 -
html——form表单 input标签 select标签 textarea标签
&amp;amp;amp;lt;form action=&amp;amp;quot;url&amp;amp;quot; method=&amp;amp;quot;get&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;fieldset&amp;amp;amp;gt; //如果表单周围没有边框,说明您的浏览器太老了。&am原创 2018-08-12 12:03:31 · 802 阅读 · 0 评论 -
html——table标签及其css样式
&amp;amp;amp;amp;lt;table border=&amp;amp;amp;quot;1&amp;amp;amp;quot; width=&amp;amp;amp;quot;400px&amp;amp;amp;quot; height=&amp;amp;amp;quot;200px&amp;amp;amp;quot;&amp;amp;amp;amp;gt;原创 2018-08-12 11:27:07 · 8972 阅读 · 0 评论 -
html——form表单提交方法及表单提交注意点
1、type=”submit”&amp;amp;amp;amp;amp;lt;form name=”form” method=”post” action=”#&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;input type=”submit” name=”submit” value=”提交&amp;amp;amp;amp;quo原创 2018-08-19 09:01:21 · 78668 阅读 · 2 评论 -
html5——canvas
1.创建一个画布(Canvas)一个画布在网页中是一个矩形框,通过 canvas 元素来绘制. 注意: 默认情况下 canvas 元素没有边框和内容。canvas简单实例如下:&lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt;2.使原创 2018-09-14 16:49:15 · 267 阅读 · 0 评论 -
css&scss——字体图标 和 web字体
//导入字体文件@font-face { font-family: huge; src: url(&amp;amp;amp;quot;../fonts/icomoon.svg&amp;amp;amp;quot;) format('svg'), url(&amp;amp;amp;quot;../fonts/icomoon.eot&amp;amp;amp;quot;) format('embedded-opentype')原创 2018-09-15 11:10:46 · 1878 阅读 · 0 评论 -
html5-api——地理定位接口
浏览器会自动选择上面的定位方式<div id="demo"></div><script> var x = document.getElementById('demo'); function getLocation() { /*能力测试*/ if (navigator.geolocation) { ...原创 2019-02-06 15:11:09 · 1440 阅读 · 0 评论 -
html5-api——application 应用缓存
1. 概念:使用 HTML5 ,通过创建 cache manifest 文件,可以轻松的创建 web 应用的离线版本2. 优势可配置需要缓存的资源网络无连接应用仍可用本地读取缓存资源,提升访问速度,增强用户体验减少请求,缓解服务器负担3. Cache Manifest 基础:如需启用应用程序缓存,请在文档的 <html>标签中包含 manifest 属性:<...原创 2019-02-15 16:27:28 · 271 阅读 · 0 评论 -
css3——多列布局、瀑布流
colum-count:属性设置列的具体个数colum-width:属性控制列的宽度column-gap:两列之间的列间距column-rule:规定列之间的分割线的宽度、样式和颜色column-span:规定元素应横跨多少列(1:不跨列(默认);all:跨所有列)实例:&lt;style&gt; div { width: 100%; ...原创 2019-02-19 20:43:48 · 2338 阅读 · 0 评论 -
scss 常用教程
Sass 是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量、嵌套、混合、继承等特性,让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信息...原创 2019-03-06 08:36:17 · 1962 阅读 · 0 评论 -
css——初始化 css 样式
为了解决不同浏览器兼容问题最简单的初始化方法:(强烈不推荐,影响性能)* { margin: 0; padding: 0;}淘宝的样式初始化代码:body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, te...原创 2019-03-11 21:50:44 · 301 阅读 · 0 评论 -
scss——手机端 1px 实现
<div class="tab border-1px"></div>自适应 DPR .tab { width: 100%; height: 40px; line-height: 40px; position: relative; &::after { con...原创 2019-04-08 22:14:43 · 682 阅读 · 0 评论 -
css——正方形头图固定设置(padding-top)
<div class="image-father"> <img class="img" :src="food.image" alt=""></div> .image-father { position: absolute; width: 100%; height: 0; paddi...原创 2019-04-13 22:08:26 · 650 阅读 · 0 评论 -
移动端 input 调用手机键盘搜索功能
html<input type="search" class="input">jslet keyword = document.getElementsByName('input')[0]keyword.onkeypress = function (e) { let keycode = e.which || e.keyCode if (keycode === 13...原创 2019-04-18 21:41:18 · 3579 阅读 · 0 评论 -
html5-api——拖拽接口
拖拽接口<div class="box1"> <!--在h5中,如果想拖拽元素,就必须为元素添加 draggable="true" 。图片和超链接默认就可以拖拽--> <p class="text" draggable="true">来拖拽我啊!</p></div>&a原创 2019-01-28 14:29:48 · 296 阅读 · 0 评论 -
html5-api——网络监听接口、全屏接口
123原创 2019-01-28 10:41:35 · 495 阅读 · 0 评论 -
css3——操作元素类样式(classList)、自定义属性(dataset)
操作元素类样式首先自己创建五个class名(orange,red,yellow,blue,change),样式自定义&lt;ul&gt; &lt;li&gt;1&lt;/li&gt; &lt;li class="blue"&gt;2&lt;/li&gt; &lt;li&a原创 2019-01-28 10:31:40 · 1955 阅读 · 0 评论 -
css——pre标签
预格式化文本,一般用来存放计算机代码等可以用1:保留空白同时折行: pre { white-space: pre-wrap; }2:既不折行也无滚动条,保持默认的容器宽度,但是允许它在交互的时候展开: pre:hover, pre:focus { width: min-content; }...原创 2018-10-31 11:29:29 · 5032 阅读 · 0 评论 -
touch-action - CSS:叠层样式表(当一些浏览器对某些操作行为报警告性错误时使用)
CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。使用方式 * { touch-action: pan-y;/* 启用单指垂直平移手势 */ }touch-action 属性可以被指定为:任何一个关键字 auto、none、manipulation,或零或任何一个关键字 pa...原创 2018-10-31 14:51:19 · 1133 阅读 · 0 评论 -
css3——max-height 和 min-height
max-height:最大高度为了避免内容太多将高度撑太高影响布局美化统一,这个时候我们设置最大高度限制。比如一个 table tr td 表格对象里装一个图片,而图片高度不确定,如果太高了不想图片撑破 tr td 表格,这个时候通过 css max-height 限制图片最大高度是有必要的。min-height:最小高度为了避免对象(可以是在加载过程中)没有内容时候不能撑开,但内容多少不能...原创 2018-10-31 19:49:24 · 1805 阅读 · 0 评论 -
css3——transition 的 cubic-bezier 缓动动画效果
网址:cubic-bezier使用方法:在上面网址中选择想要的缓动效果(如:cubic-bezier(.17,.67,.84,.66))复制到transition: all 2s cubic-bezier(.17,.67,.84,.66);就 OK 了原创 2018-11-02 08:19:08 · 7154 阅读 · 0 评论 -
css——设置网页占满屏幕
html,body{ min-height: 100%; _height:100%; height:100%; }原创 2018-11-08 18:01:26 · 882 阅读 · 0 评论 -
屏幕自适应
先自适应<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">样式设置html { font-size: 100px;//这个调大一点,下面按比例调小,因为浏览器最小12px} div { font-size: ...原创 2018-12-17 11:51:47 · 240 阅读 · 0 评论