bootstrp实战（1）--星巴克主页

最新推荐文章于 2023-12-23 09:08:05 发布

机智小铛铛i

最新推荐文章于 2023-12-23 09:08:05 发布

阅读量2.8k

点赞数 3

本文链接：https://blog.csdn.net/qq_37110098/article/details/79184805

版权

本文是关于使用Bootstrap构建星巴克主页的实战经验分享，作者在过程中遇到了一些问题，虽然存在bug，但提供了网页文件夹和源码的链接供读者参考学习。

摘要由CSDN通过智能技术生成

第一次尝试，还存在很多bug。。。
网页中 img文件夹以及源码链接https://pan.baidu.com/s/1dHniQFf

<!-- 
      index.html
      Created by 命_心 on 2018-01-22.
      Copyright 2018 命_心. All rights reserved.
 -->

<!DOCTYPE html>
<html lang="zh-CN">
  <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</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        li{
            list-style: none;
        }
    </style>
  </head>
  <body>

        <div class="container-fluid" style="padding: 20px; width: 100%;">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-left">
                    <p class="glyphicon glyphicon-align-justify" id="tit_left" style="font-size: 20px;"></p><br />
                    <span>菜单</span>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="img/logo.png" class="img-responsive center-block" id="tit_logo" style="height: 50px;"/>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right" id="tit_right"> 
                    <p>星享俱乐部</p>
                    <a href="#" class="text-warning">登录</a>或<a href="#" class="text-warning">注册</a> 
                </div>
                </div>
        </div>
        <div class="container-fluid">
                <div class="row">
                    <img src="img/banner.png" style="width: 100%;" />
                </div>

        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="banner" style="height: 150px;">
                    <div class="banner_bg" id="bg" style="height: 180px; width: 100%;background-image: url(img/one_banner2.png); ">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="textfontsize" style="margin-top:20px;margin-left:650px;color:#FFFFFF;z-index: 5;">
                                    <h4>星享俱乐部</h4>
                                    <p style="font-size: 12px;">开启你的星享之旅，星星越多、会员等级越高、好礼越丰富</p>
                                    <button style="width:100px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;">注册</button >
                                    <button style="width:100px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;">登录