纯html+js+css个人博客

已于 2024-01-29 18:01:09 修改
阅读量1.2k 收藏 3
点赞数 5
文章标签： html javascript css
于 2024-01-29 17:55:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72190449/article/details/135917983
版权

首页

<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>主页</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
	</head>
	<body>
	<!-- Header -->
	<div class="header">
        <!-- 个性化标题 -->
        <div class="mytitle">
            <label>赌书消得泼茶香</label>
        </div>
        <!-- 导航栏 -->
        <div class="mymenu-content">
            <ul class="mymenu">
                <li><a href="">文章</a></li>
                <li><a href="message.html">留言</a></li>
                <li><a href="photos.html">相册</a></li>
                <li><a href="about.html">简介</a></li>
                <li><a href="aihao.html">爱好</a></li>
                <li><a href="movies.html">电影</a></li>
                <li><a href="books.html">书籍</a></li>
            </ul>
        </div>
        <!-- 隐藏功能 -->
        <div class="other-functions">
            <label>隐藏功能</label>
        </div>
        <!-- 搜索框 -->
        <div class="query">
            <input class="keyword" placeholder="搜索内容"/>
            <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
        </div>
    </div>
    <!-- 个性签名 -->
    <div class="my-sign">
        <!--  包含标志和签名 -->
        <div class="my-signImg">
            <img id="my-signImg" src="img/my-sign.gif">
            <div class="my-signWord">
                <span class="my-signTitle" id="my-signTitle">匆匆时光</span>
                <span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
            </div>
        </div>
    </div>
    <!-- Content -->
    <div class="main-content">
	    <!-- 个人以及所有文章、留言、照片汇总 包含大分类以及小标签 左面版 -->
	    <div class="my-totalContent">
	        <!-- 1.个人以及汇总部分 -->
	        <div class="blog-inTotal">
	            <!-- 头像 -->
	            <img src="img/IMG_1568.PNG">
	            <!-- 说明 -->
	            <span>——好好学习，天天向上吧</span>
	            <!-- 各方面汇总(各项目以及数量) -->
	            <fieldset class="layui-elem-field">
	                <legend>文章标签</legend>
	                <!-- 用于存放tags -->
	                <div class="layui-field-box" id="tagContent">
						<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px;font-weight: 400;">论语</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">道德经</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">余华作品</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">沈从文</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">冰心选集</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">小说散文</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">随笔</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">外国文学</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">人生感悟</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">遇见你</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">日记</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">绘画</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗经</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗词研究</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">历代书法</span>
		            
	                </div>
	            </fieldset>
	        </div>
	    </div>
        <!-- 主体显示部分 右面板 -->
        <div class="content-body">
            <!-- 单个文章面板 -->
            <div class="blog-item">
                <!-- 标题 -->
                <p class="blog-title"><a href="simpleBlog.html">一个小和尚</a></p>
                <!-- 作者以及时间 -->
                <p class="blog-author">—— 邱建红  2017-12-14 12:36</p>
                <img class="blog-img" src="img/pic01.jpg"/>
                <!-- 概要 -->
                <p class="blog-des">岁月荏苒，如梦似幻，人生只在呼吸之间而已。</p>
                <p class="blog-tags">标签: 日记 / 人生感悟</p>
            </div>
            <!-- 单个文章面板 -->
            <div class="blog-item">
                <!-- 标题 -->
                <p class="blog-title"><a href="simpleBlog1.html">桃之夭夭，灼灼其华</a></p>
                <!-- 作者以及时间 -->
                <p class="blog-author">—— 邱建红  2017-12-18 12:03</p>
                <img class="blog-img" src="img/pic03.jpg"/>
                <!-- 概要 -->
                <p class="blog-des">犹如一支山寺桃花般惊艳的你就这样在我世界里静静地除绽着。</p>
                <p class="blog-tags">标签: 日记 / 遇见你</p>
            </div>
        </div>
        <hr class="my-line">
    </div>
    <script src="layui-v2.2.3/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/index.js"></script>
    <script>
        $(function () {
            //init
            component.init();
        });
    </script>
	</body>
</html>

登录

var component = {

    /**
     * 初始化
     */
    init : function () {
        //layui
        component.layui();
        //Header 以及 Total部分事件
        component.mySign();
    },

    /**
     * layui
     */
    layui : function () {
        //加载layui模块
        layui.use(['layer', 'form', 'element'], function () {
            var layer = layui.layer
                , form = layui.form
                , element = layui.element
            //layer.msg('Hello World');

        });
    },
  
    /**
     * 签名类效果
     */
    mySign : function () {

        //Img(monkey)
        var signImgTouch = function () {
            $(this).animate({borderRadius : 0}, 1000);
        };
        var signImgLeave = function () {
            $(this).animate({borderRadius : 93}, 1000);
        };
        $("#my-signImg").mouseenter(signImgTouch)
            .mouseleave(signImgLeave);

        //Title
        var signTitleTouch = function () {
            $(this).animate({marginLeft : 50}, 800);
        };
        var signTitleLeave = function () {
            $(this).animate({marginLeft : 0}, 800);
        };
        $("#my-signTitle").mouseenter(signTitleTouch)
            .mouseleave(signTitleLeave);
    }

};

