磐石网站seo,网站推广优化方案,长春企业免费建站,怎么用ai做网站版面文章目录 1.设计来源1.1 博客主页界面1.2 博主信息界面1.3 我的文章界面1.4 我的相册界面1.5 我的工具界面1.6 我的源码界面1.7 我的日记界面1.8 我的留言板界面1.9 联系博主界面 2.演示效果和结构及源码2.1 效果演示2.2 目录结构2.3 源代码 源码下载 作者#xff1a;xcLeigh … 文章目录 1.设计来源1.1 博客主页界面1.2 博主信息界面1.3 我的文章界面1.4 我的相册界面1.5 我的工具界面1.6 我的源码界面1.7 我的日记界面1.8 我的留言板界面1.9 联系博主界面 2.演示效果和结构及源码2.1 效果演示2.2 目录结构2.3 源代码 源码下载 作者xcLeigh 文章地址https://blog.csdn.net/weixin_43151418/article/details/135414356 HTML5大作业-精致版个人博客空间模板源码杨洋个人博客大作业大作业源码个人空间源码个人主页源码。模板界面主题分为博客主页、博主信息、我的文章、我的相册、我的工具、我的源码、我的日记、我的留言板、联系博主等页面在此基础上可根据博客模板扩展更多的功能统一的风格代码上手简单代码独立可以直接使用。也可直接预览效果。如有代码问题可以私信联系博主帮忙解决。 1.设计来源
1.1 博客主页界面 博客主页界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.2 博主信息界面 博主信息界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.3 我的文章界面 我的日记界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.4 我的相册界面 我的相册界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.5 我的工具界面 我的工具界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.6 我的源码界面 我的源码界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.7 我的日记界面 我的日记界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.8 我的留言板界面 我的留言板界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 1.9 联系博主界面 联系博主界面分为上中下三个板块上边为固定头部导航保持不变中间又分为左右两个板块左边博客博客内容右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部相关版权信息。这为模板界面可以支持变更自己喜欢的风格主题色调的调整代码扩展方便上手容易。 这里分了三种联系方式第一种可以根据博客、QQ、微信等软件联系第二种可以通过位置直接上门访问第三种可以直接从当前位置发消息。 2.演示效果和结构及源码
2.1 效果演示
这里是完整的效果演示源码是个人博客模板内含博客所需基础框架可在此代码基础上更加完善功能支持扩展自己的风格可以删减内容打造属于自己的个人博客。 HTML5大作业-精致版个人博客空间模板源码 2.2 目录结构 2.3 源代码 这里是主界面的代码其他图片、js、css等代码见下面的 源码下载 里面有所有代码资源和相关说明。
!DOCTYPE HTML
html xmlnshttp://www.w3.org/1999/xhtml
head
title杨洋 - 个人博客/title
meta http-equivContent-Type contenttext/html; charsetutf-8 /
meta namekeywords content个人博客
meta namedescription content一个专注源码生产的个人博客。
LINK relBookmark hreffavicon.ico
LINK relShortcut Icon hreffavicon.ico /
link relstylesheet typetext/css hrefplugin/h-ui/css/H-ui.min.css /
link hrefcss/styles.css relstylesheet
/head
body
header styleposition: fixed;top:0px; z-index: 99;nav idnavullia hrefindex.html idnav_current博客主页/a/lilia hrefme.html博主信息/a/lilia hrefarticle.html我的文章/a/li lia hrefphoto.html我的相册/a/li lia hreftool.html我的工具/a/li lia hrefcode.html我的源码/a/li lia hrefnote.html我的日记/a/li lia hrefboard.html我的留言板/a/lilia hrefcontact.html联系博主/a/li/ul/nav
/header
div classmainContentasidediv classavatar stylemargin-left: 55px; margin-top: 20px;a hrefindex.htmlspan杨洋/span/a/divsection classtopspaceinfoh1 stylepadding: 0;杨洋 | 全栈工程师/h1p我有我个性我由我主宰我有自己的一片天空。我有我自己创造的未来。/p/sectiondiv classuserinfo p classq-fans 粉丝a href/ target_blank1314/a | 关注a href/ target_blank520/a/p p classbtnsa hrefarticle.html title1314篇文章/aa hrefnote.html title1314篇日记/aa hreftool.html title1314个工具/aa hrefcode.html title1314个源码/a/p /divsection classnewpich2 stylepadding: 0; padding-left: 30px;我的文章 - TOP5/h2div classtab-category-itemul classindex_recd clickTopli01. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/125642161 target_blank好看的邀请函模板源码/ap classhits 5200 /p/lili02. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/127964115 target_blank恋爱表白模板源码/ap classhits 4255 /p/lili03. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/128288153 target_blank清新的个人博客源码/ap classhits 3522 /p/lili04. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/135054910 target_blank商城网站源码/ap classhits 2586 /p/lili05. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134899691 target_blank视频网站源码/ap classhits 2286 /p/li/ul/div/sectionsection classnewpich2 stylepadding: 0; padding-left: 30px;我的工具 - TOP5/h2div classtab-category-itemul classindex_recdli01. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134458927 target_blank二维码生成/ap classhits 1314 /p/lili 02. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134437021 target_blank图片处理/ap classhits 520 /p/lili 03. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134613121 target_blank瀑布流源码/ap classhits 888 /p/lili 04. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/131412565 target_blank各种导航菜单合集/ap classhits 666 /p/lili 05. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134467729 target_blank翻页相册源码/ap classhits 2020 /p/li/ul/div/sectionsection classnewpich2 stylepadding: 0; padding-left: 30px;我的源码 - TOP5/h2div classtab-category-itemul classindex_recd clickTopli01. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/125642161 target_blank好看的邀请函模板源码/ap classhits 52000 /p/lili02. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/127964115 target_blank恋爱表白模板源码/ap classhits 42355 /p/lili03. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/128288153 target_blank清新的个人博客源码/ap classhits 35622 /p/lili04. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/135054910 target_blank商城网站源码/ap classhits 25586 /p/lili05. a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134899691 target_blank视频网站源码/ap classhits 22486 /p/li/ul/div/sectionsection classnewpich2 stylepadding: 0; padding-left: 30px;扫码关注/h2div classtab-category-item stylemargin: 20px 0; border: 0;img srcimages/csdn.png data-originalimages/csdn.png stylewidth: 100%; altxcLeigh/div/sectionsection classnewpich2 stylepadding: 0; padding-left: 30px;最近访客/h2div styledisplay: flex; flex-direction: row; flex-wrap: wrap; margin-left: 10px; margin-top: 20px;img classitemImg srcimages/b1.png altimg classitemImg srcimages/b2.png altimg classitemImg srcimages/b3.png altimg classitemImg srcimages/b4.png altimg classitemImg srcimages/b5.png altimg classitemImg srcimages/b6.png altimg classitemImg srcimages/b7.png altimg classitemImg srcimages/b8.png altimg classitemImg srcimages/b9.png altimg classitemImg srcimages/b10.png altimg classitemImg srcimages/b11.png altimg classitemImg srcimages/b12.png altimg classitemImg srcimages/b13.png altimg classitemImg srcimages/b14.png alt/div/section/asidediv classblogitemdiv stylemargin: 10px 10px;!-- 轮播图 --div classslider_maindiv classsliderdiv classbdullia hrefhttps://blog.csdn.net/weixin_43151418/article/details/134467729 title爱情纪念册源码 target_blankimg srcimages/banner3.jpg/a/lilia hrefhttps://blog.csdn.net/weixin_43151418/article/details/128349160 title实用的个人主页 target_blankimg srcimages/banner2.jpg/a/lilia hrefhttps://blog.csdn.net/weixin_43151418/article/details/131495285 title漂亮的个人简历 target_blankimg srcimages/banner4.jpg/a/lilia hrefhttps://blog.csdn.net/weixin_43151418/article/details/134899691 title动漫影视网站源码 target_blankimg srcimages/banner1.jpg/a/lilia hrefhttps://blog.csdn.net/weixin_43151418/article/details/134617864 title我的家乡北京网站源码 target_blankimg srcimages/banner5.jpg/a/li/ul/divol classhd cl dotsli1/lili2/lili3/lili4/lili5/li/ola classslider-arrow prev hrefjavascript:void(0)/aa classslider-arrow next hrefjavascript:void(0)/a/divdiv stylemargin-top: 10px; font-size: 16px; border-bottom: 2px solid rgba(164,12,12); display: flex;div stylebackground-color: rgba(164,12,12); cursor: pointer; padding: 6px 18px; color: white;我的文章/divdiv stylebackground-color: rgba(164,12,12,0.3); cursor: pointer; padding: 6px 18px; color: white; margin-left: 4px;我的日记/divdiv stylebackground-color: rgba(164,12,12,0.3); cursor: pointer; padding: 6px 18px; color: white; margin-left: 4px;我的工具/divdiv stylebackground-color: rgba(164,12,12,0.3); cursor: pointer; padding: 6px 18px; color: white; margin-left: 4px;我的源码/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/divdiv classindex_arc stylemargin: 0px; margin-top: 10px;div stylewidth: calc(25% - 20px); margin: 10px;img srcimages/about1.png stylewidth: 100%;height: 100%; //divdiv stylewidth: calc(75% - 20px); margin: 10px;div stylemargin-bottom: 4px;a href# classblog_link1我的文章标题记录模板/a/divdiva href#码上有你/aa href# stylemargin-left: 10px;30分钟前/aa href# classblog_link stylemargin-left: 10px;源码文章/aspan stylefloat: right;1314 nbsp;nbsp;nbsp;nbsp; 520/span/divdiv styleheight: 48px; text-indent: 20px; line-height: 24px;overflow: hidden;margin-top: 8px;color: #444;不要太在意一些误解你背后的努力别人可能看不到就像你不能同时看到所有人背后的努力一样。人不是向外奔走才是旅行静静坐着思维也是旅行凡是探索、追寻、触及那些不可知的情境不论是风土的或是心灵的都是一种旅行/div/div/div/divdiv stylemargin-top: 200px;/div/div /div/div
footerdiv classfootavatarimg srcimages/photo.jpg classfootphotoul classfootinfop classfnamea href/dancesmile 杨洋/a /pp classfinfo年龄30岁 住址北京市、朝阳区/p/divsection classvisitor/sectiondiv classCopyrightula hrefindex.html博客主页/aa hrefme.html博主信息/aa hrefarticle.html我的文章/aa hrefphoto.html我的相册/aa hreftool.html我的工具/aa hrefcode.html我的源码/aa hrefnote.html我的日记/aa hrefboard.html我的留言板/aa hrefcontact.html联系博主/a/uldiv stylemargin-top: 30px;/divpCopyright copy; 2023 - 2028bra href# target_blank京ICP备2023号-1/a | 个人博客 | xcLeigh | a hrefhttps://blog.csdn.net/weixin_43151418/article/details/134682321 target_blank源码模板/abr/p/div/footerscript typetext/javascript srcplugin/jquery/1.9.1/jquery.min.js/scriptscript typetext/javascript srcplugin/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js/scriptscript$(function(){//幻灯片jQuery(.slider_main .slider).slide({mainCell: .bd ul, titCell: .hd li, trigger: mouseover, effect: leftLoop, autoPlay: true, delayTime: 700, interTime: 2000, pnLoop: true, titOnClassName: active})});/script
/body
/html源码下载
HTML5大作业-精致版个人博客空间模板源码 点击下载 --------------- 业精于勤荒于嬉 --------------- --------------- 行成于思毁于随 --------------- 关注博主 带你实现畅游前后端 加入社区 带你体验马航不孤单 神秘个人简介 带你体验不一样得介绍 为爱表白 为你那个TA体验别致的浪漫惊喜 酷炫邀请函 带你体验高大上得邀请 ① 提供云服务部署有自己的阿里云 ② 提供前端、后端、应用程序、H5、小程序、公众号等相关业务 如合作请联系我期待您的联系。 注本文撰写于CSDN平台,作者xcLeigh所有权归作者所有https://blog.csdn.net/weixin_43151418如果相关下载没有跳转请查看这个地址相关链接没有跳转皆是抄袭本文转载请备注本文原地址。 亲码字不易动动小手欢迎 点赞 ➕ 收藏如 问题请留言评论博主看见后一定及时给您答复 原文地址https://blog.csdn.net/weixin_43151418/article/details/135414356防止抄袭原文地址不可删除
