阴影效果 CSS+DIV

css

原代码:

 HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><style>#w{ width:200px; font-size:12px; margin-left:auto; margin-right:auto;}.ac { display:block; background:#bbbbbb; border:1px solid #dddddd; position:relative; margin:1px 0; }.bc { display:block; background:#777777; border:1px solid #999; position:relative; padding:1px; margin:1px; }.cc { text-align:center; background:#ffffff; border:1px solid #555; position:relative; padding:5px; font-weight:normal; }.dc{ background-color: #CCCCCC; border: 1px solid #999999;}</style></head><body><div id="w"> <div class="ac"> <div class="bc"> <div class="cc"> <div class="dc"> <p>这是一张图片</p> </div> </div> </div> </div></div></body></html>

修改后的代码:

 HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><style>img{display: block;}#w{ float:left;}.ac{ background:#bbbbbb; border:1px solid #dddddd; }.bc{ background:#777777; border:1px solid #999; padding:1px;margin:1px;}.cc { background:#ffffff; border:1px solid #555; padding:5px;}.dc{ background: #CCCCCC; border: 1px solid #999999;}</style></head><body><div id="w"> <div class="ac"> <div class="bc"><div class="cc"> <div class="dc"> <ahref="http://www.zishu.cn" target="_blank"><imgsrc="/UploadPic/2007-4/200741142155602.gif" alt="子鼠"border="0" /></a> </div> </div> </div></div></div></body></html>

时间: 2016-04-01

阴影效果&nbsp;CSS+DIV的相关文章

div css标签:CSS+div 常用标签

最近在做网页的项目 很多东西都忘记了  我整理一下CSS+div 常用标签 希望可以帮助我和大家共同学习一下 先把整个网站构架起来才是基础,下一步才是加入jsp和Ajax.CSS中的长度 绝对单位:几乎不用在网页中 in 英寸      1in = 2.54cm cm 厘米    1cm = 0.394in pt 磅        1in = 72pt pc pica      1in = 6pc 相对单位:较常用 em   1em = 相应字体的font-size值 ex    1ex = 相

Css Div浮动叠加层效果

<!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="Conte

用GoLive实现CSS+DIV之一

css 在可视化CSS编辑器方面,GoLive在版本6已经成型,其设计构思甚至成为许多专业CSS编辑器模仿的对象,如众所周知的TopStyle.近来随着中文版GoLive的发布,引发了业内网页制作软件之争.面对这个在国内几乎是一夜之间出现的新面孔,许多人开始关注.我曾发表过有关GoLive将在网页制作方面取代DreamWeaver的评论,预计后者将转型为数据库开发组件.这是因为DreamWeaver在数据库方面非常优秀,但在可视化网页编辑方面早已落后(应该说不曾领先).只是凭借着中文化优势占领着

CSS+DIV网页重构对比TABLE布局的显著优势

采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,就在今天下午,IT168首页改版就选择了这种做法.其实,早些时候像阿里巴巴.163等大型门户站点就已经完成了重构工作. Robin 早在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了. 采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势: 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息.

CSS+DIV实现鼠标经过背景变色

实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;}     解释:鼠标经过id为div的元素时背景变色     IE6.0.Firefox2.0.Opera 9.23都不行     方法二 <style> .d_over{background-color:#307172;} .d_out{background-color:#EFEFEF;}   哈哈哈哈哈     的标签是可以,可是,这样子会导

鼠标经过背景变色之CSS+DIV方法

  实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;} 解释:鼠标经过id为div的元素时背景变色 IE6.0.Firefox2.0.Opera 9.23都不行 方法二 <div onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFF

css div实现的遮罩层完美兼容IE6-IE9 FireFox

css div 遮罩层想必熟悉网页的朋友都不陌生吧,网上也有相关的实现文章,不过大都对浏览器的兼容性不好,在本文将为大家介绍的是一个可以兼容IE6-IE9 FireFox 的遮罩层,感兴趣的朋友不要错过   Html代码: 复制代码 代码如下: <div id="black_overlay" style="display: none;"></div> <div style="display: none;" id=&q

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a

代码-css+div布局 如何实现两张图片平行放置

问题描述 css+div布局 如何实现两张图片平行放置 很简单的一段代码,但不知为何我想让right中的图片放到middle的旁边,可总是无法实现(如图): 就是如何将右下角的图片移到跟上一个图片平行的位置. 解决方案 第一个图片不要用p或者其它的块级元素包裹,或者设置一个float:left的css即可. 解决方案二: 浏览器默认是流体布局,从上到下:需要认为设置为水平布局就可以了:第一个div设置为float:left:第二个div设置为float:right: 解决方案三: 给你左边图片一