私聊获取源码！！！！

运行部分图片

至尊鸡
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web个人博客（课程设计or期末大作业） 使用语言：纯html+css+JavaScript
02-06
项目用到的编程知识：html+css+JavaScript 项目代码量：共计7个index.html文件，5个页面，一定数量的照片素材（可自行替换） 项目效果：实现了背景粒子动画，我的主页，我的博客，我的照片（使用轮播图循环实现），...
html+css+javascript搭建个人博客
暴力扬
01-22 2997
html+css+javascript搭建属于自己的个人博客
初入前端HTML+CSS+JS个人博客案例
xiaobuzq的博客
01-12 802
html前端个人博客案例，初入前端学习，html+css+js个人博客
纯CSS+HTML+JS实现的简易个人网站
热门推荐
杨家的小胖几的博客
02-02 3万+
纯CSS+HTML+JS实现的简易个人网站 这是我用CSDN这么久以来第一次用它写博客，废话不多说，先上干货，下面为大家展示一下我做的简易个人网站，我是用HTML+CSS+JS实现的，没有用到后台。音乐吧是网站的功能页面主要有四个： 1.个人简介页面：头像360°旋转 2.个人相册页面：照片有CSS样式，可以翻转 3.个人音乐吧:可以播放音乐，可以改变进度、音量以及切歌 4.个人留言板：有验证...
基于HTML+CSS+JavaScript简洁的响应式个人博客网站bootstrap网页(大学生简单个人静态HTML网页设计作品)
weixin__BJ050106的博客
08-15 862
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
html+css+javascript 大数据科技登录界面模板html
qq_365392777
08-19 7472
大数据科技登录界面模板html 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：蓝色科技风格后台登录框，科幻的网站后台系统登录界面模板下载, 文章页支持手机PC响应式布局。 2.网页作品编辑方面：此作品为登录页面设计题材，HTML+CS...
Web大学生网页作业成品：个人博客主页 (纯HTML+CSS代码)
qq_524614081的博客
11-28 1194
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html+css+js基础问答
qq_43751465的博客
08-26 4993
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
基于HTML+CSS+JavaScript技术设计的博客网站(web前端期末大作业)
weixin__BJ050106的博客
08-20 295
👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J...
基于HTML+CSS+JavaScript仿华为手机电子商城
HTML网页设计
09-11 2385
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
个人博客网站html+css源码
08-22
这是一个完整的个人博客的html源代码,稍微修改就能让自己的博客充满个性化，纯前端代码，入门级的，仅供于学习，欢迎交流
纯html模板-学习-单页-黑色个人博客CSS模板-黑色 个人 博客.zip
03-18
纯html模板--单页-黑色个人博客CSS模板_黑色 个人 博客.zip
html课设(个人博客网站)
07-07
纯手写,适合新手,html+css_JavaScript 压缩包内容包含:源码+报告电子版+介绍ppt 实现的主要功能:主页/博客页/关于我/论坛/博客内容页一共20多个页面 1.登录注册,localstorge本地存储, 假表单搜素 2.涵盖表格(不限于...
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 90
换行标签 水平线标签
使用html和css实现个人简历表单的制作
qq_49370210的博客
05-12 755
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
HTML 4.0的事件属性：功能与应用
2401_83810323的博客
05-09 289
在HTML 4.0中，常见的事件属性包括onclick、onmouseover、onmouseout等，它们分别对应着用户的点击、鼠标悬停和鼠标移出等操作。除了上述常见的事件属性外，HTML 4.0还提供了诸如onload、onunload、onchange等其他事件属性，它们分别用于在页面加载完成、页面关闭和表单元素值改变时触发相应的操作。onmouseover事件属性在用户将鼠标悬停在元素上时触发，而onmouseout事件属性则在用户将鼠标移出元素时触发。
01.认识HTML及常用标签
最新发布
2301_80401457的博客
05-14 567
标题1描述内容1111标题2描述内容2222无序列表ul {li {北京上海广州
html+css+js个人博客
12-21
个人博客是一个可以分享个人想法、经验和技能的地方，同时也可以让自己展示自己的才华和创造力。对于一个个人博客来说，HTML、CSS和JS是非常重要的。 首先，HTML是网页的骨架，它负责构建网页的结构，包括标题、段落、图像和链接等。一个好的个人博客需要一个清晰的结构，使读者可以轻松地找到他们需要的内容。 接下来，CSS用来美化网页，它可以定义网页的样式、布局和外观，包括颜色、字体、边距和动画等。一个吸引人的个人博客需要一个漂亮的外观，使读者愿意停留并浏览更多的内容。 最后，JS可以为个人博客增加交互性和动态效果。它可以用来创建滚动图表、交互式表单、图片幻灯片和页面加载效果等。一个具有交互性和动态效果的个人博客更容易吸引读者的注意，并让他们对你的内容产生兴趣。 综上所述，HTML、CSS和JS是个人博客的重要组成部分。它们可以帮助你创建清晰的结构、漂亮的外观和丰富的交互性，使你的个人博客更加吸引人，从而增加读者的访问和留存率。所以，如果你想要创建一个成功的个人博客，一定要掌握这些前端技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值