纯html+js+css个人博客

首页

<!DOCTYPE HTML>
<html>
<head>
<title>博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
<!---start-login-script---><script src="js/login.js"></script><!---//End-login-script---><!-----768px-menu-----><link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" /><script type="text/javascript" src="js/jquery.mmenu.js"></script><script type="text/javascript">//	The menu on the left$(function() {$('nav#menu-left').mmenu();});</script><!-----//768px-menu----->
</head>
<body><div class="content"><!------start-768px-menu----><div id="page"><div id="header"><a class="navicon" href="#menu-left"> </a></div><nav id="menu-left"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="about.html">关于</a></li><li><a href="blog.html">博客</a></li><div class="clear"> </div></ul></nav></div><!------end-768px-menu----><!---start-header----><div class="header"><!---start-wrap----><div class="wrap"><div class="header-left"><div class="logo"><a href="index.html"><img src="images/logo.jpg"/></a></div></div><div class="header-right"><div class="top-nav"><ul><li class="active"><a href="index.html">首页</a></li><li><a href="about.html">关于</a></li><li><a href="blog.html">博客</a></li></ul></div><div class="sign-ligin-btns"><ul><li id="loginContainer"><a class="login" id="loginButton" href="#"><span>登录</span></a><div class="clear"> </div><div id="loginBox">                <form id="loginForm"><fieldset id="body"><fieldset><label for="email">邮箱号</label><input type="text" name="email" id="email" /></fieldset><fieldset><label for="password">密码</label><input type="password" name="password" id="password" /></fieldset><label class="remeber" for="checkbox"><input type="checkbox" id="checkbox" />记住我</label><input type="submit" id="login" value="登录" /></fieldset><span><a href="#">忘记密码?</a></span></form></div><!-- Login Ends Here --></li><li id="signupContainer"><a class="signup" id="signupButton" href="#"><span>注册</span></a><div class="clear"> </div><div id="signupBox">                <form id="signupForm"><fieldset id="signupbody"><fieldset><label for="email">邮箱号 <span>*</span></label><input type="text" name="email" id="signupemail" /></fieldset><fieldset><label for="password">请您输入密码<span>*</span></label><input type="password" name="password" id="signuppassword" /></fieldset><fieldset><label for="password">请您再次输入密码<span>*</span></label><input type="password" name="password" id="signuppassword1" /></fieldset><input type="submit" id="signup" value="现在注册!" /></fieldset></form></div><!-- Login Ends Here --></li><div class="clear"> </div></ul></div><div class="clear"> </div></div><div class="clear"> </div></div></div><div class="main"><div class="wrap"><div class="main_left"><h2>我的博客</h2><p>每个人都活着,但有的人活在过去的记忆中,有的人活在对未来的痴想中,只有活在今天的人,是把自己的一生掌握在手中。</p><div class="buttons"><div class="sign_up"><a href="#">注册</a></div><div class="learn"><a href="details.html" class="arrow_btn">MORE</a></div><div class="clear"> </div></div></div><div class="main_right"><span> </span></div><div class="clear"> </div><!---//End-header----></div></div></div><div class="buttom"><div class="wrap"><div class="top-grids"><div class="top-grid"><a href="#"><img src="images/icon1.png"/></a><h3><a href="#">放飞视野</a></h3><p>我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习</p></div><div class="top-grid"><a href="#"> <img src="images/icon2.png"/></a><h3><a href="#">我的爱好</a></h3><p>我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习</p></div><div class="top-grid"><a href="#"><img src="images/icon3.png"/> </a><h3><a href="#">我的学习</a></h3><p>我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习我的学习</p></div><div class="clear"> </div></div></div></div><div class="footer"><div class="wrap"><div class="footer-left"><div class="copy"><p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://itwangyang.xyz">itwang</a></p></div></div><div class="social_icons">	<ul><li class="in"><a href="#"><span> </span></a></li><li class="pro"><a href="#"><span> </span></a></li><li class="twitter"><a href="#"><span> </span></a></li><li class="facebook"><a href="#"><span> </span></a></li><div class="clear"> </div></ul></div><div class="clear"> </div></div></div>
</body>
</html>

