静态网页设计——极乐迪斯科(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"><pathd="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><pathd="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"><pathd="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"><pathd="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;"><pathd="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
具体的代码也在该链接下。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

游戏策划:游戏开发中的关键环节

在数字游戏的世界里&#xff0c;游戏策划是构建一个成功游戏的基石。游戏策划不仅仅是一个创意过程&#xff0c;它涉及从故事构建到技术实现的各个方面。以下是游戏策划中需要重点关注的几个重要内容。 1. 故事情节与世界观构建 一款游戏的魅力很大程度上取决于其故事情节和世…

MySQL四大引擎,数据库管理,数据表管理,数据库账号管理

MySQL四大引擎 InnoDB InnoDB引擎是MySQL默认的存储引擎。它支持事务和行级锁定&#xff0c;并具有高并发性和数据完整性保护的特性。InnoDB适用于具有复杂查询和高并发读写操作的应用程序。MyISAM InnoDB引擎特点和优势 事务支持&#xff1a;InnoDB支持ACID&#xff08;原子…

HDMI彩条显示实验与方块移动实验

一、HDMI接口简介 一种数字音视频接口标准&#xff0c;提供高质量的数字音视频传输&#xff0c;同时支持多通道音频、高分辨率视频和其他数据传输功能。提供更高的数据传输带宽&#xff08;带宽&#xff1a;1s内传输多少比特数据&#xff09; 数字传输&#xff1a; HDMI是一种全…

C++:类和对象(3)

目录 1.构造函数调用规则 2.深拷贝和浅拷贝 3.初始化列表 4.类对象作为类成员 1.构造函数调用规则 默认情况下&#xff0c;C编译器至少给类添加三个函数&#xff1a; 1.默认构造函数(无参&#xff0c;函数体为空) 2.默认析构函数(无参&#xff0c;函数体为空) 3.默认拷贝构…

标签函数 - 打造JavaScript组件

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

C++返回值、返回引用、返回地址

函数内的对象的保留和处理&#xff1a; 1.当函数结束时&#xff0c;所有除了堆中的对象之外的函数成员&#xff0c;全部都会被处理掉&#xff0c;无法保留。 2.在返回过程中&#xff0c;无论是引用、指针、还是值&#xff0c;只要是跟在return后面的&#xff0c;都会以复制的方…

Flutter 混合开发 - aar打包

背景 项目接入 Flutter 后有两种方式&#xff0c;一种是 module 引入开发&#xff0c;一种是 aar 依赖开发。当前项目中在 Debug 阶段为了方便调试采用 module 开发&#xff0c;在发版时&#xff08;即 Release 阶段&#xff09;采用 aar 依赖引入。为了配合这种模式就需要在 …

高可用分布式部署Spark、完整详细部署教程

前言 Spark 是 UC Berkeley AMP Lab 开源的通用分布式并行计算框架。 Spark基于map reduce算法实现的分布式计算&#xff0c;拥有Hadoop MapReduce所具有的优点&#xff1b;但不同于MapReduce的是Job中间输出和结果可以保存在内存中&#xff0c;从而不再需要读写HDFS&#xff…

Spring AI和Ollama

概述 Spring AI 不仅提供了与 OpenAI 进行API交互&#xff0c;同样支持与 Ollama 进行API交互。Ollama 是一个发布在GitHub上的项目&#xff0c;专为运行、创建和分享大型语言模型而设计&#xff0c;可以轻松地在本地启动和运行大型语言模型。 Docker环境安装Ollama 1.获取D…

代码随想录:贪心算法

455. 分发饼干 解题步骤 排序&#xff1a;给两个数组排序举例判断&#xff1a;看第一个情况不满足&#xff0c;要换孩子还是换物品&#xff1f; a. 换孩子→遍历孩子 b. 换物品→遍历物品 实战&#xff1a; 选择从小到大排序第一个不满足&#xff0c;我要换物品。因为换了孩…

AIGC带给开发者的冲击

未来会有两种开发者&#xff0c;一种是会使用AIGC工具的开发者另一种是不会使用AIGC的开发者&#xff0c;AIGC的出现提高了开发效率和代码质量&#xff0c;对开发者意味着需要不断学习和适应新的技术和工作范式&#xff0c;开发者可以把更多的精力放在高级抽象的定义以及更高维…

【C程序设计】C enum(枚举)

枚举是 C 语言中的一种基本数据类型&#xff0c;用于定义一组具有离散值的常量&#xff0c;它可以让数据更简洁&#xff0c;更易读。 枚举类型通常用于为程序中的一组相关的常量取名字&#xff0c;以便于程序的可读性和维护性。 定义一个枚举类型&#xff0c;需要使用 enum 关…

JS的防抖和节流

目录 防抖 搜索框带来的问题 实现的思路 案例 封装防抖函数 节流 滚动条加载带来的问题 实现的思路 案例 封装节流函数 防抖 搜索框带来的问题 需求&#xff1a;根据输入框内容来请求数据 <!DOCTYPE html> <html lang"en"> <head><…

STHS34PF80人体存在传感器(1)----获取人体存在状态

STHS34PF80人体存在传感器.1--获取人体存在状态 概述视频教学样品申请完整代码下载主要特点硬件准备接口最小系统图生成STM32CUBEMX串口配置IIC配置CS设置串口重定向参考案例获取ID温度测量滤波方式智能识别算法使用块数据更新&#xff08;BDU&#xff09;功能设置ODR速率获取状…

Stable Diffusion架构的3D分子生成模型 GeoLDM - 测评与代码解析

之前&#xff0c;向大家介绍过3D分子生成模型 GeoLDM。 GeoLDM按照Stable Diffusion架构&#xff0c;将3D分子生成的扩散过程运行在隐空间内&#xff0c;优化了基于扩散模型的分子生成。可能是打开Drug-AIGC的关键之作。让精确控制分子生成有了希望。 详见&#xff1a;分子生成…

Python 中的==操作符 和 is关键字

Python是一种功能强大的通用编程语言&#xff0c;提供了各种比较值和对象的方法。其中包括操作符和is关键字&#xff0c;它们的用途不同&#xff0c;但由于它们有时可以达到相同的目的&#xff0c;所以经常会被混淆。在本文中&#xff0c;我们将深入研究和is之间的区别&#xf…

C++入门基本语法

目录 前言 一.命名空间 1.命名空间定义 2.命名空间的使用 3.展开命名空间 二.缺省函数 三.函数重载 四.引用 1.特性 2.使用场景 3.效率及实现 前言 欢迎来到C的世界&#xff01;C是一种广泛使用的计算机编程语言&#xff0c;它提供了丰富的功能&#xff0c;包括面向…

海外分支访问国内服务器系统慢怎么办?

在全球业务不断扩张的今天&#xff0c;企业面临着海外分支访问国内总部服务器系统慢的问题。为了解决这一挑战&#xff0c;我们引入了lxway全球系统专网产品&#xff0c;为企业提供高效、安全的全球网络连接方案。通过解析技术瓶颈和专网的优势&#xff0c;本文将揭示如何借助先…

设计模式之过滤器模式

目录 1.简介 2.过滤器的实现 2.1.过滤器的角色 2.2.类图 2.3.具体实现 3.过滤器模式的优点 4.过滤器模式的不足 5.适用的场景 1.简介 过滤器模式&#xff08;Filter Pattern&#xff09;或标准模式&#xff08;Criteria Pattern&#xff09;是一种结构型设计模式&…

【Python学习】Python学习3-变量类型

目录 【Python学习】Python学习3 前言变量赋值多个变量赋值标准数据类型Python Numbers(数字)Python List&#xff08;列表&#xff09;Python Tuple&#xff08;元组&#xff09;Python Dictionary&#xff08;字典&#xff09; Python数据类型转换总结参考 文章所属专区 Py…