个人的博客搭建(持续更新)

最近的CSDN的博客阅读体验非常的糟糕,恰好自己也一直想搭建一个属于自己的网站,放下自己的技术心得情感体会,从零开始慢慢搭建项目磨练技术,以后也把自己新习得的技术放在里面增加自己的学习乐趣。

一,搭建基本的项目模板为项目创建一个文件夹及一些基本文件,为此用到HTML5 Boilerplate(H5BP)框架搭建,然后用Bootstrap快速搭建页面。

  1. 删除不必要的样板文件
  2. 理解.htaccess文件
  3. 更新必要的样板文件
  4. 更新站点图标

我们用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 &copy; 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

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

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

相关文章

用Java实现图片验证码功能

一、什么是图片验证码&#xff1f; 可以参考下面这张图&#xff1a; 我们在一些网站注册的时候&#xff0c;经常需要填写以上图片的信息。 1、图片生成实体类&#xff1a; 1 package com.hexianwei.graphic;2 3 import java.awt.Color;4 import java.awt.Font;5 import java.aw…

nacos配置刷新失败导致的cpu上升和频繁重启,nacos配置中心源码解析

大家好&#xff0c;我是烤鸭&#xff1a; nacos 版本 1.3.2&#xff0c;先说下结论&#xff0c;频繁重启的原因确实没有找到&#xff0c;跟nacos有关&#xff0c;日志没有保留多少&#xff0c;只能从源码找下头绪(出问题的版本 server用的是 nacos 1.1&#xff0c;nacos-client…

nova— 计算服务

一、nova介绍&#xff1a; Nova 是 OpenStack 最核心的服务&#xff0c;负责维护和管理云环境的计算资源。OpenStack 作为 IaaS 的云操作系统&#xff0c;虚拟机生命周期管理也就是通过 Nova 来实现的。用途与功能 :1) 实例生命周期管理2) 管理计算资源3) 网络和认证管理4)REST…

springcloud gateway 自定义 accesslog elk

大家好&#xff0c;我是烤鸭&#xff1a; ​ 最近用 springcloud gateway 时&#xff0c;想使用类似 logback-access的功能&#xff0c;用来做数据统计和图表绘制等等&#xff0c;发现没有类似的功能&#xff0c;只能自己开发了。 环境&#xff1a; <dependency><gr…

jenkins发布docker项目 harbor

大家好&#xff0c;我是烤鸭&#xff1a; ​ jenkins 部署k8s 项目还是比较流畅的&#xff0c;本身建立多流水线项目&#xff0c;在项目中添加jenkinsfile就好了&#xff0c;镜像需要额外的参数&#xff0c;还可以添加dokcerfile文件。由于我现在的问题是不能够修改原有的项…

saltstack部署java应用失败无日志——CICD 部署

大家好&#xff0c;我是烤鸭&#xff1a; ​   最近在搞公司的CICD&#xff0c;遇到各种问题。复盘总结一下。 CICD 架构 这篇文章写得很详细&#xff0c;可以看一下 https://linux.cn/article-9926-1.html 而这里只是结合现在的情况分析下&#xff1a; CI 持续集成&…

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配?

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配&#xff1f; 有选择器&#xff1a; div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合&#xff0c;然后上一层&#xff0c;对每一个集合中的元素&#xff0c;如果元素的 parent i…

idea 插件开发 扫描sqlserver

大家好&#xff0c;我是烤鸭&#xff1a; 最近在搞sqlserver 升级 mysql/tidb&#xff0c;发现代码里的sql有很多地方需要改&#xff0c;想着能不能开发一个省点力。 官方的迁移指南&#xff1a; https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 方案…

VUE之文字跑马灯效果

1.效果演示 2.相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/vue-2.4.0.js"></script> </head> <body> <div id&…

PMP 错题记录

PMP 错题记录 大家好&#xff0c;我是烤鸭&#xff1a; 这次的PMP错题集本来想考前发&#xff0c;临时能看看&#xff0c;还是耽搁了&#xff0c;补发一下吧&#xff0c;不知道以后用不用的上&#xff0c;据说改版了&#xff0c;可能也用不上了。 变更题错题记录 9、一项…

