整体效果图
页眉部分
- 代码
<!doctype html>
<!-- Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet"type="text/css" href="./css/index.css"/>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar ">
<div class="container-fluid navbar-fixed-top navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="demo1.html">博客首页<span class="sr-only">(current)</span></a></li>
<li class="active"><a href="document.html">博文列表</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">下载中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">下载工具</a></li>
<li><a href="#">代码类</a></li>
<li><a href="#">学习工具</a></li>
<li><a href="#">学习资料</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">前端开发</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">bootstrap 建站</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索内容....">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
*运行效果
主体部分
- 代码
<div class="col-md-9 bg-success">
<div class="blog-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">最新推荐</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">本周热门</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">本月热门</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">所有热门</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="list-group">
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 如何建立个人博客
</h4>
<p class="list-group-item-text">想必很多人都想建立一个，属于自己的个人博客，把自己的一些学习的经验和经历，通过互联网的形式来分享给别人。通过分享与网友进行互动，让更多的人了解和认识你，并且树立自己在互联网上的个人品牌，其实这就是一种“自媒体”。那么我们怎么去建立自己的自媒体博客呢？我认为：首先得先明白建立一个博客的流程是什么？只有先了解这套流程，我们才能做出自己满意的个人博客。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 对网站域名的选择
</h4>
<p class="list-group-item-text">
域名：一般会选择比较正规点的域名商购买，比如：万网、西部数码...（一年也才几十块钱）。考虑到我们的域名是要续费的，如果说你买的域是那种不正规的域名商，哪天域名商倒闭了，那么我的域名就不能使用了。还有一点值得注意的是:域名的选择最好“见名知意”越短越好。一般会用自己的名字来命名。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 对网站空间的选择
</h4>
<p class="list-group-item-text"空间：分为国内空间和国外空间。
1、国内空间：需要备案网站才能上线，但是速度比国外空间要快一点，并且也稳定。
2、国外空间：指（除大陆外的空间）则不需要备案，可以直接使用。
一般我们对空间的选择有两点：第一、稳定性，第二、性价比。在这里我推荐大家可以去阿里云上去买服务器（因为现在对于新用户优惠大，价格便宜，服务稳定），想当年买个一年的服务器最便宜也要将近600块，现在都可以买二年了。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 选择网站后台系统
</h4>
<p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile"><div class="list-group">
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 策划和设计网站效果图
</h4>
<p class="list-group-item-text">很多人可能会说：既然那些博客系统，都有现成的主题，那还需要自己亲自DIY设计博客的效果图吗？那是因为网上的主题鱼龙混杂的，毕竟每个人的审美观不一样，需求也不一样！所以说：想做一个自己喜欢风格的网站，还是需要自己亲自动手去设计。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 选择网站后台系统
</h4>
<p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 制作前台页面
</h4>
<p class="list-group-item-text">根据前面自己设计的效果图，然后把它制作成html的静态页面模板。方便和后台的结合，实现真正意义的动态网站。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 制作动态网站
</h4>
<p class="list-group-item-text">可能有些新手就会问了，网站还分静态网站和动态网站呀?为什么要实现动态网站呢？因为动态网站可以实现静态网站实现不了的功能，比如说：对网站文章的发布、图片的更新、留言等功能。
可能有同学会疑惑，我写好网页静态页面，但是我还是不清楚这个网站怎么做呀！别急，你所写好的前端html网页，只是后端语言中的模板（用来渲染数据的页面）。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
</div></div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="list-group">
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 测试以及上线
</h4>
<p class="list-group-item-text">在本地搭建服务器，网站上线前先测试网站有没有什么BUG。如没有什么问题，可以将本地网站解压打包，使用FTP工具上传到服务器空间。
值得注意的是：先得把网站的数据库导入出来，然后在空间服务器还原。不然就会出错误哟！
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 手机网站开发的特点
</h4>
<p class="list-group-item-text">B手机屏幕一般在240*320以上的称之为大屏幕手机。因为收的CPU频率低，不能像电脑一样快的浏览。做手机网站的时候像JS等要少用。手机上网速度慢，联通的3G网络还可以，但我都是喜欢支持中国移动我们国家自行研发的3G上网技术，浏览器众多，兼容性差。一不小心就显示不出来。
了解了手机上功能点，我们可以确定手机网站制作原则。
1.网站要简洁，功能能不要的就删了。
2.图片要少用，尽量用汉字，在高昂的网络资费中，有的用户会把图片的显示禁止了。以减免流量。
3.网站尽可能的小点，页面太长则不适用浏览，用户体验不好，太宽手机打开显示不全，或者显示不工整。
4.现在的手机大屏的，小屏的都要，所以在设计的时候都要考虑到。
5.由于手机网站屏幕小的特点，用户在浏览的时候要尽量快的让用户查到自己需要的信息，因为手机屏幕的小用户寻找起来比价吃力，长时间的寻找，会给你的网站被大大的减分的。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 写网站建设方案（也就是网站开发流程）
</h4>
<p class="list-group-item-text">
手机网站制作与WEB网站制作一样,需要从策划,草图,制作,等几方面来做手机网站.客户把手机网站制作需求单写好、首页样版设计风格确认、手机网站制作内容规划、业务流程根据wap网站的整体情况来规划.手机网站制作流程可从以下几点来做：
1、分析建wap网站目的（建站要求），建立wap网站架构，时间允许的话编写具体的《wap网站建设方案》；
2、根据架构（或者《网站建设方案》）完成初稿设计：
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> wap首页风格
</h4>
<p class="list-group-item-text">
这是网站的前台设计，属于美工的范畴；数据库的前台页面也要同时设计制作！
3、审核确认前台设计后进行整体wap网站数据库的开发制作；
4、前后台里链接；
5、上传至空间，测试数据库！
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="list-group">
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading">网站建设方案
</h4>
<p class="list-group-item-text">在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在什么样的硬件环境；需要多少人，多少时间；需要遵循的规则和标准有哪些。同时需要写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；如果有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。
在总体设计出来后，一般需要给客户一个网站建设方案。很多建站公司在接洽业务时就被客户要求提供方案
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> SEO的核心到底是什么
</h4>
<p class="list-group-item-text"> 有句话我很喜欢：“很多人问SEO的核心到底是什么？我曾经用了很长的时间去思考这个问题，最后我发现SEO的核心依然是人。虽然表面上是和搜索引擎打交道，但其实我们是和搜索关键词的用户打交道。因此，我们只有学会分析用户的心理和需求，这才是SEO的根本所在。”
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 官方文档中文版
</h4>
<p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
下载 Bootstrap为所有开发者、所有应用场景而设计。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading"> 官方文档中文版
</h4>
<p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
下载 Bootstrap为所有开发者、所有应用场景而设计。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
</p>
<div class="text-muted"> <small>SHINE</small><small>发布于 2017年3月18 19时24分</small> <small>阅读 1980</small></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">博客模板分类</div>
<ul class="list-group">
<a class="list-group-item">个人博客<span class="badge ">14</span>
</a>
<a class="list-group-item">企业网站<span class="badge">14</span>
</a>
<a class="list-group-item">门户咨询<span class="badge">14</span>
</a>
<a class="list-group-item">商城网站<span class="badge">14</span>
</a>
<a class="list-group-item">品牌设计<span class="badge">14</span>
</a>
<a class="list-group-item">微信小程序<span class="badge">14</span>
</a>
<a class="list-group-item">分销系统<span class="badge">14</span>
</a>
<a class="list-group-item">微店小站<span class="badge">14</span>
</a>
</ul>
</div>
</div>
</div>
</div>
- 运行效果
页脚部分
- 代码
- 运行效果
3508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
