html+css
weixin_38203203
这个作者很懒,什么都没留下…
展开
-
AJAX扩展-POST传递参数并跳转页面
拓展的代码:这段代码的原理是创建一个表单,所有args都创建一个隐藏的input,用post方法把这些参数传递过去注意form表单一定要加载到页面中,即下面代码中标红的部分,不然参数是无法被传递的(因为这个被坑了)$.extend({ StandardPost:function(url,args){ var form = $("<form ...转载 2019-10-15 11:02:05 · 574 阅读 · 0 评论 -
纯CSS实现隐藏滚动条但仍具有滚动的效果
移动端移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 element::-webkit-scrollbar { display: none; } PC 端PC 端对兼容性的要求相对来说要高一点,可以换一种方法,大致思路就是在内容div外面包一个父容器div,设置...转载 2019-01-03 17:36:23 · 1850 阅读 · 0 评论 -
解决li标签使用inline-block出现的间隙问题
我们在写网页的时候,头部的导航条一般会用:<ul> <li></li> <li></li> <li></li></ul>但li又是块状元素,多个block元素会各自新起一行。这个时候我们会给li加上display:inline-block.之后的内联对象转载 2019-01-07 18:21:13 · 232 阅读 · 0 评论 -
transform:translate(-50%,-50%)实现水平垂直居中
.content { padding:10px; background:green; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform: translate(-50%,-50%); -moz-trans...转载 2019-01-18 16:28:48 · 5484 阅读 · 0 评论 -
块元素和内嵌元素
块元素的特征(block):1.默认独占一行2.没有宽度时,默认撑满一排3.支持所有css命令内联元素的特性(inline):1.同排可以继续跟同类的标签2.内容撑开宽度3.不支持宽高4.不支持上下的margin5.代码换行被解析(即:两个同类标签之间会有孔隙并且能选中)行内块元素的特性(inline-block):1.块在一行显示2.行...原创 2019-03-01 15:57:57 · 208 阅读 · 0 评论 -
文字的描边
-webkit-text-stroke: 2px #000;/*描边的像素,也就是粗细,这里指定是2像素的黑色边框*/-webkit-text-fill-color: #ffe268;/*文字的填充色*/原创 2019-04-16 10:18:57 · 289 阅读 · 0 评论 -
bootstrap修改默认字体,更换为微软雅黑或其他字体的方法
转自:http://www.igooda.cn/jzjl/20130914360.html在开发中,使用bootstrap后,中文会一直是默认的宋体,做为一个设计师,是不可忍受的。。。还是微软雅黑的字体更好看些,而且过度到手机、平板电脑等设备上,字体也不会有太大跳跃。所以修改bootstrap的默认字体,更换为其他字体,例如:微软雅黑,方法很简单:正常引入bootstrap的css...转载 2019-05-10 13:27:41 · 6209 阅读 · 0 评论 -
table设置td文本超出为省略号无效的解决方法
td关键代码如下:white-space: nowrap;/*控制单行显示*/overflow: hidden;/*超出隐藏*/text-overflow: ellipsis;/*隐藏的字符用省略号表示*/table代码如下:table-layout: fixed;(允许设置列宽,通过th) 默认为 table-layout: automatic 默认每一列列宽均分(不可设置...转载 2019-06-14 09:58:43 · 1492 阅读 · 0 评论 -
URL中的hash(井号)
http://www.ruanyifeng.com/blog/2011/03/url_hash.html这里做个记录,方便自己以后查看转载 2019-07-06 22:27:48 · 432 阅读 · 0 评论 -
怎么对阿里iconfont两个项目中的字体图标合并
1.把下载下来的2个文件夹都放入项目中2.如要把iconfont2文件夹中的字体图标合并到iconfont文件夹中,则如下图,修改iconfon2文件夹下左侧该图标的五个文件名,同时修改这个文件夹中iconfont.css中@font-face里对应url里面的文件名称,因为下一步要把这些复制到iconfont文件夹相应位置中,以防名称冲突3.把修改好的新的图标文件(5个)以及...原创 2019-07-16 16:04:33 · 8031 阅读 · 4 评论 -
多行文本文本输入框 textarea 可点击任意地方输入文字而不是只能在开头输入的问题
问题如图:textarea可以点击任意地方编辑原因:textarea标签之前有空隙改成下图这样就可以了:原创 2019-08-21 09:51:32 · 1324 阅读 · 0 评论 -
js正则验证手机号码有效性
通过js正则验证手机号码的有效性,方法如下:验证130-139,150-159,170-179,180-189号码段的手机号码<script type="text/javascript">var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;if(!myreg.test($("#xxx").va...转载 2019-08-22 15:59:09 · 249 阅读 · 0 评论 -
div 自适应高度 自动填充剩余高度
方案1:Html: 1 2 3 4 <divclass="outer"> <divclass="A"> 头部DIV </div> <divclass="B">下部DIV </div> </div> CSS...转载 2019-09-05 17:01:04 · 442 阅读 · 0 评论 -
各种左中右布局方案
PS:参考页面http://nec.netease.com/library/category/#grid1.两列右侧自适应<div class="g-bd1 f-cb"> <div class="g-sd1"> <p>左侧定宽</p> </div> <div class="g-mn...原创 2019-10-09 15:42:33 · 545 阅读 · 0 评论 -
关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应
关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应第一种: 浮动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&...转载 2019-10-10 14:09:05 · 479 阅读 · 0 评论 -
如何给Table/Tr/Td添加超链接?
如题 如何给这类表格元素添加超链接,并且在新窗口打开呢?有些同学提到了添加a标签的方法,但a只能单独添加到子元素TD里头,如何让正行TR都被添加上超链呢?<tr onclick="location.href='你的网站';">//在当前页面打开<tr onclick="window.open('http://www.baidu.com');">//在新窗口打开...转载 2018-09-17 10:33:12 · 21809 阅读 · 2 评论 -
html 输入框 只能输入数字 只能输入字母数字组合
只能输入中文<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"> 只能输入英文<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"> 文本框只能转载 2018-08-30 17:03:28 · 200 阅读 · 0 评论 -
边框的形状---非矩形
当盒子边框的各个边框颜色都为同一种颜色时看上去都是矩形的,然而事实并非如此:1.正常设定宽高时(盒子的宽高以及边框宽度>=2px)---梯形html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> div{ width:200px;原创 2018-01-08 16:52:01 · 674 阅读 · 0 评论 -
使用CSS reset标签样式
一些默认样式在不同的浏览器中可能不一样,这就导致在开发项目中,浏览器的默认样式会给我们带来很大的麻烦,从而影响开发效率。最好的解决方案是在一起开始的时候就将浏览器的默认样式全部去掉或者覆盖掉,通过重新定义标签的样式来确保标签在各个浏览器下表现的特征一致。如下是一些经常需要重置的标签的默认样式及重置情况: 1.body元素---上下左右4个方向具有外边距(一般浏览器8px)---body{mar...原创 2018-01-08 15:14:28 · 590 阅读 · 0 评论 -
包含(父子)元素外边距合并解析
外边距合并在实际应用中存在一定意义。但有时会造成一些意想不到的效果。(有点乱,有时间再改)1.2个多更多个相邻块级元素在垂直外边距相遇时,会将垂直方向上的2个外边距合并为一个外边距现象:如果发生合并的外边距全部为正值,则合并后的外边距的高度等于这些发生合并的外边距的高度值中的较大者;如果发生合并的外边距不全是正值,则会拉近2个块级元素的垂直距离,甚至会发生重叠现象。2.原创 2018-01-08 17:57:42 · 1473 阅读 · 0 评论 -
容器的高度height使用百分比时,如何设置可以使里面的文字垂直居中。
当我们给容器高度设置为百分比时,想让其中的文字垂直居中如果设置line-height:100%;效果如下:并没有什么作用代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g转载 2018-05-09 16:59:42 · 2036 阅读 · 0 评论 -
css取消双击选中文字
在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好。这个时候就用到了 user-select:none; 属性。因为存在着兼容性的问题,所以在写的时候就需要考虑一下了。div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览...转载 2018-05-07 15:49:49 · 1931 阅读 · 0 评论 -
移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden。但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。再进一步分析,如果要用class去实现没有滚动条,如下代码设置:.index_body { overf...转载 2018-05-08 10:04:44 · 2955 阅读 · 0 评论 -
css3 position fixed固定居中问题解决方案
通常,我们要让某元素居中,会这样做:复制代码代码如下:#element{ margin:0 auto; }如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: 复制代码代码如下:#element{ position:fixed; margin:0 auto; } 但是这样做的结果就是,元素不居中了。这说明fixed使对象脱离了正常文档流。 解决方案: 复制代码代码如下:#...转载 2018-05-08 10:22:08 · 2636 阅读 · 0 评论 -
正方形根据各种屏幕自适应 按比例布局
html部分:<div><span>1</span></div><div><span>2</span></div><div><span>3</span></div>&am转载 2018-05-08 10:41:51 · 588 阅读 · 0 评论 -
浅谈Normalize.css
Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset,Normalize.css是一种现代的,为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap,HTML5 Boilerplate,GOV.UK,Rdio,CSS Tricks以及许许多多其他的框架,工具和...转载 2018-06-05 10:35:23 · 1927 阅读 · 0 评论 -
aria属性表
六、ARIA属性表ARIA Roles值示意及说明表role属性值含义HTML示意说明alert表示警告<p id="ajax_error_alert" role="alert"></p>例如ajax操作返回错误信息的div标签。alertdialog表示警告弹出框<div aria-labelledby="alert_title" aria-hidden="fals.转载 2018-06-06 14:44:20 · 37166 阅读 · 3 评论 -
不定宽高的水平垂直居中实现方式
对于CSS3开发而言,不定宽高的水平垂直居中是我们经常要用到得,实现方式也有很多,下面给大家介绍一下我在众多项目中的一些实现方案,希望对大家有所帮助。 方案一:.wraper{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);} 方案二:.wraper...转载 2018-07-24 13:31:11 · 164 阅读 · 0 评论 -
左右两栏div布局,高度自适应
页面结构如下: 1 2 3 4 5 6 7 8 <div class="container"> <div class="left"> left </div> <div class="right"转载 2018-07-31 17:05:17 · 1691 阅读 · 0 评论 -
CSS垂直居中的11种实现方式
转载自:https://www.cnblogs.com/zhouhuan/p/vertical_center.html注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下:1. 使用绝对定位和负外边距对块级元素进行垂直居中html代码:<div id="box"> <div id="child...转载 2018-08-10 16:01:11 · 209 阅读 · 0 评论 -
JQuery实现导航中点击相应分类,在页面需要刷新加载完成后,该分类名称变色
想要的效果:导航栏中,点击某块内容,哪块内容中的文字就变色起到标识作用。但是,由于用了a标签,点击后页面会刷新,就等于页面加载完成后,所有内容都恢复了默认。这样一个问题,我困扰了一个下午,百度出来的答案,都是用伪类啥的。终于查到了下面的解答,亲测可用。每次页面加载完成,都会测2个链接是否相等,相等就给该导航中相应文字变色。如有更好的解答,望请告知。 $(functio...原创 2018-08-13 17:24:01 · 1413 阅读 · 0 评论 -
font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif详解
代码如下:body,html,input{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}解释:这是css中font的简写写法。字体:字体大小/字体行高 字体格式。详写如下:body,html,input{font: 12px;line-height: 1.5;font-family: tahoma,arial,\5b8b...转载 2018-08-16 22:13:47 · 2204 阅读 · 0 评论