前端---CSS---网页美化元素

最新推荐文章于 2024-05-06 22:53:42 发布

刘心芝士小蛋糕

最新推荐文章于 2024-05-06 22:53:42 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/love_to_share/article/details/103826244

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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">Java</span>

</body>
</html>

2.字体样式

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

-->
<style>
    body{
        font-family: "Arial Black", 楷体;
        color: #a13d30;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>

3.文本样式

1、颜色 color rgb rgba

2、文本对齐的方式 text-align = center

3、首行缩进 text-indent: 2em

4、行高 line-height： 单行文字上下居中！ line-height = height

5、装饰 text-decoration:

6、文本图片水平对齐 ： vertical-align: middle

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

    <!--
    颜色：
        单词
        RGB 0~F
        RGBA  A：0~1

    text-align : 排版，居中，
    text-indent: 2em;  段落首行缩进
    height: 300px;
    line-height: 300px;
        行高，和 块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }


        /*<!--*/
        /*水平对齐~ 参照物，  a，b*/
        /*-->*/
        img,span{
            vertical-align: middle;
        }

    </style>
    

</head>
<body>

<a href="">123</a>


<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>



<h1>王小波</h1>

<p class="p1">
    我是个俗气至顶的人，见山是山，见海是海，见花便是花。
    唯独见了你，云海开始翻涌，江湖开始澎湃，昆虫的小须挠着全世界的痒。
    你无需开口，我和天地万物便统统奔向你
</p>

<p>
   告诉你，一想到你，我这张丑脸上就泛起微笑……
咱们应当在一起，否则就太伤天害理啦。
你的名字美极了。真的，单单你的名字就够我爱一世的了。
如果一天有四十八个小时，我恨不得四十九小时和你呆在一块呢！
我对你的爱都是在分别中完成的。
如果你愿意，我就永远爱你。如果你不愿意，我就永远相思。
</p>

<p class="p3">
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>


<p>
    <img src="images/a.png" alt="">
    <span>asdasdajsldjalksdjalksd</span>
</p>


q
</body>
</html>

4.阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

5.超链接伪类

正常情况下，a，a:hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000;
}
/*鼠标悬浮的状态（只需要记住 :hover）*/
a:hover{
    color: orange;
    font-size: 50px;
}

6.列表

/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
/*ul{*/
    /*background: #a0a0a0;*/
/*}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

7.背景

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

8.渐变

background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

刘心芝士小蛋糕

关注

0
点赞
踩
1

收藏

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

1.为什么要进行网页美化有效的传递页面信息美化网页，页面漂亮，才能吸引用户凸显页面的主题提高用户的体验span标签：重点要突出的字，使用 span 套起来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&l...
复制链接

扫一扫

专栏目录