3、美化网页元素

最新推荐文章于 2024-10-10 19:30:00 发布

大鑫333

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量74

点赞数

文章标签： css html5 java

本文链接：https://blog.csdn.net/weixin_41570988/article/details/119897725

版权

3.1 美化网页

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

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

</head>
<body>

欢迎学习 <span id="title1"> java</span>

在这里插入图片描述

3.2 字体样式

<!--font-family 字体
    font-size 字体大小-->
    <style>
        body{
            font-family: "Arial Black",楷体;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
            color: yellow;

        }

在这里插入图片描述

3.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
     text-align 排版 居中
     text-indet：2em 首行缩进2em-->
    <style>
        h1{
            color:rgba(0,255,255,0.9);
            text-align: left;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
    </style>
</head>
<body>

<p class="l1">11</p>
<p class="l2">22</p>
<p class="l3">33</p>

<h1>故事介绍</h1>

<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！</p>
<p>魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。</p>

<p class="p3"> Thank you for comforting me when I\'m sad , Thank you for comforting me when I\'m sad,
    Thank you for comforting me when I\'m sad,
    sadThank you for comforting me when I\'m sadThank you for comforting me when
    I\'m sad</p>

</body>
</html>

3.4阴影

 #price{
            text-shadow: green 10px -10px 2px;
        }

3.5 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{text-decoration:none;
        color:#000000
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: red;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        a:link{
            color: blue;
        }
        #price{
            text-shadow: green 10px -10px 2px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/1.jpg" alt="">
</a>
<p>
    <a href="#">蓝天白云</a>
</p>
<p>
    <a href="">作者：大金子</a>
</p>
<p id="price">¥99</p>

</body>
</html>

在这里插入图片描述

3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/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> <a href="#">旅行</a></li>
        <li><a href=#>烧烤</a> <a href="#">火锅 </a> <a href="#">烤肉</a></li>
    </ul>
</div>


</body>
</html>

style.css

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



.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/*ul li*/
/*list-style:none 去掉原点
circle 空心圆
decimal 数字*/
ul{
    background: gray;
}
ul li{
    height: 30px;
    list-style: decimal;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

3.7 背景

背景颜色
背景图片

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