静态网页设计——极乐迪斯科(HTML+CSS+JavaScript)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV11k4y1X7mH/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:关于stream的游戏极乐迪斯科的一个网站。

主要内容

1、登录页

需要填写用户名和密码进行登录才能进入网站,用户名是admin,密码是123,验证码填补填写都行。
在这里插入图片描述
部分代码:

<form method="post">
                <div class="form-group">
                    <input id="username" type="text" name="username" value="" autocomplete="username"
                        placeholder="电话/邮箱/用户名" class="form-control">
                </div>
                <div class="form-group">
                    <input id="pwd" type="password" name="password" value="" autocomplete="current-password"
                        placeholder="密码" class="form-control">
                </div>
                <div class="form-group row">
                    <a role="button" href="/">
                        <small>找回密码</small>
                    </a>
                    <div class="form-check">
                        <span class="form-check-label" for="rememberMe">
                            <input type="checkbox" name="remember" value="" id="rememberMe" class="form-check-input">
                            <small>记住我</small>
                        </span>
                    </div>
                </div>
                <div class="valid">
                    <div class="code" id="checkCode" onclick="createCode()"></div>
                    <input type="text" id="inputCode" placeholder="请输入验证码" />
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-markedness btn-block" onclick="logIn()">
                        登录
                    </button>
                </div>
                <div class="form-group text-center">
                    <a class="text-muted" href="/" target="_blank">
                        <small>使用社交平台帐号登录</small>
                    </a>
                    <a class="text-muted" href="/" target="_blank">
                        <small>注册帐号</small>
                    </a>
                </div>
            </form>
2、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。
在这里插入图片描述

该页面使用html+css设计结构和样式,将图片img标签设计成排列整齐的卡片,有些还是卡片超链接,鼠标放上去卡片或者卡片上的文字会变色。
在这里插入图片描述
部分代码:

<!-- 第一篇文章 -->
            <div class="col">
                <div class="card">
                    <div class="cover cover1">
                        <div class="link">
                            <a href="article_1.html">为什么你会被镜子暴打以及镜子如何暴打你</a>
                        </div>
                    </div>
                    <div class="content">
                        <span class="tag">知识挖掘机</span>
                        <span class="title">
                            <a href="article_1.html">《极乐迪斯科》与齐泽克(三):镜子到底在说啥?</a>
                        </span>
                        <span class="info">
                            <div class="user">
                                <img src="../images/avatar.jpg" alt="">
                                <span class="text">
                                    <span class="name">鱼丝粥</span>
                                    <span class="date">2020-05-15</span>
                                </span>
                            </div>
                            <div class="func">
                                <span class="thumb-up">
                                    <svg t="1593652184554" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2337" width="16" height="16">
                                        <path
                                            d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253"
                                            p-id="2338" fill="#c7c7cc"></path>
                                        <path
                                            d="M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819"
                                            p-id="2339" fill="#c7c7cc"></path>
                                    </svg>
                                    223
                                </span>

                                <span class="comment">
                                    <svg t="1593652337269" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4229" width="16" height="16">
                                        <path
                                            d="M960 512C960 759.424 759.424 960 512 960 428.64 960 350.848 936.832 284 897.152L99.232 949.952C83.872 954.304 69.664 940.128 74.048 924.768L126.848 740C87.168 673.152 64 595.36 64 512 64 264.576 264.576 64 512 64 759.424 64 960 264.576 960 512"
                                            p-id="4230" fill="#c7c7cc"></path>
                                    </svg>
                                    82
                                </span>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
3、文章详细页面

该页面使用p标签和人span标签嵌入许多文本,将关于网站主题的介绍全部写到网页中,文字排版根据字数来进行,使用不会出现不协调的情况。在文字旁边,使用img标签嵌入一些图片,使得网页整体更加的美观。
在这里插入图片描述

部分代码:

<div>
                <svg t="1593677883548" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1732" width="48" height="48">
                    <path
                        d="M470.9888 261.77536l0 98.54976c0 13.3632-10.83392 24.19712-24.19712 24.19712-47.68768 0-73.6256 48.90624-77.21984 145.43872l77.21984 0c13.3632 0 24.19712 10.84416 24.19712 24.19712l0 208.0768c0 13.3632-10.83392 24.19712-24.19712 24.19712L240.90624 786.432c-13.37344 0-24.19712-10.84416-24.19712-24.19712l0-208.0768c0-46.27456 4.6592-88.73984 13.84448-126.22848 9.4208-38.44096 23.87968-72.04864 42.96704-99.90144 19.64032-28.6208 44.20608-51.07712 73.02144-66.72384 29.00992-15.73888 62.74048-23.72608 100.25984-23.72608C460.15488 237.57824 470.9888 248.41216 470.9888 261.77536zM783.09376 384.52224c13.3632 0 24.19712-10.84416 24.19712-24.19712l0-98.54976c0-13.3632-10.83392-24.19712-24.19712-24.19712-37.50912 0-71.23968 7.9872-100.2496 23.72608-28.81536 15.64672-53.39136 38.10304-73.03168 66.72384-19.08736 27.8528-33.54624 61.46048-42.96704 99.91168-9.17504 37.49888-13.83424 79.96416-13.83424 126.21824l0 208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712l205.8752 0c13.3632 0 24.19712-10.84416 24.19712-24.19712l0-208.0768c0-13.3632-10.83392-24.19712-24.19712-24.19712L706.9696 529.96096C710.51264 433.42848 736.07168 384.52224 783.09376 384.52224z"
                        p-id="1733" fill="#c7c7cc"></path>
                </svg>
                复仇女神就在家中的镜子里;那便是她们的住址。哪怕这世间最澄清的水,只要够深,也能让人沉溺。 ——R.S.托马斯
                <svg t="1593677912228" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1974" width="48" height="48" style="float: right;">
                    <path
                        d="M553.0112 762.23488l0-98.54976c0-13.3632 10.84416-24.19712 24.19712-24.19712 47.68768 0 73.6256-48.896 77.21984-145.42848l-77.21984 0c-13.3632 0-24.19712-10.84416-24.19712-24.19712l0-208.0768c0-13.3632 10.84416-24.19712 24.19712-24.19712l205.88544 0c13.3632 0 24.19712 10.84416 24.19712 24.19712l0 208.0768c0 46.27456-4.66944 88.7296-13.83424 126.22848-9.4208 38.44096-23.87968 72.04864-42.97728 99.90144-19.63008 28.6208-44.20608 51.07712-73.0112 66.72384-29.02016 15.73888-62.75072 23.72608-100.27008 23.72608C563.84512 786.432 553.0112 775.58784 553.0112 762.23488zM240.90624 639.47776c-13.3632 0-24.19712 10.84416-24.19712 24.19712l0 98.54976c0 13.3632 10.83392 24.19712 24.19712 24.19712 37.49888 0 71.24992-7.9872 100.2496-23.72608 28.81536-15.64672 53.39136-38.0928 73.02144-66.72384 19.0976-27.8528 33.55648-61.46048 42.97728-99.92192 9.17504-37.49888 13.83424-79.95392 13.83424-126.208l0-208.0768c0-13.3632-10.84416-24.19712-24.19712-24.19712L240.90624 237.568c-13.3632 0-24.19712 10.84416-24.19712 24.19712l0 208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712l76.1344 0C313.48736 590.58176 287.91808 639.47776 240.90624 639.47776z"
                        p-id="1975" fill="#c7c7cc"></path>
                </svg>
            </div>

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV11k4y1X7mH/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/300380.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud系列篇:核心组件之配置中心组件

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.前言 二.配置中心组件是什么 三…

揭秘六大热门认证考试

六大热门认证考试是什么❓今天为大家详细解读PMP、ACP、CDGA、软考中项、软考高项、NPDP、CISP等热门认证考试&#xff0c;让你不再彷徨&#x1f447; 1️⃣PMP &#x1f451;PMP认证是全qiu公ren的项目管理专业认证&#xff0c;旨在评估项目管理人员在项目过程中所需的知识、技…

重生奇迹MU游戏中勇者大陆

玩重生奇迹MU&#xff0c;我们进入游戏首先会来到勇者大陆。在看到勇者大陆市场&#xff0c;有很多交易的玩家也在这里&#xff0c;在勇者市场里面有商店。接下来介绍主要的NPC 的作用和怪物有那些&#xff1f; 勇者大陆卖药的商店老板莉雅 商店里面会有卖治疗药水&#xff0…

06-微服务-SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明队列、交…

红队打靶练习:EVM: 1

目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 目录探测 1、gobuster 2、dirsearch WEB wpscan get username get password MSF get shell 提权 get root get flag 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interf…

NACHI机器人模拟示教器如何切换中文

前言 现在开始学习机器人的编程语言&#xff0c;那么要学习会用首先得用模拟示教器来学习&#xff0c;但是全是英文确实比较难受一些些&#xff0c;没有中文来的直观。所以摸透一下如何给示教器更换语言。 具体步骤 步骤一&#xff1a;将中文的汉化包下载下来。具体的下载链…

STL——string详解

目录 &#x1f4a1;介绍 &#x1f4a1;string的基本操作 &#x1f4a1;string的构造函数 &#x1f4a1;string赋值操作 &#x1f4a1;string字符串拼接 &#x1f4a1;string的查找和替换 &#x1f4a1;string字符串比较 &#x1f4a1;string字符存取 &#x1f4a1;str…

