CSS基本美化网页元素

最新推荐文章于 2024-01-19 23:27:52 发布

向阳的人生

最新推荐文章于 2024-01-19 23:27:52 发布

阅读量526

点赞数

分类专栏： Java CSS 文章标签： CSS 网页美化

本文链接：https://blog.csdn.net/weixin_45672377/article/details/111185512

版权

Java 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

字体样式

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        body{
            font-family: 楷体;
            font-size: 20px;
        }

        .test{
            font-weight: bolder;
            color: red;
        }

    </style>
</head>
<body>
<h1>观沧海</h1>
<p>
    【作者】曹操 【朝代】东汉末年/三国
    译文对照
</p>
<p class="test">
    东临碣石，以观沧海。
    水何澹澹，山岛竦峙。
    树木丛生，百草丰茂。
    秋风萧瑟，洪波涌起。
    日月之行，若出其中；
    星汉灿烂，若出其里。
    幸甚至哉，歌以咏志。
</p>
</body>
</html>

在这里插入图片描述

文本样式

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
<!--    text-align 文本对齐方式
        line-height 行高
        text-indent 首行缩进
        text-decoration 文本修饰
-->
    <style>
        .p1{
            text-align: center;
            color: red;
            line-height: 50px;
        }
        .test{
            text-indent: 2em;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1 class="p1">观沧海</h1>
<p class="p1">
    【作者】曹操 【朝代】东汉末年/三国
    译文对照
</p>
<p class="test">
    东临碣石，以观沧海。
    水何澹澹，山岛竦峙。
    树木丛生，百草丰茂。
    秋风萧瑟，洪波涌起。
    日月之行，若出其中；
    星汉灿烂，若出其里。
    幸甚至哉，歌以咏志。
</p>
</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            color: black;
            text-decoration: none;
        }
      /* 超链接伪类 hover（鼠标悬浮状态）*/
        a:hover{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
<a href="#">链接</a>
</body>
</html>

在这里插入图片描述

列表样式

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式练习</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

css

#nav{
    width: 300px;
    background-color: gray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    background-color: red;
}
/*ul{*/
/*    background-color: gray;*/
/*}*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数子
square
*/
ul li{
    text-indent: 1em;
    list-style: none;
    height: 30px;
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    color: orange;
    font-size: 20px;
}

在这里插入图片描述

背景图片应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像应用</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            border: 1px solid red;
            /*背景图片*/
            background-image: url("image/tiger.jpg") ;
            /*背景图片复制 repeat-x 横向复制 repeat-y竖向复制 no-repeat不复制*/
            background-repeat: no-repeat;
            /*背景图位置*/
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

在这里插入图片描述

向阳的人生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本美化网页元素

字体样式实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字体样式</title> <style> body{ font-family: 楷体; font-size: 20px; } .test{
复制链接

扫一扫