HTML/CSS入门（2）

最新推荐文章于 2024-06-05 10:08:21 发布

Arrebolo

最新推荐文章于 2024-06-05 10:08:21 发布

阅读量65

点赞数 1

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/m0_58815458/article/details/117533263

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从今天开始，就要为大家引入CSS的相关知识了，CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。

一、CSS基本使用方法与语法

（1）以background开头的这一组样式属性主要说明元素的背景。例：

代码	描述
background-color:green;	背景为绿色，支持各种颜色表示法
background-image:url(best.jpg);	设置背景图片为best.jpg
background-positon:8px 16px;	设置背景图相对于元素左上角向右偏移8px,向下偏移16px。可取负值。
background-repeat:repeat-y;	背景图只在y方向上重复

可以把上面的代码简写为：background:green url(best.jpg) repeat-y 8px 16px;（一边阅读一边实践）

好了，至此先到这里，以后慢慢道来。

练习：

代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style>
        div{
            display: inline-block; 
            width: 120px; 
            height: 58px;
        }
        p{
            text-align: center; 
            color: aliceblue; 
            font-size: 16px;
        }
        #div1{
            background-image:url(./bg1.png);
        }
        #div1:hover{
            background-image:url(./bg5.png);
        }

        #div2{
            background-image:url(./bg2.png);
        }
        #div2:hover{
            background-image:url(./bg6.png);
        }
        #div3{
            background-image:url(./bg3.png);
        }
        #div3:hover{
            background-image:url(./bg3.jpg);
        }
        #div4{
            background-image:url(./bg4.png);
        }
        #div4:hover{
            background-image:url(./bg7.png);
        }
    </style>
</head>
<body>
    <div id="div1"><p>wo</p></div>
    <div id="div2"><p>bes</p></div>
    <div id="div3"><p>ni</p></div>
    <div id="div4"><p>lyx</p></div>
    <div id="div4"><p>le</p></div>
</body>
</html>

效果图：

鼠标移入第一个导航前：