美化网页元素

美化网页元素

  • 为什么要美化网页?

    1. 有效的传递页面信息
    2. 美化网页，才能吸引用户
    3. 凸显页面的主题
    4. 提高用户体验
  • span标签: 重点要突出的字，使用span套起来
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        #s1{
            font-size: 80px;
        }
    </style>
</head>
<body>
    一起<span id="s1">学习java</span>
</body>
</html>

  • 字体样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <!--
    font-family: 字体
    font-size: 字体大小
    font-weight: 字体粗细
    color: 字体颜色
    -->
    <style>
        body{
            font-family: Algerian;
        }
        h3{
            font-size: 60px;
            font-weight: lighter;
        }
        #p1{
            font-weight: bolder;
            color:yellow;
        }
    </style>
</head>
<body>
    <h3>文章</h3>
    <p id="p1">考生必备的公务员备考大礼包，帮助大家在短时间内快速提分！从行测到申论，从数资到语言与逻辑，经验丰
        富的一线老师全程授课，围绕考试大纲，紧扣命题思路，梳理重要考点，以实战为出发点，以学生实操为落脚点，
        让学生听得懂、学得快，帮助考生全面提高应对公考的能力！</p>
    <p>这里是北京》第三讲——“时代楷模 北京榜样”依托北京联合大学数字马院平台如期在线开讲。首都第四届道德模范、中国红十字优秀志愿者、全国最美志愿者、全国孝亲敬老模范
        、全国优秀党员叶如陵教授和全国优秀教师、北京市教学名师贾少英教授双优联袂，为
        联大学子奉献了精彩一课。叶如陵教授深情讲述了自己30岁进藏，31年援藏创建西藏第一所三甲医院、
        退休返京后拒绝京内一些医院高薪返聘，筹建社区医疗站“爱心小屋”19年的感人事迹。</p>
</body>
</html>

  • 文本样式

    1. 颜色 color rgb rgba
    2. 对齐方式 text-align = center
    3. 首行缩进 text-indent : 2em
    4. 行高 line-height
    5. 装饰 text-decoration
    6. 文本图片水平对齐：vertical-align：middle
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <!--颜色：
        单词
        RGB 00~FF
        RGBA: 最后一个值表示透明度
        text-align： 排版，居中、靠左
        text-indent: 2em; 段落首行缩进
        行高和块的高度一致时就可以上下居中
        height: 300px;
        line-height: 300px;
        下划线
        text-decoration: underline;
        中划线：line-through
        上划线：overline
    -->
    <style>
        h3{
           color:rgba(32,200,11,0.5);
            text-align: center;
        }
        #p1{
            text-indent: 2em;
            text-decoration: underline;
        }
        #p2{
            height: 300px;
            line-height: 50px;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <h3>文章</h3>
    <p id="p1">考生必备的公务员备考大礼包，帮助大家在短时间内快速提分！从行测到申论，从数资到语言与逻辑，经验丰
        富的一线老师全程授课，围绕考试大纲，紧扣命题思路，梳理重要考点，以实战为出发点，以学生实操为落脚点，
        让学生听得懂、学得快，帮助考生全面提高应对公考的能力！</p>
    <p id="p2">这里是北京》第三讲——“时代楷模 北京榜样”依托北京联合大学数字马院平台如期在线开讲。首都第四届道德模范、中国红十字优秀志愿者、全国最美志愿者、全国孝亲敬老模范
        、全国优秀党员叶如陵教授和全国优秀教师、北京市教学名师贾少英教授双优联袂，为
        联大学子奉献了精彩一课。叶如陵教授深情讲述了自己30岁进藏，31年援藏创建西藏第一所三甲医院、
        退休返京后拒绝京内一些医院高薪返聘，筹建社区医疗站“爱心小屋”19年的感人事迹。</p>
</body>
</html>

  • 超链接伪类

    正常情况下：a:hover
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
       a{
           text-decoration: none;
           color: black;
       }
       /*鼠标悬浮的状态（只需要记住 :hover）*/
       a:hover{
           color: #37d6aa;
           font-size: larger;
       }
       /*鼠标按住未释放*/
       a:active{
           color: yellow;
       }
       /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
       #ld{
           text-shadow: #002fff 5px 5px 2px;;
       }
    </style>
</head>
<body>
<a href="">
    <img src="img/m522.jpg" alt="汽车" width="500px" height="300px">
</a>
<a href="">图片</a>
<p id="ld">劳动节快乐</p>
</body>
</html>

  • 阴影

    /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#ld{
    text-shadow: #002fff 5px 5px 2px;;
}

  • 列表样式

    ul li{
    font-size: 16px;
    font-weight: bold;
    list-style: none;
    text-indent: 1em;
}

  • 背景图片

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        div{
            width: 400px;
            height: 300px;
            border: 1px solid red;
            background-image: url("img/m522.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: red url("images/cloudy-2-line.png") 270px 5px no-repeat;

background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
posted @ 2021-05-08 14:15  saxon宋  阅读(68)  评论(0)    收藏  举报