CSS美化网页元素

时间：2021-03-15 10:58:49 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：java开发 :hover 字体 love 背景渐变 utf-8 one tps

美化网页元素

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #title1{
            font-size: 50px;

        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>

3.2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
<!--
font-family: 字体
 font-size:字体样式
 font-weight:字体粗细
 color:  字体颜色
-->
    <style>
        body{
            font-family: "Arial Black", 华文楷体;
            color: aquamarine;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>人之初，性本善。性相近，习相远。</h1>

<p class="p1">
苟不教，性乃迁。教之道，贵以专。

</p>
<p>
子不学，非所宜。幼不学，老何为。

玉不琢，不成器。人不学，不知义。

</p>
<p>Love alters not with his brief hours and weeks</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    字体风格-->
    <style>
        p{
            font: oblique bold 12px "楷体";
        }
    </style>
</head>
<body>
<p>
    子不学，非所宜。幼不学，老何为。

    玉不琢，不成器。人不学，不知义。

    为人子，方少时。亲师友，习礼仪。

    香九龄，能温席。孝于亲，所当执。

    融四岁，能让梨。弟于长，宜先知。

    首孝悌，次见闻。知某数，识某文。
</p>
</body>
</html>

3.3文本样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
<!--
颜色：
单词
RGB  0~F
RGBA
text-align:排版
 text-indent: 2em;段落首行缩进
 height: 300px;
 line-height: 300px;
 行高和块的高度一致就可以上下居中
  -->
    <style>
        h1{
            color: rgba(0,220,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: azure;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
          /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">12311231</a> 
<p class="l1">12311231</p>
<p class="l2">12311231</p>
<p class="l3">12311231</p>
<h1>人之初，性本善。性相近，习相远。</h1>

<p class="p1">
    苟不教，性乃迁。教之道，贵以专。

</p>
<p>
    子不学，非所宜。幼不学，老何为。

</p>
<p class="p3">Love alters not with his brief hours and weeks</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
水平对齐，参照物，a,b
-->
    <style>
        ing,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="images/1.jpg" >
    <span>4jdisapjfidpa</span>
</p>
</body>
</html>

3.4 超链接伪类和阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超连接伪类</title>
    <style>
/* 默认的颜色 */
            a{
                text-decoration: none;
                color: #000000;
            }
/* 鼠标受悬浮的颜色(只需要记住hover) */
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: red;
        }
    /*    */
        a:visited{
            color: #123123;
        }
        /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #232310 10px 10px 2px;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="image/2.jpg" >
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="">作者：老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>

超链接伪类

正常情况下只用，a, a:hover

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>&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>



CSS
#nav{
    width: 300px;
    background: #112121;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square  正方形
*/
ul{
    background: yellow;
}
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;
}

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/3.jpg");
        /*    默认是全部平铺的repeat*/
        }
        .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>

<!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>&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>


css
#nav{
    width: 300px;
    background: #112121;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色 图片，图片位置，平铺方式*/
    background: red url("../images/4.jpg")200px 10px no-repeat;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square  正方形
*/
ul{
    background: yellow;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/5.jpg");
    background-repeat: no-repeat;
    background-position: 180px 2px;

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

3.8渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
<!--    径向渐变，圆形渐变-->
    <style>
        body{
            /*background-color: #FFFFFF;*/
            background-image: linear-gradient(19deg,#21D4FD 0%, #B721FF 100%);
        }
    </style>
</head>
<body>

</body>
</html>

转载https://www.cnblogs.com/aylin/p/5626068.html

CSS美化网页元素

标签：java开发 :hover 字体 love 背景渐变 utf-8 one tps

原文地址：https://www.cnblogs.com/202116xi/p/14527468.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行