CSS_Bootstrap

①BS学习的基础

第一个例子

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<head>

<body>

<div class="container">

<div class="jumbotron">

<h1>My first bootstrap page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<div class="row">

<div class="col-sm-4">

<h3>column 2</h3>

<p>jin xue ling</p>

</div>

<div class="col-sm-4">

<h3>column 2</h3>

<p>jin xue ling</p>

</div>

<div class="col-sm-4">

<h3>column 3</h3>

<p>jin xue ling</p>

</div>

</div>

</div>

</div>

</body>

</html>

1.应用BS

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

2.设置编码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

</head>

</html>

3.mobile-first 多端口设备

<meta name="viewport" content="width=device-width",initial-scale=1">

4.基本的BS页面

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

</body>

</html

二、Grid Basic

CSS_Bootstrap

Grid class

xs(for phone)

sm(for tablets)

md(for desktops)

lg(for large desktops)

<div class="col-*-*"></div>

三、Typepography

More Typography Classes

From <http://www.w3schools.com/bootstrap/bootstrap_typography.asp>

四、table

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_tables.asp>

五、imgs

Responsive Images

From <http://www.w3schools.com/bootstrap/bootstrap_images.asp>

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_images.asp>

六、Jumbotron

Example Page Header

From <http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp>

七、Wells

八、Alerts

Alerts

From <http://www.w3schools.com/bootstrap/bootstrap_alerts.asp>

九、buttons

Button Styles

From <http://www.w3schools.com/bootstrap/bootstrap_buttons.asp>

十、button groups

Button Groups

From <http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp>

十二、Glyphicons

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp>

十三、Badges/Labels

Badges

Badges are numerical indicators of how many items are associated with a link:

From <http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp>

Labels

Labels are used to provide additional information about something

From <http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp>

十四、progress Bars

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp>

十五、Pagination

Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page

From <http://www.w3schools.com/bootstrap/bootstrap_pagination.asp>

十六、Pager

Pager is also a form of pagination (as described in the previous chapter).

Pager provides previous and next buttons (links).

From <http://www.w3schools.com/bootstrap/bootstrap_pager.asp>

十七、List groups

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_list_groups.asp>

十八、Panels

Test Yourself with Exercises!

From <http://www.w3schools.com/bootstrap/bootstrap_panels.asp>

十九、Dropdowns

The .divider class is used to separate links inside the dropdown menu:

From <http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-divider&stacked=h>

二十、Collapse

Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content:

From <http://www.w3schools.com/bootstrap/bootstrap_collapse.asp>

二十一、Tabs/Pills

Toggleable / Dynamic Pills

The same code applies to pills; only change the data-toggle attribute to data-toggle="pill"

From <http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp>

二十二、nav bars

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

From <http://www.w3schools.com/bootstrap/bootstrap_navbar.asp>

二十三、Forms

Bootstrap's Default Settings

Form controls automatically receive some global styling with Bootstrap:

From <http://www.w3schools.com/bootstrap/bootstrap_forms.asp>

二十四、input

Supported Form Controls

Bootstrap supports the following form controls:

  • input
  • textarea
  • checkbox
  • radio

From <http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp>

二十五、input2

Bootstrap Form Inputs (more)

From <http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp>

二十六、input sizing

Bootstrap Input Sizing

From <http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp>

二十七、Carousel

Bootstrap Carousel Plugin

From <http://www.w3schools.com/bootstrap/bootstrap_carousel.asp>

二十七、Modal

Bootstrap Modal Plugin

From <http://www.w3schools.com/bootstrap/bootstrap_modal.asp>

二十八、Tooltip plugin

Bootstrap Tooltip Plugin

From <http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp>

二十九、Popover Plugin

Bootstrap Popover Plugin

From <http://www.w3schools.com/bootstrap/bootstrap_popover.asp>

三十、Scrollspy

The Scrollspy Plugin

The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.

From <http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp>

三十一、affix Plugin(advance)

Bootstrap Affix Plugin (Advanced)

From <http://www.w3schools.com/bootstrap/bootstrap_affix.asp>

②bs的实例

1.个人主页

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap theme simply Me</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>

.bg-1{

background-color:#1abc9c;/* Green*/

color:#ffffff;

}

.bg-2{

background-color:#474e5d;/*Dark Blue*/

color:#ffffff;

}

.bg-3{

background-color:#ffffff;/*White*/

color:#555555;

}

.container-fluid{

padding-top:70px;

padding-bottom:70px;

}

.navbar{

padding-top:15px;

padding-bottom:15px;

border:0;

border-radius:0;

margin-bottom:0;

font-size:12px;

letter-spacing:5px;

}

.navbar-nav li a:hover{

color:#1abc9c !important;

}

.bg-4{

background-color:#2f2f2f;

color:#ffffff;

}

</style>

</head>

<body>

<nav class="navbar navbar-default">

<div class="container">

<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="#">Me</a>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">WHO</a></li>

<li><a href="#">WHAT</a></li>

<li><a href="#">WHERE</a></li>

</ul>

</div>

</div>

</nav>

<!--------------------------------------------------------->

<div class="container-fluid bg-1 text-center">

<h3>Who am I?</h3>

<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">

<h3>I'm an adventurer</h3>

</div>

<!------------------------------------------------------------>

<div class="container-fluid bg-2 text-center">

<h3>What Am I?</h3>

<p>Lorem ipsum..</p>

</div>

<div class="container-flluid bg-3 text-center">

<h3> Where To Find Me?</h3>

<p>Lorem ipsum..</p>

</div>

<div class="container-fluid bg-2 text-center">

<h3>What Am I?</h3>

<p>Lorem ipsum..</p>

<a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span>Search</a>

</div>

<div class="container-fluid bg-3 text-center">

<h3>Where To Find Me?</h3>

<div class="col-sm-4">

<p>Lorem ipsum..</p>

<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">

</div>

<div class="col-sm-4">

<p>Lorem ipsum..</p>

<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">

</div>

<div class="col-sm-4">

<p>Lorem ipsum..</p>

