CSS入门系列（四）CSS样式的结合应用

最新推荐文章于 2024-06-07 14:13:17 发布

芳草碧连天lc

最新推荐文章于 2024-06-07 14:13:17 发布

阅读量680

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/leichaoaizhaojie/article/details/53140446

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS入门系列（四）CSS样式的结合应用

这一节主要是将css作用到我们所学的html标签上，看看css的效果。

1. 无序项目列表

我们先举一个无序项目列表的例子，看看css的效果。首先，我们先实现一个无序项目列表：

<body>
    <ul>
        <li>这是一个无序项目列表</li>
        <li>这是一个无序项目列表</li>
        <li>这是一个无序项目列表</li>
        <li>这是一个无序项目列表</li>
    </ul>
</body>

效果如下：
这里写图片描述
比较low，我们如何加上css的效果使它变得高大上呢？

    <style type="text/css">
        ul{list-style-type:none;
        list-style-image:url(1.jpg);<!-- 使用当前目录下的1.bmp的图片 -->
        }
    </style>

这样列表标头就显示你需要的图片了。

2. 表格的样式

<body>
<table border="1" bordercolor="#0099FF" cellpadding="10" cellspacing="10" width="500" >
    <tr>
        <td>单元格一</td>
        <td>单元格一</td>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格一</td>
    </tr>
</table>
</body>

效果大约是：
这里写图片描述
现在我们直接设置css属性：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
        border-bottom:#0c0 double 3px;<!--设置表格的下框线-->
        border-left:#F00 solid 3px;<!--设置表格的左框线-->
        border-top:#0c0 groove 3px;<!--设置表格的上框线-->
        width:500px;
        }
        table td{
        border:#0CF dotted 1px;
        padding:20px;
        }

    </style>
</head>