CSS——表格、表单、链接和导航菜单

努力小贼

已于 2024-10-10 23:02:59 修改

阅读量501

点赞数 22

分类专栏： web前端文章标签： css 前端 html

于 2024-10-10 22:24:37 首次发布

本文链接：https://blog.csdn.net/2302_81399643/article/details/142793209

版权

web前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、设置表格样式

CSS中有许多表格属性可以用来设置表格的样式，以下是一些常用的表格属性：

border-collapse：设置表格的边框合并规则。可以设置为collapse来合并边框，或设置为separate来分隔边框（默认值为separate）。

border：设置表格的边框样式、宽度和颜色。例如：border: 1px solid black;表示边框为1像素宽度、实线样式、黑色颜色。

background-color：设置表格单元格的背景色。

text-align：设置表格单元格内文本的水平对齐方式。可以设置为left（默认值）、center、right。

vertical-align：设置表格单元格内文本的水平对齐方式。可以设置为top、center、bottom。

color：设置表格单元格内文本的颜色。

font-family：设置表格单元格内文本的字体系列。

font-size：设置表格单元格内文本的字体大小。

width 和 height：设置表格的宽度和高度。

这些只是一些常用的表格属性，你可以根据需要使用其他CSS属性来设置表格样式。

以下是表格属性的示例代码：


<head>
    <style>
        .table{
            width: 400px;
            height: 150px;
            border: 2px red solid;
            /* 边框线合并 */
            border-collapse: collapse; 
            background-color: gray;
            /* 表格里面文本的颜色 */
            color: blue;
        }
        #td9{
            background-color: green;
            color: black;
            /* 单元格内文本水平对齐方式 */
            text-align: center;
            /* 单元格内文本垂直对齐方式 */
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <table border="1" class="table">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td id="td9">单元格9</td>
        </tr>


    </table>
</body>

运行结果：

二、设置表单样式

表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过实例来看看怎样使用CSS修饰常用的表单元素。

1、修饰文本域

示例代码如下：

<head>
    <style>
         #text2{
            width: 100px;
            height: 50px;
            color: aqua;
            background-color: gray;
            /* background-image: url(../CSS/shili.png); */
            /* background-repeat: no-repeat; */
            border: 2px red double;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" id="text1">默认文本输入框
        <br>
        <input type="text" id="text2" value="此处输入账号">有默认值的输入框
        <br>
    </form>
</body>

运行结果：

其中 color 是框内文字的颜色，background-color 是背景颜色，背景还可用图片代替，其标签为background-image: url(图像.png)，如果图片太小覆盖不了整个文本框会出现好几个图片，不想要重复出现可以使用background-repeat: no-repeat

2、修饰按钮

示例代码如下：

<head>
    <style>
         #btn2{
            width: 100px;
            height: 50px;
            color: aqua;
            background-color: green;
            border: 2px red dashed;
            /* 鼠标变手指 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="submit" id="btn1">默认按钮
        <br>
        <input type="submit" id="btn2" value="登录">设置了样式的按钮
    </form>
</body>

运行结果：

当鼠标移动到绿色方框内会变成手指，其标签为 cursor: pointer

三、设置链接

超链接是网页上最普通的元素，通过超链接能够实现页面的跳转、功能的激活等，而要实现链接的多样化效果离不开CSS样式的辅助。

1.设置文字链接的外观

在默认的浏览器方式下，超链接统一为蓝色并且带有下划线。访问过的链接则为紫色并且也有下划线。通过CSS可以设置超链接的各种属性，而且通过伪类还可以制作出许多动态效果。

伪类中通过 :link 、:visited 、:hover 和 :active 来控制链接内容访问前、访问后、鼠标指针悬停时，以及用户激活时的样式。这4种状态的顺序是不能颠倒，否则可能会导致伪类样式不能实现。这4种状态并不是每次都需要用到，一般情况下只需要定义链接标签的样式以及 :hover 伪类样式即可

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{                     
            font-size: 13pt;
            color: #0000ff;
            text-decoration: none;
        }
        /* 访问过的链接 */
        a:visited{                     
            font-size: 19pt;
            color: #00ffff;
            text-decoration: none;
        }
        /* 鼠标指针悬停的链接 */
        .navi a:hover{
            color: #000;
            text-decoration: overline;
            font-size: 17pt;
            font-family: "黑体";
        }
    </style>
