CSS-美化网页元素

时间：2021-05-17 21:59:35 阅读：14 评论：0 收藏：0 [点我收藏+]

美化网页元素

美化标签的几个作用：

有效传递页面信息
让页面更漂亮可以更好的吸引用户
更明确的凸显主题

字体样式

span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #title1{
      font-size:25px;
    }
  </style>
</head>
<body>
?
<!--span标签可以换成任何其他的，但是约定成俗使用span来规范格式，类似的还有div-->
<span id="title1">前端</span>学习
?
</body>
</html>

字体的常用美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
?
    /*
    font-family:字体
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
?
    一行写完的格式font：字体风格,字体粗细，字体大小/行高，字体样式;(中间都是空格隔开并非逗号)
    */
        p{
            font-family:"Arial Black",楷体;
            color:pink;
        }
        h1{
            font-size:50px;
        }
        .p1{
            font-weight:bolder;
        }
        ul{
            font:oblique bolder 20px/20px "楷体";
        }
    </style>
?
?
</head>
<body>
?
<h1>
    热爱生活
</h1>
<p class="p1">
    生命不息
</p>
<p>
    运动不止
</p>
<p>
    Go！
</p>
<ul>
    <li>吃</li>
    <li>喝</li>
    <li>睡</li>
</ul>
?
</body>
</html>

技术分享图片

文本样式

颜色： color，rgb，rgba
文本对齐方式：text-align:center （水平居中）
首行缩进：text-indent:2em
行高: line-height（当行高于块的高度一致的时候就可以实现单行上下居中）
装饰:text-decoration（一般用来添加下滑线，a标签默认有下划线让参数为none去除下划线）
文本图片对齐: 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  首行缩进两字符
    line-height:行高（当行高于块的高度一致的时候就可以实现单行上下居中）
    -->
    <style>
        h1{
            color:rgba(0,255,255,0.7);
            text-align:center;
        }
        .p1{
            text-indent:2em;
        }
        .p3{
            background:pink;
            height:50px;
            line-height:50px;
        }
        .p2{
            text-decoration:underline;下划线
            <!--text-decoration:line-through;中划线-->
            <!--text-decoration:overline;上划线-->
        }
?
        img,span{
            vertical-align:middle;
        }
    </style>
</head>
<body>
<p>
    <img src="images/a.jpg" alt="">
    <span>
        不愧是我
    </span>
</p>
<h1>故事介绍</h1>
<p class="p1">
    圣杯是传说中可实现持有者一切愿望的宝物。而为了得到圣杯的仪式就被称为圣杯战争。
</p>
<p class="p2">
    参加圣杯战争的七名由圣杯选出的魔术师被称为Master，与七名被称为Servant的使魔订定契约。他们是由圣杯选择的七位英灵，被分为七个职阶，能获得圣杯的只有一组，这七组人马各自为了成为最后的那一组而互相残杀。
</p>
<p class="p3">
    在大火灾中失去父母的年幼的卫宫士郎被自称为魔术师的卫宫切嗣所救，在成为卫宫切嗣养子，十年后，偶然地与Servant中的剑士Saber订定契约，被卷入圣杯战争当中。
</p>
</body>
</html>

技术分享图片

阴影与超链接伪类

text-shadow是阴影属性，三个参数分别是水平偏移，垂直偏移和模糊半径，颜色的参数可以写在开头或结尾

超链接伪类只要记住a和a:hover{}（鼠标悬浮状态）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration:none;
            color:#000000;
        }
?
        /*鼠标悬浮的状态*/
        a:hover{
            color:orange;
        }
?
        /*鼠标按住时的状态*/
        a:active{
            color:green;
        }
?
        /*阴影特效哦：三个数字分别是水平偏移，垂直偏移，模糊半径*/
        #price{
            text-shadow:5px 5px 2px black;
        }
?
    </style>
?
</head>
<body>
<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">生活</a>
</p>
<p>
    <a href="">作者：我的朋友</a>
</p>
<p id="price">
    ￥??
</p>
?
</body>
</html>

技术分享图片

列表

列表中使用最多的为list-style: 常用的形态为none 去掉圆点，主要掌握该方法

<!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="title1">全部商品分类</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;</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;</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;</li>
    <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">重置</a><a href="#">票务</a></li>
  </ul>
</div>
?
</body>
</html>

#nav{
    width:260px;
    background:#a0a0a0;
}
.title1{
    font-size:18px;
    font-weight:bold;
    text-indent:1em;
    line-height:30px;
    background:pink;
}
?
/*ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字（有序列表）
square 正方形*/
ul{
?
}
ul li{
    height:30px;
    list-style:none;
    text-indent:1em;=
}
?
a{
    text-decoration:none;
    text-size:16px;
    color:black;
}
a:hover{
    color:orange;
    text-decoration:underline;
}

技术分享图片

背景

背景颜色和背景图片两点

background-repeat:平铺方式

background-position:给图片定位，后台写水平和垂直平移距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*边框border:
    参数：边框粗细 边框样式 边框颜色*/
    div{
      width:1000dx;
      height:700px;
      border:1px solid red;
      background-image:url("images/a.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>

/*参数：颜色图片图片摆放的位置平铺方式 */ background:pink url("../images/d.png") 230px 0px no-repeat;

#nav{
    width:260px;
    background:#a0a0a0;
}
.title1{
    font-size:18px;
    font-weight:bold;
    text-indent:1em;
    line-height:30px;
    /*参数：颜色 图片 图片摆放的位置 平铺方式 */
    background:pink url("../images/d.png") 230px 0px no-repeat;
}
?
/*ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字（有序列表）
square 正方形*/
?
ul li{
    height:30px;
    list-style:none;
    text-indent:1em;
    background:url("../images/r.png");
    background-repeat:no-repeat;
    background-position:190px 0px;
}

渐变

渐变推荐使用别人调好的颜色组合，避免自己设置的颜色太难看，参考网址：

渐变分为径向渐变和圆形渐变

第一个背景颜色可以不用主要参考渐变参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--径向渐变和圆形渐变-->
  <style>
    body{
    /**/
      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    }
  </style>
</head>
<body>
?
热爱生活
?
</body>
</html>

CSS-美化网页元素

原文：https://www.cnblogs.com/Share-my-life/p/14777688.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)