网页中的logo的制作——css学习仿作马蜂窝_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: Flutter 开启 Linux Desktop 支持下一篇:数据结构顺序有序表的合并

网页中的logo的制作——css学习仿作马蜂窝

发布时间：2022-06-08 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了网页中的logo的制作——css学习仿作马蜂窝，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

css 学习笔记

index.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>马蜂窝-首页|遇见更好的自己</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "css/reset.css" />
    <link rel="stylesheet" href = "css/index.css" />
    <meta name="keywords" content="旅游、攻略、省钱、舒心、机票、游记、马蜂窝"/>
    <meta name="description" content="马蜂窝旅行网是一个专注于让用户省钱舒心的网站，网站建立与2016年，是一个上市公司"/>

</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="logo">
                <h1>
                    <a href="">
                        马蜂窝——专注旅游服务您的生活
                    </a>
                </h1>
            </div>

        </div>

    </div>
正文
</body>
</html>

.header{

/*css3介绍这是盒子阴影*/

height: 57px;

box-shadow: 0px 0px 5px rgb(0,0,0.6);

/*background:black;*/

}

.header .inner{

width: 1000px;

height: 57px;

/*color:white;*/

margin: 0 auto;

}

.header .inner .logo {

padding-top: 13px;

}

.header .inner .logo h1{

width: 120px;

height: 0px;

padding-top: 30px;

overflow: hidden;

background-color: pink;

}

网页显示

网页中的logo的制作——css学习仿作马蜂窝

但是我们不需要在网页中显示文字，用如下式样

.header .inner .logo{
    width: 120px;
    height: 0px;
    padding-top: 30px;
    overflow: hidden;
    background-color: pink;

}

文字不见，但是搜索引擎还能找到文字

网页中的logo的制作——css学习仿作马蜂窝

目前高度没有居中，如果直接在上边样式表中加margin-top，试样表会出问题

.header .inner .logo{
    width: 120px;
    height: 0px;
    padding-top: 30px;
    overflow: hidden;
    background-color: pink;
    margin-top: 13px;

}

网页中的logo的制作——css学习仿作马蜂窝

粉色的盒子没有和父亲的距离，反而其父亲的位置出现问题原因是：

margin是兄弟间的边距，儿子原则上不能用margin去“踹”父亲，只能用父亲的padding确定儿子的位置

.header .inner .logo {
    padding-top: 13px;
    
}

    .header .inner .logo h1{
        width: 120px;
        height: 0px;
        padding-top: 30px;
        overflow: hidden;
        background-color: pink;

    }

网页中的logo的制作——css学习仿作马蜂窝

此时粉盒子上方的白色区域是logo的padding

网页中的logo的制作——css学习仿作马蜂窝

现在红色标签不是超链接，对调h1和a标签的层级关系

<div class="header">
        <div class="inner">
            <div class="logo">
                <a href="">
                    <h1>马蜂窝——专注旅游服务您的生活</h1>
                </a>
            </div>
        </div>

    </div>

粉色盒子为超链接

如果在外置css文件使用背景，必须从css文件出发找到图片，而不是html文件出发，

另之，之前h1标签的背景色是为了设计方便，加上图片后，要去掉，否是会盖住图片

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}


.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}

此时logo添加好

目前html文件和css文件如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>马蜂窝-首页|遇见更好的自己</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "css/reset.css" />
    <link rel="stylesheet" href = "css/index.css" />
    <meta name="keywords" content="旅游、攻略、省钱、舒心、机票、游记、马蜂窝"/>
    <meta name="description" content="马蜂窝旅行网是一个专注于让用户省钱舒心的网站，网站建立与2016年，是一个上市公司"/>

</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="logo">
                <a href="">
                    <h1>马蜂窝——专注旅游服务您的生活</h1>
                </a>
            </div>
        </div>

    </div>
正文
</body>
</html>

index.css

.header{
    /*css3介绍 这是盒子阴影*/
    height: 57px;    
    box-shadow: 0px 0px 5px rgb(0,0,0.6);
    /*background:black;*/

}
.header .inner{
    width: 1000px;
    height: 57px;
    /*color:white;*/
    margin: 0 auto;
}
.header .inner .logo {
    padding-top: 13px;

}

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}


.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}

最后效果：

网页中的logo的制作——css学习仿作马蜂窝