个人的博客搭建(持续更新)
最近的CSDN的博客阅读体验非常的糟糕,恰好自己也一直想搭建一个属于自己的网站,放下自己的技术心得情感体会,从零开始慢慢搭建项目磨练技术,以后也把自己新习得的技术放在里面增加自己的学习乐趣。
一,搭建基本的项目模板为项目创建一个文件夹及一些基本文件,为此用到HTML5 Boilerplate(H5BP)框架搭建,然后用Bootstrap快速搭建页面。
- 删除不必要的样板文件
- 理解.htaccess文件
- 更新必要的样板文件
- 更新站点图标
我们用LESS创建自己的CSS文件所以删除不必要的CSS文件,删除CHANGELOG.md,CONTRIBUTING.md,doc文件及其内容。
理解.htaccess文件,这个文件内容不一定全部有用,这取决于站点需求和主机设置,不过这个文件主要用处是保证站点性能最优,所以认真对待它。
我们需要更新一些需要更新的文件,.humans.txt-记载贡献者,H5BP,Bootstrap的还有其他的贡献者。LICENSE.md-在H5BP许可之上更新其他的许可,比如Bootstrap之类重点库的许可信息。README.md-更新这个文件,加上自己的项目说明。
最后用自己的项目图标换下默认的图标,apple-touch-icon-precomposed.png触摸设备的站点图标,为确保触摸屏的最佳显示务必要144px见方的。favicon.ico:32px见方的图标文件。
加入Bootstrap库到项目中
Bootstrap的全部font文件,但是随着CDN的增加为网站缓存静态资源,我们有时会被拒绝执行WEB字体文件所以我们额外添加一个.htaccess文件,这个文件有解决这个问题的代码,我们需要的是即使网站根目录下没有.htaccess文件也不会出现字体问题,在font文件下创建.htaccess文件添加代码如下:
<FilesMatch "\.(ttf|otf|eot|woff)$"><IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule> </FilesMatch>
加入Javascript文件,H5BP其中的Modernizr垫片是为了IE8支持HTLML5的分区section元素,在js目录下创建bootstrap文件放入所有的js插件,当然为了更好的管理H5BP里有一个存放所有插件的文件以减少http的请求,加快站点加载速度,复制代码到plugins.js中,比如Bootstrap中的大文件bootstrap.min.js的代码到文件中并加上注释
接下来复制全部的LESS文件,因为我们的前期主力是H5BP+Bootstrap+LESS所以css文件暂时不考虑,下面是完成了的模板结构
二,搭建HTML模板
<header role="banner"><nav role="navigation" class="navbar navbar-static-top navbar-default"><div class="container"><!-- 首部头部 --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">Project name</a></div><!-- 首部导航 --><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="index.html">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul> </div></div></nav></header><main role="main"><h1>Main Heading</h1><p>Content specigic to this page goes here.</p></main><footer role="contentinfo"><p><small>Copyright © Company Name</small></p></footer>
构建出主体的框架header头部,main主体,footer脚部。同时编译bootstrap.less文件到css文件里。这里我选择的是WinLess软件来编译,这里的role为HTML5中的语义标签
手机端:
二,完成基本的页面布局
对header,和footer进行布局,然后根据需求对main进行布局
完成了头部导航区的布局,和footer的布局,至于main的布局我还没有想好,当想好了再出一个设计图,然后根据这个布局。还有项目图标暂时就用Bootstrap的logo代替吧
尤其注意的是我这里的导航区是fixed的布局所以为了不影响main区域的显示就要在main设置一个margin-top,所以css代码为:
/* --------header----------*/ /*导航固定*/ header{position: fixed; top: 0; left: 0; right: 0; z-index: 999; min-height: 60px; } /*------------------main--------------*/ main{margin-top: 60px; }
转载于:https://www.cnblogs.com/404--NotFound/p/10145379.html
个人的博客搭建(持续更新)相关推荐
- 算法工程师必看的优秀博客【持续更新。。。】
这个是我在自学的过程当中看到的优秀博客的汇总,会分类给大家推荐,主要包含机器学习.深度学习.强化学习.数据挖掘.NLP.搜索.推荐等等等. 是会持续更新的哦,记得随时回来看看,?- 机器学习 [❗️推 ...
- 产品经理值得收藏的博客(持续更新)
收集整理国内外各平台适合产品经理阅读的博客/公众号,会介绍作者背景.博客的风格和内容,持续补充 国内:-------------------------------------- 刘未鹏:微软工程师, ...
- 【Hexo博客搭建】将其部署到GitHub Pages(三):怎么写作以及更新?
简介: 本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 应该怎么做,跟着此系列文章最终可以获得自己的静态博客网站.流程很长,分成不同的篇幅,此为本系列 ...
- Hexo个人博客搭建教程
Hexo个人博客搭建教程 1 搭建前准备 1.1 环境配置 需要安装git.node,最后安装hexo 1.1.1 安装Git: 首先看电脑是否已经安装了git $ git 若提示not founde ...
- iOS开源资源汇总(完整项目,三方,博客,视频)长期更新
下边都学会就大神了: 声明:都是网上搜集的,能标明出处的都标了.别只搜集而不看,与君共勉.. 先看完整项目完整App@HackerNews-React-Native用 React Native 完成的 ...
- hexo+GitHub博客搭建实战
我的个人博客链接:wangwlj.com 想要搭建类似的博客吗? 如果是,那就赶快点进来吧-- 手把手教学,现在开始!! PS: 将会在个人博客持续更新,本文链接:hexo+GitHub博客搭建实战. ...
- Hexo个人博客搭建历程
环境配置 Github的创建和配置 安装Git 安装Node.js 安装Hexo Hexo主题设置 主题1:stun 安装 使用 更新 本地效果 主题优化 主题2:black-blue 安装 使用 更 ...
- VuePress博客搭建笔记(一)简单上手
前奏较长,不墨迹的可直接跳转至 04.开始搭建博客 或者 博客预览 00.契子 偶尔的整理洁癖 平常有收藏+书签的习惯 github私有仓库免费开放 翻看博文 : 作为软件工程师,如何进行知识管理 0 ...
- 【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布
文章目录 一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建 三.Hexo博客搭建 3.1 基 ...
- hexo博客搭建及主题优化(一)
个人博客 个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客 介 ...
最新文章
- CNN加速器设计新突破,逼近能效理论极限
- Android非空格式验证框架Validation的使用---第三方库学习笔记(四)
- C#期末考试题,图书系统
- C#中泛型在Class上的实现
- 高级GIT教程-如何使用GIT调试代码?
- 分式化简结果要求_初二数学期末复习,分式考点归纳,考点较多,解答要谨慎...
- python 模板注入_SSTI模板注入
- 90 后美女学霸:出身清华姚班,成斯坦福 AI 实验室负责人高徒!
- 三菱触摸屏怎么改时间_三菱触摸屏密码设置
- C语言实现多人坦克大战
- 股票的收益率计算公式
- Xib中设置view的BorderColor 及 ShadowColor
- Android逆向学习(二):游戏开发物语反编译
- 捷俊通无人值守自动称重过磅智能系统智能地磅
- Excel2010数据透视表1
- 国际快递顺丰API接口接入教程代码示例
- JAVA byte[]数组转long
- 网易互娱AI Lab视频动捕技术iCap被CVPR 2022接收!
- 2016域控服务器搭建,Windows Server 2016 辅助域控制器搭建
- google输入法地址