前端 | Archai's home

常用的一些html小问题

1. 网页出现横向滚动条？ <body style=`overflow:-Scroll;overflow-y:hidden > </body> 让横条没有： <body style=`overflow:-Scroll;overflow-x:hidden> </body> 两个都去掉？更简单了 <body scroll="no" > </body> 火狐底部滚动条不显示： html { overflow:-moz-scrollbars-vertical; } 2. 网页图标？ <link rel="shortcut icon " href="images/favicon.ico"> 3. Height:100%失效？ <html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body> </html> 4. 设置一个元素不可见？ opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 注意： 1> display=none元素消失，不占位置 2> opacity =0、 visibility =hidden只是视觉上不可见，其实还在那里占位置 5.input无法输入？...

Jquery一些操作

Jquery属性操作 1.属性 attr(attrName [,attrValue]) 操作所有属性（自定义和内置的） prop(attrName [,attrValue)) 操作HTML元素内置属性 removeAttr(attrNam)删除属性 removeProp(attrName) 并不能删除HMTL元素上的属性 2.CSS类 addclass()添加一个class值 removeClass()删除一个class值 toggleClass()切换一个class值(有则删掉该class，没有则加上，其他class不动) hasClasss() 判断是否有指定class 3.HTML代码/文本/值 html([html]) 相当于innerHTML text([text)相当于innerText val([value]) 设置/获取表单控件的值 Jquery样式操作 1.CSS操作 css(atr,[value])设置/获取CSS值参数可以是一个对象的形式css({atr: value,}) 2.位置 offset()[.left/.top]元素在页面中的坐标设置只需要传一个对象即可 {"left:num,top:num"} position()[.left/.top] 元素在第一个定位的祖先元素内的坐标 (只读！) scollTop … scollLeft … 3.尺寸 width()/height()内容尺寸 innerwidth()/ innerHeight()内容尺寸+ padding outerWidth()/ outerHeight() 盒子的尺寸 Jquery筛选操作 1. 过滤操作 first () last() eq() not() filter() slice () has() 3.串联 add()把选中的元素加入当前集合 addBack()把调用该方法的元素加入当前集合 end()返回最后一次破坏性操作之前的DOM...

Javascript一些操作

1.通过id获取元素 function $(id) { return typeof id === 'string' ? document.getElementById(id): null; } 2.日期格式化 function formatDate(cDate) { //1.判断 if (!cDate instanceof Date){ return; } //2.转化 var year=cDate.getFullYear(); var month=cDate.getMonth(); var date=cDate.getDate(); var hour=cDate.getHours(); var minute=cDate.getMinutes(); var second=cDate.getSeconds(); //2.1 补0 month=month<10? '0'+month:month; date=date<10? '0'+date: date; minute=minute<10? '0'+minute:minute; second=second<10? '0'+second:second; return year + '-' + month + '-' + date + ' ' +hour+':'+minute+":"+second; } console.log(formatDate(new Date())); 3.匀速运动封装 /** * 设置一个盒子右边距匀速变化 * @param{string} btnId * @param{string} boxId * @param{number} step * @param{number}target */ function linearAnimation(btnId, boxId, step, target) { // 1....

常用的一些html代码

1. 获取网页logo 京东 : www.jd.com 后面加 “/favicon.ico"即可京东logo : www.jd.com/favicon.ico 2. webstorm网页logo简易写法 link:favicon 按Tab键 3.meta标签为搜索引擎提供的关键字列表( name=“keywords”)：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。 <meta name="keywords" content="牙疼怎么办，智齿是什么，拔牙多少钱，矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔"> 用来告诉搜索引擎你的网站主要内容(name=“description”)： <meta name="description" content="有牙齿问题,找河马牙医,儿童口腔，全国儿童口腔在线咨询，牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题"> 优先以webkit内核渲染页面(“renderer”)： <meta name="renderer" content="webkit" /> 4.复合选择器 div#main{ color:green} 表示选中div中id为main的元素 5.标签居中水平居中行内标签/行内-块级标签: text-align:center 块级标签: margin:0 auto 2)垂直居中行内标签/行内-块级标签: 设置行高为盒子高度line-hight:50px; 图片加文字时:vertical-align:middle; 块级标签: 设置“子绝父相” ==> top，left设置为50% ==> margin-left和nargin-top设置为负的盒子对应宽高的一半...

CSS揭秘一书中的知识

1.backgrouond简写在background简写属性中指定background-sizing时，需要提供一个background-position值，而且要使用/作为分隔。 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; —–P13—– 2.background-clip 规定背景的绘制区域：得到一个白色背景并且有白色边框的盒子： border:10px solid hsla(0,0,100%,.5); background:white; background-clip:padding-box 若不设置background-clip，背景会延伸至边框，边框的透明无法显示 ——P18——- 3.双重边框 box-shadow background:orange; box-shadow:0 0 010px #655 , 0 0 0 15px deeppink; /*可以加任意层数边框*/ outline width:180px; height:90px; margin:30px auto; text-align:center; padding:10px; background:##655; outline: ##fff dashed 1px; outline-offset: -15px; /*设置outline向内缩进*/ border-radius:8px; 注意： outline可能会产生不贴合border-radius圆角的情况 —-P20—- 4.box-shadow 只给下方设置阴影，（扩张半径为负的模糊半径）: box-shadow: 0 5px 4px -4px black; 临边投影，(扩张半径为负的模糊半径的一半): box-shadow: 3px 3px 6px -3px black; —-P88—-...