爬虫实战 - 微博评论数据可视化

简介&#xff1a; 我们都知道在数据比较少的情况下&#xff0c;我们是可以很轻易的获取到数据中的信息。但是当数据比较庞大的时候呢&#xff0c;我们就很难看出来了。尤其是面对现如今数以万计的数据&#xff0c;就更了。 不过好在我们可以通过计算机来帮我们进行分析&#…

算力-计算量,关于TOPS和FLOPS,及FLOPs

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a;https://blog.csdn.net/zaibeijixing/article/details/135425642 ———————————————— 目录 一、易混淆的三…

知识图谱之汽车实战案例综述与前瞻分析

知识图谱的前置介绍 什么是知识图谱 知识图谱本质(Knowledge Graph&#xff09;上是一种叫做语义网络(semantic network &#xff09; 的知识库&#xff0c;即具有有向图结构的一个知识库&#xff1b;图的结点代表实体&#xff08;entity&#xff09;或者概念&#xff08;con…

学习笔记——C++一维数组

1&#xff0c;一维数组的定义方式 三种定义方式 1&#xff0c;数据类型 数组名[ 数组长度 ]&#xff1b; 2&#xff0c;数据类型 数组名[ 数组长度 ]{值1&#xff0c;值2&#xff0c;值3 ……}&#xff1b;//未说明的元素用0填补 3&#xff0c;数据类型 数组名[ ]{值1&…

【Project】TPC-Online Module (manuscript_2024-01-07)

PRD正文 一、概述 本模块实现隧道点云数据的线上汇总和可视化。用户可以通过注册和登录功能进行身份验证&#xff0c;然后上传原始隧道点云数据和经过处理的数据到后台服务器。该模块提供数据查询、筛选和可视化等操作&#xff0c;同时支持对指定里程的分段显示和点云颜色更改…

WEB 3D技术 three.js 元素居中与获取元素中心点

本文 我们来说让物体居中 以及获取它的中心点 我们上文留下的这个代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { RGBELoader } from "three/e…

LCD—液晶显示

本节主要介绍以下内容 显示器简介 液晶控制原理 秉火3.2寸液晶屏简介 使用FSMC模拟8080时序 NOR FLASH时序结构体 FSMC初始化结构体 一、显示器简介 显示器属于计算机的I/O设备&#xff0c;即输入输出设备。它是一种将特定电子信息输出到屏幕上再反射到人眼的显示工具。…

【Java集合篇】HashMap 是如何扩容的

HashMap 是如何扩容的 ✔️ 为什么需要扩容?✔️ 桶元素重新映射✔️链表重新链接✔️ 取消树化✔️拓展知识仓✔️除了rehash之外&#xff0c;哪些操作也会将树会退化成链表? ✔️ 为什么需要扩容? HashMap在Java等编程语言中被广泛使用&#xff0c;用于存储键值对数据。Ha…

【51单片机】独立按键控制LED灯

不同于上篇文章只用代码控制&#xff0c;这次我们要再加上独立按键一同控制LED灯 目录 独立按键控制LED亮灭&#xff1a;代码实现&#xff1a; 独立按键控制LED状态&#xff1a;代码实现&#xff1a; 独立按键实现二进制LED显示&#xff1a;代码实现&#xff1a; 独立按键控制…

Linux进程之间的通信机制(IPC)概述

Linux进程之间通信 为什么需要进程间通信&#xff1f; 进程间的通信&#xff08;IPC&#xff09;指的是两个任意的进程之间的通信。 同一进程在一个地址空间中&#xff0c;所以同一进程的不同模块&#xff0c;&#xff08;不同函数&#xff0c;不同文件&#xff09;之间都是很…

【软件测试】黑盒测试

《等价类划分法》 有效等价类无效等价类 &#xff08;输入条件&#xff09;10 < x < 100&#xff08;有效等价类&#xff09;10 < x < 100&#xff08;无效等价类&#xff09;x < 10 和 x >100 《边界值分析法》 基本原则 如果输入条件规定了取值范围&…

C#,数值计算,基础函数——任意位数π的数值算法源程序与数据可视化

对于数学常数 PI 后面位数的计算与追求&#xff0c;是数学家与计算机科学家们乐此不疲的游戏。 一、圆周率PI简史 圆周率&#xff08;Pi&#xff09;是圆的周长与直径的比值&#xff0c;一般用希腊字母π表示&#xff0c;是一个在数学及物理学中普遍存在的数学常数。π也等于圆…

CRM的request管理笔记

1 request类型 request有两种&#xff0c;device request和link request。 link request link req是对link进行精确控制。 link req是对每个link的请求&#xff0c;比如某一帧是否需要bubble recovery、某一帧是否需要长曝光等feature。device request 对一个设备进行每帧控制…