web前端开发如何输入横线 如何在github上搭建自己的博客_html/css_WEB-ITnose

今天我爱编程网小编整理了web前端开发如何输入横线 如何在github上搭建自己的博客_html/css_WEB-ITnose相关内容，希望能帮助到大家，一起来看下吧。

如何在github上搭建自己的博客_html/css_WEB-ITnose

之前闲暇之余尝试着在github上搭建自己的博客，搭建过程中发现没有自己想象的那么容易，几经波折，好不容易才搭建好了雏形。现在就将在github上构建自己博客的整个流程好好总结一下。
注：本文并非完全原创，在搭建自己博客的时候，我也上网查阅了很多资料，只是网上我所查到的资料或多或少都有这样那样的欠缺。所以，我将这些资料整合在一起，并分享我在构建过程中遇到的问题和解决方法。
另外，在github构建自己博客并非只有一种方法，我整合出来的只是其中的一种。
1.建立一个项目 先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题。
1.1 在自己github右上角上，点击+号按钮，在出现的菜单中选择 New repository
1.2 进入到创建仓库页面，给仓库命名并给于描述之后，点击create repository按钮创建仓库
项目创建完毕。
2.安装Git git是一个免费的、分布式的版本控制工具，或是一个强调了速度快的源代码管理工具。
git的安装地址()
关于git的具体安装步骤可参考
关于git的常用命令可参考-guide/
3.clone项目 本地运行Git，随意选个目录，将刚才创建的项目clone下来。
例：
cd /e/bloggit clone EX.github-io
4.建立配置文件_config.yml 注意：之后建立的所有文档务必使用UTF-8 无 BOM(隐藏字符) 的编码保存
在项目的根目录下打开git命令行界面，输入命令 >> _config.yml 新建文件 _config.yml ，填写 baseurl: /blogdemo ， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径。
例：
baseurl: /EX.github-io
目录结构变为
/EX.github-io |--_config.yml
5.建立主页 在根目录下新建文件 index.html ， 内容如下：
---title: Hello, My Blog---{{ page.title }}
每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线"---"，标记开始和结束，里面每一行设置一种元数据。"title: Hello, My Blog"，表示该文章的标题是"Hello, My Blog"，如果不设置这个值，默认使用嵌入文件名的标题，即"hello world"。
在yaml文件头后面，就是文章的正式内容，{{}}这些是Liquid模板语言,在{{}}里面我们可以使用模板变量。{{ page.title }} 表示“本页面的标题”，因为我们前面设置了title为Hello， My Blog。所以到时候进入到博客首页，title 就会显示相应的文案。
目录结构变成：
/EX.github-io |--_config.yml |-- index.html
6.在_posts内撰写文章，并在首页加入文章列表 现在首页有了，那我们怎么发博文上去呢？
回到项目根目录， 打开git bash，运行 mkdir _posts 新建一个目录，看名字也知道啦，这里存放你所有的文章。
进入_posts目录，新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle 这样。比如 2015-05-05-my_first_article.md，尽量避免空格或者其他乱七八糟的字符，这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink 属性而改变，默认值为 date ，也就是我们刚刚创建的文件的样子，具体的规则可以看这里。
如果你发现了我刚才创建的文件后缀名是 .md ，熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式。对于不熟悉前端的人来说，用markdown可以避开HTML，转而使用更加直观的Markdown语法。如果不熟悉Markdown语法也没关系，可以参见这份Markdown 语法说明，应该说是相当易学，并且在熟悉之后非常易用的。而作为一个前端开发者来讲，我还是更倾向于用html。
回到主题，打开刚才创建的文件，输入如下内容：
---title: 我的第一篇文章---# {{ page.title }}## 目录+ [第一部分](#partI)+ [第二部分](#partII)+ [第三部分](#partIII)----------------------------------## 第一部分 这里是第一部分的内容----------------------------------## 第二部分 这里是第二部分的内容----------------------------------## 第三部分 这里是第三部分的内容{{ page.date|date_to_string }}
这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的, 。使用[text](link)创建超链接，使用 连续多个 - 创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。
页面最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。
OK，第一篇文章就写好了，然后到主页给文章加上入口链接。
打开我们的 index.html 文件，添加内容，变成下面这样：
---title: My Blog---{{ page.title }}{% for post in site.posts %}{{ post.date|date_to_string }} {{ post.title }}{% endfor %}
简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：
{{ page.title }}
另一种则是逻辑命令形式的，像这样：
{% for x in y %} ... {% endfor %}
而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了 post.url 之外，也要注意在前面加上site.url ，原因前面也有提到过，我们正在创建的是 Project Pages 类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url 生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。
现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把 “.” 打成 “。“或者单词拼错之类的。
目录结构变为
/EX.github-io |--_config.yml |-- index.html |-- _posts | |--2015-05-05-my_first_article.md
7.配置SSH keys 为什么要配置ssh keys？因为github和本地代码做推送和拉取时，需要用到ssh的密钥对进行数据加解密，由于github上新建的项目没有添加密钥，所以本地仓库连接不到远程仓库。
那么如何配置ssh keys呢？
7.1 我们需要检查你电脑上现有的ssh key：
cd ~/.ssh
如果提示：No such file or directory 说明你是第一次使用git。
7.2 生成新的ssh keys：
ssh-keygen -t rsa -C "邮件地址@youremail.com"
注意1: 此处的邮箱地址，你可以输入自己的邮箱地址；注意2: 此处的「-C」的是大写的「C」。
按回车后出现
再按一次回车即可。
然后系统会要你输入密码：
Enter passphrase (empty for no passphrase):Enter same passphrase again:
在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
注意：输入密码的时候没有*字样的，你直接输入就可以了。
最后看到这样的界面，就成功设置ssh key了：
7.3 添加ssh key到GitHub
在本机设置SSH Key之后，需要添加到GitHub上，以完成SSH链接的设置。
1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。
2、登录你的GitHub个人主页。点击右上角的 Settings进入设置页面，然后点击SSH Keys页面中的Add SSH key按钮
3、把你本地生成的密钥复制到里面（key文本框中）， 点击 add key 就ok了
8.发布到GitHub 这个时候我们就可以把页面提交到github上了，到根目录打开git命令行界面
8.1 把刚创建的所有文件添加到本地git库
git add -A
8.2 保持良好的习惯，每次提交都提交添加描述
git commit -m "create my blog"
8.3 推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages，GitHub规定，只有该分支中的页面，才会生成网页文件。即GitHub仅会将分支 gh-pages 下的内容进行自动生成操作， 所以本地的 master 分支应推送到远端的 gh-pages 分支
git push origin master:gh-pages
输入账号和密码，账号即你的GitHub账号(不是昵称，是账号名！)，输入密码的时候命令行界面不会有任何的变化，所以在输入密码的时候要谨慎小心。之后按回车即可。
好了，那现在我们要如何查看我们的博客页面呢。打开GitHub，进入到自己博客的仓库，右侧菜单栏有一个setting选项
点击进入之后会看到这个页面
GitHub Pages中显示的链接就是你的博客地址啦。
9.增加模板套装_layouts 其实到第8步博客的构建就已经完成了，只是没有样式的博客实在太难看。GitHub Pages有提供一些主题给我们使用。但作为一个前端开发者，肯定更希望自己给自己的博客布局和创建样式。
回到项目根目录，新建文件夹 _layouts，顾名思义，“布局”是也。在 _layouts 中新建一个最基本的布局文件，姑且命名为default.html好了：
{{ page.title }}{{ content }}
首先，charset=utf-8让我们一劳永逸地解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个 {{ content }} 标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。
然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：
---title: xxoolayout: default.html---
我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件则使用l_post模板，等等等等，请随意发挥。但始终记得加上 {{ content }} 标签
目录结构变为
/EX.github-io |--_config.yml |-- index.html |-- _posts | |--2015-05-05-my_first_article.md |-- _layouts | |--default.html
再次推送到GitHub即可。
这样，我们就已经构建好了一个最简单的blog。之后你们就可以开始为自己的博客添砖加瓦了。
9.问题汇总 9.1 推送到GitHub之后个人主页的contributions没有提交记录
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。
如何查看自己的名称和邮箱呢。回到GitHub个人主页，点击右上角的setting图标

