在网页设计中,大多网页为了美观,都把区域的四角设计成给人一种圆滑的感觉,下面简单介绍两种圆角设计方法:
<div id="lt">
<div class="ss">
<div class="tt"><div class="ttl"></div><div class="ttr"></div> </div>
<div class="bb">
<div class="t1">标题</div>
<div class="c" id="cc">
<!--内容-->
</div>
</div>
<div class="ss">
<div class="tl"><div class="tll"></div><div class="tlr"></div></div>
</div>
</div>
</div>
下面是对应的css样式:
#lt{
float:left;width:200px;
}
.ss{
width:100%;position:relative;
}
.ttl,.ttr,.tll,.tlr{
background-image:url(/img/l.gif);background-repeat:no-repeat;overflow:hidden;position:absolute;font-size:1px;
}
#lt .ttl{
background-position:0 0;top:0;left:0;height:5px;width:5px;
}
#lt .ttr{
background-position:-11px 0;top:0;right:0;height:5px;width:5px;
}
.bb{
background:#c00;border:1px solid #000;border-bottom:0;
}
#lt .tll{
background-position:0 -3px;bottom:0!important;bottom:-1px;left:0;height:5px;width:5px;
}
#lt .tlr{
background-position:-7px -3px;bottom:0!important;bottom:-1px;right:0;height:5px;width:5px;
}
.tl{
height:7px;background:url(/img/r.gif) repeat-x;overflow:hidden;width:100%;
}
.t1{
padding-left:10px;height:20px;line-height:20px;font-size:12px;font-weight:bold;
}
.c{
background:#FFF;margin:-3px 5px;padding:3px 3px 5px 3px;zoom:100%;
}
效果图如下所示:
- 大小: 3.5 KB
- 大小: 141 Bytes
- 大小: 51 Bytes
分享到:
相关推荐
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置...
本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用。很多读者经过初步的学习之后就能够使用CSS设计出一些漂亮的网页样式,于是便乐在其中,踌躇满志,这是好事,但千万...
本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、...
CSS与(X)HTML核心基础(中) CSS与(X)HTML核心基础(下) CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) 浮动与定位(上) 浮动与定位(下) 文字与图像(上) 文字与图像(下) ...
javascript+css无图片圆角效果 告别复杂的图片圆角布局,调用简单 效果漂亮,样式可灵活调整!
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
针对美食静态网页设计项目,...7. 图片和文本内容:根据项目需求,添加美食相关的图片和文本内容,可以使用CSS设置图片的样式(如大小、边框、圆角等)和文本的样式(如字体、对齐方式、行高等)。 8. 样式细节设计:
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
之后本书又着重讨论如何使用DIV结合CSS来搭建网站,同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
内容涵盖css样式问题, 基础选择器:标签选择器、类选择器、id选择器、通配符选择器; 文本字体样式介绍:大小、样式、属性、风格、颜色等; 选择器进阶:复合选择器、并集选择器、交集选择器 、hover伪类选择器; ...
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去。 而这本的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作...
第1课 CSS与(X)HTML核心基础(中) 第1课 CSS与(X)HTML核心基础(下) 第2课 CSS禅意花园介绍 深入CSS盒子模型 第3课 深入理解盒子模型(上) 第3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与...
源文件\09 round.html ----第8章中的css圆角。 源文件\10 博客实例,参照本书4-9章中的相关讲解。 源文件\11 英文站点实例,与书中第12章内容保持一致。 源文件\12 中文站点实例,与书中第13章内容保持一致。 -...