用html5和jquery制作个人博客

相信大家都对网页的制作充满了好奇心
今天我就教大家制作一个个人博客的主页面
其实做起来挺简单的
大家跟着我的步骤来实现把
感受一下代码的无穷魅力！

自制一个个性的个人博客页面
1.实现导航栏鼠标经过改变字体颜色
2.点击侧边栏按钮出现侧边栏菜单，给侧边栏以外的部分添加遮罩层并降低透明度，
鼠标经过侧边栏改变该行背景及字体颜色
3.点击遮罩栏部分关闭侧边栏。
4.给网页设置固定的背景图片
5.设置返回顶部按钮，实现点击返回页面顶部

这里是html代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>猪头兰</title><link rel="icon" href="img/钻石2.png" type="image/icon"><link rel="stylesheet" href="boke.css"><link rel="stylesheet" href="reset.css"><script src="jquery-3.2.1.min.js"></script><script src="boke.js"></script></head>
<body><div id="wrap"><header class="header"><nav><ul class="clear_fix nav_ul"><li class="logo"><a href="#">猪头兰</a><span></span></li><li class="silder_bar"><a href="#">侧栏菜单</a></li><li><a href="#">天页</a><span></span></li><li><a href="#">地页</a><span></span></li><li class="active"><a href="#">首页</a><span></span></li></ul></nav><div id="banner"><div class="inner"><div class="line"></div><h1>猪头兰</h1><div class="line"></div><p class="sub-heading">E-mail:xxxxx@163.com</p><p class="sub-heading">江西省赣州市石城县</p><p class="sub-heading">江西石城：猪头兰</p><button class="btn">摸摸我</button><div class="more">更多</div></div></div></header><div class="content"> <section class="part_one"><div class="wraper"><h2>春花秋月何时了</h2><div class="first_tittle">Right I die. My life before my eyes.</div><div class="line"></div><p>As I was hang there,I see wonderland，I don’t really see much of anything.But I see you.That is crazy.</p><div class="icon"><span class="item"><img src="img/钻石.svg" alt=""></span><span class="item"><img src="img/程序.svg" alt=""></span><span class="item"><img src="img/爱心.svg" alt=""></span></div></div></section><section class="part_tow"><div class="first"><div class="first_left"><img src="img/pic01.jpg" alt=""></div><div class="first_text"><h2>思念是一种病</h2><div class="first_title">我却病入膏肓</div><p>那一年南国之南，你如灼目之阳。最是那一低头的温柔，恰似水莲花不胜凉风的娇羞</p></div></div><div class="first"><div class="first_text"><h2>北国之春</h2><div class="first_title">暖阳如你</div><p>那是我经常走的一条小巷，遇见了你和我的青春</p></div><div class="first_left text_right"><img src="img/pic02.jpg" alt=""></div></div><div class="first"><div class="first_left"><img src="img/pic03.jpg" alt=""></div><div class="first_text"><h2>相信未来</h2><div class="first_title"></div><p>当蜘蛛网无情地查封了我的炉台，当灰烬的余烟叹息着贫困的悲哀，我依然固执地铺平失望的灰烬，用美丽的雪花写下：相信未来。当我的紫葡萄化为深秋的露水，</p></div></div></section><section class="part_three"><div class="part_three_wrap"><div class="three_wrap"><h2>相信未来</h2><div class="line"></div><div>当我的鲜花依偎在别人的情怀，我依然固执地用凝霜的枯藤，在凄凉的大地上写下：相信未来。我要用手指那涌向天边的排浪，我要用手掌 那托起太阳的大海，摇曳着曙光那支温暖漂亮的笔杆，用孩子的笔体写下：相信未来。</div></div><div class="card_grop clear_fix"><div class="card"><h3>believe future</h3><p>我之所以坚定地相信未来，是我相信未来人们的眼睛——她有拨开历史风尘的睫毛，她有看透岁月篇章的瞳孔。</p></div><div class="card"><h3>believe future</h3><p>不管人们对于我们腐烂的皮肉，那些迷途的惆怅，失败的苦痛，是寄予感动的热泪，深切的同情，还是给以轻蔑的微笑，辛辣的嘲讽。</p></div><div class="card"><h3>believe future</h3><p>我坚信人们对于我们的脊骨，那无数次地探索、迷途、失败和成功，一定会给予热情、客观、公正的评定，是的，我焦急地等待着他们的评定。</p></div><div class="card"><h3>believe future</h3><p>朋友，坚定地相信未来吧，相信不屈不挠的努力，相信战胜死亡的年轻，相信未来，热爱生命。 </p></div><div class="card"><h3>believe future</h3><p>当蜘蛛网无情地查封了我的炉台，当灰烬的余烟叹息着贫困的悲哀，我依然固执地铺平失望的灰烬，用美丽的雪花写下：相信未来。当我的紫葡萄化为深秋的露水，</p></div><div class="card"><h3>believe future</h3><p>当我的鲜花依偎在别人的情怀，我依然固执地用凝霜的枯藤，在凄凉的大地上写下：相信未来。我要用手指那涌向天边的排浪，我要用手掌 那托起太阳的大海，摇曳着曙光那支温暖漂亮的笔杆，用孩子的笔体写下：相信未来。 </p></div></div></div></section></div><footer class="footer"><ul class="share_group"><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li></ul><div  class="copy">&copy 猪头兰2020-01-31<a href="../苏宁易购/index.html">苏宁链接</a></div></footer><div class="mask"></div><div class="silder"><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></ul></div><div class="top"><img src="img/向上箭头.svg" alt="top" title="Top"><p>TOP</p></div> </div>
</body>
</html>

