今天来学习百度有啊的CSS＋图片完成圆角效果实例
可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效（要把子div撑大只能考里面的元素）。[*]
[*]
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>百度有啊css圆角计划</title><style>.box1{background:url(/uploadfile/200902/12/5222241610.gif)repeat-x#1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}.box1.tl,.box1.tr,.box1.bl,.box1.br{width:5px;height:5px;position:absolute;background:url(/uploadfile/200902/12/9F22241311.gif)no-repeat;overflow:hidden;}.box1.cc{height:40px;padding:5px;}.box1.tl{left:0;top:0;}.box1.tr{right:0;top:0;background-position:0-5px;}.box1.bl{left:0;bottom:0;background-position:0-10px;}.box1.br{right:0;bottom:0;background-position:0-15px;}.box2{border:1pxsolid#84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}.box2.tl,.box2.tr,.box2.bl,.box2.br{width:6px;height:6px;position:absolute;background:url(/uploadfile/200902/12/D022241535.gif)no-repeat;overflow:hidden;}.box2.cc{height:40px;padding:5px;}.box2.tl{left:-1px;top:-1px;}.box2.tr{right:-1px;top:-1px;background-position:0-6px;}.box2.bl{left:-1px;bottom:-1px;background-position:0-12px;}.box2.br{right:-1px;bottom:-1px;background-position:0-18px;}.box3{position:relative;zoom:1;padding:1em1.5em;margin:.5em01em0;background:#f1f6de}.box3.tl,.box3.tr,.box3.bl,.box3.br{width:5px;height:5px;position:absolute;background:url(/uploadfile/200902/12/AC22242308.gif)no-repeat;overflow:hidden;}.box3.cc{height:40px;padding:5px;}.box3.tl{left:0;top:0;}.box3.tr{right:0;top:0;background-position:0-5px;}.box3.bl{left:0;bottom:0;_bottom:-1px;background-position:0-10px;}.box3.br{right:0;bottom:0;_bottom:-1px;background-position:0-15px;}</style></head><body><divclass="box1"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角一</p></div><spanclass="bl"></span><spanclass="br"></span></div><p></p><divclass="box2"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角二</p></div><spanclass="bl"></span><spanclass="br"></span></div><p></p><divclass="box3"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角三</p></div><spanclass="bl"></span><spanclass="br"></span></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 可以使用 CSS 检查工具进行设计。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]