CSS设计网页边框 boader使用方法

实例一:

CSS:
p {padding: 15px; border: 1px solid black; } 
h5{padding: 0px; border: 1px solid red;}
XHTML:
<p>This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.</p>
<h5>This header has no padding, which places the text right against the border!</h5>

 

实例二:

CSS:
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
XHTML:
<p>This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.</p>
<h5>This header has no padding. It is only spaced away from the paragraph because the paragraph has a padding of 5 pixels!</h5>

 

实例三:

CSS:
p { padding-left: 5px; border: 1px solid black; }
h5{
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 13px;
    padding-left: 21px;
    border: 1px solid red;
}
XHTML:
<p>This paragraph had one padding specified(left), using directional declaration.</p>
<h5>This header had each padding specified separately, using directional declaration.</h5>

 

实例四:

CSS:
p {
    padding: 5px 15px;
    border: 1px solid black;

h5{
    padding: 0px 5px 10px 3px;
    border: 1px solid red;
}
XHTML:
<p>This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.</p>
<h5>This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.</h5>

时间: 2024-09-04 18:59:59

CSS设计网页边框 boader使用方法的相关文章

DIV+CSS设计网页时的常见错误处理技巧

以下是一些DIV+CSS设计网页时的常见错误处理技巧,希望能对大家有所帮助. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 确定错误发生的位置 假如错误影响了整体布局,则可以逐个删除div块,直到删除

技巧:div+css设计网页时浮动问题的解决方法

css|浮动|技巧|解决|设计|网页|问题 前我最常用的方法有两种: 方法一: 使用块级clear,即声明一个块的类属性为.clear {clear:both;} 方法二: 使用内联元素清理,比如说在主浮动内容后跟一个内联元素. .inlineclear {clear:both;}<span class="inlineclear"></span> 方法三:使用双层div嵌套 #pubpage {display:block;clear:both;}#main {d

用DIV CSS设计网页时的八个必要的小技巧

css|技巧|设计|网页 以下是进行CSS设计时的八个必要的小技巧,良好的习惯可能会使你的设计周期加倍缩短.(如果您想了解更多请参见人民邮电出版社后续图书<CSS精粹--101条设计技巧>) 1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减

FrontPage设计网页禁用JavaScript的方法

frontpage|javascript|禁用|设计|网页 从动画到应用程序,站点内的各种对象都可以使用 javascript.但有些浏览器并不支持 javascript,所以有时访问者在查看包含Javacritp的网页时可能无法正确显示,或者会包含错误. 我们在用FrontPage制作网页时,可以将站点设置为与特定的浏览器兼容或是与某种技术兼容.比如我们可以禁止 javascript,或将我们所制作的站点设置为与不支持 javascript 的浏览器兼容,甚至将FrontPage 菜单上有关插

CSS设计网页教程:制作网页气泡状文本框

气泡对话框在网页中经常用于说明提示等功能,可以形象生动的现实一些需要用户注意的文字与内容,本文介绍仅用CSS来实现这种简单的网页效果. 气泡状文本框,是一种很生动的网页设计手段. 它可以用来表示用户的发言. 也可以用来作为特定信息的提示符. DVD租借网站Netflix,还用它显示碟片的详细信息. ========================= 制作CSS气泡框的传统方法,需要5张背景图片,分别是: * tl.gif,左上方的圆角. * tr.gif,右上方的圆角. * bl.gif,左下方

CSS设计网页小技巧:100%的高度

在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度.有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法.今天,我将于你分享一下. 我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题.我想让div结构自动延伸,但是它就是不能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法.比方说你有如下html代码文档 <!DOCTYPE html PUBLIC "-//W3C//DTD

谈谈CSS加入网页的五种方法

在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. 在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. XHTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容.那么到底有哪些方式在XHTML文件中引入CSS样式呢? 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <td sty

设置CSS隐藏网页的滚动条的方法(转自网络)

解决思路: 我们希望是强制出现滚动条,但有时候我们并不希望出现滚动条,那就要隐藏它了.从上个问题的指点中我们很容易得到答案----设置CSS属性overflow的值为hidden. 具体步骤: 方法一:设置CSS属性overflow为hidden. <body style="overflow:hidden"> 方法二:设置body元素的scroll属性为no. <body scroll="no"> 注意: 建议用方法一隐藏滚动条,用方法二的话

CSS设计网页头部的优化写法

核心提示:div+css布局技巧       在div+css布局中,一般都这样来整体构架的: <div id="header"></div> <div id="center"></div> <div id="footer"></div>       而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <d