美化网页

最新推荐文章于 2024-05-14 11:32:42 发布

破剑茶寮

最新推荐文章于 2024-05-14 11:32:42 发布

阅读量97

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44633875/article/details/116455216

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了网页美化的重要性，包括有效传递信息、提升用户体验和凸显主题。通过示例展示了如何使用HTML和CSS来设置字体样式、文本样式、超链接伪类和背景。还涉及到了列表和div元素的样式设计，如颜色、大小、行高、背景图片和渐变效果等。

摘要由CSDN通过智能技术生成

美化网页元素

为什么要美化网页

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

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎来到   <span class="span">英雄联盟</span>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式学习</title>
    <style>
        /*font-family  字体样式   */
        /*font-size    字体大小    */
        /*font-weight  字体粗细*/
        /*color        字体颜色*/
        body{
            font-family: 仿宋;
            color: beige;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>拜登政府：美国将放弃新冠疫苗的知识产权专利</h1>
<p class="p1">拜登政府当地时间5月5日发表一项决定，表示美国将放弃新冠肺炎疫苗的知识产权专利。
    美国贸易部部长戴琪（Katherine Tai）5日在一份声明中宣布了美国政府的这一决定。
</p>
<p>此前，美国制药商曾就此事进行了激烈的内部辩论和大力反击。戴琪表示，
    政府此举是为了尽快普及安全有效的疫苗，结束新冠肺炎疫情。她同时表示，
    美国政府将继续加强与私营部门和所有可能伙伴的合作，扩大疫苗的制造和分销，以及努力增加生产这些疫苗所需的原材料。
</p>

</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式学习</title>
    <style>
        /* 颜色：
              单词
              RGB  0~F
              RGBA  A：0~1
           text-align : 排版
           text-indent : 段落首行缩进
           height  : 块高
           line-height : 行高
           行高和块高度一直 就可以上下居中
           text-decoration  : 文本装饰 下划线
        */
        h1{
            color: rgba(0,251,265,1);
            text-align: center;
        }
        p{
            background: pink;
            text-indent: 2em;
            height: 50px;
            line-height: 50px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1>拜登政府：美国将放弃新冠疫苗的知识产权专利</h1>
<p class="p1">拜登政府当地时间5月5日发表一项决定，表示美国将放弃新冠肺炎疫苗的知识产权专利。
    美国贸易部部长戴琪（Katherine Tai）5日在一份声明中宣布了美国政府的这一决定。
</p>
<p>此前，美国制药商曾就此事进行了激烈的内部辩论和大力反击。戴琪表示，
    政府此举是为了尽快普及安全有效的疫苗，结束新冠肺炎疫情。她同时表示，
    美国政府将继续加强与私营部门和所有可能伙伴的合作，扩大疫苗的制造和分销，以及努力增加生产这些疫苗所需的原材料。
</p>
</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
        }
        /*hover  鼠标悬浮的颜色*/
        a:hover{
            color: orange;
        }
        /*active 鼠标按住未释放的状态*/
        a:active{
            color: aqua;
        }
        /*text-shadow : 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        p:hover{
            color: red;
            text-shadow: aqua 10px -10px 3px;
        }
    </style>
</head>
<body>
<a href=""><img src="image/a.jpg" alt="码出高效"></a>
<p><a href="">码出高效</a></p>
<p><a href="">作者： 杨冠宝 高海慧</a></p>
<p>￥99</p>
</body>
</html>

列表

div{
    width: 300px;
    background: aqua;
}
h2{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/*
list-style:
  none 去掉圆点
  circle  空心圆
  decimal  数字
  square   正方形
*/
ul{
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
}

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 800px;
            border: 1px red solid ;
            /*颜色 图片 图片位置 平铺方式*/
            background: pink url("image/a.jpg") 0px 0px ;
        }
        .div1{
            background-color: #4158D0;
            /*渐变*/
            background: linear-gradient(270deg, #4158D0 0%, #C850C0 46%, #ffc470 100%);
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1">
    <img src="image/a.jpg" alt="0" title="0">
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>