nginx 配置 http/2(h2) 和 http 在同一端口的问题

nginx 配置 http/2(h2) 和 http 在同一端口的问题 大家好&#xff0c;我是烤鸭&#xff1a; ​ 这个完全是个采坑记录了。 场景说明 由于这边有个需求想加个支持 grpc 方式转发的域名。 正常的二级域名都是映射到80端口&#xff0c;所以也没想太多&#xff0c;按照这个…

FutureTask isDone 返回 false

大家好&#xff0c;我是烤鸭&#xff1a; ​ 今天看一下 FutureTask源码。好吧&#xff0c;其实遇到问题了&#xff0c;哪里不会点哪里。 伪代码 package src.executor;import org.springframework.scheduling.annotation.AsyncResult; import org.springframework.sche…

为什么MySQL数据库要用B+树存储索引

A&#xff1a;为什么MySQL数据库要用B树存储索引&#xff1f; Hash的查找速度为O(1)&#xff0c;而树的查找速度为O(log2n)&#xff0c;为什么不用Hash作为数据库的存储索引呢&#xff1f; 树的话&#xff0c;无非就是前中后序遍历、二叉树、二叉搜索树、平衡二叉树&#xff0c…

lettuce 配置域名 dns 切换

大家好&#xff0c;我是烤鸭&#xff1a; 如果你也有类似的困扰&#xff0c;运维告诉你&#xff0c;redis连接配置域名&#xff0c;这样出问题了&#xff0c;直接改dns地址就行&#xff0c;不需要重启服务。。。梦想是美好的&#xff0c;现实是残酷的。如果你使用的是 let…

zuul 1.x 和gateway性能对比

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享下 zuul和gateway 网关压测。 环境&#xff1a; windows 10 jdk 8 压测工具&#xff1a; wrk jmeter 数据对比 场景是仅单独转发&#xff0c;接口 Thread.sleep(50) jmeter 12 线程&#xff0c;30s zuul&#xf…

redisson 大量ping操作,导致 tps过高

大家好&#xff0c;我是烤鸭&#xff1a; 这个问题有点奇怪&#xff0c;新服务上线&#xff0c;redis tps居高不下&#xff0c;还都是ping命令。 环境&#xff1a; 服务 &#xff1a; 280台&#xff0c;redis集群&#xff1a;12主24从 问题 由于服务刚上线&#xff0c;还没…

PMP 学习总结

大家好&#xff0c;我是烤鸭&#xff1a; PMP终于考过了。成绩出了一个月了&#xff0c;一直想写一篇总结但没下笔&#xff0c;主要原因最近有点忙(太懒了)。考试的内容是基于第6版的。 晒个证书 证书上没写等级&#xff0c;一般都宣称5A过(其实我是 4A1T过的)。 学习过程…

处理器映射器(HandlerMapping)及处理器适配器(HandlerAdapter)详解(一)

非注解 处理器映射器 和 处理器适配器 处理器映射器&#xff1a; 第一种: BeanNameUrlHandlerMapping <!-- 配置Handler --> <bean id"userController1" name"/queryUsers.action" class"com.bjxb.ssm.controller.UserController" />…

Gateway Sentinel 做网关降级/流控,转发header和cookie

大家好&#xff0c;我是烤鸭&#xff1a; Springcloud Gateway 使用 Sentinel 流量控制。 环境 springcloud-gateway的网关应用&#xff0c;springboot的服务&#xff0c;nacos作为注册中心 sentinel-dashboard-1.8.2 最新版下载地址&#xff1a; https://github.com/aliba…

django后台数据管理admin设置代码

新建admin用户 createsuperuser 设定好用户名&#xff0c;邮箱&#xff0c;密码 设置setting LANGUAGE_CODE zh-hansTIME_ZONE Asia/ShanghaiUSE_I18N TrueUSE_L10N TrueUSE_TZ False 在写好的users的app下修改admin.py # -*- coding: utf-8 -*- from __future__ import u…