登录

// Login Form$(function() {var button = $('#loginButton');var box = $('#loginBox');var form = $('#loginForm');button.removeAttr('href');button.mouseup(function(login) {box.toggle();button.toggleClass('active');});form.mouseup(function() { return false;});$(this).mouseup(function(login) {if(!($(login.target).parent('#loginButton').length > 0)) {button.removeClass('active');box.hide();}});
});
$(function() {var button = $('#signupButton');var box = $('#signupBox');var form = $('#signupForm');button.removeAttr('href');button.mouseup(function(login) {box.toggle();button.toggleClass('active');});form.mouseup(function() { return false;});$(this).mouseup(function(login) {if(!($(login.target).parent('#signupButton').length > 0)) {button.removeClass('active');box.hide();}});
});

私聊获取源码!!!!

运行部分图片

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

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

相关文章

隐式内连接(inner join)和LEFT JOIN

隐式内连接和inner join 的关系&#xff1a; 1、隐式内连接&#xff1a;在SQL语句中使用"FROM"关键字连接两个或多个表&#xff0c;而连接条件则写在"WHERE"子句中。这种方式只有在连接条件成立的情况下&#xff0c;才会将两个表中的数据行连接起来。 2、…

[macOS]gcc安装

在MacOS操作系统上安装GCC是开发者们经常遇到的问题之一。GCC是GNU编译器集合&#xff0c;它可以编译C&#xff0c;C&#xff0c;Objective-C和其他一些编程语言。然而&#xff0c;在MacOS上安装GCC并非一件简单的事情。本文将探讨如何在MacOS上安装GCC&#xff0c;以及如何解决…

React hooks子组件暴露方法示例

说明 通常情况下&#xff0c;React 子组件使用父组件的方法或值通过props传递&#xff0c;反过来&#xff0c;父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例&#xff1a; User.tsx import React, { FC, useEffect, useState, useRef } from …

TOP100 矩阵

1.73. 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 提示&#xff1a; m matrix.lengthn matrix[0].length1 < m, n < 200-2^31 < matrix[i][j] < 2^31 - 1 思路&#xf…

SeaTunnel Web安装 一把成

安装相关jar包&#xff0c;以及SeaTunnel 和Web 打成的包&#xff0c;可以直接使用&#xff0c;但是需要安装MySQL客户端的分享&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1qrt1RAX38SgIpNklbQJ7pA 提取码&#xff1a;0kmf 1. 环境准备 环境名称版本系统环境C…

使用EasyPOI模板导出Execl表格(含有图片)

这是生成的文件效果 一、导入依赖 <!--easypoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.2.0</version></dependency><dependency><groupId>cn.aft…

零、环境搭建

之前一直玩python的&#xff0c;由于工作需要C版的opencv&#xff0c;故借此寒假闲暇时间&#xff0c;进行简单了解学习。 主要用到的IDE是Visual Studio和OpenCV 一、Visual Studio下载安装 我这里没找到之前的2017版本&#xff0c;就拿目前最新的2023社区版下载&#xff1a…

30款跨平台开发方案,总有个一个适合你!

1、Qt FluentUI CEF 可以覆盖所有需求 2、.NET Avalonia(SukiUI) CEF 可以覆盖所有需求 3、.NET DevExpress跨平台产品 CEF 可以覆盖所有需求 4、JavaFx(Swing) flatlaf WebView 可以覆盖所有需求 5、Java Qt &#xff08;qtjambi&#xff09; CEF 可以覆盖所有需…

2024谷歌SEO入门指南

SEO自然搜索&#xff0c;也被称为有机搜索、非付费搜索或算法搜索&#xff0c;基本上就是你在 Google 的搜索框中输入关键词后&#xff0c;看到的搜索结果。&#xff08;当然&#xff0c;还有付费搜索结果&#xff0c;此处暂且略过&#xff09;这些结果并非由于广告投放或付费推…

C++对象模型和this指针,const修饰成员函数详解

