首页 > 其他分享 >前端HTML+CSS写原神官网

前端HTML+CSS写原神官网

时间:2024-06-30 18:58:01浏览次数:13  
标签:神官 HTML 首页 写原 Document CSS

 网页效果,视频为动态

 代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/reset.css">
</head>
<style>
</style>
<body>
    <video loopm muted autoplay src="./bg.3e78e808.mp4"></video>
    <div class="container">
        <div class="header">
            <div class="header-left">
                <a href="">
                    <img class="music" src="./img/音乐.png" alt="">
                    <img class="logo" src="./img/原神.png" alt="">
                </a>
            </div>
            <div class="header-left-1">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">角色</a></li>
                    <li><a href="">世界</a></li>
                    <li><a href="">漫画</a></li>
                    <li><a href="">社区</a></li>
                    <li><a href="">赛事</a></li>
                </ul>
            </div>
            <div class="header-main">
                <a href="">
                    <span>成长关爱系统</span>
                    <img src="./img/成长关爱.png" alt="">
                </a>
                <a href="">
                    <span>登录</span>
                    <img src="./img/用户.png" alt="">
                </a>
            </div>
        </div>
        <div class="main"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

标签:神官,HTML,首页,写原,Document,CSS
From: https://blog.csdn.net/qq_65798038/article/details/140084595

相关文章

  • 基础篇——html与php联动
    基础篇——html与php联动前端包含html(内容)与css(修饰),后端包含php(处理)和sql(存储)此处通过设计一个简单的登录+注册系统,说明html与php的联动过程(php与sql联动将在下一章阐述)这里采用了混编技术(html代码内嵌php代码),其基本的交互逻辑为:后端php解析—>前端html渲染—>用......
  • 爱心代码html
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><!doctypehtml><html><head><metacharset="utf-8......
  • 1.HTML初识
    1.认识网页(了解)问题1:网页由哪些部分组成?文字、图片、音频、视频、超链接问题2:我们看到的网页背后本质是什么?前端程序员写的代码问题3:前端的代码是通过什么软件转换成用户眼中的页面的?通过浏览器转化(解析和渲染)成用户看到的网页2.渲染引擎(浏览器内核):浏览器中专门对代码进行......
  • go语言与html和js的连接与使用
    functionlogin(username,password,userType){  varusername=document.getElementById('userName').value;   varpassword=document.getElementById('password').value;   varuserType=document.getElementById('userType'......
  • 百度一下首页制作(HTML+CSS)
    部分代码展示:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>百度一下,你就知道</title><styletype="text/css">/*清除元素默认性质*/body{margin:0;......
  • HTML语言创建黑客
     是一个示例的HTML代码,可以用于创建一个黑客帝国风格的弹窗,并且包含关闭按钮:<!DOCTYPEhtml><html><head><style>/*黑客帝国风格的弹窗样式*/.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站(Epic)
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(电子器件)
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 制作一个简单HTML电影网页设计(HTML+CSS)
    HTML实例网页代码,本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。文章目录一、网页介绍一、网页效果二、代码展示1.HTML......
  • 纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网
    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表......