css - 随笔分类 - ゞ╃漃瘼青賰

css3画半圆

摘要：border-radius制作半圆与制作圆形的方法是一样的，只是元素的宽度与圆角方位要配合一致，不同的宽度和高度比例，以及圆角方位，可以制作上半圆、下半圆、左半圆和右半圆效果。例如：.semicircle { margin: 30px; } .top { width: 100px;/*宽度为高度的... 阅读全文

posted @ 2015-07-08 19:40 ゞ╃漃瘼青賰阅读(1634) 评论(0) 推荐(0)

css3毛玻璃效果白边问题

摘要：注：css3毛玻璃效果应该很多人都知道怎么实现，但是有个问题是图片模糊了之后相当于缩小了，所以颜色深的图片会出现白边，这里说下我参考网上的解决方式吧！1、毛玻璃实现方法：CSS3 blur滤镜实现如下测试代码：.blur { -webkit-filter: blur(10px); /*... 阅读全文

posted @ 2014-07-22 17:24 ゞ╃漃瘼青賰阅读(9879) 评论(1) 推荐(0)

webkit webApp 开发技术要点总结【转】

摘要：如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家：1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个：width - // viewport 的宽度（范围从200 到10,000，默认为980 像素）height - 阅读全文

posted @ 2014-02-10 15:31 ゞ╃漃瘼青賰阅读(529) 评论(0) 推荐(0)

SASS的安装和转换为CSS的方法

摘要：SASS的安装方法：1、先安装Ruby，下载地址：http://download.csdn.net/detail/hzf2257/3334439。安装注意事项如下图，装在C盘会比较好，装其它盘也可以。2、打开Ruby的命令符面板，输入： gem install haml 和 gem install sassSASS文件转换为CSS文件的方法：如：在D盘建立一个SASS文件夹，文件夹下有一个style.scss文件（scss，sass都行。sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。scss对代码的要求没那么高。）用下面的方法可以将sass或者scss转换为css文件。阅读全文

posted @ 2013-10-18 11:19 ゞ╃漃瘼青賰阅读(406) 评论(0) 推荐(0)

CSS布局——左定宽度右自适应宽度并且等高布局

摘要：方法一：别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。HTML Markup Left Sidebar Main Content CSS Code 查看在线DEMO。方法二HTML Markup Left Sidebar Main Content CSS Code 查看在线的DEMO。方法三：HTML Markup Main Content Left Sidebar CSS Code *{margin: 0;padding: 0;} #cont... 阅读全文

posted @ 2013-10-16 15:44 ゞ╃漃瘼青賰阅读(806) 评论(1) 推荐(1)

CSS制作水平垂直居中对齐

摘要：方法一：这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。Html Markup content CSS Code: .vertical { height: 100px; line-height: 100px;/*值等于元素高度的值*/ } 优点：适合在所有浏览器，没有足够空间时，内容不会被切掉缺点：仅适合应用在文本和图片上，并且这种方法，当你文本... 阅读全文

posted @ 2013-10-16 14:55 ゞ╃漃瘼青賰阅读(5944) 评论(0) 推荐(0)

无图片，用css border实现尖三角

摘要：其他方向的根据自己需求去改变border-width 阅读全文

posted @ 2013-06-25 16:30 ゞ╃漃瘼青賰阅读(512) 评论(0) 推荐(0)

IE6下position:fixed;兼容

摘要：*html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/.backto-top{ width:35px; height:35px; overflow: hidden; z-index:1; position:fixed; bottom:0; margin-left:964px; *+position:absolute; *+top:expression((document.compatMode?documentElement.scrollTop:document.bo... 阅读全文

posted @ 2013-06-25 15:42 ゞ╃漃瘼青賰阅读(463) 评论(1) 推荐(0)

相邻div，一个跟着另一个自适应高度

摘要：1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <title>new document</title> 5 <style type="text/css"> 6 .wrap{ 7 border:1px solid #006699; width:500px; overflow:hidden; 8 } 9 .wrap .left{10 float:left; width 阅读全文

posted @ 2013-04-09 21:26 ゞ╃漃瘼青賰阅读(1907) 评论(4) 推荐(0)

CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法

摘要：CSS设置页面最大最小宽度兼容ie6/7/8/9，FF，chrome,sogou等浏览器设置最小宽度 div { width:100%; min-width:1000px; width:expression_r(document.body.clientWidth < 1000 ? "1000px": "auto" ); } 设置最大宽度 div { width:100%; max-width:1200px; width:expression_r(document.body.clientWidth > 1200 ? "1200px 阅读全文

posted @ 2013-02-19 11:23 ゞ╃漃瘼青賰阅读(966) 评论(3) 推荐(0)

css实现页面文字不换行、自动换行、强制换行

摘要：强制不换行div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;}============================================CSS设置不转行:overflow:hidden 隐藏white-space：normal 默认 pre 换行和其他空白字符都将受到保护nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象设置强行换行word-break: normal ; 依照亚洲语言和非阅读全文

posted @ 2013-01-30 10:28 ゞ╃漃瘼青賰阅读(242) 评论(0) 推荐(0)

CSS可以和不可以继承的属性

摘要：不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、阅读全文

posted @ 2013-01-30 10:13 ゞ╃漃瘼青賰阅读(2646) 评论(1) 推荐(0)

随笔分类 - css