首页 > 其他分享 >HTML 首页 欢迎页

HTML 首页 欢迎页

时间:2023-12-26 18:03:10浏览次数:32  
标签:color 欢迎 li ul VipSoft HTML 首页 background fff

HTML 首页 欢迎页,将下面代码复制出来,贴到HTML中,直接运行

<!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>VipSoft</title>
    <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://static.vecteezy.com/system/resources/previews/000/622/564/original/ai-concept-vector.jpg);
            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>
                <li><a href="http://www.vipsoft.com.cn/" target="_blank"><span style="color: crimson;">Vip</span>Soft</a></li>
                <li><a href="" target="_blank">博客</a></li>
                <li><a href="https://gitee.com/vipsoft" target="_blank">开源</a></li>                
            </ul>
        </div>
        <div class="title">
            <h1><span style="color: crimson;">VipSoft</span> AI</h1>
        </div>
    </header>
</body>
</html>

HTML 首页 欢迎页_html

作者:VipSoft

标签:color,欢迎,li,ul,VipSoft,HTML,首页,background,fff
From: https://blog.51cto.com/u_15116285/8985940

相关文章

  • HTML学习第五天:深入理解CSS与样式
    在今天的HTML学习中,我深入了解了CSS和样式的重要性。早上,我开始学习CSS的基础知识。CSS是一种用于描述网页样式的语言,它可以使网页更加美观和易于阅读。通过使用CSS,我可以控制网页中元素的布局、颜色、字体和许多其他样式属性。我学习了如何将CSS与HTML结合使用,以及如何使用不同的......
  • HTML5应用之文件拖拽上传
    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器。本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧。HTML我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息。......
  • 使用HTML5实现多文件上传
    入门Fileinput之所以叫fileinput是因为它是一个标准的input元素,且其type属性被设置为"file"。很多年以来,fileinput一次只能选择并上传单个文件。在新的HTML5规范中为input元素添加了多选模式。当然,不同浏览器对于规范的实现一直以来都不尽相同。比如,Firefox3.6和WebKit以及Fir......
  • 猜数字首页wxjs代码
    //pages/guanyu/guanyu.jsPage({/**页面的初始数据*/data:{},/**生命周期函数--监听页面加载*/onLoad(options){},/**生命周期函数--监听页面初次渲染完成*/onReady(){},/**生命周期函数--监听页面显示*/onShow(){},/**生命周期函数--监听页面隐藏*/onHide(){},/*......
  • HTML5 文件上传的2种方式
    以前上传文件需要提交Form表单。HTML5方式上传文件,可以通过使用FormData类模拟Form表单提交,从而实现无刷新上传文件。 假设有一个文件选择框<inputtype="file"name="pic"id="pic"accept="image/gif"/>有下面2种方式上传文件:1、XMLHttpRequest(有进度事件)varfiles=d......
  • HTML学习第四天:掌握表单与验证
    在今天的HTML学习中,我深入了解了表单元素和表单验证。早上,我开始学习各种表单元素,如文本框、单选框、复选框等。这些元素是构建交互式网页的关键。通过使用<input>标签和不同的类型属性,我可以创建各种类型的输入字段。这让我能够更好地控制用户输入,并确保用户能够按照我的要求提供......
  • html5实现文件批量上传组件
    一、概述在html5中,相对于之前添加了不少新的元素和属性,在javascript中也添加了一些新的API,这些给我们的开发带来了很多便利。但由于各浏览器的发展步骤不一致,也导致了不同浏览器对html5支持的差异性。 二、实现原理1.在该html5实现的文件批量上传组件中,我们主要是利用html5......
  • Python——Html(HEAD头部)
    HTML中HEAD头部设置(了解)在HTML中,<head>元素是文档的头部部分,通常包含了一些关于文档的元信息和链接到外部资源的标签。以下是一些常见的<head>元素中使用的标签及其作用:<title>:设置网页的标题设置网页的标题,显示在浏览器的标题栏或标签页上。示例:<head><title>M......
  • HTML5文件上传操作
    一、File对象在HTML5出现之前,在Web上没有文件创建和复制,也没有文件处理,HTML5规范中包含3个文件相关的规范:“文件API”“文件API:目录和系统”以及“文件API:写入器”,文件API包含File对象、FileList对象和FileReader对象。为了保障客户端安全,大部分浏览器都未......
  • html5中怎么实现多文件上传功能
    本篇文章为大家展示了html5中怎么实现多文件上传功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。主要用到的是<input>的multiple属性代码如下:<inputtype="file"name="multipleFileUpload"multiple/>下面是页面的详细代码:代码......