HTML超链接及样式属性，以及文章列表显示

最新推荐文章于 2023-10-29 20:25:07 发布

just_花生

最新推荐文章于 2023-10-29 20:25:07 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104400365

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：HTML超链接及样式属性；
HTML超链接及居中显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <a href="https://www.csdn.net/">CSDN首页</a>
</body>
</html>

在这里插入图片描述

HTML超链接行高设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: blueviolet;
            text-align: center;
        }
        a {
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://www.csdn.net/">CSDN首页</a>
    </div>
</body>
</html>

在这里插入图片描述
HTML超链接属性设置（去掉下划线）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: blueviolet;
            text-align: center;
        }
        a {
            line-height: 200px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://www.csdn.net/">CSDN首页</a>
    </div>
</body>
</html>

在这里插入图片描述
HTML文章列表显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表效果</title>
    <style>
        #box {
            width: 200px;
            height: 300px;
            background-color: yellow;
        }
        h3 {
            font-size: 18px;
            font-weight: 600;

            text-align: center;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 10px;
            border-top: 1px dashed lightslategray;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 标签 只为演示 -->
    <div id="box">
        <!-- 文章列表标题 -->
        <h3>文章列表</h3>
        <!-- 文章列表的列表效果 -->
        <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>