随笔分类 -  html/css

【转】CSS实现自适应分隔线的N种方法
摘要：1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。 具体实现如下 html结 阅读全文
posted @ 2019-12-24 17:51 夯 阅读(595) 评论(0) 推荐(0)
P标签莫名有了margin-top值的原因
摘要：p标签默认 -webkit-margin-after: 1em; -webkit-margin-before: 1em;元素上下边距数值为1倍字体高度 设置-webkit-margin-after: 0em; -webkit-margin-before: 0em; 即可解决默认边距问题，也可以强制设 阅读全文
posted @ 2018-09-12 22:06 夯 阅读(1372) 评论(0) 推荐(0)
【转】移除HTML5 input在type="number"时的上下小箭头
摘要：在chrome下： input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } Firefox下： input[type=" 阅读全文
posted @ 2017-03-07 16:08 夯 阅读(350) 评论(0) 推荐(0)
html5和css3的常用参考网
摘要：当我们使用HTML5， CSS3，甚至Bootstrap设计网站的时候，有些方面是必须考虑的，比如字体大小，标题大小，行间距，每行字数，字体，颜色，背景图片和文字的搭 配，图标，留白和布局......所有的这些，都不是随随便便的，讲究一定的原则。而这些原则通常我们为参考一些网站。下面就列举这些网站。... 阅读全文
posted @ 2015-09-30 15:35 夯 阅读(387) 评论(0) 推荐(1)
【转】 CSS3实现10种Loading效果
摘要：昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……PS:如需转载，请注明出处！第1种效果：代码如下： .loading{ width: 80px; ... 阅读全文
posted @ 2015-07-07 13:49 夯 阅读(415) 评论(0) 推荐(1)
【转载】css3 content 生成内容
摘要：content一般和:before,:after一起使用，用来生成内容(img和input没有该属性)，content的内容一般可以为以下四种：none： 不生成任何值。attr： 插入标签属性值url： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）stri... 阅读全文
posted @ 2014-08-27 23:17 夯 阅读(295) 评论(0) 推荐(0)
【转载】那些年我们一起清除过的浮动demo
摘要：返回文章：那些年我们一起清除过的浮动闭合浮动 与 清除浮动 的区别.main：很抱歉，现代浏览器中我没能把warp撑高(float:left).side：我也浮动了(float:left).footer：我通过设置 clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变,有些不爽... 阅读全文
posted @ 2014-08-06 22:30 夯 阅读(335) 评论(0) 推荐(1)
【转载】那些年我们一起清除过的浮动
摘要：很系统的介绍了浮动的清除，以及各种清除的利弊 阅读全文
posted @ 2014-08-06 22:24 夯 阅读(312) 评论(0) 推荐(0)
【转载】各浏览器CSS兼容问题
摘要：CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.... 阅读全文
posted @ 2014-08-01 22:46 夯 阅读(363) 评论(0) 推荐(0)
【转载】IE浏览器常见的9个css Bug以及解决办法
摘要：IE浏览器常见的9个css Bug以及解决办法我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8... 阅读全文
posted @ 2014-07-28 16:45 夯 阅读(544) 评论(0) 推荐(0)
【转载】CSS Sticky Footer: 完美的CSS绝对底部
摘要：下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。 说明: 使用这个布局的前提，就是footer要在总的div容器之外，f... 阅读全文
posted @ 2014-07-27 14:27 夯 阅读(432) 评论(1) 推荐(0)
【转载】Web 开发中很实用的10个效果【附源码下载】
摘要：在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在 Web 开发中很有用的效果，记得收藏：）超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在... 阅读全文
posted @ 2014-07-08 22:13 夯 阅读(482) 评论(0) 推荐(0)
【原创】jQuery 仿百度输入标签插件
摘要：1、先上效果图2、调用方式 1 2 3 4 html页面调用3、tagsinput.css样式 1 .clearfix:after 2 { 3 clear: both; 4 content: " "; 5 display: bl... 阅读全文
posted @ 2014-06-30 21:02 夯 阅读(662) 评论(1) 推荐(1)