欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!
  • Tip中的指示箭头实现

    利用 border 来实现2个三角形 将三角形叠在一起,实现一个类似的效果。 创建一个有 border 的四方形,用 CSS3 transfrom 作 45 度旋转 利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案 例子HTML: div class=tips div class=tips-text Lorem ipsum...

  • 绝对居中在DIV层中的文字

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title52css.com/title style...

  • 网页自动隔行换色

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml xml:lang=zh-CN lang=zh-CN head meta http-equiv=Content-Type content=text/html; chars...

  • 代替Marquee的图片横向和纵向无缝滚动实例

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleMarquee 替...

  • 用 CSS 将超出显示宽度的内容隐藏

    在显示列表的时候,太长的标题默认会换行显示,而这样的显示方式往往会破坏我们原有的页面布局,如何在我们无法知道标题长度的情况下,将超出显示宽度的内容隐藏起来?一个常见的做法是用服务器端语言判断、截取,但是这样在以后需要显示更长的标题时就需要修...

  • 用相对定位和负向移动实现阴影效果

    很多朋友喜欢给自己的页面元素加上阴影效果,通常的做法是用图片,图片有效果逼真等优点,但是,同时也加大了服务器的负担,延长了页面加载时间,本文介绍的是用 CSS 相对定位和负向移动实现的阴影效果,代码简洁,效果还不错。 ---------------------------...

  • CSS 制作圆角效果

    在众多圆角效果的制作方法中,用图片可能是最常见的了,而本文介绍的 Nifty Corners 则是完全依靠 CSS 和 XHTML 制作的圆角效果。随后, Stu Nicholls 又在此基础上,制作出了更多富有创意的圆角效果。还等什么?赶快看看吧! -----------------------------...

  • 让你的文本框(input)更加丰富多彩!

    经常看到一些网站的文本框有一些很不错的效果,比如搜索关键词文本框里面有一个象征搜索的小图片,或者是文本框边框非常柔和。其实,这些效果制作都非常简单,看过本文,相信你也可以实现丰富多彩的文本框效果。 -------------------------------------------...

  • CSS布局口诀

    如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一、IE边框若显若无,须注意,定是高度设置已忘记; 二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中...

  • DIV强制不换行

    一,单个DIV: 1.用nobr元素 Code: html head /head body divnobr不换行不换行nobr/div /body /html 2.用nowrap元素 Code: html head /head body div nowrapdiv不换行div不换行div不换行/div /body /html 二,两个DIV 1. 用CSS里的float属性 Code: html head...

  • IE6 IE7 IE8分别能识别什么标签符号和属性符号兼容问题

    浏览器 I E6IE7IE8FF 符号* !important _ \9 *html *+html 说明:代表能识别; 代表不识别1、 案例一(常用)如果各个浏览器的高度都不相同,代码如下:.warp{Height:100px; /*IE6、IE7、IE8、FF识别*/Height:110px\9; /*IE8识别*/*height:120px!important;...

  • 图片加阴影

    .img { BORDER-BOTTOM: #003300 1px inset; FILTER: alpha(Opacity=100,style=0)progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=7,offY=6,positives=true); BORDER-LEFT: #003300 1px inset; WIDTH: 178px; HEIGHT: 140px; BORDER-TOP: #0...

  • CSS隐藏文字的几个方法

    (1) 使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block 而我们往往有时候想偏移掉的a上的字体 所以问题就来了 text-indent:-9999px;虽然用起来比较惬意 将a转化成block的话 往往 他身后的的元素就被他赶到下一行了 如果正好这个a后面...

  • 分页代码

    style type=text/css div.pagelink ul{border-top:1px dashed #ccc;clear:both;width:597px;font-size:12px;text-align:center;margin-left:11px;padding-top:13px;height:38px;overflow:hidden} div.pagelink ul li{float:left;font-family:Tahoma;height:2...

  • 背景透明的方法

    filter: Alpha(Opacity=30); -moz-opacity:0.7; /* Moz + FF 透明度20%*/ opacity: 0.7; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/ 代替clear清除浮动的方法line-height: 0;即可!其实DIV+CSS: 用float的时候可以这样,在需要浮动的元素的父元素加上...

  • CSS网页布局编码小技巧整理

    1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLAS...

  • DIVcss初学者需要引起重视的10个问题与技巧

    DIVcss初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,在52CSS.com中,有多篇文章提醒大家经引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div...

  • 再谈CSS高级技巧:css sprites技术

    也就是通过背景图的定位(background-position)把页面中所用到的图标、背景图之类的整合到一张整的背景图里,从而大大减少了页面请求数,提高了页面浏览的性能。 其实本民工最初这样用的时候并不知这就叫csssprites,只是看到各大主流站都是这么做于是也效...

  • 牛人也得看的15个CSS常识

    1、不要使用过小的图片做背景平铺。这就是为何很多人都不用1px的原因,这才知晓。宽高1px的图片平铺出一个宽高200px的区域,需要200*200=40,000次,占用资源。 2、无边框。推荐的写法是border:none;,哈哈,我一直在用这个。border:0;只是定义边框宽度为零,...

  • 使您的CSS网页布局代码更专业

    众所周之,在不影响整个网页构架与功能的情况下,网页文件越小越好,因为更小的网页文件有利于浏览器对网页的解释时间缩到更短,自然访客也就不用面临等待网页缓慢呈现的烦躁了,这一点对于那些带宽少网速慢的用户犹为明显。尽管对于现如今的带宽来说,网页文...

前端案例

返回顶部 欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!