JAVA第二十四天（bootstrap筆記）
Bootstrap概述
<!DOCTYPE html>
<html>javascript
<head>
<meta charset="UTF-8">
<title></title>
<!--
bootstrap來自於Twitter ,前端框架
做用：複製粘貼
響應式頁面：適應不一樣的分辨率顯示不一樣樣式提升用戶體驗
bootstrap官方網站https://v3.bootcss.com
用於生產環境的Bootstrap
bootstrap源碼
Bootstrap 是移動設備優先的
爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤
Bootstrap全局CSS樣式
柵格樣式
表格樣式
組件
字體圖標
下拉菜單
導航條
JAVAScript插件
Carousel輪播圖
-->css
<!-- 最新版本的 Bootstrap 核心 CSS 文件
<link rel="stylesheet" href="css/bootstrap.css" />
須要引入JQuery 由於Bootstrap依賴於Jqury
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
最新的 Bootstrap 核心 JavaScript 文件
<script type="text/javascript" src="js/bootstrap.js" ></script>-->html
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--可選的 Bootstrap 主題文件（通常不用引入）-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>前端
<!--爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤-->
<meta name="viewport" content="width=device-width, initial-scale=1">java
<style>
div {
border: 1px solid red;
}
</style>
</head>jquery
<body>
<!-- <div class="container">
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式佈局的容器。
container 類用於固定寬度並支持響應式佈局的容器
</div>
<div class="container-fluid">
.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
</div>-->
<!--
柵格系統將頁面橫向平均分紅12部分
「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
col-md-1表示在桌面(≥992px)顯示佔一格，col-sm-2表示在平板(≥768px)大小界面顯示佔兩格，col-xs-適配手機(<768px)，col-lg-適配大屏幕(≥1200px)
詳見 Bootstrap中文檔
-->
<!-- <div class="container">
<div class="row">
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>-->
<div class="container">
<!--爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式
導航和導航條組件只支持 <button> 元素
（默認樣式）btn-Default
（首選項）btn-Primary
（成功）btn-Success
（通常信息）btn-Info
（警告）btn-Warning
（危險）btn-Danger
（連接）btn-Link
<a> 元素被做爲按鈕使用 -- 並用於在當前頁面觸發某些功能 -- 而不是用於連接其餘頁面或連接當前頁面中的其餘部分，那麼，務必爲其設置 role="button" 屬性
儘量使用 <button> 元素來得到在各個瀏覽器上得到相匹配的繪製效果
Firefox <30 版本的瀏覽器上出現的一個 bug，其表現是：阻止咱們爲基於 <input> 元素所建立的按鈕設置 line-height 屬性
-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!--HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。-->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<div class="row">
<div class="col-md-12">
柵格系統
</div>
</div>
</div>
</body>npm
</html>json
--------------------------------------------------------------------------------------------------------------------------------------------------------------------bootstrap
表格樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<!--爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線
經過添加 .table-hover 類可讓 <tbody> 中的每一行對鼠標懸停狀態做出響應。
-->
</head>
<body>
<table class="table table-hover">
<tr>
<td>項目</td>
<td>分類名稱</td>
<td>分類項目</td>
<td>分類描述</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>數組
-------------------------------------------------------------------------------------------------------------------------------------------------------------
導航條和輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--須要引入JQuery 由於Bootstrap依賴於Jqury-->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--
務必使用 <nav> 元素，或者，若是使用的是通用的 <div> 元素的話，務必爲導航條設置 role="navigation" 屬性，這樣可以讓使用輔助設備的用戶明確知道這是一個導航區域。
-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--
-->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="height: 600px;">
<div class="item active" >
<img src="img/tp1.jpg" alt="...">
<div class="carousel-caption">
<h3>creative women!</h3>
</div>
</div>
<div class="item">
<img src="img/tp2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/tp3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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="row">
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
響應式網站首頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新版本的 Bootstrap 核心 CSS 文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--須要引入JQuery 由於Bootstrap依賴於Jqury-->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<!--最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
響應式網站首頁
引入Bootstrap相關頭文件
1.div佈局容器class="conyainer"
2.放8行row
-->
</head>
<body>
<!--最外層的佈局容器-->
<div class="container">
<!--第一行-->
<div class="row">
<!--標題欄分爲三格-->
<div class="col-md-4 col-sm-6 col-xs-6">
<img src="img/logo/jpg" />
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<!--hidden-sm、在平板狀態顯示下隱藏-->
<img src="img/logo/jpg" />
</div>
<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;">
<a href="#">登陸</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--第二行導航欄部分-->
<nav class="navbar navbar-inverse">
<!--navbar-inverse背景爲黑色-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首頁</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">手機數碼 <span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">電腦辦公</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li>
<a href="#">美妝護膚</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分類 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">手機數碼</a></li>
<li><a href="#">電腦辦公</a></li>
<li><a href="#">鞋靴箱包</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">美妝護膚</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">其餘分類</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--第三行輪播圖（js插件）-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
<!--data-interval="2000"將默認的5秒輪播改爲2秒-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/tp1.jpg" alt="...">
<div class="carousel-caption">
<h3>creative women!</h3>
</div>
</div>
<div class="item">
<img src="img/tp2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/tp3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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="row">
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
<div class="col-md-4">
<h3>公司願景</h3>
<p>這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼這個公司很牛逼</p>
<a href="#" class="btn btn-info pull-right">瞭解更多</a>
</div>
</div>
<!--第四行最新商品-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="img/title.jpg" /></h3>
</div>
</div>
<!--第五行商品部份-->
<div class="row">
<!--左邊大圖部分-->
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="img/goods.jpg" />
</div>
<!--右邊商品部分-->
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="img/goods.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--第六行logo廣告部分-->
<div class="row">
<div class="col-md-12">
<img src="img/logo.jpg" width="100%" />
</div>
</div>
<!--第七行最新商品部分-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="img/title.jpg" /></h3>
</div>
</div>
<!--第八行商品部份-->
<div class="row">
<!--左邊大圖部分-->
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="img/goods.jpg" />
</div>
<!--右邊商品部分-->
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="img/goods.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="img/goods.jpg" />
<p>微波爐</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--第九行footer圖片-->
<div class="row">
<div class="col-md-12">
<img src="img/footer.jpg" width="100%" />
</div>
</div>
<!--第十行尾部連接-->
<div style="text-align: center;">
<a href="#">關於咱們</a>
<a href="#">聯繫咱們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情連接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a>
<br> Copyright © 2005-2016 CZ商城 版權全部
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
總結
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>總結</title> </head> <body> JQ方式校驗表單（要求） json： json對象{} json數組[{},{}] $.get(url,functin(data{})) （瞭解） bootstrap:是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。 全局CSS樣式：css樣式 柵格系統 將屏幕劃分紅12個格子、12列 class='row'當前是行 行裏面放的是列col-屏幕分辨率-數字（每一種分辨率數後的數字綜合必須是等於12，若是超過12靈氣一行） col-lg-數字 超寬屏幕 col-md-數字 中等屏幕 col-sm-數字 平板電腦 col-xs-數字 手機 組件：導航條、進度、字體 javascript插件：輪播圖 複製粘貼 響應式：會根據不一樣的分辨率顯示不一樣的頁面結構提升用戶體驗 HTML：超文本標記語言：設計網頁，決定了網頁的結構 CSS：層疊樣式表，主要用來梅花頁面，將梅花和HTML代碼進行分離一高代碼的複用性 javascript：腳本語言，由瀏覽器執行，所類型語言（var i），提供用戶交互 Jquery：javascript函數庫，進一步的封裝 選擇器 ID選擇器 類選擇器 元素選擇器 通配符選擇器 選擇器分組 層級選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器 兄弟選擇器 屬性選擇器 選擇器[屬性名稱=[屬性名稱='屬性值'] 表單選擇器 :input :text :password body>div>div.nth-child(7)>div.nth-child(3)>div.nth-child(8) 基本的過濾器： :first :last :even :odd :gt :lt :eq 表單對象屬性 :selected :checked </body> </html>
- 1. java第二十三天（JS筆記）
- 2. java第二十三天（JQ筆記）
- 3. Java第十二天
- 4. Java第二十天
- 5. Python 第十四天學習筆記
- 6. Android第二十四天
- 7. Android第四十二天
- 8. 第二十四天：exec
- 9. 自學第四十二天
- 10. 十一黃金週第三，第四天 （r10筆記第41天）
- 更多相關文章...
- • SQLite - Java - SQLite教程
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • RxJava操作符（四）Combining
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. java第二十三天（JS筆記）
- 2. java第二十三天（JQ筆記）
- 3. Java第十二天
- 4. Java第二十天
- 5. Python 第十四天學習筆記
- 6. Android第二十四天
- 7. Android第四十二天
- 8. 第二十四天：exec
- 9. 自學第四十二天
- 10. 十一黃金週第三，第四天 （r10筆記第41天）