css基础

最新推荐文章于 2024-10-01 23:54:35 发布

翻译最新推荐文章于 2024-10-01 23:54:35 发布 · 355 阅读

JSP 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了网页布局中使用div元素结合CSS样式属性实现并列显示、边距设置、背景图片应用等关键技巧，包括浮动、边距、背景颜色与图片的设置方法，以及如何在代码中高效应用这些特性来提升网页视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、<div style=""></div>

2、border:1px solid #ccc ; （边框，粗细1px，solid实线 dashed 虚线，颜色#ccc）

3、width:30%;

4、color:#fff;

5、font-weight:bold; 字体加粗

6、padding-left:15px; 左边距

7、height:30px; 高度30px

8、line-height:30px; 字迹高度

9、background-color: #ccc; 背景色

10、padding:6px;检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距，如padding:2px 3px 6px 5px（如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边，如果只提供一个，将用于全部的四条边。），通过设置边距，在这个层中的内容，将按照你设置的不同的边距，离边框产生不同的距离。

11、两个div 并列

<div style="text-align:center;width:100%;">
<div style="float:left;border:1px solid #ccc; width:45%;">
<div style="border:1px solid #fff;color:#fff;font-weight:bold;
padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新聞一

</div>
<div style="padding:6px;">php168新聞發佈會</div>
</div>
<div style="margin-left: 5px; border:1px solid #ccc; width:45%;float: right">
<div style="border:1px solid #fff;color:#fff;font-weight:bold;
padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新聞二

</div>
<div style="padding:6px;">php168新聞發佈會</div>
</div>
<div style="clear:both"></div>
</div>

里面两个div第一个添加样式float: left（对象浮在左边），第二个添加样式为float: right（对象浮在右边）。

在第二个的样式加添加margin-left: 5px（检索或设置对象左边的外延边距），以与前一个（也就是左边的）有5px的间距。

12、设定背景为图片

<div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;

line-height:30px;background:url(http://bbs.php168.com/images/php168/head.gif)repeat-x;">最新新闻

</div>

<div style="padding:6px;">php168新版即将发布</div>

</div>

也就是将上面的background-color: #ccc修改为background:url(http://bbs.php168.com/images/php168/head.gif)repeat-x。然后在后面添加一个参数，设置是否重复显示。
说明：
如果图片地址与模板文件在同一目录，你可以用相对路径，即：background: url(head.gif)
repeat-x：背景图像在横向上平铺
其它参数说明：
repeat : 　背景图像在纵向和横向上平铺
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