网页元素美化技巧-CSDN博客

本文链接：https://blog.csdn.net/qq_41402786/article/details/115376683

美化网页元素

1.为什么要美化网页元素

有效的传递页面信息
美化网页，页面漂亮才能吸引用户
凸显页面的主题
提高用户的体验

Span标签：重点要突出的字。使用span套起来。
< span class=title>Java</ span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
          font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span class="title">Java</span>
</body>
</html>

在这里插入图片描述

2.字体样式

颜色color
文本对齐的方式 text-align=center 居中
首行缩进 text-indent:2em 首行缩进
行高line-height:10pm 行高（单行文字上下居中）
装饰 text-decoration 上划线中划线下划线

文字图片水平对齐 vertical-align:,middle

font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        font-family:字体
        font-size:字体大小
        font-weight:字体粗细
        color:字体颜色
        */
        body{
            font-family: 楷体;
            color: darkblue;
        }
        h1{
            font-size:50px ;
        }
       #p1{
           font-weight: bold;
       }
    </style>
</head>
<body>
<h1>斗罗大陆简介</h1>
<p></p>
中国的网络文学发展大概经历了20年左右的过程。前面四、五年，网络文学发展得非常缓慢，到了2005年左右开始高速发展。目前，中国网络文学已经与美国好莱坞、日本动漫、韩国电视剧并称世界4大文化现象。中国网络文学拥有680万网络作家、3.5亿网络读者。唐家三少以中华传统文化和历史故事为蓝本和母题，通过网络文学，衍生出游戏、手游、电视剧等多种形式创造原创中国IP。 [5]
唐家三少在创作的时候投入了大量的感情，故事中的男主角以作者本人为原型，其他不少角色也来自身边的亲友，取自真正的生活经历使得故事人物更加丰满。 [6]
<p></p>
故事简介编辑</br>
<p id="p1">
小说主要描绘了一个名叫斗罗大陆的武魂世界。唐门外门弟子唐三，因偷学内门绝学而为唐门所不容，跳崖明志时却发现穿越到另一个世界，即斗罗大陆的圣魂村。这里没有魔法，没有武术，没有战斗力，却有神奇的武魂。这里的每个人在6岁的时候，都会在武魂殿中在魂师的帮助下进行武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活，有特殊天赋的人可以用之修炼并进行战斗。 [7]  唐三一步步修炼武魂，由人修炼为神，
最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事。
</p>
</body>
</html>

在这里插入图片描述

字体风格：

font:oblique bolder 20px “华文楷体”
oblique斜体 bolder加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--字体风格-->
    <style>
        p{
            font: oblique bolder 20px "华文楷体";
        }
    </style>
</head>
<body>
<p>
    中国的网络文学发展大概经历了20年左右的过程。前面四、五年，网络文学发展得非常缓慢，到了2005年左右开始高速发展。目前，中国网络文学已经与美国好莱坞、日本动漫、韩国电视剧并称世界4大文化现象。中国网络文学拥有680万网络作家、3.5亿网络读者。唐家三少以中华传统文化和历史故事为蓝本和母题，通过网络文学，衍生出游戏、手游、电视剧等多种形式创造原创中国IP。 [5]
    唐家三少在创作的时候投入了大量的感情，故事中的男主角以作者本人为原型，其他不少角色也来自身边的亲友，取自真正的生活经历使得故事人物更加丰满。 [6]
</p>
</body>
</html>

3.文本样式

颜色：单词、RGB（红绿蓝三原色）
#FF0000红色
#00FF00绿色
#0000FF蓝色
#000000黑色
text-align :排版，居中
text-indent:首行缩进，em为单位
行高和块的高度一致就可以上下居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       颜色：单词、RGB
       #FF0000红色
       #00FF00绿色
       #0000FF蓝色
       #000000黑色
       text-align :排版，居中
       text-indent:首行缩进，em为单位
       行高和块的高度一致就可以上下居中
       -->
    <style>

        h1{
            color: #0000FF;
            text-align: center;
        }
        #p1{
            text-indent: 2em;

        }
        .p0{
            text-indent: 2em;
            background: aqua;
            height: 300px;

        }
        .编辑{
            text-align: center;

        }
        .l1{
            text-decoration: underline;/* 下划线*/
        }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }
        a{
          text-decoration: none;
        }

    </style>
