Bootstrap仿制CSDN用户主页页面
资源下载链接：https://download.csdn.net/download/qq_41505957/86245535
学习完了Bootstrap，想去从头开始实现一个页面，仿制一下CSDN写一个页面
首先，放出最终结果，没有csdn的好看，非常的简陋
页面分析
首先在写页面之前，需要对页面进行分析，使用栅格系统，把页面分为哪几块，之后开发页面就会更加的简单。
总体上页面可以分为三个部分
- 页眉
- 主体
- 页脚
其中页眉部分是一个导航栏，
主体部分，可以分为三行，最上面一行是一张图片，第二行是一些信息，第三行是文章内容等，第三行又可以分为左右两部分，左边是一些小模块，右边是文章列表
最后是页脚，页脚是一些文字，比较简单
页眉部分
页眉部分时一个导航栏，我们可以复制bootstrap官网上的导航栏，再进行一点修改即可
主体部分
主体部分分三行来写
首先是一张图片，用img标签就行了，
第二行和第三行是左右留白的，使用container类，第二行可以分为三个部分，使用bootstrap的栅格布局2，8，2布局，最左边是一个头像，用img-circle类实现圆形头像，中间是几行字，比较简单，最右边是一个按钮和一个图标
第三行，分为左右两部分，可以让左边占3个格子，右边占9个格子，左边就是几个模块加点图片和字就行
右边上面是一个导航栏，下面是文章列表，修改一下下字体的大小可以实现标题和内容的效果， 按钮可以使用btn-danger和btn-primary
页脚部分
页脚部分是三行字，复制一下设置居中，设置一下字体
总的来说就是一些模块套模块，对于后端开发来说，bootstrap可以开发一些不错的页面。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
#logo {
width: 80px;
height: 44px;
}
.blackText {
color: black;
}
/*li {*/
/* margin: 0px;*/
/* padding: 0px;*/
/*}*/
.search-input{
margin-top: 10px;
}
#tx1{
width: 32px;
height: 32px;
margin-top: 10px;
}
#release{
margin-top: 10px;
margin-left: 2px;
}
#background-img{
width: 100%;
}
#body{
background-color: lightgray;
}
#tx2{
width: 94px;
height: 94px;
margin-left: 15px;
}
.body-header{
background-color: white;
}
#body1{
margin-top: 5px;
margin-bottom: 5px;
}
#guanzhu{
margin-top: 20px;
}
.text1{
margin-top: 5px;
margin-bottom: 5px;
}
#yuanli{
width: 71px;
height: 19px;
}
.modular{
padding: 10px;
background-color: white;
margin-bottom: 5px;
}
.body-right{
margin-left: 5px;
background-color: white;
padding: 10px;
}
.body-padding{
background-color: lightgray;
padding-right: 10px;
padding-left: 0px;
}
.alert{
margin-bottom: 0px;
}
.cj{
border-bottom: 1px solid lightgray;
}
.imgdz{
height: 22px;
width: 22px;
margin-left: 20px;
margin-right: 5px;
}
.tit{
padding-top: 10px;
padding-bottom: 10px;
}
.btn-gr{
padding-left: 20px;
padding-top: 10px;
}
.foot{
margin: 10px;
text-align: center;
font-size:8px;
}
</style>
</head>
<body>
<!--页眉部分-->
<header>
<nav class="navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-sm-5">
<ul class="nav navbar-nav">
<li><img id="logo" src="img/logo.png"></li>
<li class="active"><a href="#" class="blackText">博客 </a></li>
<li><a href="#" class="blackText">下载·课程</a></li>
<li><a href="#" class="blackText">学习</a></li>
<li><a href="#" class="blackText">社区</a></li>
<li><a href="#" class="blackText">认证</a></li>
<li><a href="#" class="blackText">MyGitHub</a></li>
<li><a href="#" class="blackText">云服务</a></li>
</ul>
</div>
<div class="col-sm-3 search-input">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">搜索</button>
</span>
</div>
</div>
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li><img class="img-circle" id="tx1" src="img/头像1.jpg"></li>
<li><a href="#" class="blackText">会员中心</a></li>
<li><a href="#" class="blackText">足迹</a></li>
<li><a href="#" class="blackText">动态</a></li>
<li><a href="#" class="blackText">消息</a></li>
<li><a href="#" class="blackText">创作中心</a></li>
<span class="input-group-btn">
<button class="btn btn-danger " type="button" id="release">发布
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
</button>
</span>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<!--主体部分-->
<div class="container-fluid " id="body">
<img src="img/背景.png" id="background-img">
<div class="container" id="body1">
<div class="body-header row">
<div class="col-sm-2 body-header">
<img src="img/1_lzyws739307453.png" class="img-circle" id="tx2">
</div>
<div class="col-sm-8 body-header">
<h3>ityanger</h3>
<div class="text1">2,995,766 被访问 | 811原创 | 1,723排名 | 9,398粉丝 | 472铁粉</div>
<div class="text1">个人简介：大道至简，知易行难 </div>
<div class="text1"><a>查看详细资料</a> <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></div>
</div>
<div class="col-sm-2 body-header row " id="guanzhu">
<span class="input-group-btn">
<button class="btn " type="button" >已关注</button>
<button class="btn " type="button" >
<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 body-padding">
<div class="modular">
<div class="row ">
<div class="col-sm-3"><img src="img/原力.png" id="yuanli"></div>
<div class="col-sm-5"><p>7</p></div>
<div class="col-sm-3"><button type="button" class="btn btn-default btn-xs">领奖
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
</button></div>
</div>
<div class="alert alert-danger" role="alert">
<span class="sr-only">Error:</span>
总分3003 当月87
</div>
</div>
<div class="modular">
<div class="cj">
<span>个人成就</span>
</div>
<div class="row">
<img src="img/dianzan.png" class="imgdz">
<span>获得 1,055 次点赞</span>
</div>
<div class="row">
<img src="img/pinlun.png" class="imgdz">
<span>内容获得 290 次评论</span>
</div>
<div class="row">
<img src="img/shoucang.png" class="imgdz">
<span>获得 4,610 次收藏</span>
</div>
<div style="text-align: center;">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="modular">
<div class="cj">
<span>个人成就</span>
</div>
<div class="row">
<img src="img/dianzan.png" class="imgdz">
<span>获得 1,055 次点赞</span>
</div>
<div class="row">
<img src="img/pinlun.png" class="imgdz">
<span>内容获得 290 次评论</span>
</div>
<div class="row">
<img src="img/shoucang.png" class="imgdz">
<span>获得 4,610 次收藏</span>
</div>
<div style="text-align: center;">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="modular">
<div class="cj">
<span>个人成就</span>
</div>
<div class="row">
<img src="img/dianzan.png" class="imgdz">
<span>获得 1,055 次点赞</span>
</div>
<div class="row">
<img src="img/pinlun.png" class="imgdz">
<span>内容获得 290 次评论</span>
</div>
<div class="row">
<img src="img/shoucang.png" class="imgdz">
<span>获得 4,610 次收藏</span>
</div>
<div style="text-align: center;">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="col-sm-9 body-header ">
<!-- 导航栏-->
<div class="cj modular">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<div class="row">
<div class="col-sm-9">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="blackText">最近 </a></li>
<li><a href="#" class="blackText">文章</a></li>
<li><a href="#" class="blackText">资源</a></li>
<li><a href="#" class="blackText">问答</a></li>
<li><a href="#" class="blackText">帖子</a></li>
<li><a href="#" class="blackText">关注/订阅/互动</a></li>
<li><a href="#" class="blackText">收藏</a></li>
<li><a href="#" class="blackText">视频</a></li>
<li><a href="#" class="blackText">课程</a></li>
</ul>
</div>
<div class="col-sm-3 search-input">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">搜索</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="cj modular row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-sort" aria-hidden="true">按最后发布时间</span>
</div>
<div class="col-sm-2">
<span class="glyphicon glyphicon-sort" aria-hidden="true">按访问量 </span>
</div>
</div>
<div class="cj tit">
<h3>Hello World!</h3>
<div>
<span>输出"Hello World!".C语言:#include <stdio.h>int main() { printf("Hello World!</span>
</div>
<div>
<span>"); return 0;}C++:#include <iostream>using namespace std;int main() { cout << "Hel...</span>
</div>
<div class="row btn-gr">
<button type="button" class="btn btn-primary btn-xs btn-danger">原创</button>
<button type="button" class="btn btn-primary btn-xs btn-primary">置顶</button>
<span> 发布博客 2019.03.28 ·13072 阅读 ·5 点赞 ·1 评论 </span>
</div>
</div>
<div class="cj tit">
<h3>VS Code配置C/C++环境</h3>
<div>
<span>文章目录1 安装前的准备1.1 安装MinGW-w641.2 配置环境变量1.2.1 配置1.2.2 验证1.3 安装扩展(Extension)2 添加配置文件2.1 tasks.json文件2.2 </span>
</div>
<div>
<span>launch.json文件3 总结VS Code是一款微软出的轻量级编辑器，它本身只是一款文本编辑器而已，所有的功能都是以扩展的形式所存在，想用什么功能就安装对应的扩展即可，非常方便，同时也支持非常多的主题和图标，外观比较好看，重要的是VS Code支持各大主流操作系统，包括Windows、</span>
</div>
<div class="row btn-gr">
<button type="button" class="btn btn-primary btn-xs btn-danger">原创</button>
<span> 发布博客 2019.03.28 ·13072 阅读 ·5 点赞 ·1 评论 </span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--页脚部分-->
<footer class="container-fluid foot">
<div class="row">关于我们 招贤纳士 商务合作 寻求报道 400-660-0108 kefu@csdn.net 在线客服 工作时间 8:30-22:00</div>
<div class="row">公安备案号11010502030143 京ICP备19004658号 京网文〔2020〕1039-165号 经营性网站备案信息 北京互联网违法和不良信息举报中心 家长监护 网络110报警服务 中国互联网举报中心 Chrome商店下载 ©1999-2022北京创新乐知网络技术有限公司</div>
<div class="row">版权与免责声明 版权申诉 出版物许可证 营业执照</div>
</footer>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
