css 写出的漂亮主页面

CSS（层叠样式表）是一种用于为 HTML 网页样式化并美化它们的样式语言。通过使用 CSS，我们可以创建出漂亮的主页面来吸引用户的眼球。

以下是一个简单的 HTML 页面，并使用 CSS 样式表来美化它。

    !DOCTYPE html>
        html>
            head>
                meta charset="UTF-8">
                title>
    CSS 美化主页面例子/title>
                style>
                body {
                        background-color: #eee;
                }
                #container {
                        width: 80%;
                        margin: 0 auto;
                        background-color: #fff;
                        padding: 20px;
                        box-shadow: 0 0 10px rgba(0,0,0,0.2);
                }
                h1 {
                        color: #333;
                        text-align: center;
                        font-size: 36px;
                        font-family: Arial, sans-serif;
                        text-transform: uppercase;
                }
                p {
                        color: #666;
                        font-size: 18px;
                        font-family: Georgia, serif;
                        line-height: 1.5;
                }
                a {
                        color: #069;
                        font-weight: bold;
                }
                .button {
                        display: inline-block;
                        background-color: #069;
                        color: #fff;
                        padding: 10px 20px;
                        border-radius: 5px;
                        text-align: center;
                        text-decoration: none;
                        font-weight: bold;
                        font-size: 18px;
                        margin-top: 20px;
                        transition: all 0.3s ease;
                }
                .button:hover {
                        background-color: #333;
                        color: #fff;
                        transform: translateY(-5px);
                }
                /style>
            /head>
            body>
                div id="container">
                    h1>
    CSS 美化主页面例子/h1>
                    p>
    欢迎来到我们的网站。我们是一个提供高质量产品和服务的公司。/p>
                    a href="#">
    了解更多/a>
                    br>
                    a href="#" class="button">
    联系我们/a>
                /div>
            /body>
        /html>
    

上面的 CSS 代码添加了以下样式：

• 背景颜色设置为 #eee
• 容器宽度为 80% 并居中显示
• 容器背景颜色设置为 #fff，加了一个阴影效果
• 标题居中并使用了不同大小和字体的文字样式
• 段落使用不同的字体和字号，并设置了行高
• 链接使用加粗字体并设置了颜色
• 按钮使用了不同的背景颜色、字体颜色和字重，并添加了一个简单的动画效果

有了这些样式以后，我们的主页面看起来更加漂亮和吸引人了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！