html/css
笔记
mrhaoxiaojun
这个作者很懒,什么都没留下…
展开
-
在styled-components的样式声明中做px到rem的自动转换
原文地址 最近在尝试使用styled-components来做React下的样式开发,这样可以利用js语言的灵活来增强css的能力。在用styled-components处理px到rem的转换时,有点问题了。styled-components自己本着基础库的原则,是没有附加复杂的配置,所以一开始想的是自己写一个函数来做单位换算:function r(pxValue) { co...转载 2018-04-24 17:46:40 · 3251 阅读 · 2 评论 -
如何让2个并列的div自动等高(不设高度)
1, table:css:*{margin: 0; padding: 0;}table{width: 100%; height: 100%}html:<table border="1"><tr><td colspan="2" style="height:50px; background:#333"></td></tr><tr><td style="width: 50px; background:#原创 2018-01-02 11:06:08 · 4345 阅读 · 0 评论 -
IE10 、IE11 CSS Hack
ie11hack原文:http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11 /*ie11 css hack*/ @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .class名字 { 里面的样式:样式值;} } /*ie11转载 2017-11-24 16:01:14 · 3258 阅读 · 0 评论 -
取消a标签在移动端点击时的背景颜色 && 去除ios手机端input输入框上方有阴影
一、取消a标签在移动端点击时的蓝色-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;二、使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景a,a:hover,a:原创 2017-11-20 16:39:58 · 2321 阅读 · 0 评论 -
css之px自动转rem
@function px2rem($px, $base-font-size: 75px) { @return ($px / $base-font-size) * 1rem;}原创 2017-08-24 10:33:03 · 1781 阅读 · 0 评论 -
空心三角实现代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #demo { position: relative; } /*小三角*/ #demo:after { border: soli原创 2016-12-01 14:03:43 · 633 阅读 · 0 评论 -
Bootstrap的modal 远程加载Url的正确用法:
Click me × Modal title翻译 2016-11-18 17:13:17 · 19118 阅读 · 3 评论 -
bootstrap bug fixed
将modal拿到外面,解决,modal放的结构层级太深,背backdrop遮罩盖住,,,,,bootstrap v3.3.7版本$('.modal').on('show.bs.modal', function (e) { $('.modal').detach().appendTo('body')})丢失backdrop的modal,手动添加一个if ($('#taskHistoryPag原创 2016-10-27 16:53:02 · 492 阅读 · 0 评论 -
Flex 布局教程:语法篇
作者: 阮一峰日期: 2015年7月10日网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种转载 2016-06-29 18:15:43 · 330 阅读 · 0 评论 -
粘连 Footer 的 5 种方法 | CSS-Tricks
原文链接: https://css-tricks.com/couple-takes-sticky-footer/一个简短的历史,如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部,如果有足够的内容将页面撑开,footer 可以被撑到网页下方去。但是,如果页面的内容很短,粘连 footer 仍然会出现在浏览器窗口的底部。转载 2016-06-29 10:58:33 · 421 阅读 · 0 评论 -
html结构左固定,右自适应
Document html, body {margin: 0;padding: 0;} .all{ width:100%; height:100%;} .left{ width:100px; float:left; background:#990; height:100%;margin-left: -100%;} .right{ width:原创 2016-03-21 10:03:50 · 600 阅读 · 0 评论 -
IE input X 去掉文本框的叉叉和密码输入框的眼睛图标
IE input X 去掉文本框的叉叉和密码输入框的眼睛图标 从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本。 对于type=”password”的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容。 好是好,但有时候会画蛇添足,比如已经用js控制了这个功能的时候。 只要使...转载 2018-07-31 17:06:18 · 589 阅读 · 0 评论 -
进度条
<div class="xfs-bar"> <div class="finish" style="width: 80%"></div></div>// 进度条.xfs-bar { height: 8px; width: 180px; background: #EBEBEB; position:原创 2018-03-09 16:09:05 · 156 阅读 · 0 评论 -
css3 radio checkbox 自定义
// 自定义radio样式-大单选框input[type=radio] {position: relative;-webkit-appearance: none;box-sizing: border-box;appearance: none;width: 18px;height: 18px;vertical-align: middle;backgroun原创 2016-10-24 18:04:44 · 379 阅读 · 0 评论 -
ajax是否能够抓取302状态码
服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起动手写写代码看看实际情况吧。在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们转载 2016-06-02 14:39:01 · 8830 阅读 · 0 评论 -
移动开发对 META 标签的定义
一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。1、http-equiv 属性的 Content-Type 值(显示字符集的设定)说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。用法:[html] view plain copy转载 2016-06-29 11:48:12 · 378 阅读 · 0 评论 -
form表单那点事儿(上) 基础篇
做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右。了解更深,用的更顺。表单属性这个表单展示了form表单常用的属性属性名属性值描述action一个url地址指定表单提交到的地址methodGET , POST表单将以此种方法提交到服务器target* _self 当前页面 * _bl转载 2016-06-30 10:41:26 · 1009 阅读 · 0 评论 -
form表单那点事儿(下) 进阶篇
表单操作取值用JavaScript操作表单,免不了会有取值赋值操作,比如有以下表单: 13333333331 13333333332 13333333333 预览 提交 用JavaScript获取表单的属性值,或转载 2016-07-01 10:41:55 · 533 阅读 · 0 评论 -
网站开发时,如何禁用Chrome谷歌浏览器自动保存密码的提示?
在网页开发中,在表单中加入autocomplete="off"后,IE和FF不会提示保存密码,但是用Chrome浏览器登录系统时,会弹出自动保存密码的提示,从安全的角度考虑,需要禁止浏览器的这个功能,提升系统安全性。大部分浏览器都是根据表单域的type="password"来判断密码域的,所以针对这种情况可以采取“动态设置密码域”的方法://其他各种表单 -->原创 2016-06-21 14:45:35 · 5099 阅读 · 0 评论 -
兼容ie select option 显示隐藏
一级分类 五险一金 企业服务 员工服务 二级分类 社会保险服务 公积金服务 社保账户服务 公积金账户服务 社保日常服务 公积金日常服务//将option序列到数组中var childselectAry = $("#childselect option.pid").map(function(){return $(this).conte原创 2016-08-16 12:06:04 · 8140 阅读 · 0 评论 -
评价,星星
评价 .score-public { width: 210px; position: relative; height: 30px; display: inline-block; vertical-align: middle; } .star, .star-gray原创 2016-09-26 10:47:21 · 267 阅读 · 0 评论 -
上传图片本地html+css
html<div class="task-upimg"> <a class="text">+添加图片</a> <img class="upimg" src="http://css88.b0.upaiyun.com/css88/2016/10/es6-core-features-overview-large.png" > <input type="file" class="ta原创 2016-11-26 12:48:59 · 2798 阅读 · 2 评论 -
解决浏览器记住密码输入框的问题
在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,确认后在下次提交表单的时候会自动填充某些输入框。但是在某些情景下(例如在提现,充值的页面),自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。在解决的过程中遇到了一些坑,这里做一下笔记:使用HTML属性 autocomplete="off"由于自动填充这个特性是浏览器自己实现的,autocom转载 2017-08-15 11:03:18 · 2384 阅读 · 0 评论 -
input标签实现让光标不出现!(兼容版)
需求运用input的标签的时候,我不想让光标出现,因为input内容是系统给定的,不让用户更改。这时候很自然的想到了input标签的readOnly属性,设置上之后,发现点击的时候,虽然不能更改内容,但是有小光标出现,要是没这个光标就完美了。 于是又很自然的想到了disabled属性,哎呀,一看,发现挺不错,在chrome、FF和IE9以及以上的浏览器上,都不错,但是在IE8以及以下的浏览器上,字转载 2017-11-24 16:06:06 · 7001 阅读 · 1 评论 -
系统按钮返回,一般都从缓存里直接取,现在想让他返回时重新加载
在head里面加这个meta 另外如果页面里面有表单 在表单数据上加 autocompete=“off” 例:First name:Last name: E-mail: 请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。请注意,表单的自动完成功能是打开的,而 e-mail 域是关闭的原创 2016-03-21 10:53:23 · 420 阅读 · 0 评论