HTML：自适应设备全屏的欢迎页

周国波

已于 2022-08-28 21:14:57 修改

阅读量1.6k

点赞数

分类专栏： HTML 文章标签： html

于 2022-08-28 21:07:16 首次发布

本文链接：https://blog.csdn.net/weixin_45386955/article/details/126574130

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML：自适应设备全屏的欢迎页

HTML入门学习：自适应设备全屏的欢迎页

0：先看效果
1：新建文件夹
2：导入文件夹
3：重要代码
4：最终效果

0：先看效果

在这里插入图片描述

1：新建文件夹

这边我们先在本地新建一个文件夹Web，然后新建后缀名为" welcome.html "的网页。
（当然也能在第三方软件新建，看个人习惯
在这里插入图片描述

2：导入文件夹

使用第三方软件打开文件夹，并打开 welcome.html 文件
在这里插入图片描述
然后输入：内容代码

<body>
    <div class="H">
    <!-- 页眉代码部分 -->
    <header>
        <div class="shop">
            <img class="shop-img" src="./images/shop1.png" alt="">
            <div class="shop1">
                <a href="./about.html">关于</a>
            </div>
            <div class="photo">
                <img src="./images/code.png"/>
            </div>
        </div>   
    </header>
    <!-- 页眉代码部分 -->
    
    <!-- 正文代码部分 -->
    <p class="p3">欢迎登录商品管理系统</p>
    <div class="welcome">
        <div class="login">
            <a class="login-btn" title="登录 / 注册" href="./login.html">登录 / 注册</a> 
        </div>
    </div>
    </div>
    <!-- 正文代码部分 -->
    
    <!-- 页尾代码部分 -->
    <footer> 
        <hr class="style-one">  
        <div><p class="p-end">Copyright © 2022<a href="https://blog.csdn.net/weixin_45386955?type=blog" target="_top">&nbsp;周国波&nbsp;</a>版权所有</p></div>
    </footer>
    <!-- 页尾代码部分 -->
</body>

随后我们添加：样式代码

  <style type="text/css">
        body {
            background: url(./images/welcome0.png) no-repeat center center fixed;
            /*兼容浏览器版本*/
            -webkit-background-size: cover;
            -o-background-size: cover;                
            background-size: cover;
		}
        html,body {
            width: 100%;
            height: 100%;
        }
        .background{
            /* 1920*930 */
            width: auto;
            height: auto;
            /* margin: 0px 10px 0px; */
        }
        .H {
            width: 100%;
            height: 100%;
            /* background-color: yellowgreen; */
        }
/* -----置顶部分----- */
        /* --账号二维码-- */
        .photo {   /*先定义一个盒子*/
            margin: -50px auto auto 50px;
            width: 250px;
            height: 50px;
            background-color: transparent;   /*背景颜色*/
            text-align: center;      /*文字水平居中*/
            line-height: 100px;   /*文字垂直居中*/
            position: relative;   /*相对定位 不占位置是标准流*/
        }
        .photo img {
            position: absolute;   /*要插入的图片绝对定位 不是标准流*/
            left: -25px;   /*以大盒子为准对齐*/
            top: 100px;
            display: none;  
        }
        .photo:hover img {     /*鼠标经过 显示的内容*/
            display: block;   /*转换成块级元素*/
            width: 100px;
            height: 100px;
        }
        /* --账号二维码-- */
        /* --logo图-- */
        .shop {
            /* float: left; */
            margin-top: 0px;
            margin-bottom: 10px;
            width: auto;
            height: 50px;
        }
        .shop-img {
            float: left;
            width: auto;
            height: 50px;
            margin-left: 3%;
        }
        /* --logo图-- */
        /* --菜单栏-- */
        .shop1 {
            font-size: 24px;
            line-height:50px; /* 文字垂直居中：line-height:值等于div的高度。*/
            height: 50px;
            margin-left: 80%;
        }        
        /* --菜单栏-- */
/* -----置顶部分----- */ 

        .welcome {
            width: 200px;
            height: 100px;
            /* background-color: #42e59b; */
            display: flex;
            margin: 10% auto;
        }

        .p3 {
            height: 10px;
            width: auto;
            margin-top: 200px;
            text-align: center;
            color: white;
            font-size: 20px;
        }
        /* --登录按钮-- */
        .login {
            /* background-color: violet; */
            width: auto;
		    height:auto;
            margin:auto;
        }
        .login-btn:hover{
            /* color: red; */
            background-color: #42e59b;
        }
        .login-btn {
            width: 180px;
            height: 52px;
            border-radius: 28px;
            background-color: #42e59b;
            color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            cursor: pointer;
            -webkit-transition: all 1s;
            transition: all 1s;
            font-size: 16px;
            font-weight: 500;
        }
        .p-end {
            height: 20px;
            width: auto;
            /* background-color: red; */
            margin-top: -0px;
            text-align: center;
            color:white;
        }
        /* --超链接-- */
        a{
            color: white;
            background-color: transparent;  /*背景：透明*/
            text-decoration:none;  /*去掉下划线*/ 
        }
        a:hover {
            color: white;
            background-color: none;
            text-decoration: none;
        }
        hr.style-one {/*透明渐变水平线*/
            width:80%;
            margin:0 auto;
            border: 0;
            height: 4px;
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #42e59b, rgb(255, 0, 0,0));
            }
    </style>

3：重要代码

第一段代码表示自适应浏设备大小；
第二段代码是网页ico图标信息

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" width="100%">
<link rel="shortcut icon" href="./images/shop.svg" type="image/x-icon">