初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap

自己也刚刚开始接触框架，在学习了bootstrap框架过后，练习写了一个简单的主界面，主界面的图如下：

这个页面主要用的bootstrap的栅格系统进行整体布局，网页效果简约大方，最重要的是比较简单吧。下面展示源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小院子官网</title><link  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style>*{font-family: "微软雅黑 Light";}.fakeimg {height: 200px;}/*jumbotron是超大屏幕，作为组件，增加标题大小，为页面内容增添更多的页边距*/.jumbotron{background-color: #c1e2b3 ;}/*container容器用来固定宽度，配合响应式布局*/.container{width: 97%;}</style>
</head>
<body class="container">
<div class="jumbotron text-center" style="margin-bottom:0px">
<!--    margin-bottom设置下边距，允许为负--><h1 class="text-left">小院子--您身边的植物小管家</h1><p class="text-left text-muted">本店长期出售除甲醛类植物、家居植物和小多肉摆件，更多详情请到店铺咨询！</p>
<!--    text-muted效果是使文字减弱-->
</div><!--这个是导航栏-->
<nav class="navbar navbar-inverse">
<!--    设置导航栏的主题是黑色主题--><div class="container-fluid">
<!--      设置导航栏100%的宽度--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小院子</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="#">主页</a></li><li><a href="menu2.html">除甲醛植物</a></li><li><a href="menu3.html">家居摆件</a></li><li><a href="menu4.html">多肉小摆件</a></li><li><a href="menu5.html">更多</a></li></ul></div></div>
</nav><div ><div class="row">
<!--        栅格系统将页面左边三份分为自信导航栏--><div class="col-sm-3" ><h2>植物相关咨询</h2><ur ><li >满天星<small>原名:圆锥石头花,属于...</small></li><li>栀子花<small>又名栀子、黄栀子，龙...</small></li><li>鹤望兰<small>多年生草本植物，无茎...</small></li><li>仙人掌<small>别名仙巴掌、观音掌、...</small></li><li>...</li></ur><h3>小院子活动公告</h3><p>双十一活动来袭</p><ul class="nav nav-pills nav-stacked"><li ><a href="#">小院子六大售后服务...</a></li><li ><a href="#">双十一活动重磅来袭...</a></li><li ><a href="#">专业团队保证植物按...</a></li></ul><hr class="hidden-sm hidden-md hidden-lg"></div><!--        栅格系统右边9格分为图片展示栏--><div class="col-sm-9"><h2>植物限时优惠</h2><h5>总有你想不到的低价</h5><div class="fakeimg"><img src="../img2/1.jpg" width="24%" height="200px"><img src="../img2/2.jpg" width="24%" height="200px"><img src="../img2/5.jpg" width="24%" height="200px"><img src="../img2/4.jpg" width="24%" height="200px"></div><p>一些文本..</p><p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p><br><h2>新品到店</h2><h5>本店新到了栀子花、满天星等花材，快来订购吧！</h5><div class="fakeimg"><img src="../img2/6.jpg" width="24%" height="200px"><img src="../img2/7.jpg" width="24%" height="200px"><img src="../img2/8.jpg" width="24%" height="200px"><img src="../img2/9.jpg" width="24%" height="200px"></div><p>一些文本..</p><p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p><h2>萌萌多肉</h2><h5>本店新到了小多肉，品种齐全，快来订购吧！</h5><div class="fakeimg"><img src="../img2/23.jpg" width="24%" height="200px"><img src="../img2/24.jpg" width="24%" height="200px"><img src="../img2/25.jpg" width="24%" height="200px"><img src="../img2/26.jpg" width="24%" height="200px"></div><p>一些文本..</p><p>这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？这合理吗？</p></div></div>
</div><div class="jumbotron text-left" style="margin-bottom:0"><p>店铺位置：****************   订购电话：1**********   </p>
</div></body>
</html>

有问题可在下方评论（0o0）!

初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap相关推荐

如何设计一个简单的网页
设计一个简单的网页 1.按住文件新建文本(Ctrl+N),设计一个网页标题,点击创建 2.在<body>内部加入所需要的标签如图中需要标题标签,水平线标签,段落标签 3.保存(Ctrl+ ...
设计一个简单的购物页面（html+css+php）
水平有限,精力有限,很多东西写得可能不那么详细,有不懂可以留言提问,懂的尽量解答首先讲一下,购物页面肯定会涉及到数据库部分的,我这篇文章数据库方面不会详细讲,就简单给个思路.购物需要用到cookie ...
设计一个简单的网页计算器
设计一个简单的网页计算器一.代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"& ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...
使用Application设计一个简单的网页计数器程序
Application 1.当Web服务器启动时,Web服务器会自动创建一个Application对象.Application对象一旦创建,它将一直存在,直到Web服务器关闭. 2.Applicati ...
【Vue】使用vue框架制作一个简单的网页
参考代码(主要参考了样式):link 本文代码地址(Gitee):link 项目上线地址:http://renboo123.gitee.io/curryblog 百度网盘:https://pan.ba ...
通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/
一.结构分析由图我们可以看到音乐盒的效果右外边框盒子组成,盒子内部又分为两个部分,其中上面部分为标题,下面部分为图片. 二.样式 1.通过外层的大盒子对音乐盒的整体样式进行控制,设置最外层的宽度.高 ...
HTML：给自己设计一个简单的专属网页音乐播放器
Hello,大家好,我是wangzirui32,今天我们来学习如何给自己设计一个简单的网页音乐播放器. 开始学习吧! 学习目录 1. 项目架构 2. player.html 编写 3. style.c ...
前端：使用BootStrap搭建一个简单的网页
之前有想法学习一下前端框架的,后来没有坚持下来.连最基础的栅格系统都忘记了.于是,花了一点时间,重新温习了一下.写了一个简单的网页.页面大致是下面这张图.做得比较一般,不过能够自适应各种设备大小了. ...

初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap

初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap相关推荐

最新文章

热门文章