下边是css样式设置

* {margin: 0;padding: 0
}
em,i {font-style: normal
}
li {list-style: none
}
img {border: 0;vertical-align: middle
}
button {cursor: pointer
}
a {color: #666;text-decoration: none
}
a:hover {color: #c81623
}
#wrap{background:#444 url(img/banner.jpg);background-attachment: fixed;background-repeat: no-repeat;background-position: center -500px;background-size: cover;font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
/*  overflow: hidden; */
}
.header{line-height: 50px;background: rgba(0,0,0,.4);
}
.header nav{height: 50px;background:#ccc;
}
.logo a{color: #fff;
}.clear_fix:after{content:'' ;display: block;clear: both;
}
#banner{height: 650px;color: #FFFFFF;
}
nav ul li{float: right;margin-right: 30px;line-height: 50px;}
.logo{float: left;font-size:20px ;font-weight: 700;margin-left: 50px;letter-spacing:2px;}
#banner .inner{max-width: 300px;text-align: center;margin: 0 auto;position: relative;/* opacity: 0.7; */top: 160px;/* background-color: #C81623; */
}.line{height: 2px;width: 100%;margin: 0 auto ;
}
.inner .line{background: #fff;width: 65%;margin-bottom: 10px;
}
#banner .inner h1{margin-bottom:20px;
}
.sub-heading{line-height: 30px;}
p{font-size: 18px;
}
button{background:#e85e17 ;color: #eee;padding: 10px 20px;border: none;margin-top: 20px;border-radius: 5px;outline: none;cursor: pointer;
}
.inner button:hover{transform: rotate(1080deg) scale(2);transition: 2.5s;z-index: 99;}
#banner .inner .more{margin-top: 180px;
}
.content{position: relative;color: #fff;/* background: rgba(67,178,165,1); */
}
.part_one{padding-top: 65px;line-height: 30px;text-align: center;background: rgba(67,178,165,.6);
}
.wraper{max-width: 1080px;margin: 0 auto;}
.wraper h2{font-size: 27px;padding: 15px 0;
}
.wraper .line{background: darkgrey;margin: 20px auto;width: 40%;
}
.part_one p{padding: 15px 0;
}
.icon{margin-top: 20px;padding-bottom: 20px;}
.icon span img{transform: rotate(-45deg);width: 100%;
}
.icon>.item{width: 80px;height: 80px;display: inline-block;transform: rotate(45deg);margin:20px 30px ;border: solid 2px green;
}
.part_tow{background:rgb(33,41,50);color:  #fff ;opacity: 0.95;
}
.first_left{width: 41%;
}
.first_text {width: 55%;position: relative;top: 68px;left: 50px;
}
.first_left img{width: 100%;
}.first>div{float: left;
}
.first:nth-child(odd){background:rgba(255,255,255,.1);
}
.first{position: relative;
}
.first:after{content: '';display: block;clear: both;
}.first .first_title{margin-top:0;margin-bottom: 22px;font-size: 20px;}.first_text>*{max-width: 90%;}
.first_text h2{margin-bottom: 10px;font-size: 24px;
}
.first_text p{font-size: 18px;letter-spacing: 2px ;
}.part_three{background: #3f3965;opacity: 0.9;color: #fff;}.part_three .part_three_wrap{margin: 0 auto;max-width: 60%;padding-top:65px;}
.three_wrap{margin-bottom: 35px;
}
.three_wrap h2{text-align:  center;margin-bottom: 25px;
}
.three_wrap .line{background: #1a0973;width: 55%;margin-bottom: 20px;
}
.card{float: left;min-height: 300px;padding: 50px;max-width: 272px;-webkit-box-sizing: bord    er-box;-moz-box-sizing: border-box;background-color: :;0;}
.card h3{text-align: center;
}
.card p {margin-top: 20px;font-size: 18px;
}
.card:nth-child(1){background: rgba(0,0,0,0.05);
}
.card:nth-child(2){background: rgba(0,0,0,0.1);
}
.card:nth-child(3){background: rgba(0,0,0,0.15);
}
.card:nth-child(4){background: rgba(0,0,0,0.2);
}
.card:nth-child(5){background: rgba(0,0,0,0.25);
}
.card:nth-child(6){background: rgba(0,0,0,0.3);
}
.footer{background:#333;color: #fff;min-height: 200px;text-align: center;/*opacity: 0.95;*/
}
ul.share_group{display: block;margin: 0 auto;width: 1080px;padding: 45px;
}.share_group li{display: inline-block;padding: 10px;
}.share_group li{display: inline-block;padding: 10px;
}
.active{position: relative;width: ;
}
.active span{position: absolute;width: 100%;height: 4px;bottom: 5px;left: 0;background: #fff;
}
.mask{position: fixed;top: 0;right: 0;left: 0;bottom: 0;background:rgba(0,0,0,0.3) ;display: none;transform: 3s;
}
.first .text_right{float: right;
}
.silder{background: #333;position: fixed;right: -300px;top: 0;bottom: 0;width: 10%;}
.silder ul li{line-height: 30px;padding: 40px 40px;margin-top: 30px;
}
.silder ul li:hover{background:rgba(0,0,0,0.6);
}
.silder ul li a{color: #fff;
}
.logo a:hover{color: #fff;
}
.top {position: fixed;right: 50px;bottom: 80px;width: 50px;height: 30px;
/*  display: none; */}
.top p,img{text-align: center;width: 100%;}

下边是jquery部分

$(function(){$('.nav_ul li').click(function () {$(this).addClass('active')$(this).siblings().removeClass('active')})$('.silder_bar').click(function(){showSilder();})function showSilder(){$('.mask').fadeIn();$('.silder').css('right',0)}function hideSilder(){$('.mask').fadeOut();$('.silder').css('right',-300)}$('.mask').click(function(){hideSilder()})$('.top').click(function(){$('body,html').animate({scrollTop:0},300)})$(window).on('scroll',function () {if($(window).scrollTop()>100){$('.top').css('display','block')}else{$('.top').css('display','none')}})$('.btn').click(function(){alert('爱猪头兰')})

用html5和jquery制作个人博客相关推荐

学生网页制作源代码下载HTML5+CSS大作业——个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品
HTML5+CSS大作业--个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
HTML5期末大作业：博客网页设计——个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:博客网页设计--个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
HTML5+CSS大作业——个人博客-功能齐全(48页) html大学生网站开发实践作业
HTML5+CSS大作业--个人博客-功能齐全(48页) html大学生网站开发实践作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
织梦html5博客模板,html5纯新闻资讯个人博客织梦模板(自适应)
html5纯新闻资讯个人博客织梦模板(自适应),织梦最新内核开发的模板,源码适用于新闻资讯.博客.站内站.采集站.嵌套站使用,纯资讯类型可主要优化排名使用. 模板效果请看真实的截图,如需要制定或者修改 ...
《全栈营销之如何制作个人博客》之二：php环境安装及个人博客后台搭建让你的博客跑起来...
上一节我们讲了个人博客用什么开发语言,用什么CMS系统,从这一节我们就开始真正的干货,这一节我们讨论一下PHP环境的安装,及个人博客后台的搭建,让你的博客在正常的PHP环境中运行起来,你就可以进行后台 ...
制作github博客
最近几天突发其想,想做一个GitHub的博客,链接https://imutang.github.io,然后决定先使用HUGO来制作我的第一个个人博客,编辑文字方面没有博客园这么方便转载于:https ...
python poisson图像融合制作CSDN博客头像
语曰:独学而无友,则孤陋而寡闻! 博客是将我们日常学习工作生活中的所学所思所想记录下来并与他们交流分享的重要途经和平台.人靠衣装马靠鞍,头像是展现个人自我风格和气派的第一站.本文展示笔者自己制作头像的 ...
html5文章发布模板,HTML5响应式大气文章博客模板
★模板详情★ Html5大气文章博客模板,全尺寸自适应!,测试完整无错,兼容主流浏览器. 模板包含安装文档,并包含测试数据. 本模板基于DEDECms 5.7 UTF-8设计,需要GBK版本的请自己转 ...
Spring Boot制作个人博客-后端管理（登录）
文章目录一.构建页面 1.构建登录页面 2.构建后台管理页面 3.复制_fragments 二.实现登录 1.创建用户接口 2.创建用户实现类 3.创建UserRepository 4.初始化一个用 ...

用html5和jquery制作个人博客

用html5和jquery制作个人博客相关推荐

最新文章

热门文章