<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">

</div>

<div>

<footer class="container-fluid bg-4 text-center">

<p>Bootstrap Theme Made By<a href="http://www.w3schools.com">www.w3schools.com</a></p>

</footer>

</body>

</html>

2.乐队

<DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Theme The Band</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .container{
            padding:80px 120px;
        }
        .person{
            border:10px solid transparent;
            margin-bottom:25px;
            width:80%;
            height:80%;
            opacity:0.7;
        }
        .person:hover{
            border-corlor:#f1f1f1;
        }
        .carousel-inner img {
            -webkit-filter: grayscale(90%);
            filter: grayscale(90%); /* make all photos black and white */
            width: 100%; /* Set width to 100% */
            margin: auto;
        }

.carousel-caption h3 {
            color: #fff !important;
        }

@media (max-width: 600px) {
            .carousel-caption {
                display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
            }
        }
        .bg-1{
            background:#2d2d30;
            color:#bdbdbd;
        }
        .bg-1 h3{
            color:#fff;
        }
        .bg-1 p{
            font-style:italic;
        }
         /* Remove rounded borders from list */
        .list-group-item:first-child {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

.list-group-item:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

/* Remove border and add padding to thumbnails */
        .thumbnail {
            padding: 0 0 15px 0;
            border: none;
            border-radius: 0;
        }

.thumbnail p {
            margin-top: 15px;
            color: #555;
        }

/* Black buttons with extra padding and without rounded borders */
        .btn {
            padding: 10px 20px;
            background-color: #333;
            color: #f1f1f1;
            border-radius: 0;
            transition: .2s;
        }

/* On hover, the color of .btn will transition to white with black text */
        .btn:hover, .btn:focus {
            border: 1px solid #333;
            background-color: #fff;
            color: #000;
        }
        .modal-header, h4, .close {
            background-color: #333;
            color: #fff !important;
            text-align: center;
            font-size: 30px;
        }

.modal-header, .modal-body {
            padding: 40px 50px;
        }
        .nav-tabs li a {
            color: #777;
        }
        #googleMap {
        width: 100%; /* Span the entire width of the screen */
        height: 400px; /* Set the height to 400 pixels */
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%); /* Change the color of the map to black and white * /
        }
         /* Add a dark background color with a little bit see-through */
        .navbar {
            margin-bottom: 0;
            background-color: #2d2d30;
            border: 0;
            font-size: 11px !important;
            letter-spacing: 4px;
            opacity:0.9;
        }

/* Add a gray color to all navbar links */
        .navbar li a, .navbar .navbar-brand {
            color: #d5d5d5 !important;
        }

/* On hover, the links will turn white */
        .navbar-nav li a:hover {
            color: #fff !important;
        }

/* The active link */
        .navbar-nav li.active a {
            color: #fff !important;
            background-color:#29292c !important;
        }

/* Remove border color from the collapsible button */
        .navbar-default .navbar-toggle {
            border-color: transparent;
        }

/* Dropdown */
        .open .dropdown-toggle {
            color: #fff ;
            background-color: #555 !important;
        }

/* Dropdown links */
        .dropdown-menu li a {
            color: #000 !important;
        }

/* On hover, the dropdown links will turn red */
        .dropdown-menu li a:hover {
            background-color: red !important;
        }
    </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
    <div class="container text-center">
              <h3>THE BAND</h3>
              <p><em>We love music!</em></p>
              <p>We have created a fictional band website. Lorem ipsum..</p>
              <br>
            <div class="row">
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo" class="collapse">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo2" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo2" class="collapse">
                    <p>Drummer</p>
                    <p>Loves drummin'</p>
                    <p>Member since 1988</p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo3" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo3" class="collapse">
                    <p>Bass player</p>
                    <p>Loves math</p>
                    <p>Member since 2005</p>
                  </div>
                </div>
            </div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!--indicators-->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!--wrapper for slides-->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="ny.jpg" alt="New York">
                        <div class="carousel-caption">
                            <h3>New York</h3>
                            <p>The atmosphere in New York is lorem ipsum.</p>
                            
                        </div>
                    </div>
                    <div class="item">
                        <img src="chicago.jpg" alt="Chicago">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you, Chicago -A night we won't forget.</p>
                            
                        </div>
                    </div>
                    <div class="item">
                        <img src="la.jpg" alt="Los Angeles">
                        <div class="carousel-caption">
                            <h3>LA</h3>
                            <p>Even though the traffic was a mess,we had the best time.</p>
                            
                        </div>
                    </div>
            
                <!--left and right controls-->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                </div>
        </div>
    </div>
    
    <div class="bg-1">
        <div class="container">
            <h3 class="text-center">tour dates</h3>
            <p class="text-center">Lorem ipsum we'll paly you some music.<br>Remember to book your tickets!</p>
            
            <ul class="list-group">
                <li class="list-group-item">Setember  <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">Setember  <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">Setember <span class="badge">3</span></li>
            </ul>
        
        <div class="row text-center">
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="paris.jpg" alt="Paris">
              <p><strong>Paris</strong></p>
              <p>Fri. 27 November 2015</p>
              <!--used to open the Modal-->
              <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="newyork.jpg" alt="New York">
              <p><strong>New York</strong></p>
              <p>Sat. 28 November 2015</p>
              <button class="btn">Buy Tickets</button>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="sanfran.jpg" alt="San Francisco">
              <p><strong>San Francisco</strong></p>
              <p>Sun. 29 November 2015</p>
              <button class="btn">Buy Tickets</button>
            </div>
          </div>
        </div>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!--Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&&times;</button>
                        <h4><span class="glyphicon glyphicon-lock"></span>
                        Tickets</h4>
                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <lable for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>Ticets,$23 per person</label>
                                    <input type="number" class="form-control" id="psw" placeholder="How many?">
                                </div>
                                <div class="form-group">
                                    <lable for="usrname"><span class="glyphicon glyphicon-user"></span>send to</label>
                                    <input type="text" class="form-control" id="usrname" placeholder="Enter email">
                                    
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>Candel</button>
                            <p>Need<a href="#">help?</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
     <div class="container">
      <h3 class="text-center">Contact</h3>
      <p class="text-center"><em>We love our fans!</em></p>
      <div class="row test">
        <div class="col-md-4">
          <p>Fan? Drop a note.</p>
          <p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
          <p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
          <p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-sm-6 form-group">
              <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
            </div>
            <div class="col-sm-6 form-group">
              <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
            </div>
          </div>
          <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
          <div class="row">
            <div class="col-md-12 form-group">
              <button class="btn pull-right" type="submit">Send</button>
            </div>
          </div>
        </div>
  </div>
