首页 > 其他分享 >welcome.html

welcome.html

时间:2023-06-10 12:33:33浏览次数:37  
标签:50% color welcome li ul html background fff

<!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>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
    <style>
        *{
            padding: 0;
            margin: 0;
            font-family: "楷体";
        }
        header{
            background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("https://images.unsplash.com/photo-1533745848184-3db07256e163?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80");
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        ul{
            float: right;
            list-style-type: none;
            margin: 15px;
        }
        ul li{
            display: inline-block;
        }

        ul li a{
            text-decoration: none;
            color: #fff;
            padding: 5px 20px;
            border: 1px solid transparent;
            transition: .6s ease;
            border-radius: 20px;
        }

        ul li a:hover{
            background-color: #fff;
            color: #000;
        }
        ul li.active a{
            background-color: #fff;
            color: #000;
        }
        .title{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .title h1{
            color: #fff;
            font-size: 70px;
            font-family: Century Gothic;
        }
    </style>
</head>
<body>
<header>
    <div class="main">
        <ul>
            <li class="active"><a href="#">首页</a></li>

        </ul>
    </div>
    <div class="title">
        <h1><span style="color: crimson;">欢迎登录本系统</span></h1>
    </div>
</header>
</body>
</html>

 

标签:50%,color,welcome,li,ul,html,background,fff
From: https://www.cnblogs.com/liyiyang/p/17471087.html

相关文章

  • (HTML+CSS+JS)实现弹球游戏
    一、前言弹球游戏是一款很经典的游戏了,小时候无论是在掌机还是电脑都有玩过这款游戏,简简单单朴实无华,接下来我们通过前端代码来简单实现一下这个游戏吧。这是一个基于HTML5Canvas的弹球游戏的实现,通过JavaScript语言实现游戏的核心逻辑。主要包括以下部分:定义了canvas元素并......
  • pytest 生成的html其他人打开是空的
    本地打开html文件显示正常是应为本地有css,而被人没有。我们打开浏览器查看F12,加载了本地路径中的css文件解决办法:我们可以通过命令把css样式嵌入到html中pytest--html=report.html--self-contained-html再次打开报告,或者别人打开......
  • Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递
    前言  前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。  本篇实现网页内部使用js调用ajax实现异步交互数据。  在js中使用ajax是通过XMLHttpRequest来实现的。下载地址  链接:https://pan.baidu.com/s/1tJMTPhIIyVE40......
  • 详解HTML5新特性
    HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个w......
  • 关于HTML 5文档结构的简单案例
    在HTML文档的开头,一般会有一个文档类型声明(DOCTYPE)。在HTML5中,文档类型声明为<!DOCTYPEhtml>(注意大小写)。因此,如果一个网页的文档类型声明为<!DOCTYPEhtml>,那么这个网页就是采用了HTML5。但需要注意的是,并不是所有的网页都需要文档类型声明。如果一个网页没有文档类型声明,也不......
  • HTML cellpadding与cellspacing属性
    9.1.6HTMLcellpadding与cellspacing属性先介绍一些概念巢(cell)--表格的内容巢补白(表格填充)(cellpadding)--代表巢外面的一个距离,用于隔开巢与巢空间巢空间(表格间距)(cellspacing)--代表表格边框与巢补白的距离,也是巢补白之间的距离引用网址:http://www.dreamdu.com/x......
  • 使用HbuilderX3.8.3_把开发的小程序发布为Html5页面上传到_免费托管空间---uniapp_小
      找了很久,毕竟自己也是做测试,本来想买个服务器来着,由于了一下,还是给我找到了最终~自己做的小程序想部署,又不想买阿里云服务器,部署到阿贝云也不错,阿贝云会给开发者提供, 免费虚拟主机和免费的云服务器,最近我用了一段时间感觉还很不错也很稳定我测试用完全够用了,现......
  • html照片从模糊到清晰的渐变加载显示方法
    1.背景介绍在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。 2.现状现在加载照片的方法主要有一下两种:(1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会......
  • html5游戏制作入门系列教程(五)
    我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。今天,这是相当完整的游戏例子–它会回顾经典的旧电脑游戏–坦克大战。我会教你使用阵列地图并教你如何检测活动对象(坦克)与环境(基于阵列的地图)的碰撞。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列......
  • html5游戏制作入门系列教程(二)
    今天,我们继续html5游戏制作入门系列的系列文章。今天,我们将继续基础知识(也许甚至是高级技巧的基础)。我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要的UI元素–按钮。 我们以前的文章中,你可以在这里阅读:html5游戏制作入门系列教程(一)。......