进入之后Personal settings菜单栏下的Profile页面中，Name即为你的名字
但邮箱不是Name下面的Public email，很多人在这里被误导了。邮箱是Emails页面中的邮箱地址

知道了名字和邮箱之后，打开git命令行界面，通过下面的命令行来设置你的名字和邮箱
git config --global user.name "cnfeat"//用户名git config --global user.email "cnfeat@gmail.com"//填写自己的邮箱
设置正确之后，提交记录就都恢复了。不仅仅你以后提交的都会出现在提交记录中，你以前提交的也会恢复并出现在记录中。
9.1 每次提交都要求你输入账号跟密码
原因是我们在clone分支时使用了 HTTPS 的地址，
HTTPS 的地址是做什么用的呢？其实它主要是用在一些防火墙或者代理服务器设置比较严格的情况下的，比如有些公司是禁止使用 SSH 连接外网，那么在这种情况下要想使用 Git 的话，就只能用 HTTPS 的方式了。
使用 HTTPS 的方式，也有储存密码的方式，但我们首推的方式是切换到 SSH，如果你的网络环境支持的话。
回到你博客的根目录。打开git命令行界面，输入
git remote set-url 你博客的ssh url
如果你不知道你博客的ssh url，打开你的博客项目，右下角选择SSH，然后复制框里的url就行了
之后再提交就不会要求你输入账号密码了。
9.3 页面调试不方便
如果我们要给我们的博客布局或设置样式神马的，我们是否每次都要把代码写好然后推送到GitHub上，再打开自己的博客地址，看看布局有没有什么问题。如果有的话再改代码，再提交，再查看呢？
这样效率岂不是很低，有没有能够本地调试GitHub Pages上的页面的工具呢？
答案是肯定的。我用的是Jekyll。它的官网就有完整的教程，使用起来非常的简便。
10.参考资料 1._with_jekyll.html
2.
3.-05-11-how-to-build-a-blog/
4.-open.com/lib/view/open1366080269265.html