</div>
<!---------------------add a panel tab------------->
    <h3 class="text-center">From The Blog</h3>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
        <li><a data-toggle="tab" href="#menu1">Chandler</a></li>
        <li><a data-toggle="tab" href="#menu2">Peter</a></li>
    </ul>
    
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h2>Mike Ross, Manager</h2>
            <p>Man,we've been on the road for some time now.Looking forward to lorem ipsum.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h2>Chandler Bing, Guitarist</h2>
            <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h2>Chandler Bing, Guitarist</h2>
            <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
        </div>
    </div>
        <div id="googleMap"></div>

<!-- Add Google Maps -->
        <script src="http://maps.googleapis.com/maps/api/js"></script>
        <script>
        var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
        var mapProp = {
        center:myCenter,
        zoom:12,
        scrollwheel:false,
        draggable:false,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
        position:myCenter,
        });

marker.setMap(map);
        }

google.maps.event.addDomListener(window, 'load', initialize);
        </script>
                <!-------add nav bar---------->
                <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <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="#">Logo</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">HOME</a></li>
                <li><a href="#band">BAND</a></li>
                <li><a href="#tour">TOUR</a></li>
                <li><a href="#contact">CONTACT</a></li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                  </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
              </ul>
            </div>
          </div>
        </nav>
        <!---------------------add a footer--------------->
         <style>
        /* Add a dark background color to the footer */
        footer {
            background-color: #2d2d30;
            color: #f5f5f5;
            padding: 32px;
        }

footer a {
            color: #f5f5f5;
        }

footer a:hover {
            color: #777;
            text-decoration: none;
        }
        </style>S

<footer class="text-center">
          <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
            <span class="glyphicon glyphicon-chevron-up"></span>
          </a><br><br>
          <p>Bootstrap Theme Made By <a href="http://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
    
        <script>
        $(document).ready(function(){
            // Initialize Tooltip
            $('[data-toggle="tooltip"]').tooltip();
        })
        </script>
</body>
</html>

3.公司主页

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap theme Company</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    .jumbotron{
        background-color:#f4511e;/*Orange*/
        color:#ffffff;
        padding:100px 25px;
    }
    .container-fluid{
        padding:60px 50px;
    }
    .bg-grey{
        background-color:#f6f6f6;
    }
    .logo{
        font-size:200px;
    }
    @media screen and(max-width:768px){
        .col-sm-4{
            text-align:center;
            margin:25px 0;
        }
    }
    .logo-small{
        color:#f4511e;
        font-size:50px;
    }
    .logo{
        color:#f4511e;
        font-size:200px;
    }
    .thumbnail{
        padding:0 0 15px 0;
        border:none;
        border-radius:0;
    }
    .thumbnail img{
        width:100%;
        height:100%;
        margin-bottom:10px;
    }
    .carousel-control.right,.carousel-control.left{
        background-image:none;
        color:#f4511e;
    }
    .carousel-indicators li{
        border-color:#f4511e;
    }
    .carousel-indicators li.active{
        background-color:#f4511e;
    }
    .item h4{
        font-size:19px;
        line-height:1.375em;
        font-weight:400;
        font-style:italic;
        margin:70px 0;
    }
    .item span{
        font-style:normal;
    }
    .panel{
        border:1px solid #f4511e;
        border-radius:0;
        transition:box-shadow 0.5s;
    }
    .panel:hover{
        box-shadow:5px 0px 40px rgba(0,0,0,.2);
    }
    .panel-foot .btn:hover{
        border:1px solid #f4511e;
        background-color:#fff !important;
        color:#f4511e;
    }
    .panel-heading{
        color:#fff !important;
        background-color:#f45ee !important;
        padding:25px;
        border-bottom:1px solid transparent;
        border-top-left-radius:0px;
        border-top-right-radius:0px;
        border-bottom-left-radius:0px;
        border-bottom-right-radius:0px;
    }
    .panel-footer{
        background-color:#fff !important;
    }
    .panel-footer h3{
        background-color:#fff !important;
    }
    .panel-footer h3{
        font-size:32px;
    }
    .panel-footer h4{
        color:#aaa;
        font-size:14px;
    }
    .panel-footer .btn{
        margin:15px 0;
        background-color:#f4511e;
        color:#fff;
    }
    </style>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>Company</h1>
        <p>We specialize in blablabla</P>
        <form class="form-inline">
            <input type="email" class="form-control" size="50" placeholder="Email Address">
            <button type="button" class="btn btn-danger">Subscribe</button>
        </form>
    </div>
    <!------------------------------------------------------------------------>
    <div class="container-fluid">
        <h2>About Company Page</h2>
        <h4>Lorem ipsum..</h4>
        <p>Lorem ipsum..</p>
        <button class="btn btn-default btn-lg">Get in touch</button>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-signal logo"></span>
        </div>
    </div>
       
    <div class="container-fluid bg-grey">
        <div class="row">
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-globe logo"></span>
            </div>
            <div class="col-sm-8">
                <h2>Our Values</h2>
                <h4><strong>MISSION:</strong>Our mission lorem ipsum..</h4>
                <p><strong>VISION:</strong>Our vision Lorem ipsum..</p>
            </div>
        </div>
    </div>
    <!------------------------------------------------------------------->
    <div class="container-fluid text-center">
        <h2>SERVICES</h2>
        <h4>What we offer</h4>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-off logo-small"></span>
                <h4>POWER</h4>
                <p>Lorem ipsum dolor sit amet..</p>
            </div>
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-heart logo-small"></span>
                <h4>LOVE</h4>
                <p>Lorem ipsum dolor sit amet..</p>
            </div>
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-lock logo-small"></span>
                <h4>JOB DONE</h4>
                <p>Lorem ipsum dolor sit amet..</p>
            </div>
        </div>
       
        <div class="row">
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-leaf logo-small"></span>
                <h4>GREEN</h4>
                <p>Lorem ipsum dolor sit amet..</p>
            </div>
            <div class="col-sm-4">
                <span class="glyphicon glyphicon-certificate logo-small"></span>
                <h4>CERTIFIED</h4>
                <p>Lorem ipsum dolor sit amet..</p>
            </div>
            <div class="col-sm-4">
              <span class="glyphicon glyphicon-wrench logo-small"></span>
              <h4>HARD WORK</h4>
              <p>Lorem ipsum dolor sit amet..</p>
            </div>
        </div>
    </div>
    <!----------------------------------------------------------->
    <div class="container-fluid text-center bg-grey>
        <h2>Portfolio</h2>
        <h4>What we have created</h4>
            <div class="row text-center">
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="paris.jpg" alt="Paris">
                        <p><Strong>Paris</strong></P>
                        <p>Yes,we built Paris</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="newyork.jpg" alt="New York">
                        <p><strong>New York</strong></p>
                        <p>We built New York</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="sanfran.jpg" alt="San Francisco">
                        <p><strong>San Francisco</strong></p>
                        <p>We built San Francisco</p>
                    </div>
                </div>
            </div>
    </div>
    <!---------------------------------------------------------------------->
    <h2 class="text-center">What our customers say</h2>
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!--Wrapper for slides-->
        <div class="carousel-inner role="listbox">
            <div class="item active">
                <h4>"This company is the best. I am so happy with the result!"
                <br><span style="font-style:normal;">Michael Roe, Vice President,
                Comment Box</span></h4>
            </div>
            <div class="item">
                <h4>"One word... WOW!!"<br><span style="font-style:normal;">John
                Doe,Salesman,Rep Inc</span></h4>
            </div>
            <div class="item">
                <h4>"Could I.. BE any more happy with this company?"<br><span
