利用bootstrap框架做了一个采摘节节日活动网页

效果欣赏如下：

总共主要是一下两个块代码：

1.主题：

<!DOCTYPE html>

<head>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</ul>

</span>

</div>

</form>

</div>

</nav>

<h2 class="banner_title">水果节介绍</h2>

<p class="banner_detail">天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场，借助天天生鲜产地端到用户端的渠道，果品流转效率得以大大提高。依托天天生鲜的渠道优势，首届果节做到了高质低价。</p>

</div>

</div>

<p class="active_detail text-center">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后，在适合的时间将水果采摘下来后，直接在地头包装成箱，根据订单分装运到各个分仓，然后由配送员送到用户手中。以下是本次活动相关的图片</p>

</div>

<h4>现场采摘活动</h4>

</div>

<h4>产地装箱直发</h4>

</div>

<h4>水果节活动</h4>

</div>

<h4>水果艺术拼盘</h4>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>电话：010-****888 京ICP备*******8号</p>

</div>

</body>

</html>

2.样式：

.navbar-brand{

padding:5px 15px;

}

.navbar-inverse {

background-color: #ff722b;

border-color: #ff722b;

}

.navbar-inverse .navbar-nav>li>a {

color: #fff;

}

.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus {

color: #fff;

background-color: #db6226;

}

.navbar-inverse .navbar-toggle {

border-color: #fff;

}

.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {

background-color: #db6226

}

.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {

border-color: #fff

}

.navbar{

margin-bottom:0;

}

.jumbotron{

background:url(../images/banner_bg.jpg) center center no-repeat;

padding:24px 0;

margin-bottom:0;

}

.banner_title{

font-size:18px;

color:#ffff00;

}

.jumbotron .banner_detail{

font-size:14px;

color:#fff;

line-height:28px;

}

.banner_pic_title{

margin-top:46px;

}

@media (max-width:1200px){

.banner_pic_title{

margin-top:20px;

}

@media (max-width:992px){

.banner_pic_title{

margin-top:10px;

}

.active_title{

margin-top:30px;

font-size:30px;

color:#333;

}

.active_detail{

font-size:14px;

color:#333;

line-height:21px;

margin-top:20px;

}

.pic_list{

margin-top:10px;

}

.pic_list h4{

font-size:15px;

color:#333;

text-align:center;

}

.pic_list .thumbnail{

max-width:260px;

margin:0 auto 20px;

}

.common_title{

background-color:#ff722b;

margin:0;

height:40px;

}

.common_title h3{

font-size:16px;

color:#fff;

line-height:40px;

margin:0;

text-indent:10px;

}

.common_title a{

font-size:12px;

color:#fff;

margin:10px 10px 0 0;

}

.goods_list{

margin-top:20px;

}

.goods_list .col-lg-2{

width:20%;

}

.goods_list h4{

text-align:center;

font-size:14px;

color:#666;

}

.goods_list p{

text-align:center;

color:#ff0000;

font-size:16px;

}

.goods_list p em{

font-size:22px;

font-style:normal;

}

.goods_list .thumbnail{

max-width:260px;

margin:0 auto 20px;

}

@media (max-width:1200px){

.goods_list .col-lg-2{

width:25%;

float:left;

}

@media (max-width:992px){

.goods_list .col-lg-2{

width:50%;

float:left;

}

@media (max-width:768px){

.goods_list .col-lg-2{

width:100%;

float:left;

}

.footer{

background-color:#ff722b;

padding-bottom:20px;

}

.footer .links{

text-align:center;

margin-top:35px;

}

.footer .links a{

color:#fff;

}

.footer .links span{

color:#fff;

padding:0 10px;

}

.footer p{

text-align:center;

margin:10px 0;

color:#fff;

}

3.需要素材以及调用的代码：

链接：http://pan.baidu.com/s/1qYzAmDm 密码：5yvv

利用bootstrap框架做了一个采摘节节日活动网页相关推荐

Python Day 70 利用Django框架做的一个bbs小项目
##项目开发流程 #1.项目需求分析产品经理+架构师+开发经理/组长去到客户的公司谈需求(博弈的过程) #2.项目架构设计架构师设计(数据库(主库:MySQL,从库:redis,mongodb), ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
JavaScript—使用bootstrap框架做一个网页
这是通过黑马程序员的教程进行学习的.以下是做一个网页的流程. 目录第一步分析:分析网页--将网页分成若干部分第二步实现: 1-头部 2-导航条 3-注册页面 4-网站底部1 5-网站底部2 6- ...
使用Bootstrap框架写的一个小实例
今天学习了一下Bootstrap框架,,写一个小实例练练手,感受一下bootstrap兼容三端的强大. <!doctype html> <html lang="zh-CN& ...
利用Django框架简单设计一个登陆页面
这里写自定义目录标题 1.创建project django-admin startproject "你项目的名字" 2.创建app python manage.py startap ...
利用Py-Socket模块做的一个不登陆windows服务器自动实现替换或者调用自动拨号功能...
xu言: 最近,有个朋友让我帮忙"搞点事情",然后正好在学习socket模块,这个模块666啊,基本上可以实现远程服务器cmd shell的大部分功能.好,话不多说,直接上码~ 由 ...
CSS中利用BootStrap框架引入glyphicon图标无法显示的解决方法
想要引用如图的对勾图标结果显示出来的是一个方框出现该问题的原因是由于没有注意bootstrap引入css和fonts的规范,就可能会导致bootstrap 在显示glyphicon图标时无法正常显 ...
如何利用spring框架来开发一个简单的小项目——书店项目
这里我将用spring来开发一个简单的书店项目 Step1:所用到的开发软件为 idea , 所用到的jar包为这些jar的下载可在官网下载,选择5.2.6版本下载,不会的在下面评论私信 Ste ...
我做了一个手写春联小网页，祝大家虎年暴富
目录前言产品构思设计开发手写春联:https://cl.xugaoyi.com/ 前言虎年春节快到了,首先祝大家新年快乐,轻松暴富. 最近在网上经常看到生成春联的文章,不过这些小demo要 ...

利用bootstrap框架做了一个采摘节节日活动网页

利用bootstrap框架做了一个采摘节节日活动网页相关推荐

最新文章

热门文章