</head>
<body>
    <p class="navi">
        <a href="https://www.csdn.net/" target="_blank">首页</a>
        <a href="#">关于</a>
        <a href="#">客服</a>
        <a href="#">联系</a>

    </p>
</body>
</html>

运行结果：

2.图文链接

网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步美化。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            /* 设置左内边距用于增加空白显示背景图片 */
            padding-left: 30px;
            font-size: 16px;
            text-decoration: none;
        }
        .a:hover{
            background: url(./购物车满.png) no-repeat left center/6%;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="#" class="a">鼠标指针悬停在超链接上时将显示购物车</a>
</body>
</html>

运行结果：

未悬停时文字链接的效果如图：

悬停时文字链接的效果如图：

四、创建导航菜单

作为一个成功的网站，导航菜单必不可少，导航菜单的风格决定了整个网站的风格。

1.纵向列表模式的导航菜单

设置容器及列表的CSS样式

下面设置菜单Div容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            /* 设置菜单的宽度 */
            width: 200px;
            font-family: Arial;
        }
        #nav ul{
            /* 不显示项目符号 */
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #nav li{
            /* 设置列表选项（菜单项）的下边框线 */
            border-bottom: 1px solid #ed9f9f;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">工程</a></li>
            <li><a href="#">会员</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</body>
</html>

运行结果：

设置菜单项超链接的CSS样式

在设置容器CSS样式之后，菜单项的显示效果并不理想，还需进一步美化。接下来设置菜单项超链接的区块显示、左边的粗红边框、右侧阴影及内边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            /* 设置菜单的宽度 */
            width: 200px;
            font-family: Arial;
        }
        #nav ul{
            /* 不显示项目符号 */
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #nav li{
            /* 设置列表选项（菜单项）的下边框线 */
            border-bottom: 1px solid #ed9f9f;
        }
        #nav li a{
            /* 区块显示 */
            display: block;
            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            border-left: 12px solid #711515;
            border-right: 1px solid #711515;
        }
        /* 未访问链接、访问过链接的样式 */
        #nav li a:link,#nav li a:visited{
            background-color: #c11136;
            color: #fff;
        } 
        /* 鼠标指针悬停于菜单项上时的样式 */
        #nav li a:hover{
            background-color: #990020;
            color: #ff0;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">工程</a></li>
            <li><a href="#">会员</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</body>
</html>

运行结果：

2.横向列表模式的导航菜单

通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。其中最重要的环节就是设置<li>标签为浮动

接着设置菜单Div容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            /* 设置菜单水平显示的宽度 */
            width: 360px;
            font-family: Arial;
        }
        #nav ul{
            /* 不显示项目符号 */
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #nav li{
            /* 使得菜单项都水平显示 */
            float: left;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">工程</a></li>
            <li><a href="#">会员</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</body>
</html>

运行结果：

以上最关键的代码就是“ float:left; ”。正是设置了<li>标签为浮动，才将纵向导航菜单转变成横向导航菜单。

接下来设置菜单项超链接的区块显示、四周的边线框及内外边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav{
            /* 设置菜单水平显示的宽度 */
            width: 360px;
            font-family: Arial;
        }
        #nav ul{
            /* 不显示项目符号 */
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #nav li{
            /* 使得菜单项都水平显示 */
            float: left;
        }
        #nav li a{
            /* 区块显示 */
            display: block;
            padding: 3px 6px 3px 6px;
            text-decoration: none;
            border: 1px solid #711515;
            margin: 2px;
        }
        /* 未访问链接、访问过链接的样式 */
        #nav li a:link,#nav li a:visited{
            background-color: #c11136;
            color: #fff;
        }
        /* 鼠标指针悬停于菜单项上时的样式 */
        #nav li a:hover{
            background-color: #990020;
            color: #ff0;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">工程</a></li>
            <li><a href="#">会员</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</body>
</html>

运行结果：