style="font-stye:normal;">
                Chandler Bing,Actor,FriendsAlot</span></h4>
            </div>
        </div>
        <!-----left and right controls-->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
           
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
   
    <div class="container-fluid">
        <div class="text-center">
            <h2>Pricing</h2>
            <h4>Choose a payment plan that works for you</h4>
           
        </div>
        <div class="row">
        <!--------------------------------------->
            <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                        <h1>Basic</h1>
                    </div>
                    <div class="panel-body">
                        <p><strong>20</strong>Lorem</p>
                        <p><strong>15</strong>Ipsum</p>
                        <p><strong>5</strong>Dolor</p>
                        <p><strong>2</strong>Sit</p>
                        <p><strong>Endless</strong>Amet</p>
                    </div>
                    <div class="panel-flooter">
                        <h3>$19</h3>
                        <h4>per month</h4>
                        <button class="btn btn-lg">Sign Up</button>
               
                    </div>
                </div>
            </div>
        <!---------------------------------------------->
        <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                        <h1>Pro</h1>
                    </div>
                    <div class="panel-body">
                        <p><strong>50</strong>Lorem</p>
                        <p><strong>25</strong>Ipsum</p>
                        <p><strong>10</strong>Dolor</p>
                        <p><strong>2</strong>Sit</p>
                        <p><strong>Endless</strong>Amet</p>
                    </div>
                    <div class="panel-flooter">
                        <h3>$29</h3>
                        <h4>per month</h4>
                        <button class="btn btn-lg">Sign Up</button>
               
                    </div>
                </div>
        </div>
        <!-------------------------------------------------->
        <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                        <h1>Premium</h1>
                    </div>
                    <div class="panel-body">
                        <p><strong>100</strong>Lorem</p>
                        <p><strong>50</strong>Ipsum</p>
                        <p><strong>25</strong>Dolor</p>
                        <p><strong>10</strong>Sit</p>
                        <p><strong>Endless</strong>Amet</p>
                    </div>
                    <div class="panel-flooter">
                        <h3>$49</h3>
                        <h4>per month</h4>
                        <button class="btn btn-lg">Sign Up</button>
                    </div>
                </div>
        </div>
        <!----------------------------------------------------------------->   
        </div>
    </div>
            <!------------------------------------------------------------------------------->
        <div class="container-fluid bg-grey">
          <h2 class="text-center">CONTACT</h2>
          <div class="row">
            <div class="col-sm-5">
              <p>Contact us and we'll get back to you within 24 hours.</p>
              <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
              <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
              <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
            </div>
            <div class="col-sm-7">
              <div class="row">
                <div class="col-sm-6 form-group">
                  <input class="form-control" id="name" name="name" placeholder="Name"
type="text" required>
                </div>
                <div class="col-sm-6 form-group">
                  <input class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
                </div>
              </div>
              <textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea><br>
              <div class="row">
                <div class="col-sm-12 form-group">
                  <button class="btn btn-default pull-right" type="submit">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>

<div id="googleMap" style="height:400px;width:100%;"></div>

