CSS-7-美化网页元素

最新推荐文章于 2024-11-14 20:56:41 发布

西西ANO

最新推荐文章于 2024-11-14 20:56:41 发布

阅读量201

点赞数

分类专栏： # CSS 文章标签： css3

本文链接：https://blog.csdn.net/baidu_38126306/article/details/110748843

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS -> 美化网页元素

1. 为什么要美化元素

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

span标签：一种约定俗成，重点要突出的字，使用span套起来

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

    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

愿望 <span id="title1">成真</span>
</body>
</html>

2. 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
         font-family: 字体
         font-size: 字体大小
         font-weight: 字体的粗细
         color: 字体颜色
    -->
    <style>
        body {
            font-family: "Arial Black", 楷体;
            color: darkcyan;
        }
        h1{
            font-size: 50px;
        }
        .p1 {
            font-weight: bolder;
        }

    </style>
</head>
<body>

<h1>南柱赫</h1>

<p class="p1">南柱赫，1994年2月22日出生于韩国釜山广域市，韩国演员、模特。</p>
<p>2013年，通过设计师宋智武的时尚秀出道。</p>
<p>
    2014年7月，参加JTBC综艺节目《我去上学啦》;8月，出演tvN浪漫爱情喜剧《剩余公主》。2015年，主演KBS校园剧《Who Are You-学校2015》。2016年1月，出演tvN浪漫爱情剧《奶酪陷阱》;11月，主演MBC青春校园剧《举重妖精金福珠》。2017年，主演tvN奇幻爱情剧《河伯的新娘2017》。2018年，首次亮相大银幕，主演古装电影《安市城》。2020年，主演tvN励志剧《启动了》。
</p>
<p>
    You just want attention
    You don’t want my heart
    Maybe you just hate the thought of me with someone new
    Yeah, you just want attention
    I knew from the start
    You’re just making sure I’m never gettin’ over you
</p>


</body>
</html>

可以写成一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--字体风格-->
    <style>
        p{
            font: oblique bolder 30px "Arial Black";
        }
    </style>
</head>
<body>
<p>
    You just want attention
    You don’t want my heart
    Maybe you just hate the thought of me with someone new
    Yeah, you just want attention
    I knew from the start
    You’re just making sure I’m never gettin’ over you
</p>
</body>
</html>

3. 文本样式

颜色 color rgb rgba
文本的对齐方式 text-align: center
首行缩进 text-indent : 2em
行高 line-height: 单行文字上下居中 line-height = height
装饰 text-decoration:
文本图片水平对齐 vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    color:
        单词：red yellow blue...
        RGB 0~F
        RGBA A透明度0~1
    text-align: 排版
        right
        left
        center
    text-indent: 段落首行缩进
    line-height:行高和块的高度height一致，就可以上下居中
    -->
    <style>
        h1{
            /*color: #0000FF;*/
            /*color: rgb(0,255,255);*/
            color: rgba(0,255,255,0.8);

            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: purple;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去掉下划线*/
        a{
            text-decoration: none;
        }

        /*水平对齐  参照物*/
        img,span{
            vertical-align: middle;
        }

    </style>
</head>
<body>
<a href="">123</a>
<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>
<h1>南柱赫</h1>

<p class="p1">南柱赫，1994年2月22日出生于韩国釜山广域市，韩国演员、模特。</p>
<p>2013年，通过设计师宋智武的时尚秀出道。</p>
<p>
    2014年7月，参加JTBC综艺节目《我去上学啦》;8月，出演tvN浪漫爱情喜剧《剩余公主》。2015年，主演KBS校园剧《Who Are You-学校2015》。2016年1月，出演tvN浪漫爱情剧《奶酪陷阱》;11月，主演MBC青春校园剧《举重妖精金福珠》。2017年，主演tvN奇幻爱情剧《河伯的新娘2017》。2018年，首次亮相大银幕，主演古装电影《安市城》。2020年，主演tvN励志剧《启动了》。
</p>
<p class="p3">
    You just want attention
    You don’t want my heart
    Maybe you just hate the thought of me with someone new
    Yeah, you just want attention
    I knew from the start
    You’re just making sure I’m never gettin’ over you
</p>

<p>
    <img src="images/nzh.jpg" alt="" height="180px" width="120px">
    <span>南柱赫宝贝！</span>
</p>
</body>
</html>

4. 超链接伪类

a:hover

/*鼠标悬浮的状态（重点！）*/
a:hover{
    color:purple;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
    color:yellow;
}
/*已访问后的状态*/
a:visited{
    color: red;
}

5. 阴影

/*text-shadow: aqua 10px 10px 10px; 阴影颜色、水平偏移、垂直偏移、阴影半径*/
#idol{
    text-shadow: aqua 10px 10px 2px;
}

6. 列表样式

list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">


</head>
<body>
<div id="div">
    <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></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></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></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

#div{
    width: 300px;
    background: #9c9b9b;
}
.title{
    font-size:18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;

}
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square 正方形

*/
ul{
    background: #9c9b9b;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

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

7. 背景

背景颜色
背景图片

<style>
    div{
        width: 1200px;
        height: 800px;
        border: 1px solid red;
        /*默认是全部平铺repeat*/
        background-image: url("images/babe.jpg");
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

练习：

#div{
    width: 300px;
    background: #9c9b9b;
}
.title{
    font-size:18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*background: red;*/
    background: red url("../images/d.png") 270px 2px no-repeat;

}

ul{
    background: #9c9b9b;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.png");
    background-repeat: no-repeat;
    background-position: 230px 2px;
}

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

8. 渐变

background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);