Bootstrap(项目2)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Pantry‘s Best 派送喜悦</title>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link rel="stylesheet" href="css/bootstrap.css">    <script src="js/jquery-3.2.1.js"> </script>    <script src="js/bootstrap.js"></script>    <script src="js/holder.js"></script>    <style>        @media(min-width: 992px){            .thumbnail {                border: none;                max-width: 130%;                height: auto            }             #mynav_content li{                margin-right: 30px;                color: white;                }            #select_nav{                margin-right: 20px;            }        }        @media (max-width: 768px) {            #select_nav {                margin-right: 20px;            }

#honeycarousel {                margin-top: 100px;            }

.logo {                margin-left: 120px;                margin-right: 50px;            }            #sina,#weixin,#goodslistimg{                display: none;            }

.thumbnail img {                border: none;                max-width:130%;                height: auto;            }            .thumbnail  {                border: none;                max-width:130%;                height: auto            }            #footertext{                text-align: center;            }            #phonelogo{

}

/*#shoppingcar {*/                /*position: absolute;*/                /*font-size: 20px;*/                /*line-height: 30px;*/                /*text-align: center;*/                /*height: 30px;*/                /*width: 30px;*/                /**/                /*margin-left: 200px;*/                /*border-radius: 50%;*/                /*margin-top: 120px;*/            /*}*/

/*#shoppingcar:hover {*/                /**/            /*}*/        }

</style></head><body>    <nav class="navbar  navbar-fixed-top" style="background-color: rgb(57, 12, 32)">        <div class="navbar-header">            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav">                <p style="color: white">未登录</p>            </button>            <a href="#" class="logo"><img src="img/logo.png" ></a>        </div>            <div class="nav navbar-collapse collapse" id="mynav" >                <ul class="nav navbar-nav" id="mynav_content">                    <li><a href="#">English</a></li>                    <li>                        <a href="#sub1" class="navbar-collapse"data-toggle="collapse">当前城市:北京<span class="glyphicon glyphicon-triangle-bottom"></span></a>                        <ul id="sub1" class="collapse dropdown-menu">                            <li><a href="#">杭州</a></li>                            <li><a href="#">上海</a></li>                            <li><a href="#">广州</a></li>                            <li><a href="#">深圳</a></li>                        </ul>                    <li>                        <a href="#sub2" class="navbar-collapse"data-toggle="collapse">产品列表<span class="glyphicon glyphicon-triangle-bottom"></span></a>                        <ul id="sub2"  class="collapse dropdown-menu" >                            <li><a href="#">迪士尼</a></li>                            <li><a href="#">蛋糕</a></li>                            <li><a href="#">纸杯蛋糕</a></li>                            <li><a href="#">礼盒</a></li>                            <li><a href="#">挞</a></li>                            <li><a href="#">派</a></li>                            <li><a href="#">素食</a></li>                            <li><a href="#">礼品卡</a></li>                        </ul>                    </li>                    <li><a href="#">门店</a></li>                    <li><a href="#">配送须知</a></li>                    <li><a href="#">活动</a></li>                    <li>                        <a href="#sub3" class="navbar-collapse" data-toggle="collapse">关于<span class="glyphicon glyphicon-triangle-bottom"></span></a>                    <ul id="sub3" class="collapse dropdown-menu">                            <li>我们</li>                            <li>会员</li>                            <li>礼品卡</li>                    </ul>                    </li>                    <li><a href="#">甜品台<img src="img/new_icon.png"></a></li>                </ul>

<ul class="nav navbar-nav navbar-right" id="select_nav">                <li><a href="#">登录</a></li>                <li><a href="#">注册</a></li>                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>            </ul>        </div>    </nav>

<div class="carousel slide" data-ride="carousel" id="honeycarousel">            <!--创建图片容器 -->            <div class="carousel-inner">                <div class="item active">                    <img src="img/1.jpg" >                </div>                <div class="item">                    <img src="img/2.jpg" >                </div>                <div class="item">                    <img src="img/3.jpg" >

</div>                <div class="item">                    <img src="img/4.jpg" >

</div>                <div class="item">                    <img src="img/5.jpg" >

</div>            </div>            <!--创建小圆点容器 -->            <ol class="carousel-indicators">                <li data-target="#honeycarousel" data-slide-to="0"></li>                <li data-target="#honeycarousel" data-slide-to="1"></li>                <li data-target="#honeycarousel" data-slide-to="2"></li>                <li data-target="#honeycarousel" data-slide-to="3"></li>                <li data-target="#honeycarousel" data-slide-to="4"></li>            </ol>            <!--创建左右按钮容器 -->            <a href="#honeycarousel" class="carousel-control left" data-slide="prev">                <span class="glyphicon glyphicon-chevron-left"></span>            </a>            <a href="#honeycarousel" class="carousel-control right" data-slide="next">                <span class="glyphicon glyphicon-chevron-right"></span>            </a>        </div>

<div class="container">      <div class="panel">          <div class="panel-heading">              <a href="#"><span class="glyphicon glyphicon-triangle-right"></span>产品列表</a>          </div>      </div>      <div class="row" id="row1">          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods1.png" >                  <p><a href="#">迪士尼</a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods2.png" >                  <p><a href="#">礼盒</a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods3.jpg" >                  <p><a href="#">蛋糕</a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods4.png" >                  <p><a href="#">挞</a></p>              </div>          </div>