<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
var mapProp = {
  center:myCenter,
  zoom:12,
  scrollwheel:false,
  draggable:false,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<footer class="container-fluid bg-4 text-center">
        <p>Bootstrap Theme Made By<a href="http://www.w3schools.com">www.w3schools.com</a></p>
    </footer>
</body>
</html>

<DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Theme The Band</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .container{
            padding:80px 120px;
        }
        .person{
            border:10px solid transparent;
            margin-bottom:25px;
            width:80%;
            height:80%;
            opacity:0.7;
        }
        .person:hover{
            border-corlor:#f1f1f1;
        }
        .carousel-inner img {
            -webkit-filter: grayscale(90%);
            filter: grayscale(90%); /* make all photos black and white */
            width: 100%; /* Set width to 100% */
            margin: auto;
        }

.carousel-caption h3 {
            color: #fff !important;
        }

@media (max-width: 600px) {
            .carousel-caption {
                display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
            }
        }
        .bg-1{
            background:#2d2d30;
            color:#bdbdbd;
        }
        .bg-1 h3{
            color:#fff;
        }
        .bg-1 p{
            font-style:italic;
        }
         /* Remove rounded borders from list */
        .list-group-item:first-child {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

.list-group-item:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

/* Remove border and add padding to thumbnails */
        .thumbnail {
            padding: 0 0 15px 0;
            border: none;
            border-radius: 0;
        }

.thumbnail p {
            margin-top: 15px;
            color: #555;
        }

/* Black buttons with extra padding and without rounded borders */
        .btn {
            padding: 10px 20px;
            background-color: #333;
            color: #f1f1f1;
            border-radius: 0;
            transition: .2s;
        }

/* On hover, the color of .btn will transition to white with black text */
        .btn:hover, .btn:focus {
            border: 1px solid #333;
            background-color: #fff;
            color: #000;
        }
        .modal-header, h4, .close {
            background-color: #333;
            color: #fff !important;
            text-align: center;
            font-size: 30px;
        }

.modal-header, .modal-body {
            padding: 40px 50px;
        }
        .nav-tabs li a {
            color: #777;
        }
        #googleMap {
        width: 100%; /* Span the entire width of the screen */
        height: 400px; /* Set the height to 400 pixels */
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%); /* Change the color of the map to black and white * /
        }
         /* Add a dark background color with a little bit see-through */
        .navbar {
            margin-bottom: 0;
            background-color: #2d2d30;
            border: 0;
            font-size: 11px !important;
            letter-spacing: 4px;
            opacity:0.9;
        }

/* Add a gray color to all navbar links */
        .navbar li a, .navbar .navbar-brand {
            color: #d5d5d5 !important;
        }

/* On hover, the links will turn white */
        .navbar-nav li a:hover {
            color: #fff !important;
        }

/* The active link */
        .navbar-nav li.active a {
            color: #fff !important;
            background-color:#29292c !important;
        }

/* Remove border color from the collapsible button */
        .navbar-default .navbar-toggle {
            border-color: transparent;
        }

/* Dropdown */
        .open .dropdown-toggle {
            color: #fff ;
            background-color: #555 !important;
        }

/* Dropdown links */
        .dropdown-menu li a {
            color: #000 !important;
        }

/* On hover, the dropdown links will turn red */
        .dropdown-menu li a:hover {
            background-color: red !important;
        }
    </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
    <div class="container text-center">
              <h3>THE BAND</h3>
              <p><em>We love music!</em></p>
              <p>We have created a fictional band website. Lorem ipsum..</p>
              <br>
            <div class="row">
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo" class="collapse">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo2" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo2" class="collapse">
                    <p>Drummer</p>
                    <p>Loves drummin'</p>
                    <p>Member since 1988</p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <p class="text-center"><strong>Name</strong></p><br>
                  <a href="#demo3" data-toggle="collapse">
                    <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
                  </a>
                  <div id="demo3" class="collapse">
                    <p>Bass player</p>
                    <p>Loves math</p>
                    <p>Member since 2005</p>
                  </div>
                </div>
            </div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!--indicators-->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!--wrapper for slides-->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="ny.jpg" alt="New York">
                        <div class="carousel-caption">
                            <h3>New York</h3>
                            <p>The atmosphere in New York is lorem ipsum.</p>
                            
                        </div>
                    </div>
                    <div class="item">
                        <img src="chicago.jpg" alt="Chicago">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you, Chicago -A night we won't forget.</p>
                            
                        </div>
                    </div>
                    <div class="item">
                        <img src="la.jpg" alt="Los Angeles">
                        <div class="carousel-caption">
                            <h3>LA</h3>
                            <p>Even though the traffic was a mess,we had the best time.</p>
                            
                        </div>
                    </div>
            
                <!--left and right controls-->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                </div>
        </div>
    </div>
    
    <div class="bg-1">
        <div class="container">
            <h3 class="text-center">tour dates</h3>
            <p class="text-center">Lorem ipsum we'll paly you some music.<br>Remember to book your tickets!</p>
            
            <ul class="list-group">
                <li class="list-group-item">Setember  <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">Setember  <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">Setember <span class="badge">3</span></li>
            </ul>
        
        <div class="row text-center">
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="paris.jpg" alt="Paris">
              <p><strong>Paris</strong></p>
              <p>Fri. 27 November 2015</p>
              <!--used to open the Modal-->
              <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="newyork.jpg" alt="New York">
              <p><strong>New York</strong></p>
              <p>Sat. 28 November 2015</p>
              <button class="btn">Buy Tickets</button>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="thumbnail">
              <img src="sanfran.jpg" alt="San Francisco">
              <p><strong>San Francisco</strong></p>
              <p>Sun. 29 November 2015</p>
              <button class="btn">Buy Tickets</button>
            </div>
          </div>
        </div>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!--Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&&times;</button>
                        <h4><span class="glyphicon glyphicon-lock"></span>
                        Tickets</h4>
                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <lable for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>Ticets,$23 per person</label>
                                    <input type="number" class="form-control" id="psw" placeholder="How many?">
                                </div>
                                <div class="form-group">
                                    <lable for="usrname"><span class="glyphicon glyphicon-user"></span>send to</label>
                                    <input type="text" class="form-control" id="usrname" placeholder="Enter email">
                                    
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>Candel</button>
                            <p>Need<a href="#">help?</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
     <div class="container">
      <h3 class="text-center">Contact</h3>
      <p class="text-center"><em>We love our fans!</em></p>
      <div class="row test">
        <div class="col-md-4">
          <p>Fan? Drop a note.</p>
          <p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
          <p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
          <p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-sm-6 form-group">
              <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
            </div>
            <div class="col-sm-6 form-group">
              <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
            </div>
          </div>
          <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
          <div class="row">
            <div class="col-md-12 form-group">
              <button class="btn pull-right" type="submit">Send</button>
            </div>
          </div>
        </div>
  </div>
</div>
<!---------------------add a panel tab------------->
    <h3 class="text-center">From The Blog</h3>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
        <li><a data-toggle="tab" href="#menu1">Chandler</a></li>
        <li><a data-toggle="tab" href="#menu2">Peter</a></li>
    </ul>
    
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h2>Mike Ross, Manager</h2>
            <p>Man,we've been on the road for some time now.Looking forward to lorem ipsum.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h2>Chandler Bing, Guitarist</h2>
            <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h2>Chandler Bing, Guitarist</h2>
            <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
        </div>
    </div>
        <div id="googleMap"></div>

<!-- Add Google Maps -->
        <script src="http://maps.googleapis.com/maps/api/js"></script>
        <script>
        var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
        var mapProp = {
        center:myCenter,
        zoom:12,
        scrollwheel:false,
        draggable:false,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
        position:myCenter,
        });

