html样式（边框）

1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

<style>

.injected-text {

margin-bottom: -25px

text-align: center

}

.box {

border-style: solid

border-color: black

border-width: 5px

text-align: center

}

.yellow-box {

background-color: yellow

padding: 10px

}

.red-box {

background-color: red

padding: 20px

}

.green-box {

background-color: green

padding: 10px

}

</style>

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离

3.如果你将一个元素的 margin 设置为负值，元素将会变大。

4.有时你想要自定义元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

<style>

.green-box {

background-color: green

padding-top: 40px

padding-right: 20px

padding-bottom: 20px

padding-left: 40px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

5.有时你想要自定义元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

<style>

.green-box {

background-color: green

margin-top: 40px

margin-left: 40px

margin-right: 20px

margin-bottom: 20px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

padding: 20px 40px 20px 40px

}

</style>

7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

margin: 20px 40px 20px 40px

}

</style>

简单的做法就是把两个框的图片用ps切出来（你两个的小图标不一样，图方便就可以切两个大的输入框背景，就是连图标一起切，要灵活点就单独切开）。假设你的HTML结构是

<ul>

<li>账号：<span><input type="text"/></span></li>

<li>密码：<span><input type="text"/></span></li>

</ul>

把背景图设置到span上面、span的样式设置成display:inline-blockwidth:120pxheight:20px(宽高的设置当然是和你的背景图大小一样)

input的样式把边框和背景设置为none；这样在背景图上就看不出了。

大致思路就是这样。估计你是初学者。还是多看些css的基础知识吧。

设定样式如下:

<style>

.font_bk{border:1px solid #ccc}

</style>

然后给你需要的文字设置样式即可,比如

<span class="font_bk">千里江山</span>

HTML：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

语言特点：超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

---