css
关注
分享
扫一扫
良_123
这个作者很懒，什么都没留下…
展开
-
16:9适配方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16:9窗体演示</title></head><style> #closeBox { background-color...原创 2020-01-15 15:15:30 · 1573 阅读 · 0 评论 -
图片适配
<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片适配</ti...原创 2020-01-13 14:45:33 · 240 阅读 · 0 评论 -
微信浏览器禁止页面下拉查看网址（不影响页面内部scroll）
此类事件是手机touchmove默认事件行为，可以通过js代码隐藏事件：$("body").on("touchmove", function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);但这样往往会把页面原生的s...原创 2018-07-06 17:13:20 · 2250 阅读 · 0 评论 -
iPhone X 适配手机端 H5 页面通用解决方案
一：本文提供两种解决方案1.终端解决方案（最优，建议选择）2.web解决方案 导语: iPhone X的出现，一方面对于整个手机行业的发展极具创新领头羊的作用，另一方面也对现有业务的页面适配带来了新的挑战。 对于手Q中的各业务来说，受iPhone X影响的H5页面挺多，应该采取什么快速有效的办法来应对呢？ 目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏...转载 2018-03-05 13:42:49 · 1438 阅读 · 0 评论 -
移动前端自适应适配布局解决方案和比较
互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。以下摘自：从网易与淘宝的font-size思转载 2018-01-15 17:56:26 · 485 阅读 · 0 评论 -
HTML <fieldset> 标签
在form表单中常常被忽视的两个标签fieldset和legend标签的定义和使用 fieldset元素可将表单的相关元素分组。 fieldset标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到标签内时，浏览器会以特殊的方式来显示它们，它们可能有特殊的边界，3D效果，或者甚至可以穿件一个子表单来处理这些元素。标签的定义和使用 le原创 2018-01-30 21:54:22 · 775 阅读 · 0 评论 -
可滚动的 tbody
这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时，固定表头为用户所注意的列提供了上下文。看下面图示你就明白了：为了使其工作，第一步是：设置 tbody 为 display:block ，以便我们可以应用 height 和 overflow 属性。下一步将是：设置thead 中的原创 2017-10-12 17:59:31 · 491 阅读 · 0 评论 -
雪碧图例子
html>html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title>雪碧图案例title> style> html,body{ padding: 0; margin: 0; font-fa原创 2016-02-23 16:06:57 · 1199 阅读 · 0 评论 -
css3来回摆动
html>html>head> script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js">script> script> var i=0; $(document).ready(function(){ setInterval('gaibian()',1000);原创 2016-01-06 10:48:56 · 10307 阅读 · 0 评论 -
经典CSS实现三角形图标原理解析
border边框语法： border 四条边框设置border-left 设置左边框，一般单独设置左边框样式使用border-right 设置右边框，一般单独设置右边框样式使用border-top 设置上边框，一般单独设置上边框样式使用border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用基本用法:// 为转载 2015-12-07 16:02:00 · 575 阅读 · 0 评论 -
一些css小用法总结
1、用:before和:after实现小尖角效果div class="div">div>.div{ background: #fff; border: 2px solid #000; height: 100px; width: 100px; position: relative;}.div:after,.div:before{转载 2015-11-23 16:51:02 · 435 阅读 · 0 评论 -
将页脚固定在页面底部
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定原创 2015-08-27 18:23:51 · 1370 阅读 · 1 评论 -
正方形图片变圆形css
原创 2015-08-27 18:25:21 · 3177 阅读 · 0 评论