marker.setMap(map);
        }

google.maps.event.addDomListener(window, 'load', initialize);
        </script>
                <!-------add nav bar---------->
                <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <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="#">Logo</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">HOME</a></li>
                <li><a href="#band">BAND</a></li>
                <li><a href="#tour">TOUR</a></li>
                <li><a href="#contact">CONTACT</a></li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                  </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
              </ul>
            </div>
          </div>
        </nav>
        <!---------------------add a footer--------------->
         <style>
        /* Add a dark background color to the footer */
        footer {
            background-color: #2d2d30;
            color: #f5f5f5;
            padding: 32px;
        }

footer a {
            color: #f5f5f5;
        }

footer a:hover {
            color: #777;
            text-decoration: none;
        }
        </style>S

<footer class="text-center">
          <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
            <span class="glyphicon glyphicon-chevron-up"></span>
          </a><br><br>
          <p>Bootstrap Theme Made By <a href="http://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
        </footer>
        <ul id="component_0__0__6612" class="bigimg">
                                <li id="p22876687" class="line1">
                    <a target="_blank" href="http://product.dangdang.com/22876687.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=22876687_0_1_q" title=" 国际大奖小说&mdash;&mdash;无字书图书馆 "><img alt=" 国际大奖小说&mdash;&mdash;无字书图书馆 " src="http://img3x7.ddimg.cn/64/31/22876687-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=22876687_0_1_q" href="http://product.dangdang.com/22876687.html" title=" 国际大奖小说&mdash;&mdash;无字书图书馆   "> 国际大奖小说&mdash;&mdash;无字书<font class="skcolor_ljg">图书</font>馆   </a></p><p class="detail">你知道吗,书也有生命!如果人人都不读书,你知道会有什么后果吗?一个荒废已久的图书馆,堆满了无字天书……是书被下了魔咒,还是人为所致呢?想解开它其中的秘密吗?带你走进无字书图书馆,寻找尘封已久的答案……★ 西班牙安徒生文学奖★胡里奥国际童书大奖提名奖★西班牙年度童书畅销榜冠军★世界各国儿童图书馆必备图书扪心自问,你有多久没读过一本书了?!</p><p class="price"> <span class="search_now_price">¥11.50</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥16.00</span><span class="search_discount">&nbsp;(7.19折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=22876687_0_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/22876687.html#comment">12359条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span>(西)<a title="(西)法布拉 著,李竞阳 译" name="itemlist-author" href="/?key2=法布拉&amp;medium=01&amp;category_path=01.00.00.00.00.00">法布拉</a> 著,<a title="(西)法布拉 著,李竞阳 译" name="itemlist-author" href="/?key2=李竞阳&amp;medium=01&amp;category_path=01.00.00.00.00.00">李竞阳</a> 译</span><span> /2012-08-01</span><span>  /<a title="新蕾出版社" name="P_cbs" href="/?key=&amp;key3=%D0%C2%C0%D9%B3%F6%B0%E6%C9%E7&amp;medium=01&amp;category_path=01.00.00.00.00.00">新蕾出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=22876687_0_1_q" href="javascript:AddToShoppingCart(22876687)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=22876687_0_1_q" href="javascript:showMsgBox('lcase22876687','22876687','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase22876687" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23483777" class="line2">
                    <a target="_blank" href="http://product.dangdang.com/23483777.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23483777_1_1_q" title=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 ) "><img alt=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 ) " src="http://img3x7.ddimg.cn/86/25/23483777-1_b_0.jpg" data-original="http://img3x7.ddimg.cn/86/25/23483777-1_b_0.jpg" style="display: block;"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23483777_1_1_q" href="http://product.dangdang.com/23483777.html" title=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 )   "> 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀<font class="skcolor_ljg">图书</font> 汇集国内原创知名作家力作 )   </a></p><p class="detail">★中国儿童文学奖“全国优秀儿童文学奖”得主经典力作★享受精品儿童文学蕴含的内在品质★感受优秀儿童文学散发的独特魅力</p><p class="price"> <span class="search_now_price">¥13.00</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥17.00</span><span class="search_discount">&nbsp;(7.65折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23483777_1_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23483777.html#comment">84条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="孙卫卫 著" name="itemlist-author" href="/?key2=孙卫卫&amp;medium=01&amp;category_path=01.00.00.00.00.00">孙卫卫</a> 著</span><span> /2014-06-01</span><span>  /<a title="长江少年儿童出版社" name="P_cbs" href="/?key=&amp;key3=%B3%A4%BD%AD%C9%D9%C4%EA%B6%F9%CD%AF%B3%F6%B0%E6%C9%E7&amp;medium=01&amp;category_path=01.00.00.00.00.00">长江少年儿童出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23483777_1_1_q" href="javascript:AddToShoppingCart(23483777)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=23483777_1_1_q" href="javascript:showMsgBox('lcase23483777','23483777','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23483777" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23470043" class="line3">
                    <a target="_blank" href="http://product.dangdang.com/23470043.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23470043_2_1_q" title=" 小水的除夕 2014中国好书榜获奖图书 "><img alt=" 小水的除夕 2014中国好书榜获奖图书 " src="http://img3x3.ddimg.cn/14/18/23470043-1_b_1.jpg" data-original="http://img3x3.ddimg.cn/14/18/23470043-1_b_1.jpg" style="display: block;"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23470043_2_1_q" href="http://product.dangdang.com/23470043.html" title=" 小水的除夕 2014中国好书榜获奖图书   "> 小水的除夕 2014中国好书榜获奖<font class="skcolor_ljg">图书</font>   </a></p><p class="detail"></p><p class="price"> <span class="search_now_price">¥10.50</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥18.00</span><span class="search_discount">&nbsp;(5.84折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23470043_2_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23470043.html#comment">6257条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="祁智 著" name="itemlist-author" href="/?key2=祁智&amp;medium=01&amp;category_path=01.00.00.00.00.00">祁智</a> 著</span><span> /2014-03-01</span><span>  /<a title="江苏少年儿童出版社" name="P_cbs" href="/?key=&amp;key3=%BD%AD%CB%D5%C9%D9%C4%EA%B6%F9%CD%AF%B3%F6%B0%E6%C9%E7&amp;medium=01&amp;category_path=01.00.00.00.00.00">江苏少年儿童出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23470043_2_1_q" href="javascript:AddToShoppingCart(23470043)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=23470043_2_1_q" href="javascript:showMsgBox('lcase23470043','23470043','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23470043" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23427463" class="line4">
                    <a target="_blank" href="http://product.dangdang.com/23427463.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23427463_3_1_q" title=" 小屁孩日记-为什么都是我的错(修订本)(注音全彩美绘,系列畅销150万册,被全国多所小学选为课外阅读图书) "><img alt=" 小屁孩日记-为什么都是我的错(修订本)(注音全彩美绘,系列畅销150万册,被全国多所小学选为课外阅读图书) " src="data:images/model/guan/url_none.png" data-original="http://img3x3.ddimg.cn/4/25/23427463-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23427463_3_1_q" href="http://product.dangdang.com/23427463.html" title=" 小屁孩日记-为什么都是我的错(修订本)(注音全彩美绘,系列畅销150万册,被全国多所小学选为课外阅读图书)  (注音全彩美绘,系列畅销170万册,被全国多所小学选为课外阅读图书。) "> 小屁孩日记-为什么都是我的错(修订本)(注音全彩美绘,系列畅销150万册,被全国多所小学选为课外阅读<font class="skcolor_ljg">图书</font>)  (注音全彩美绘,系列畅销170万册,被全国多所小学选为课外阅读图书。) </a></p><p class="detail">小屁孩的小屁事,让你笑翻天!小屁孩的快乐主义:开心有理,快乐无敌!</p><p class="price"> <span class="search_now_price">¥13.20</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥18.00</span><span class="search_discount">&nbsp;(7.34折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23427463_3_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23427463.html#comment">393条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="黄宇 著" name="itemlist-author" href="/?key2=黄宇&amp;medium=01&amp;category_path=01.00.00.00.00.00">黄宇</a> 著</span><span> /2014-01-01</span><span>  /<a title="春风文艺出版社" name="P_cbs" href="/?key=&amp;key3=%B4%BA%B7%E7%CE%C4%D2%D5%B3%F6%B0%E6%C9%E7&amp;medium=01&amp;category_path=01.00.00.00.00.00">春风文艺出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23427463_3_1_q" href="javascript:AddToShoppingCart(23427463)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=23427463_3_1_q" href="javascript:showMsgBox('lcase23427463','23427463','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23427463" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23621498" class="line5">
                    <a target="_blank" href="http://product.dangdang.com/23621498.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23621498_4_1_q" title=" 图说天下学生版 地理百科 地球奇幻之旅(中国卷)(全3卷) "><img alt=" 图说天下学生版 地理百科 地球奇幻之旅(中国卷)(全3卷) " src="data:images/model/guan/url_none.png" data-original="http://img3x8.ddimg.cn/98/32/23621498-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23621498_4_1_q" href="http://product.dangdang.com/23621498.html" title=" 图说天下学生版 地理百科 地球奇幻之旅(中国卷)(全3卷)  地理不再神秘,科普不再无趣,专为孩子量身打造“中国国家地理”丛书。34个行政区划、2000张精美图片 "> 图说天下学生版 地理百科 地球奇幻之旅(中国卷)(全3卷)  地理不再神秘,科普不再无趣,专为孩子量身打造“中国国家地理”丛书。34个行政区划、2000张精美图片 </a></p><p class="detail">1.专门为小学生打造的一套全面的百科类地理读物。本套丛书从华北、华东、华中、华南、西南、东北和西北7个地理区,北京、天津、河北、内蒙古等34个省级行政区出发,对中国国家地理地貌做了全面而详细的讲解&mdash;&mdash;从奇山异峰、大江大河,到民俗民风、美景小吃,包罗万象,完美呈现。2.2000余张专业摄影师现场拍摄的图片和栩栩如生的手绘插图,让孩子足不出户,便将中国各地地理风貌和美景、美食尽收眼底。全书版式活泼新颖,图文并茂,相得益彰将美丽中国充分地展现在孩子面前。</p><p class="price"> <span class="search_now_price">¥26.10</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥49.00</span><span class="search_discount">&nbsp;(5.33折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23621498_4_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23621498.html#comment">333条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="日知图书" name="itemlist-author" href="/?key2=日知图书&amp;medium=01&amp;category_path=01.00.00.00.00.00">日知图书</a></span><span> /2015-01-01</span><span>  /<a title="北京联合出版公司" name="P_cbs" href="/?key=&amp;key3=%B1%B1%BE%A9%C1%AA%BA%CF%B3%F6%B0%E6%B9%AB%CB%BE&amp;medium=01&amp;category_path=01.00.00.00.00.00">北京联合出版公司</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23621498_4_1_q" href="javascript:AddToShoppingCart(23621498)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=23621498_4_1_q" href="javascript:showMsgBox('lcase23621498','23621498','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23621498" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23621501" class="line6">
                    <a target="_blank" href="http://product.dangdang.com/23621501.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23621501_5_1_q" title=" 图说天下学生版 历史百科 历史其实很有趣儿(中国卷)(全4卷) "><img alt=" 图说天下学生版 历史百科 历史其实很有趣儿(中国卷)(全4卷) " src="data:images/model/guan/url_none.png" data-original="http://img3x1.ddimg.cn/2/35/23621501-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23621501_5_1_q" href="http://product.dangdang.com/23621501.html" title=" 图说天下学生版 历史百科 历史其实很有趣儿(中国卷)(全4卷)  精彩,有趣儿,看得见,历史不再板着脸。权威准确,有图有真相,轻松读懂中华上下五千年。 "> 图说天下学生版 历史百科 历史其实很有趣儿(中国卷)(全4卷)  精彩,有趣儿,看得见,历史不再板着脸。权威准确,有图有真相,轻松读懂中华上下五千年。 </a></p><p class="detail">1、 为小学生量身定制。从选目、撰稿、插图到装帧设计,充分考虑小读者的阅读水平和审美取向,保证良好的阅读体验。2、 图文并茂,生动而有趣。把中华上下五千年的历史剪裁成300余个妙趣横生的小故事,每个故事都插配精美的手绘插图,让繁杂的中国历史变得直观而生动。3、 审读,兼具知识性和趣味性。本套系丛书聘请中国社会科学院中国历史所的研究员和中华书局编审审定,在追求趣味性和可读性的同时,也保证了史实的准确性。4、四本一套,全彩色图文版,精美包装,小学生必备历史知识读物,送给孩子的礼物。</p><p class="price"> <span class="search_now_price">¥28.90</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥59.00</span><span class="search_discount">&nbsp;(4.9折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23621501_5_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23621501.html#comment">627条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="日知图书" name="itemlist-author" href="/?key2=日知图书&amp;medium=01&amp;category_path=01.00.00.00.00.00">日知图书</a></span><span> /2015-01-01</span><span>  /<a title="北京联合出版公司" name="P_cbs" href="/?key=&amp;key3=%B1%B1%BE%A9%C1%AA%BA%CF%B3%F6%B0%E6%B9%AB%CB%BE&amp;medium=01&amp;category_path=01.00.00.00.00.00">北京联合出版公司</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23621501_5_1_q" href="javascript:AddToShoppingCart(23621501)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&amp;pos=23621501_5_1_q" href="javascript:showMsgBox('lcase23621501','23621501','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23621501" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                                <li id="p23512545" class="line7">
                    <a target="_blank" href="http://product.dangdang.com/23324596.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&amp;pos=23324596_59_1_q" title=" 张洁儿童文学获奖作品&mdash;&mdash;幽秘花期(冰心儿童图书奖获奖作品,梅子涵作序推荐,献给所有成长中的女孩,以及不曾放弃追求自我的人们) "><img alt=" 张洁儿童文学获奖作品&mdash;&mdash;幽秘花期(冰心儿童图书奖获奖作品,梅子涵作序推荐,献给所有成长中的女孩,以及不曾放弃追求自我的人们) " src="data:images/model/guan/url_none.png" data-original="http://img3x6.ddimg.cn/97/18/23324596-1_b_2.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&amp;pos=23324596_59_1_q" href="http://product.dangdang.com/23324596.html" title=" 张洁儿童文学获奖作品&mdash;&mdash;幽秘花期(冰心儿童图书奖获奖作品,梅子涵作序推荐,献给所有成长中的女孩,以及不曾放弃追求自我的人们)   "> 张洁儿童文学获奖作品&mdash;&mdash;幽秘花期(冰心儿童<font class="skcolor_ljg">图书</font>奖获奖作品,梅子涵作序推荐,献给所有成长中的女孩,以及不曾放弃追求自我的人们)   </a></p><p class="detail">★冰心儿童图书奖获奖作品★著名儿童文学作家梅子涵作序推荐★献给所有成长中的女孩,以及不曾放弃追求自我的人们★少女成长必读书系,诠释一段青涩的少女时光</p><p class="price"> <span class="search_now_price">¥12.20</span><a style="text-decoration:none;" class="search_discount">定价:</a><span class="search_pre_price">¥18.00</span><span class="search_discount">&nbsp;(6.78折)</span><a target="_blank" class="search_e_price" href="http://product.dangdang.com/1900424814.html">电子书:<i>¥3.60</i></a></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style="width: 100%;"></span></span><a ddclick="act=click_review_count&amp;pos=23324596_59_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23324596.html#comment">53条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="张洁 著" name="itemlist-author" href="/?key2=张洁&amp;medium=01&amp;category_path=01.00.00.00.00.00">张洁</a> 著</span><span> /2013-08-01</span><span>  /<a title="湖南少儿出版社" name="P_cbs" href="/?key=&amp;key3=%BA%FE%C4%CF%C9%D9%B6%F9%B3%F6%B0%E6%C9%E7&amp;medium=01&amp;category_path=01.00.00.00.00.00">湖南少儿出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&amp;pos=23324596_59_1_q" href="javascript:AddToShoppingCart(23324596)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_buyEBook&amp;pos=23324596_59_1_q'" href="http://product.dangdang.com/1900424814.html" dd_name="购买电子书" name="ebook_buy_button" target="_blank" class="search_btn_cart">购买电子书</a><a ddclick="act=normalResult_favor&amp;pos=23324596_59_1_q" href="javascript:showMsgBox('lcase23324596','23324596','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23324596" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p>                </li>
                        </ul>
        <script>
        $(document).ready(function(){
            // Initialize Tooltip
            $('[data-toggle="tooltip"]').tooltip();
        })
        </script>
</body>
</html>

上一篇:JAVA实现打印机


下一篇:在IntelliJ IDEA里创建简单的基于Maven的SpringMVC项目