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="https://www.cnblogs.com/vipsoft/" 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 首页 欢迎页的更多相关文章

  1. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  2. phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计

    phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计 列表取得数据方法: {pc:content action="lists" catid="$c ...

  3. jquery.pagination.js 新增 首页 尾页 功能

    jquery.pagination.js 新增 首页 尾页 功能 废话不多说,直接上修改后的代码,修改部分已经用 update 注释包含 17-20行 99-103行 141-145行 /** * T ...

  4. Phpcms v9 实现首页|列表页|内容页调用点击量的代码

    很多朋友经常问Phpcms v9的首页.列表页.内容页点击量如何调用.今天给大家分享phpcms V9如何分别在首页.列表页.内容页调用点击量代码 1,Phpcms v9首页调用点击量 {pc:con ...

  5. Richview 首页 奇偶页 不同页眉页脚

    首页 奇偶页 不同页眉页脚 ScaleRichView v6.0 Different headers and footers for the first page, for odd and even ...

  6. 织梦dedecms首页/列表页/内容页调用tag的方法(未测试)

    织梦dedecms首页/列表页/内容页调用tag的方法 在网站中tag是网站搜索相关文章的联系之一,也可以有专门的tag页面,在不同的页面也可以调用tag,而不是只有在首页和列表页才可以调用tag,这 ...

  7. SpringBoot设置首页(默认页)跳转

    SpringBoot设置首页(默认页)跳转 方案1:controller里添加一个"/"的映射路径 @RequestMapping("/")public Str ...

  8. 织梦dedecms自定义字段在首页列表页文章页的调用

      1.首页调用. {dede:arclist addfields='字段英文名' channelid='模型ID' row='条数' type='栏目ID'}       [field:字段英文名/ ...

  9. 织梦DEDECMS 首页列表页内容也时间日期调用标签

    DEDECMS利用strftime()函数格式化时间的所有参数详解,包括年份日期进制.小时格式等,大家收藏吧,呵. 日期时间格式 (利用strftime()函数格式化时间)0 dedecms首页时间标 ...

  10. Python - Django - 添加首页尾页上一页下一页

    添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(reques ...

随机推荐

  1. Net 高级调试之七:线程操作相关命令介绍

    一.简介 今天是<Net 高级调试>的第六篇文章.上一篇文章我们说了值类型,引用类型,数组等的内存表现形式.有了这个基础,我们可以更好的了解我们的程序在运行时的状态,内存里有什么东西,它们 ...

  2. python之递归(斐波那契数列)与迭代

    对于较大的计算来说,迭代不如递归计算速度快,并且可以说非常慢 但是迭代对于较小的运算又比递归巧妙 # 迭代方法 def slowsnail(x): am = [1, 1] if x < 0: p ...

  3. 工厂模式(Factory Method)

    模式定义 定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Method使得一个类的实例化延迟(目的:解耦)到子类. 要点总结 Factory Method模式用于隔离类对象的使用 ...

  4. going 小闫 | 学习就像典韦哥:彻底疯狂

    看了相关的Hadoop的视频,介绍部分. 刷单词 看了coco电影

  5. 校园社团活动管理系统(适合小白)基础javaweb前端项目实战【包含增删改查,mysql】一

    校园社团活动管理系统(20分) 1.项目需求: 校园社团作为高校课外活动的重要组成部分,发展十分迅速,也受到越来越多学生的欢迎,社团规模.数量等都在日益增长,社团活动也更为多样和丰富.然而,大多数高校 ...

  6. 在net中通过Autofac实现AOP的方法及实例详解

    在本示例中,我们将使用Autofac和AspectC(Autofac.Extras.DynamicProxy2)来演示如何实现AOP(面向切面编程).我们将创建一个简单的C#控制台应用程序,并应用AO ...

  7. 基于.NET平台常用的框架整理【藏】

    来自:天使不哭 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此 ...

  8. 《深入理解 FFmpeg》第一章彩色插图汇总

    layout: post title: "<深入理解 FFmpeg>第一章彩色插图" tags: - "FFmpeg" 这是<深入理解 FFm ...

  9. Android联系人增删改查

    1:申请权限 <uses-permission android:name="android.permission.READ_CONTACTS"/> <uses-p ...

  10. 【OpenCV】 OpenCV 源码编译并实现 CUDA 加速 (Windows)

    目录 1. 环境准备 1.1 软件环境 1. 2 源码下载 2. CMake编译项目 2.1 创建cmake项目 2.2 设置编译配置 2.3 解决异常 2.3.1 文件下载异常 2.3.2 解决CU ...