几个免费的web前端开发工具

本文主要和大家介绍十个免费的web前端开发工具详细整理的相关资料,希望通过本文大家能够理解使用免费web开发工具，需要的朋友可以参考下，希望能帮助到大家。

十个免费的web前端开发工具
网络技术发展迅速，部分技术难以保持
每年都有新的工具出现，这同时也意味着许多旧的工具倒在了新技术的发展之路上。
前端开发占据了web很大一部分，而且也成为了一种职业路径。如果你将前端开发当做自己的又一新技术或者作为一个可发展事业，你需要为这个工作准备合适的工具。
我将要分享我的十大现代必备的前端开发工具。它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站。
1. Grid Guide
特性: 快速生成栅格
首先我要介绍的是Grid.Guide,一款免费的网页应用，能让你在线生成栅格。这个小巧的应用能让你通过自定义间距和列数建立你自己的栅格方案。
首先输入你的网站的首选宽度和列数总数，然后Grid Guide就会生成一些选项供你选择。
你甚至可以将每种栅格方案的下载为PNG图片，用于导入Photoshop或Illustrator。这使你能更加轻松的创建栅格，而不必手动计算或者依赖栅格库。
2. Foundation
特性: 一款类似Bootstrap的框架
我不得不承认大多数前端开发者更喜欢使用Bootstrap框架。但是在But Zurb的 Foundation最近全面更新之后，我认为它值得受到大家的关注。
Foundation框架跟Bootstrap一样，有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单，所以它不像一般的框架一样，更加容易去自定义布局。
而且新的Foundation还有一个姐妹框架叫做Foundation for Email。这是一个专门为电子邮件界面开发而使用的框架。
这两种Foundation框架都十分棒而且它们由Zurb的团队进行维护更新。
3. CodePen
特性: 实现新创意代码
大多数开发者都知道使用 cloud IDEs做前端开发十分轻便。通过它你可以在任何电脑上写代码，保存你的项目到云端上且分享。
但即使有这么多种选择，我不得不说CodePen是最棒的。它启动迅速，十分可靠，易于启动且当你改动代码时会自动更新。
更不用说它还能支持几乎所有你能想到的库。你可以通过预置HTML模板语言例如Haml或Slim，使用LESS或SASS编译代码。而且CodePen允许你添加外部资源，因此你可以使用像cdnjs的网站去载入其他相关的库。
无疑地这是最棒的专为写代码和实现新想法的开发工具。虽说也有一些类似的工具，但在我看来没有比CodePen更好的了。
4. Unheap
特性: 最新的jQuery插件库
去寻找一个在策划列表中的最新JS插件是很困难的。大多数情况下你只能浏览Github上比较热门的插件或在Twitter上查看一些热门项目。
但是，有了例如 Unheap 等这类网站，你可以轻松快速的找到最新的jQuery插件。它们有导航、表单、网页媒体和其他分类等各种类型的插件。
它基本上是一个拥有着网络上所有最佳的jQuery插件的存储库，而且它经常更新，所以你总能找到各种新的插件。
5. LivePage
特性: 自动刷新浏览器
一些浏览器插件是你用于开发的最佳工具。LivePage 就是一种免费的谷歌扩展插件，能在你对本地文件做出修改后自动刷新你的页面。
这意味着你可以在本地编辑你的HTML/CSS/JS文件，而浏览器会在你每次保件时自动刷新。通常你需要花费一秒钟去刷新，但这样子操作许多次后你将会发现这有多么烦人。
LivePage在火狐上也有相同的插件叫做LiveReload。
6. Fullpage Screen Capture
特性: 捕获全屏
我一直使用这个扩展插件而且它是我设计布局时最喜欢用的工具之一。 Fullpage Screen Capture 可以让你截取整个网页并存为PNG图片。
你只需简单的点击Chrome扩展面板中的按钮，它就会自动创建整个网页的完整快照，并将其拼接成一幅图像。你可以用它来研究整体设计，这对你设计网站很有帮助。
7. WhatFont
特性: 在网络上找到最棒的字体
排版对网页设计而言是一个巨大的挑战，而且并不是一件很容易的事。要找到合适的字体是很累人的，但是使用例如WhatFont 的扩展插件，可以减轻你在搜索时的痛苦。
你只需添加WhatFont到你的谷歌浏览器，每当你看到网页上某一种字体时，点击它并悬停，就会给你所有的包括字体样式、大小等方案，甚至在可服务时给出下载地址（例如TypeKit或Webfonts）。
8. Node/npm
特性: 命令行
Node很显然改变了web开发的面貌。它将JavaScript传递给后台，并返回给我们npm，一种发展最迅速的包管理器。
这几乎是必然的，并且是有着充分的理由。在当前，所有的前端开发者都应该学习命令行，因为现在这是一种在前端工作流中必要的工具。而且npm也是这个过程的一部分，它也完全由命令行管理。
你可以使用新的包，或升级旧的包。通过 npm scripts你也能了解到你还可以做什么。
如果你之前从未尝试过npm，那么我强烈建议你开始涉足这一块，看看它哪里令人惊叹。
9. Mobile Speed Tester
特性: 手机监测
谷歌懂得提供优质的用户体验，他们总是尝试帮助站长们建立更好的网站。谷歌的一个最佳的工具叫Mobile Speed Tester，能测试任何网站在电脑和手机上的响应速度。
它同时衡量访问速度和用户体验，以此来判定该网站是否对手机友好。
它不会生成详细的报告，也不足以成为usability testing的替代品。但这样的一个免费工具能给你好的反馈，让你选择更加正确的方法。
10. Responsive Test
特性: 测试站点响应速度
最后但肯定同样重要的是一个叫 Responsive Test的网页应用。这是一个发布在GitHub上的开源项目，可以让你测试任何网站的在你的浏览器上的响应是否正常。
您只需输入一个URL并将窗口拖到您要测试的任何宽度。而且还有小按钮可以切换为iPhone、iPad和通用电脑的预定义大小方案。
这里也有另外一种 由Matt Kersley开发的相似工具，但是它不能调节大小。相反的，你只能使用几种预定义大小的窗口用于测试。
这两个都是优秀的工具，使用它们远比来回拖动窗口要简单得多。
到这里为止我的TOP10列表已经结束了！我希望这个列表能被证实有用，同时我当然也希望至少有一种在这列表上的工具能帮到大家。
由于前段开发发展十分迅速，所以你可以期望将来会有更多更厉害的工具出现。

怎样在网页中设置下划线？

一般有两种方法：

一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。

实例演示如下：

1、实例代码如下：

此时页面效果如下：

2、修改第1步中的txt样式，加入text-decoration:underline。

此时页面效果如下，出现了下划线。

二、通过设置div的border实现效果：

实例演示如下：

在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：

此时页面效果如下： 我爱编程网

以上就是web前端开发如何输入横线 如何在github上搭建自己的博客_html/css_WEB-ITnose全部内容，更多相关信息，敬请关注我爱编程网。