1、css簡介
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
2、導入css
導入css有3種方式：
1.元素內嵌
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p >前端CSS基礎</p> </body> </html>
效果：
2.頁面嵌入
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<!--在頭部指定好CSS樣式然后，在標簽里使用class="樣式名應用"-->
<style>
.css_test{
background-color: darkorchid;
}
</style>
</head>
<body>
<div>
<p class="css_test">
<!--這里應用指定好的CSS樣式名即可-->
前端之CSS學習
</p>
</div>
</body>
</html>效果：
3.外部引用
也是將一個.css文件引入到HTML文件中
# css定義，文件名稱color.css
.page_color{
/*設置背景顏色及寬帶*/
background-color: darkorchid;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<!--這里通過link導入樣式，有點類似與python導入模塊中的import *-->
<link rel="stylesheet" href="color.css">
</head>
<body>
<div>
<p class=page_color>
<!--這里直接應用指定好的CSS樣式名即可-->
前端CSS基礎
</p>
</div>
</body>
</html>效果：
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，
閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，
因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。此外行內的樣式等級最高
4.優先級
標簽>頁面嵌入>外部引用
3、css選擇器(常用)
標簽選擇器：
div { background-color:red; }
<div > </div>
class選擇器：
.bd { background-color:red; }
<div class='bd'> </div>
id選擇器：
#idselect { background-color:red; }
<div id='idselect' > </div>
關聯選擇器：
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
組合選擇器：
input,div,p{ background-color:red; }
屬性選擇器：
input[type='text']{ width:100px; height:200px; }
.c1[xiao='a']{color:red;}<br> <div class='c1' xiao='a'>自定義屬性選擇器</div> <br>
偽元素選擇器：
a:link{background-color:red;} # 鼠標沒有碰過的樣式
a:hover{background-color:red;} # 鼠標放上去的樣式
a:active{background-color:red;} # 選擇鏈接時的樣式
a:visited{background-color:red;} # 已經訪問過的鏈接的樣式案例：
<style>
/*標簽選擇器，找到所有的標簽應用以下樣式*/
div{
color: green;
}
/*id選擇器，找到標簽id等于i1的標簽，應用以下樣式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class選擇器，找到class=c1的所有標簽，應用一下樣式*/
.c1{
background-color: red;
}
/*層級選擇器，找到 class=c2 下的div下的p下的class=c3標簽，應用以下樣式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*組合選擇器，找到class=c4,class=c5,class=c6,的標簽，應用以下樣式*/
.c4,.c5,.c6{
background-color: aqua;
}
</style>CSS選擇器案例
1.id應用
"#",這個調用CSS樣式的方法，就是在頭部<style>#name{....}</style> # name意思就是所有id為name的都會使用這個css樣式
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style> #name{
background-color: red;
}
</style>
</head>
<body>
<div>
<p id="name">
<!--這里不需要指定，只要id=name的就會自動應用頭部指定的CSS樣式-->
前端CSS
</p>
<p id="name">
前端HTML
</p>
</div>
</body>效果：
ID選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
/*ID選擇器*/ #i1{
background-color:red;
}
</style>
</head>
<body>
/* 為所有id為i1的ID應用樣式，注意咱們是為了測試，在實際的生產中ID不能相同 */
<a id="i1"> id 選擇器 </a> <a id="i1"> id 選擇器 </a> <a id="i2"> 如果ID不同,那么將不會應用樣式 </a>
</body>
</html>效果：
2.標簽應用
為指定標簽統一設置格式：在頭部<style>p{....}</style> 這里的p是標簽的名稱，也可以是div這樣就會給所有的div設置格式
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
p{
background-color: lightskyblue;
width: 100px;
height:20px;
}
</style>
</head>
<body>
<div>
<p>
<!--這里不需要指定，只要id=name的就會自動應用頭部指定的CSS樣式-->
前端CSS
</p>
<p>
前端HTML
</p>
</div>
</body>效果：
標簽選擇器
為類型標簽設置樣式例如：<div>、<a>、等標簽設置一個樣式，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
/*標簽選擇器，如果啟用標簽選擇器所有指定的標簽講默認使用此樣式*/
div{
font-size: 19px;
} </style>
</head>
<body>
<div>
font size test 19
</div>
</body>
</html>效果：
3.類選擇器
class選擇器，id是可以相同的，代碼如下：
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<!--在頭部指定好CSS樣式然后，在標簽里使用class="樣式名應用"-->
<style>
/*類選擇器標簽*/
.cls{
background-color:blue;
font-size: 15px;
} </style>
</head>
<body>
<!--任何類型的標簽都可以調用類選擇器-->
<div class="cls"> class test div </div>
<a class="cls"> class test a </a>
<span class="cls"> class test span </span>
</body>效果：
注：以上三種選擇器，建議使用第三種
4.關聯選擇器
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>CSS學習</title>
<style>
/*為一個標簽應用了,類選擇器,下的li標簽設置樣式*/
.container li{
background-color: pink;
}
</style></head><body>
<!--下面的div應用了container類選擇器,那么他下面的所有的li標簽將應用上面設置的樣式-->
<div class="container">
<div >
test </div>
<ul>
<li>
li1 </li>
<li>
li2 </li>
<li>
li3 </li>
</ul>
</div></body></html>效果圖：
關聯選擇器應用場景：為某標簽下面的標簽設置指定的樣式：
# 下面的代碼就是為應用了這個類選擇器的標簽下面的所有li標簽設置樣式
.container li{
background-color: pink;
}
# 問：如果在上面的代碼基礎上為li標簽下的a標簽設置樣式怎么辦呢？在li后面再加個a即可！
.container li a {
background-color: pink;
}案例：
<!DOCTYPE html><html lang="en"><head>
<style>
/*關聯選擇器：為應用了container下面的子元素下應用了l類選擇器下面的應用了p類選擇器設置樣式*/
.container .l .p {
background-color: pink;
}
</style></head><body>
<div class="container">
<div class="l">
test <div>
<ul>
<!--這里需要注意,他們只要是有包換關系就行,不一定非得挨著-->
<li class="p">
hello shuaige </li>
</ul>
</div>
</div>
</div></body></html>效果圖：
5.組合選擇器
有這么一個場景，看下面的關聯組合器，cc1和cc2都要使用相同的樣式怎么辦？重寫一遍？
.container .a .cc1 {
background-color: pink;
}
.container .a .cc2 {
background-color: pink;
}解決方法代碼如下：
.container .a .cc1,.container .a .cc2 {
background-color: pink;
}上面cc1后面的“逗號”就是或的關系，如果路徑都是相同的話可以進行改良代碼如下：
.container .a .cc1,.cc2 {
background-color: pink;
}這里組合的時候他是按照第一個出現的逗號來進行處理的，看下面的代碼：
/*組合選擇器*/
.container b ,.a .cc1,.cc2 {
background-color: pink;
}
/*組合選擇器分解,上面的分解完成之后誰來應用:background-color: pink;這個樣式呢?*/
.container b
.container b .a .cc1
.container b .cc2
......這里需要注意，“逗號”是或的關系，一般這個不常用，常用的是上面的方法6.屬性選擇器
寫表單驗證的時候最常用,舉個例子來說看下面的代碼：
我要在這么input下找到type為text的標簽并且給他設置樣式，在上面咱們知道了組合標簽，但是組合選擇器最小單元是標簽，他不能定位到type屬性
<div> <input type="text" /> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div>
怎么做呢？在組合選擇器后面加個[type=“text”]即可
<style>
/*input和[之間不能有空格]*/
.con input[type="text"] {
border:3px solid red;
}
</style><!DOCTYPE html><html lang="en"><head>
<style>
/*input和[之間不能有空格]*/
.con input[type="text"] {
border:3px solid red;
}
</style></head><body>
<div>
<input type="text" />
<input type="password" />
<input type="file" />
<input type="checkbox"/>
<input type="button"/>
<input type="reset"/>
</div></body></html>效果圖：
需求又來了，我想找到input標簽為type為text并且name為“lianxi”的那個input標簽
<div class="con"> <input type="text" /> <input type="text" name="lianxi"/> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div>
解決方法：在增加一個屬性就行了(注意中括號之間沒有空格不會報錯但是沒有效果)，代碼如下：
<style>
/*input和[之間不能有空格]*/
.con input[type="text"][name="shuaige"] {
border:3px solid red;
}
</style>效果：
屬性標簽經常用，要記住
也可以使用自定義屬性來定義,并且所有的標簽都可以使用自定義屬性：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
/*input和[之間不能有空格]*/
.con input[type="text"][alex="shuaige"] {
border:3px solid red;
}
</style></head><body>
<div class="con">
<input type="text" />
<input type="text" alex="shuaige" />
<input type="password" />
<input type="file" />
<input type="checkbox"/>
<input type="button"/>
<input type="reset"/>
</div></body></html>更多選擇器
4、css常用的屬性
1.顏色屬性：
color：green color：#ff6600 color：#f60 color：rgb(255,255,255) # 紅(R)、綠(G)、藍(B) 每個的取值范圍0~255 color：rgba(255,255,255,1) # RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的(色彩空間)透明度
2.字體屬性：
font-size:14px/50%/larger font-family:微軟雅黑,serif font-weight:normal(默認值)/bold(粗)/bolder(更粗)/lighter(更細) 100、200、300~900,400 = normal，而 700 = bold
簡寫方式:<br> font: 20px '微軟雅黑'
3.背景屬性：
background-p_w_picpath:url(圖片路徑) background-repeat:no-repeat(不重復)/repeat(重復平鋪滿)/repeat-x(向Y軸重復)/repeat-y(向Y軸重復) background-position: right top(20px 20px);(橫向：left center right)(縱向：top center bottom) 簡寫方式: background:背景顏色 url(圖像) 重復 位置 background:#f60 url(p_w_picpaths/bg,jpg) no-repeat top center
代碼：
<head> <meta charset="UTF-8"> <title>前端CSS</title> </head> <body> <div > <!--設置背景顏色--> Hello,html </div> <div > <!--設置背景圖片--> </div> </body>
div是塊級別的標簽，我們的圖片僅僅是一個小的圖片，但是現在是平鋪，所以看下面的代碼：
效果：
4.文本屬性：
text-align: center; # 橫向排列 line-height: 200px; # 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字體大小的百分比 text-indent: 150px; # 首行縮進， letter-spacing: 10px; # 字符間距 word-spacing: 20px; # 單詞間距
5.邊框屬性：
border-style: none # 無邊框 solid # 直線邊框 dashed # 虛線邊框 dotted # 點狀邊框 double # 雙線邊框 inherit # 繼承 groove # 凸槽邊框 ridge # 壟狀邊框、inset inset邊框、outset outset邊框 依賴于border-color屬性 border-width：px 固定值的邊框 medium 中等邊框 thick 粗邊框 thin 細邊框 inherit繼承 border-color：red #ff0000 rgb(255,255,0) rgba(255,255,0,0.1) <br>border-radius: px 倒角 簡寫方式： border：2px #f60 solid
代碼：
<!--border:有3個參數：線的粗細、線的樣式（實線、點、虛線等）、線的顏色--> <!--第一種：線的粗細為1像素，實線、紅色--> <div ></div> <!--第二種：線的粗細為1像素，點、藍色--> <div ></div> <!--第三種：線的粗細為1像素、虛線、紫色--> <div ></div> # 邊框可以單獨的設置一邊的邊框、上、下、左、右 <!--在左邊設置邊框，3px、實線、紅色--> <div >前端CSS</div>
6.列表屬性：
list-style-type:none 無標記。
disc 默認。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統的希伯來編號方式
armenian 傳統的亞美尼亞編號方式
georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數字
hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
list-style-position:inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
inherit 規定應該從父元素繼承 list-style-position 屬性的值。
list-style-p_w_picpath:URL 圖像的路徑。
none 默認。無圖形被顯示。
inherit 規定應該從父元素繼承 list-style-p_w_picpath 屬性的值。
簡寫方式:
list-style:square inside url('/i/arrow.jpg');7.dispaly屬性：
display:none # 隱藏屬性 block # 變塊級元素 inline # 變內聯元素 inline-block # 內聯元素默認不能設置長寬，塊級可以，這個讓內聯元素可以設置height width
代碼：
<!--display 為none將隱藏標簽--> <div >前端CSS</div> <!--display 為inline會將塊級別標簽調為內聯標簽--> <div >前端JavaScript</div> <!--display 為block會將內聯標簽調為塊級別標簽--> <a >前端HTML</a>
效果：
8.cursor屬性：
鼠標停放時顯示的效果
cursor:pointer # 鼠標變小手 help move
代碼：
<div >停放在這里顯示小手(pointer)</div> <div >停放在這里顯示問號(help)</div> <div >停放在這里顯示轉圈(wait)</div> <div >停放在這里顯示移動(move)</div> <div >停放在這里顯示定位(crosshair)</div>
9.opacity屬性：
opacity：0.4 # 0-1之間的小數，顏色透明度
10.z-index屬性：
z-index：10 # 設置優先級，一般用在模態對話框
11.margin,pading邊距屬性：
margin: 10px # 外邊距(本身不會增加)，與邊框的距離 padding: 10px # 內邊距(本身會增加) 遵循上右下左，元素之間的距離
12.float屬性
float:left/right clear:both <body> <div > <div >a</div> <div >b</div> <div ></div> </div> </body>
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端CSS</title>
<style>
.float-left{
width:20%;
background-color:red;
height: 500px;
float: left;
/*這里長和寬，可以用百分比或者直接指定像素來指定*/
}
.float-right{
width: 80%;
background-color:blue;
height: 500px;
float:left;
/*這里長和寬，可以用百分比或者直接指定像素來指定*/
}
</style>
</head>
<body>
<div class="float-left"></div>
<div class="float-right"></div>
</body>
</html>效果：
注：這里需要注意，有一種情況，如果不給父div設置高度，并且設置了float之后，子的float可能會覆蓋父div的顏色怎么辦？在父的div內加一條：
<div ></div>
13.position屬性
position: fixed # 固定瀏覽器窗口，網頁返回頂部的按鈕 absolute # 固定窗口 relative # 一般用于和absolute配合使用，相對于absolute <div > <div >111111</div> </div> <div > <div > <div >111</div> </div> </div>
模態對話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態對話框</title>
<style>
.hide {
display: none;
}
.modal{
width:400px;
height:300px;
background-color: #dddddd;
position: fixed;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-200px;
z-index: 10;
}
.shadow {
position: fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
/*background-color: black;*/
/*opacity: 0.6;*/
background-color: rgba(0,0,0,.6);
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加"/>
<div class="shadow"></div>
<div class="modal">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div ></div>
</body>
</html>注意：
1、css文檔從上到下執行，以最后一個為準
a {
font-size: 10px;
}
b {
font-size: 40px;
}
<p class = "a b"> ddd </p>2、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h2,h3,h4,h5,h6,h7,p,dt 切記
3、父div里面的子div都float,
方法1、在最后加一個div然后添上屬性 clear：both
方法2、定義一個通用屬性，
clearfix:afte{
content: '111';
display: block;
clear: both;
/* visibility 隱藏內容但占高度*/
visibility: hidden;
height: 0;
/*display: none;隱藏內容也不占高度*/
}一些案例：
帶圖像input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帶圖像的登錄</title>
<style>
.icon-name{
background-p_w_picpath: url(i_name.jpg);
height:16px;
width:200px;
display: inline-block;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div >
<input type="text"/>
<span class="icon-name" ></span>
</div>
</body>
</html>偽類選擇器運用清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類選擇器運用清除浮動</title>
<style>
.c1:after {
content:'aaa';
}
.c2:before {
content:'666';
}
.clearfix:after{
content:'.';
clear:both;
display: block;
visibility: hidden;
height:0;
}
.left{
float:left;
}
</style>
</head>
<body>
<div class="c1">ddd</div>
<div class="c2">888</div>
<div class="clearfix">
<div class="left" >1</div>
<div class="left">2</div>
</div>
</body>
</html>小尖角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小尖角</title>
<style>
.icon {
display: inline-block;
border-top:15px solid red;
/*border-right:15px solid green;*/
/*border-bottom:15px solid yellow;*/
/*border-left:15px solid pink;*/
border-right:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid transparent;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>后臺布局一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后臺布局一</title>
<style>
* {
margin:0;
}
.pg-header {
height:48px;
background-color: #2459a2;
}
.pg-body .body-menu{
position: absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background:red;
}
.pg-body .body-content{
position: absolute;
top:48px;
left:210px;
/*bottom:0;*/
right:0;
background:green;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content">
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
</div>
</div>
<div class="pg-heaher"></div>
</body>
</html>后臺布局二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后臺布局二</title>
<style>
* {
margin:0;
}
.pg-header {
height:48px;
background-color: #2459a2;
}
.pg-body .body-menu{
position: absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background:red;
}
.pg-body .body-content{
position: absolute;
top:48px;
left:210px;
bottom:0;
right:0;
background:green;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content">
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
</div>
</div>
<div class="pg-heaher"></div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