目录 1.成员变量和成员函数分开存储 2.this指针 1.this指针概念 ​编辑 2.this指针用途 3.空指针访问成员函数 ​编辑 4.const修饰成员函数 mutable声明 1.成员变量和成员函数分开存储 空对象占用内存空间为1字节&#xff0c;这样是为了区分不同的空对象占内存的位置 …

【学习笔记】Vue3源码解析:第一部分-实现vue3环境搭建

课程地址&#xff1a;【已完结】全网最详细Vue3源码解析&#xff01;&#xff08;一行行带你手写Vue3源码&#xff09; 第一部分&#xff1a;实现vue3环境搭建&#xff08;对应课程的第1-3节&#xff09; VUE2与VUE3的对比&#xff1a; 也即vue2的痛点&#xff1a; 对TypeSc…

【Spring连载】使用Spring访问 Apache Kafka(二十)----测试应用

【Spring连载】使用Spring访问 Apache Kafka&#xff08;二十&#xff09;----测试应用Testing Applications 一、KafkaTestUtils二、JUnit三、配置主题Configuring Topics四、为多个测试类使用相同的broker&#xff0c;Using the Same Broker(s) for Multiple Test Classes五、…

微信小程序遮罩层滚动穿透的问题

常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 发生滚动穿透 处理方法是添加 <page-meta page-style"{{ showPolish ? overflow: hidden; : }}" /> page-meta必须在第一个节点

【bug】在子组件中watch监听父组件传过来的值,监听不到,已解决

bug复现&#xff1a; 父组件需要传参数autoinputFs&#xff0c;autoinputFs为true的时候&#xff0c;子组件中的输入框&#xff08;只有一个&#xff09;自动聚焦&#xff0c;很多组件复用mp3Search&#xff0c;有些页面不需要&#xff0c;所以定义了autoinputFs控制输入框是否…

开发一个Android App,在项目中完成添加联系人的功能,通过ContentResolver向系统中添加联系人信息。

实现步骤&#xff1a; &#xff08;1&#xff09;添加动态联系人的权限。 &#xff08;2&#xff09;创建Activity和布局文件&#xff0c;添加输入框和按钮等控件。 &#xff08;3&#xff09;完成添加联系人的功能。 代码文件如下&#xff1a; activity_main.xml文件 <!…

Java - 遍历实体类字段值

当从数据库查询出一列数据&#xff0c;需要比对各列字段的最大值或者取不为空的值时&#xff0c;需要遍历字段操作。 示例数据 项目1月成交数量2月成交数量3月成交数量4月成交数量电脑15141019手机223519导管311001418 对应实体类 Data public class ProVo {// 项目private…

sv program module

为了避免races&#xff0c;在验证中引入program&#xff1b; Similarities between program and module block A program block can instantiate another program block in the way how the module is instantiated another module block.Both can have no or more inputs, …

2024.1.29 寒假训练记录(12)

昨天大半夜开了一道2000的组合数学&#xff0c;吗的忘记看场次&#xff0c;根本搜不到啥题解&#xff0c;只能对着别人代码一点点琢磨&#xff0c;终于看明白了&#xff0c;搞了套组合数取模的板子&#xff0c;还行 训练赛剩下的题目明天补 文章目录 CF 1912B Blueprint for S…

uni-app vite+ts+vue3模式 集成微信云开发

1.创建uni-app项目 此处使用的是通过vue-cli命令行方式uni-app官网 使用vue3/vite版 创建以 typescript 开发的工程&#xff08;如命令行创建失败&#xff0c;请直接访问 gitee 下载模板&#xff09; npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project(我创建失败…

【竞技宝jjb.lol】LOL:经典大龙毁一生 WE鏖战三局力克FPX

北京时间2024年1月30日&#xff0c;英雄联盟LPL2024春季赛在昨天迎来第二周首个比赛日&#xff0c;本日首场比赛由WE对阵FPX。本场比赛双方前两局战至1-1平&#xff0c;决胜局FPX一度建立不小的经济优势&#xff0c;然而太过冒险的打大龙决策最终让其功亏一篑&#xff0c;WE鏖战…