</div>      <div class="panel">          <div class="panel-heading">              <a href="#"><span class="glyphicon glyphicon-triangle-right"></span>新品推出</a>          </div>      </div>      <div class="row" id="row2">          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods6.jpg" >                  <p><a href="#"> 纯脆提拉米苏 6吋 ¥299 </a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods7.jpg" >                  <p><a href="#"> 芒果空气感蛋糕 6吋 ¥249 </a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods8.jpg" >                  <p><a href="#"> 荔枝玫瑰蛋糕 6吋 ¥299 </a></p>              </div>          </div>          <div class="col-md-3 col-xs-6">              <div class="thumbnail">                  <img src="img/goods9.jpg" >                  <p><a href="#"> 素食迷你纸杯礼盒 礼盒 ¥199 </a></p>              </div>          </div>      </div>

<div class="row">          <div class="col-md-4 col-xs-12" id="footertext">              <p><span class="glyphicon glyphicon-earphone" style="color=lightgreen"></span>4008-3-14159</p>              <p><span class="glyphicon glyphicon-envelope" style="color=lightgreen"></span>[email protected]</p>          </div>          <div class="col-md-4">              <span><a href="#" id="sina" ><img src="img/sina.png" style=" margin-left:120px;margin-right: 20px;height: 30px;width: 30px"></a> <a href="#"><img src="img/weixin.png" id="weixin" style="height: 30px;width: 30px"></a></span>          </div>          <div class="col-md-4">              <img src="img/brand-icons1.png" id="goodslistimg" style="width: 200px;height: 30px;margin-left: 150px">          </div>      </div>      <div class="row">          <div class="col-md-12"style="text-align: center">              <p>北京市朝阳区神路街39号10幢3层4段92-93</p>              <p> Copyright 2010-2017 派悦坊,Ltd 京ICP备12046340</p>          </div>      </div>

</div></body></html>
时间: 2024-10-07 16:21:43

Bootstrap(项目2)的相关文章

第二百五十三节,Bootstrap项目实战-资讯

Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"

第二百五十一节,Bootstrap项目实战--响应式轮播图

Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图

第二百五十节,Bootstrap项目实战--响应式导航

Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一.响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写在导航<nav>里,声明导航区域(项目实战Bootstrap)navbar-default样式class类,写在导航<nav>里,设置导航默认样式(项目实战Bootstrap)navbar-fixed-top样式class类,写在导航<nav>里,设置导航条固定在顶部(项目

EF+MVC+Bootstrap 项目实践 Day2

一.初识系统 1.一上来先看下路由规则Global.asax.cs routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter

EF+MVC+Bootstrap 项目实践 Day3

今天主要是实践BootStrap,模仿着做一下登陆页 这一年多来公司项目用的是EasyUI,用来做ERP.CMS之类的后台管理不错,各种交互基本够用,但样式就不怎么样了. BootStrap比较注重前端,更美观大方,主要在html里控制. 一.引入css public static string StaticFile(this UrlHelper helper, string path) { if (string.IsNullOrWhiteSpace(path)) { return ""

mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

最近和朋友完成了一个大单子架构是mvc5+ef6+Bootstrap,用的是vs2015,数据库是sql server2014.朋友做的架构,项目完成后觉得很多值得我学习,在这里总结下一些心得. 创建项目一开始删掉App_Start目录下的IdentityConfig.cs和Startup.Auth.cs文件;清空Modle文件夹,Controller文件夹和相应的View; 删除目录下的ApplicationInsights.config文件和Startup.cs文件 修改web.config

EF+MVC+Bootstrap 项目实践 Day9

今天打算把客户管理做完 一.数据准备 多弄几条数据,好练习分页.搜索,要生成以上数据.随机名字.手机.ID(比如UserId只能1.2.4.6及对应的UserName).Number(两位随机大写英文和3位数字) 1.随机名字.感谢博客园AngelLee2009的一篇文章给我启发,但是略复杂,改进了一下 DECLARE @firstNames VARCHAR(MAX)='芳海亮红君军俊江河湖波杰山燕阳洋涛斌彬宾微伟威薇刚倩' --保存名的集合 DECLARE @lastNames VARCHAR

EF+MVC+Bootstrap 项目实践 Day5

一.遗留问题 1.SaveChanges()不报错:查了些资料,没找到什么,但加了Try/Catch是可以的 2.Linq插入默认值:也有很多人有同样困惑,都只有变通方法.一种是改成可空,一种是显式传入默认值 3.查插入默认值资料时,发现好像目前这个叫LinqToSql?和EF还不是一回事?由于基础知识欠缺,只好暂存疑惑,先往下走. 二.登陆

EF+MVC+Bootstrap 项目实践 Day11

继续完成首页跳转判断 一.用js根据点击判断哪个视图并显示相应提示 如果是首页,就显示首页的提示并去掉breadcrumb导航 如果是具体的页面,就根据DOM判断路径并显示,还要把这一级的折叠展开并把当前视图的a标签加上.active 左侧菜单会闪一下,因为是先载入页面,再判断展开和选中的.这样效果不怎么好,如果是iframe之类,左侧是不动的,不用人为去判断是在哪一级. function LoadMenuTip(){ $("#MenuDiv a[title]").each(funct

如何使用LESS 深度定制Bootstrap

一.LESS是什么? Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 中文介绍:http://lesscss.cn/ 有JS基础的同学应该很快就能掌握LESS 二.准备工作,在一个bootstrap项目中使用LESS. 上面的网站介绍了LESS的多种入门方法,这里主要以npm+webstorm 为例:在本地项目中使用LESS生成CSS 通过LESS的语言特性减少编写和维护的难度: 解压npm 得到如下文件: 在web