css专题
css一些常用的问题解决方法,css3的一些常用很炫的特效
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
前端工程师需要懂的前端面试题(c s s方面)总结(二)
实现元素水平垂直居中的几种方法:<div id="wrap"> <div class="box"></div></div>1. 定位方法实现水平垂直居中<style>*{ margin: 0; padding: 0;}#wrap { width: 500px; height: 500px; back...原创 2020-04-22 08:33:29 · 695 阅读 · 9 评论 -
css常用单位px、em、 rem 区别与各自的用法解析
我们在布局页面中,总要用到一些有关字体,元素宽度,高度等长度单位,一般pc端常用到像素单位,移动端用em,rem 单位,它们都有各自的特点,今天总结一下它们的特点、区别px是Pixel的缩写,也就是说像素是指基本原色素及其灰度的基本编码,由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的,如同摄影的相片一样,数码影像也具有连续性的浓淡阶调。px是固定大小的单位,像素...原创 2019-03-21 09:49:11 · 1566 阅读 · 0 评论 -
用css实现模仿火狐社区的一个提示框
今天研究了一下firefox社区的一个提示框,模仿写了一个 源代码下载代码如下:无标题文档html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote,原创 2012-10-08 16:23:58 · 1336 阅读 · 0 评论 -
css3实现的精美菜单
下拉菜单是我们做前端经常遇到的一些案例,今天学习了一下一个博客做的案例,例子如下:源代码下载地址 css部分代码ul { font-family:Arial, Helvetica, sans-serif; background:#ccc; background:-webkit-gradient(linear, left top, l原创 2012-10-18 13:55:00 · 1285 阅读 · 0 评论 -
用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下:源代码下载地址:css部分代码如下:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cit原创 2012-10-18 16:10:24 · 8241 阅读 · 0 评论 -
解决ie6中fixed不起作用的问题
有时需要把一个元素固定在页面的某个部位,一般的解决方法是:.box{position:fixed;bottom:0;right:10px;}让元素固定在浏览器的底部和距离右边的10个像素。一般的浏览器都支持这种方法,但是ie6不支持fixed解决办法:.box{osition:fixed;_position:absolute;bottom:0;right:10p原创 2012-10-30 08:51:54 · 1307 阅读 · 1 评论 -
css3实现的the Sexy Buttons
今天做一些用css3实现的the Sexy Buttons 源代码下载地址:http://download.csdn.net/my/uploads/1html代码如下:Sexy CSS Buttons Normal Hover Active css代码如下:body, html原创 2012-11-06 17:10:00 · 1138 阅读 · 0 评论 -
三种方法实现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果,用三种方法实现弹出框边框半透明和圆角的效果1.用rgba来实现背景半透明,设置内边距2.设置border颜色半透明,利用background-clip设置;3.利用滤镜效果,实现空元素背景半透明border-radius实现圆角效果源码下载地址:http://downlo原创 2012-11-09 13:11:22 · 2759 阅读 · 0 评论 -
几种简单的社交网站的标志按钮
几种简单的社交网站的标志按钮。主要运用boder,border-radius,box-shadow等css技术源代码下载地址:http://download.csdn.net/myhtml代码如下: Twitter Facebook Hacker News Forrst RSS css代码如原创 2012-11-12 10:35:28 · 1539 阅读 · 0 评论 -
css3实现带有简单动画按钮导航
用css3实现的带有简单动画的按钮导航,主要运用了transition技术源代码下载地址:http://download.csdn.net/my点击打开链接transition语法:transition-property:all | none | [ , ]*默认值:all取值:all:所有可以进行过渡的css属性 none:不指定过渡的css属原创 2012-11-15 09:44:13 · 1180 阅读 · 0 评论 -
用css及jQuery实现的精美拉下菜单导航条
用css及jQuery实现的下拉精美菜单导航,源代码下载地址:http://download.csdn.net/myhtml代码: Home Services Portfolio Freebies原创 2012-11-16 10:07:22 · 1320 阅读 · 0 评论 -
用css和html实现的一个forest logo
用css和html实现的一个forest logo,里面运用了css3中的transform中的rotate技术,源代码下载地址:http://download.csdn.net/my html代码如下: css代码如下:* { marg原创 2012-11-19 09:34:44 · 1316 阅读 · 0 评论 -
用css3实现的简单的云朵
今天用css3和html实现了简单的cloud,主要运用box-shadow,border-radius技术;html代码:css代码如下:*{ margin:0; padding:0;} body{ background:#ccc;} #cloud{ width:330px; height:120px; background原创 2012-11-20 15:32:39 · 5603 阅读 · 0 评论 -
一些css3简单的练习
html代码如下:源代码下载地址:http://download.csdn.net/my css代码如下* { margin:0; padding:0;}#wrapper { width:255px; height:255px; position:re原创 2012-11-22 09:15:37 · 1146 阅读 · 0 评论 -
用css3实现的Android Logo
用纯css3无js实现的Android Logo,带有简单的动画,主要运用css3的transform,transition源代码下载地址:http://download.csdn.net/myhtml代码如下: css代码如下:*原创 2012-11-23 10:53:30 · 1259 阅读 · 0 评论 -
解决png24格式图片在ie6中透明问题,
图片透明,锯齿问题是重构人员很头疼的问题,每当遇到这样的问题都让我感觉到不知道从哪入手,虽然能解决这些问题,但是总感觉多少有点缺点,最近遇到这方面的问题,总结了几种实现一些透明小图标的锯齿问题:png8格式的透明背景图片,会让浏览器在先显示的过程中图片边缘会有一些锯齿情况,png24可以解决这些锯齿问题,但是ie6不支持png24透明,不过利用ie6的hack问题有两种解决的办法:原创 2013-04-09 09:26:32 · 1735 阅读 · 1 评论 -
如何将彩色网页内容变成灰白的
不知道还有多少人记得曾经为了悼念5·12汶川地震,很多网站都将页面中所有的图片以及文字变成灰色。彪叔曾经也做了一个工具“哀悼的CSS(网站变灰)2.0”,用来把网站变灰。想想当初有多人为了这个事情而忙得不可开交,要把所有的图片在photoshop里去色,再到样式表中把所有的颜色值改成灰色,最后等过了时间之后又要恢复原状。其中也有一些网站仅仅是在IE浏览器中用了滤镜来解决,并没有去处理其他浏览器转载 2013-04-22 14:55:17 · 1759 阅读 · 0 评论 -
最近做项目的一些关于重构方面的总结
这半年做专题和项目的过程中,遇到一些有时很难想到问题,今天在这总结以下:1. 关于width:100%缩小窗口时背景图片出现空白bug ,刚开始找了半天方法都没解决,最后在里面加了最小宽度给解决了, 例如: .top{ width:100%; height:原创 2013-07-04 10:59:12 · 1831 阅读 · 3 评论 -
如果用float实现居中
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,于是去请教同事,发现还有一种更好的解决办法。html代码如下:原创 2013-09-05 14:58:57 · 3014 阅读 · 0 评论