</head>
<body>
<a href="">123</a><!--a标签默认有下划线-->
<p class="l1">
    123123156
</p>
<p class="l2">
    123154646
</p>
<p class="l3">
    12314216
</p>
<h1>斗罗大陆简介</h1>
<p class="p0">
    中国的网络文学发展大概经历了20年左右的过程。前面四、五年，网络文学发展得非常缓慢，到了2005年左右开始高速发展。目前，中国网络文学已经与美国好莱坞、日本动漫、韩国电视剧并称世界4大文化现象。中国网络文学拥有680万网络作家、3.5亿网络读者。唐家三少以中华传统文化和历史故事为蓝本和母题，通过网络文学，衍生出游戏、手游、电视剧等多种形式创造原创中国IP。 [5]
    唐家三少在创作的时候投入了大量的感情，故事中的男主角以作者本人为原型，其他不少角色也来自身边的亲友，取自真正的生活经历使得故事人物更加丰满。 [6]
</p>

<p class="编辑">故事简介编辑</p>

<p id="p1">
小说主要描绘了一个名叫斗罗大陆的武魂世界。唐门外门弟子唐三，因偷学内门绝学而为唐门所不容，跳崖明志时却发现穿越到另一个世界，即斗罗大陆的圣魂村。这里没有魔法，没有武术，没有战斗力，却有神奇的武魂。这里的每个人在6岁的时候，都会在武魂殿中在魂师的帮助下进行武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活，有特殊天赋的人可以用之修炼并进行战斗。 [7]  唐三一步步修炼武魂，由人修炼为神，
最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事。
</p>
</body>
</html>

在这里插入图片描述
水平对齐（需要有参照物）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--水平对齐！需要有参照物-->
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p >
    <img src="images/1.png" alt="">
    <span>4545454545daadasd</span>
</p>
</body>
</html>

在这里插入图片描述

4.超链接伪类

超链接就是a标签
伪类：同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做伪类。
伪类用冒号来表示。
a标签有四种伪类，需牢记！

:link 表示，用户没有点击过这个链接的样式。是英语“链接”的意思。

:visited 表示，用户访问过了这个链接的样式。是英语“访问过的”的意思。

:hover 表示，用户鼠标悬停的时候链接的样式。是英语“悬停”的意思。

:active 表示，用户用鼠标点击这个链接，但是不松手，此刻的样式。是英语“激活”的意思

/text-shadow:阴影颜色水平偏移，垂直偏移，阴影半径/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色加去除下划线*/
        a {
            text-decoration: none;
            color:#000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size:50px;

        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        a:visited{
            color: red;
        }
        /*text-shadow:阴影颜色 水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #264380 10px 10px 10px;
        }
    </style>
</head>
<body>
<a href="">
    <img src="image/a.jpg" alt="">
</a>
<p>
    <a href="#">码处高效：Java开发手册</a>
</p>
<p>
    <a href="" >作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>



</html>

5.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    </ul>
</div>


</body>
</html>

#nav{
    width: 274px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
    /*下面是添加商品分类右侧箭头*/
    /*background: red url("../images/d.jpg") 270px 10px no-repeat;*/
}
/*ul li*/
/*list-style：
none 去掉圆点
circle 空心圆
decimal:变成数字
square:正方形
*/
ul{
    background: aquamarine;

}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /*background-image:url("../images/d.jpg") ;*/
    /*background-repeat:no-repeat ;*/



}
a{
    text-decoration:none ;
    fone-size:14px;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述

6.背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认是全部平铺的*/
            background-image: url("image/1.jpg");

        }
        .div1{
            background-repeat: repeat-x;/*水平平铺*/
        }
        .div2{
            background-repeat: repeat-y;/*垂直平铺*/
        }
        .div3{
            background-repeat: no-repeat;/*不平铺*/
        }
    </style>
</head>
<body>
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
</body>
</html>

在背景这一部分学习中，了解三种平铺方式。

水平平铺 background-repeat:repeat-x;
垂直平铺 background-repeat:repeat-y;
不平铺:no-repeat;

7.渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--径向渐变，圆形渐变
    -->
    <style>
        body{
            /*background-color: #4158D0;*/
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

        }
    </style>
</head>
<body>
大大
</body>
</html>

渐变关键词的话：background-image:linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

渐变好看的颜色从这个网站找：https://www.grabient.com/

在这里插入图片描述