bootstrap开发微票儿网站首页

最新推荐文章于 2022-04-29 20:37:56 发布

VIP文章 denghe4720

最新推荐文章于 2022-04-29 20:37:56 发布

阅读量2.1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zeussbook/p/9077097.html

版权

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微票儿</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/smallCard.css"/>
</head>
<body>
<!--顶部导航部分-->
<nav class="nav navbar-inverse navbar-fixed-top" id="nva"><!--固定定位-->
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse">
            <span class="icon-bar"></span> <!--缩放时有四个白色横杠按钮-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <img src="image/footer_logo.png" class="navbar-brand">
    </div>
    <div class="collapse navbar-collapse navbar-right" id="loginBut">
        <ul class="nav navbar-nav">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-right">
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <!--1.这种方式搜索文本框能和按钮连在一起,具体位置需要更改或覆盖 bootstrap.css文件-->
                <input type="text" class="form-control" placeholder="请输入要搜索的内容"><span class="btn btn-default btn-primary">搜索</span>
                <!--1.这种方式搜索文本框能和按钮分开-->
                <!--<input type="text" class="form-control" placeholder="请输入要搜索的内容">
                <button type="submit" class="btn btn-default">搜索</button>-->
            </div>
        </form>
    </div>
    <div class="collapse navbar-collapse navbar-left">
        <ul class="nav navbar-nav">
            <li><a href="#" class="active">全国</a></li>
            <li><a href="#">演出</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">我的微票儿<span style="margin-left: 6px;" class="label label-danger">new</span></a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <!--第一行微票儿轮播图和特惠看部分-->
    <div class="row" style="background-color: rgba(180,180,166,0.95)" id="onerow">
        <div class="col-md-8 col-xs-12">
            <div id="

最低0.47元/天解锁文章

denghe4720

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
bootstrap开发微票儿网站首页

1.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微票儿</title> <meta name="viewport" content="wid...
复制链接

扫一扫