CSS初学习及练习

最新推荐文章于 2024-07-24 20:40:50 发布

智慧女孩不秃头&

最新推荐文章于 2024-07-24 20:40:50 发布

阅读量196

点赞数 5

文章标签： css html visual studio

本文链接：https://blog.csdn.net/qq_45284063/article/details/117509806

版权

CSS入门学习：

目标：

1、掌握CSS基础属性

2、根据需求搜索对应CSS属性

知识：

1.CSS常用选择器

2.字体属性

3.行高属性

4.宽度

练习：

完成《五彩导航》练习
要求：鼠标移入后，图片变化

效果图如下：

鼠标移动前：

鼠标移动后：

代码如下：

<!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>Document</title>
    <style>
        .nav a/*注意：a是行级元素，如果不设置宽度和高度的话是不会显示的*/ {
            display: inline-block;/*将样式模块由竖着排列改为横着排列*/
            width: 120px;/*设置样式的宽度为120px*/
            height: 58px;/*设置样式的高度为58px*/
            background-color: #fff;/*设置样式背景颜色*/
            text-align: center;/*设置样式中文本居中*/
            line-height: 48px;/*设置文本高度为48px*/
            color: #fff;/*设置文本颜色*/
            text-decoration: none;/*把字的下划线去掉*/
        }
        .nav .bg1 {
            background: url(img/bg1.png)no-repeat;
        }
        .nav .bg1:hover{
            background-image: url(img/bg5.png);
        }
        .nav .bg2 {
            background: url(img/bg2.png)no-repeat;
        }
        .nav .bg2:hover{
            background-image: url(img/bg6.png);
        }
        .nav .bg3 {
            background: url(img/bg3.jpg)no-repeat;
        }
        .nav .bg3:hover/*鼠标滑过的状态*/ {
            background-image: url(img/bg1.png);
        }
        .nav .bg4 {
            background: url(img/bg3.png)no-repeat;
        }
        .nav .bg4:hover {
            background-image: url(img/bg5.png);
        }
        .nav .bg5 {
            background: url(img/bg4.png)no-repeat;
        }
        .nav .bg5:hover {
            background-image: url(img/bg6.png);
        }
    </style>

</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>
</html>

总结：CSS相当于HTML的“装饰器”或“化妆品”，主要作用为：1、定义Web页面布局以及页面中元素的显示方式；2、利用CSS样式实现HTML内容（结构）与表现（格式）的分离