CSS简单实例:用css来实现透视效果

CSS简单实例:用css来实现透视效果的相关文章

• 
  实现透视效果用css来实现

  标签：Web开发

  今天萌发一个想法，用css来实现透视效果。起初，我想到的是我们常见的添加阴影效果的方法，用多个div通过偏移来实现，但这需要很多 div，不够理想。随后，我想到css的一个属性：border，在border相连接处可以产生对角线效果。这样用两个div就可以实现，我们先看看，然后再分析实现过程。 首先，我们看看border如何生成的对角线效果，在你的html的头部增加以下代码，你就会看到。 view sourceprint？ 1. ...[ 查看全文 ]

  DWS帝舞社

  671
• 
  CSS实例：CSS实现的等高网页布局

  标签：Web开发

  为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用隐藏容器溢出、正内补丁和负外补丁结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例： div id="wrap" div id="left" pleft/p pleft/p pleft/p pleft/p pleft/p /div div id=&quo...[ 查看全文 ]

  南城旧事瑞恩

  41
• 
  CSS实例：用CSS制作网页像素画

  标签：Web开发

  在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！先看看预览图 图一 基本原理 ： 没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。 演...[ 查看全文 ]

  小女神慧敏

  111
• 
  用js实现的抽象CSS圆角效果!!

  标签：Web开发

  大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;h...[ 查看全文 ]

  HQ琪娃

  41
• 
  通过CSS实例实现清除浮动

  标签：Web开发

  在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： HTML4STRICT代码：div style="width:200px;border:1px solid red;"    div style="float:left;width:80px;height:80px;border:1px solid blue;"TEST DIV/div  &nb...[ 查看全文 ]

  滋HWB935dgj

  11
• 
  用CSS实现给图片上色的效果

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  步骤是这样的： 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片，如下图： 3.下一步写下代码： xhtml代码： div id="box" a href="#" span/span /a /div CSS代码： a {float:left;}#box span {border:3px solid #ccc;display:block;widt...[ 查看全文 ]

  矮丫硪去

  841
• 
  用CSS实现背景半透明效果的方法实现

  标签：Web开发

  如何用CSS实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法： HTML代码： div class="alpha1" div class="ap2" p背景为红色(#FF0000)，透明度20%。/p /div /div CSS代码： .alpha1{ width:30...[ 查看全文 ]

  佬囟w2叹刮

  171
• 
  用css实现图片替换

  标签：Web开发

  style  h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;}  .box2{}   .box2 img{display:block; padding:2px; border:0;}  .box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}   .box2 a span{display:none; color:#F00;}   .box2 a:hover{color:#999; b...[ 查看全文 ]

  孙蓝菲

  261
• 
  使用html5+css3来实现slider切换效果告别javascript+css

  标签：Web开发

  好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。 开始进入正题，提到slider，过去一直都是...[ 查看全文 ]

  xmbovey

  1221
• 
  CSS制作网页实例：用CSS控制li标记样式

  标签：Web开发

  list-style-type版本：CSS1/CSS2 兼容***：IE4+ NS4+ 继承***：有 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin 参数： disc : CSS1 实心...[ 查看全文 ]

  逸风309

  121
• 
  网页制作实例：用CSS实现图片垂直居中方法

  标签：Web开发

  网页制作，用CSS实现图片垂直居中方法 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:hidden;position:relative;text-align:center;margin:auto}div p ...[ 查看全文 ]

  山水相连528

  51
• 
  用CSS轻松实现网上填空

  标签：Html CSS布局 Div+CSS XHTML

        在网上做有奖信息的时候，经常看见一些注册表单，只有一条线供你填写，就跟做考卷时的填空题一样，很Cool！     其实要做成这样的效果并不难，只需用一段很简短的CSS代码即可搞定！     < style type="text/css" < !-- .xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none} -- < /sty...[ 查看全文 ]

  TX聊天专用

  721
• 
  css实现的图片模糊效果

  标签：Web开发

  马上有人搞出了模糊。。 见过没？ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行][ 查看全文 ]

  504921789

  271
• 
  CSS布局实例

  标签：Web开发

  Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-type: none;  margin: 0px;  padding: 0px; } .list li...[ 查看全文 ]

  atjqz8

  121
• 
  用CSS来控制网页背景

  标签：Html CSS布局 Div+CSS XHTML

  ·背景颜色 background-color 我想这个我就不用多做介绍了，颜色代码我想大家都知道的，不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent（透明色）。 例：body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，我所指的并非是用这种方法，我用...[ 查看全文 ]

  颜战时代

  31
• 
  用CSS建设网站的实例

  标签：Web开发

  本篇已得到 主要由五个部分构成： 1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的Logo和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content 4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on 5.Footer 网站底栏，包含版权信息等。 Width: 760px...[ 查看全文 ]

  船撞桥头自然辰

  41
• 
  用js实现CSS圆角生成更新

  标签：Web开发

  用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 ...[ 查看全文 ]

  windy罗先生

  41
• 
  用CSS实现网页的绝对居中

  标签：Web开发

  6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）： 代码：略 7.ff1.5 IE5 IE6通过测试 HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="//www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleVertical centering in valid a class...[ 查看全文 ]

  艾瑟nice

  31
• 
  用ASP+CSS实现随机背景

  标签：ASP

      随机背景--当你每次进入该页面时，从已指定的图片文件夹中，随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 ASP--来自ASP101 以下是引用片段： Const IMGS_DIR = "/images" '设定图片文件夹的地址，随机显示该文件夹内任一张图片 Dim objFSO, objFolderObject, objFileCollection, objFile Dim intFileNumberToUse, intFileLooper Dim objImageFileToUse Di...[ 查看全文 ]

  初代鼠王

  511
• 
  用CSS实现图片的预加载

  标签：Web开发

  有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂...[ 查看全文 ]

  shenlizs

  291