基礎(chǔ)學(xué)習(xí)

什么是bootstrap重慢?

bootstrap是由css今阳,js組成的一個(gè)輕量級(jí)的ui框架师溅,css提供了一種布局方式,和組件樣式,js提供了插件盾舌,而本文是通過(guò)快速的知識(shí)點(diǎn)學(xué)習(xí)墓臭,讓同學(xué)能夠?qū)W習(xí)到通過(guò)bootstrap布局,并且能夠懂得css和js來(lái)自己寫組件和布局妖谴。
我們將通過(guò)學(xué)習(xí)窿锉,使用原生css和bootstrap實(shí)現(xiàn)下面考題

考題.png

要學(xué)習(xí)Bootstrap需要懂得以下知識(shí)
1.html
2.css
3.js
3.jquery
4.bootstrap

首先提出幾個(gè)問(wèn)題,為什么需要Bootstrap膝舅,它的比原生好在哪里嗡载?它的實(shí)現(xiàn)原理是什么?
要搞明白這幾個(gè)問(wèn)題仍稀,就要從最原始的布局方法開始講起洼滚。

HTML

1.快速理解html
html本身是不具備功能的,就是一個(gè)為了讓瀏覽器解析容器技潘,容器中裝著css判沟,js,所以html標(biāo)簽具備什么功能崭篡,長(zhǎng)什么樣子挪哄,都是css和js決定的,瀏覽器對(duì)html都有自己css默認(rèn)值琉闪,和一些自有或公有的屬性用于內(nèi)置的功能迹炼。

2.基礎(chǔ)的html架構(gòu)
有的標(biāo)簽是唯一的,他們?cè)趆tml只能夠出現(xiàn)一次颠毙,有html斯入,head, title, body

引入順序:
1.css引入盡量要寫在head中
2.css引入要將自己的css后引入
3.js引入盡量要寫在html中的最后
4.js引入時(shí)依賴需要先引入

bootstrap文件下載:

下載后創(chuàng)建一個(gè)文件夾object
|++css
|--bootstrap.css
|++img
|++js
|--bootstrap.js
| index.html

https://v3.bootcss.com/css/
推薦v3版本的入門文檔,

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ico是一個(gè)16*16的一個(gè)圖片文件 -->
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

具體標(biāo)簽屬性:
a
ul
img
form
input
table
table的寫法有兩種蛀蜜,
第一種是以列為開頭

<table border="1" cellspacing="0">
<tr>
   <th>身高</th>
   <td>160cm</td>
   <td>158cm</td>
</tr>
<tr>
  <th>體重</th>
  <td>50kg</td>
  <td>55kg</td>
</tr>
</table>

另外一種是以行為開頭

<tr>
  <th>身高</th>
  <th>體重</th>
</tr>
<tr>
  <td>170cm</td>
  <td>50kg</td>
</tr>
<tr>
  <td>165cm</td>
  <td>60kg</td>
</tr>

因此不同的瀏覽器對(duì)標(biāo)簽的解析是不同的刻两,就會(huì)有瀏覽器兼容的問(wèn)題
所以為了讓布局很聽話,我們將所有標(biāo)簽都會(huì)進(jìn)行樣式重置滴某。

*{
    margin: 0;
    padding: 0;
    border: 0;
}

css選擇器的基本語(yǔ)法

1.css的引入方式:
行內(nèi)磅摹,內(nèi)聯(lián)滋迈,外聯(lián)
2.css的格式:
選擇器{key:value}

常見選擇器:
class,id户誓,tag饼灿,后代選擇器,子代選擇器帝美,分組選擇器
對(duì)于同一個(gè)元素的選擇器優(yōu)先級(jí):
行內(nèi)樣式:1000
id選擇器:100
class選擇器:10
tag選擇器:1

.father table{
            border-spacing: 0;
            background:red;
        }
html>body>table{
        border-spacing: 0;
        background:black;
        }

但是選擇器優(yōu)先級(jí)并不是簡(jiǎn)單的相加碍彭,而是相同的優(yōu)先級(jí)以最大的優(yōu)先級(jí)選擇器做對(duì)比,在兩個(gè)相同的選擇器中悼潭,又以后加載的優(yōu)先級(jí)高于先加載的

注意:越精確優(yōu)先級(jí)越高

<style>
    .wrap p{
      color: red;
    }
    div>p>span{
      color:yellow;
    }
  </style>
<div class="wrap">
      <p>
        <span>測(cè)試</span>
      </p>
    </div>

盒模型:

保存.png

盒模型決定了一個(gè)標(biāo)簽在排版上所占據(jù)的寬度庇忌,和高度
盒模型分為內(nèi)部結(jié)構(gòu)和外部結(jié)構(gòu):
內(nèi)部結(jié)構(gòu)會(huì)改變自身的寬高,
而外部結(jié)構(gòu)控制的是與兄弟元素相關(guān)的屬性
內(nèi)部結(jié)構(gòu)有:border舰褪,padding皆疹,content
外部結(jié)構(gòu)有:margin,position
content:又分為width和hight

帶領(lǐng)大家將這幾個(gè)css屬性看一遍抵知,以及如何設(shè)置
而默認(rèn)整個(gè)元素的寬高是由border+padding+content計(jì)算而來(lái)

而有沒有辦法讓border和padding計(jì)算入content中呢墙基?
box-sizing:border-box;//bootstrap已經(jīng)默認(rèn)設(shè)置了全部元素

border:

border:1px solid #000;

margin的坑

1.margin穿透我們有一個(gè)正常嵌套刷喜,一個(gè)block中嵌套一個(gè)inline-block
2.給inline-block一個(gè)margin-top残制,會(huì)傳遞給父級(jí)

<div style="backgound:red;height:50px;">
   <div style="margin-top:100px;"></div>
</div>

解決辦法:
1.給父級(jí)添加border
2.給父級(jí)添加overflow:hidden
3.用padding取代margin
4.將內(nèi)部塊變?yōu)閮?nèi)聯(lián)塊

margin上下折疊

<div style="background:red;height:50px;margin-bottom:100px;"></div>
<div style="background:yellow;height:50px;margin-top:100px;"></div>

解決辦法:
1.將div變?yōu)閮?nèi)聯(lián)塊
2.將margin減少

瀏覽器文檔流:
1.所有標(biāo)簽 排版默認(rèn)都是從上到下,從左到右
2.并且后一個(gè)標(biāo)簽只會(huì)出現(xiàn)在上一個(gè)標(biāo)簽之后掖疮,
3.如果上一行放不下就會(huì)另起一行

小作業(yè):一個(gè)總寬高20px正方體初茶,padding:4px,帶有border:1px的一個(gè)div元素

position

position是一種使元素脫離文檔流的屬性
都具有top浊闪,bottom恼布,left,right四個(gè)方向的值搁宾,和z-index
默認(rèn)值:position:static折汞;
position:relative;相對(duì)于當(dāng)前位置
position:absolute盖腿;相對(duì)于往上層的最先找到的具有relative的元素
position:fixed爽待;相對(duì)于窗口

常見的display

display是html中必有的css元素,display決定html的默認(rèn)排版方式翩腐,以及受一些屬性的影響方式鸟款,和盒模型的計(jì)算方式

常見的display有:block,inline-block茂卦,inline何什,none
分為塊,內(nèi)聯(lián)塊, 內(nèi)聯(lián)
block:是一個(gè)塊元素等龙,具有寬高处渣,獨(dú)占一行伶贰,
inline-block:是一個(gè)內(nèi)聯(lián)塊元素,具有寬高霍比,但是不獨(dú)占一行幕袱,margin暴备,padding正常起作用
inline:是一個(gè)內(nèi)聯(lián)元素悠瞬,沒有寬高,寬高由內(nèi)容決定,margin只有左右起作用涯捻,padding不占據(jù)寬高

常見的塊元素:
div浅妆、p、h1~h6障癌、ul凌外、ol、dl涛浙、li康辑、dd、table轿亮、hr疮薇、blockquote、address我注、table按咒、menu、pre
常見的內(nèi)聯(lián)塊元素:
img但骨、lable励七、input、abbr(縮寫)奔缠、em(強(qiáng)調(diào))掠抬、big、cite(引用)textarea校哎、select两波、button

常見的內(nèi)聯(lián)元素:
span,a,i

嵌套的規(guī)則:
內(nèi)聯(lián)元素不嵌套塊元素

5.布局開始
根據(jù)使用的css屬性,分為普通流布局贬蛙,浮動(dòng)布局雨女,定位布局,flex布局


image.png

首先我們用剛剛學(xué)的display和盒模型進(jìn)行普通流布局
使用的屬性有:width阳准,height氛堕,display, font-size, background,vertical-align,

<style>
      *{
        margin:0;
        /* font-size: 0; */
      }
       .wrap{
         width: 500px;
         height: 500px;
         margin:auto;
       }
       .header{
         width: 500px;
         height: 100px;
         background:pink;
       }
       .aside{
         display: inline-block;
         width: 100px;
         height: 400px;
         background:red;
         vertical-align: middle;
       }
       .content{
        display: inline-block;
         width: 400px;
         height: 400px;
         background:yellow;
         vertical-align: middle;
       }
       .main{
         height: 300px;
         background:green;
       }
       .footer{
         height: 100px;
         background:fuchsia;
       }
    </style>
<div class="wrap">
      <div class="header">header</div>
      <div class="aside">aside</div><div class="content">
        <div class="main">main</div>
        <div class="footer">footer</div>
      </div>
    </div>

普通流布局的坑:
使用display:inline-block野蝇;會(huì)受到折行或者空行的影響讼稚,
解決辦法:
1.font-size:0括儒;
2.或者去掉空格;

float浮動(dòng)

float多用于文字環(huán)繞效果锐想,后來(lái)被廣泛應(yīng)用到了排版中帮寻,半脫離文檔流,不占據(jù)寬高赠摇,但是會(huì)阻擋元素固逗。

需要注意:兩個(gè)元素同時(shí)使用float,后一個(gè)使用float的藕帜,會(huì)在前面烫罩;
需要注意:使用float后,塊元素自身會(huì)變?yōu)閮?nèi)聯(lián)塊元素洽故;

float的坑
1.當(dāng)使用float后元素的父級(jí)會(huì)塌陷贝攒。
解決辦法:
添加第三個(gè)元素,使用清除浮動(dòng)

div{
clear:both;
}

或者給父級(jí)加上

.clearfix::after{
            content:"";
            height:1px;
            line-height:0;
            display:block;
            visibility:hidden;
            clear:both;
            }

或給父級(jí)加上:overflow:auto | hidden
又或者給父級(jí)加上:float屬性

行內(nèi)元素的設(shè)置

設(shè)置文字:
color,font-size,font-weight,font-famliy
設(shè)置文字的排版:
text-align,line-height
設(shè)置段落:
words-spacing,word-break,word-wrap

注意:行內(nèi)元素具有遺傳性时甚,會(huì)影響內(nèi)部嵌套的所有元素

常用設(shè)置

背景設(shè)置:
background隘弊,background-image,background-repeat荒适,background-size, background-clip,background-position

background-image: url('./img/image.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-clip: content-box;
      background-position: 10px 10px;

用處:雪碧圖,動(dòng)畫

   .test{
      margin:auto; 
      width:58px; height:100px; background-image:url('./img/bird.jpeg'); background-repeat:no-repeat; background-position:-32px -190px; background-size:400px;
            -webkit-animation:test_anim 2.2s steps(4) both;
      animation:test_anim 2.2s steps(4) both ;
      animation-iteration-count:infinite;
}
@-webkit-keyframes test_anim{
    0%{ background-position:-32px -190px;}
    100%{ background-position:-308px -190px;}
}
@keyframes test_anim{
    0%{ background-position:-32px -190px;}
    100%{ background-position:-308px -190px;}
}
image.png

邊框設(shè)置:
border梨熙,border-radius,box-shadow
透明度設(shè)置:
opacity吻贿,rgba

元素居中的常用方法:

塊元素的居中方法:

.father {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }

        .son {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: yellow;
        }

使行內(nèi)元素居中的方法:

.father{
   width:100px;
   height:100px;
   background:red;
   text-align:center;
   line-height:100px;
}
.son{
display:inline-block;
background:yellow;
}

高級(jí)選擇器

:hover

隨堂測(cè)試:
1.利用hover做:會(huì)變色的a標(biāo)簽

.title{
            color:#000;
            text-decoration: none;
        }
        .title:hover{
            color:red;
        }
<a class="title" href="#">鏈接</a>

2.使用ul與li寫一個(gè)nav常見的特效


image.png

background:red串结;fuchsia;

<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
padding:4px 12px;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

隨堂測(cè)試


image.png

圖片
http://www.w3school.com.cn/i/tulip_peach_blossom_w_s.jpg

文字
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

---------------------------------------以上是原生css布局------------------------------------------

bootstrap布局

又稱為柵格布局或網(wǎng)格系統(tǒng)(grid system):
整個(gè)布局被區(qū)分為:
行(row)列(col)
一行具有12列


image.png

v3版本中規(guī)定:col必須要放置在row中舅列,row必須要放置在容器中
容器:分為container和container-fluid
container:使容器兩邊有具有margin和padding
container-fluid:使容器寬度具有100%

簡(jiǎn)單使用默認(rèn)設(shè)置:

<style>
    .test{
      height: 100px;
      background:coral;
    }
    .test1{
      height: 200px;
      background:red;
    }
  </style>

 <div class="container-fluid">
      <div class="row">
          <div class="col-lg-3 test"></div>
          <div class="col-lg-6 test1"></div>
        </div>
  </div>

可以理解為元素默認(rèn)是獨(dú)占一行的肌割,當(dāng)觸發(fā)設(shè)置的屏幕寬度,將會(huì)把執(zhí)行所設(shè)置的寬度進(jìn)行水平排列

image.png

偏移
當(dāng)觸發(fā)設(shè)置的屏幕大小時(shí)帐要,執(zhí)行偏移

<style>
    .test{
      height: 100px;
      background:coral;
    }
    .test1{
      height: 100px;
      background:red;
    }
  </style>

 <div class="container-fluid">
      <div class="row">
          <div class="col-lg-1 test"></div>
          <div class="col-lg-1 test1 col-md-offset-1"></div>
        </div>
  </div>

作業(yè):


homework.jpeg
image.png

bootstrap v3的布局

柵格布局

在原生布局當(dāng)中把敞,大家體會(huì)到了原生css的布局繁瑣,并且自適應(yīng)效果并不理想榨惠,不能夠滿足現(xiàn)在日益復(fù)雜的自適應(yīng)要求奋早,由此bootstrap提供了一種新的布局方式:柵格布局。
我們通常布局都是需要多個(gè)元素在同一排赠橙,使用display:inline-block耽装;會(huì)受到空格影響,由此誕生了float布局期揪,然而使用float布局會(huì)遇到float的一些坑和問(wèn)題掉奄,不注意仍然會(huì)以隱形的方式破壞布局,并且不利于頁(yè)面維護(hù)凤薛。
而bootstrap提供的布局方式姓建,具有簡(jiǎn)單易用诞仓,維護(hù)方便的特點(diǎn),在前后端不分離的項(xiàng)目中被極大的推崇速兔。
柵格布局的下載:
https://v3.bootcss.com/

下載選項(xiàng).png

選擇最左邊的下載選項(xiàng)

當(dāng)下載后滑到頁(yè)面的下面部分墅拭,可以發(fā)現(xiàn)有很多已經(jīng)排好版的實(shí)例,需要單獨(dú)下載


image.png

柵格布局的原理:

@media (min-width: 768px) and (max-width: 1000px){
            .test-xs-6{
                background:pink;
                width: 600px;
                height: 600px;
            }
        }
 @media(min-width:100px) and (max-width:768px){
            .test-ss-1{
                background:orangered;
                width: 100px;
                height: 100px;
            }
        }

<div class="test-xs-6 test-ss-1">
                
        </div>

柵格布局的理念:

將頁(yè)面排版分為行(row)和列(col)的概念涣狗,并且使用class進(jìn)行設(shè)置谍婉,使用方便,并且基于此排版屑柔,還提供了:push屡萤,pull珍剑,offset等用法掸宛。

要點(diǎn):頁(yè)面必須采取 容器 > row > column 的形式
名詞解釋
容器:有.container(固定寬度)和 .container-fluid (100% 寬度)兩種。
行(row):使用 .row 來(lái)定義一個(gè)行
列(column):使用 .col 來(lái)定義一列,列的類名組成為:col-設(shè)備寬度-寬度
槽(gutter):每一列的左右內(nèi)邊距
偏移(offsets):是以列寬計(jì)算的margin-left招拙,用法:col-md-offset-*


列的參數(shù)查詢
<div class="container-fluid">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
  </div>
</div>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末唧瘾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子别凤,更是在濱河造成了極大的恐慌饰序,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件规哪,死亡現(xiàn)場(chǎng)離奇詭異求豫,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)诉稍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門蝠嘉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人杯巨,你說(shuō)我怎么就攤上這事蚤告。” “怎么了服爷?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵杜恰,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我仍源,道長(zhǎng)心褐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任笼踩,我火速辦了婚禮逗爹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戳表。我一直安慰自己桶至,他們只是感情好昼伴,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著镣屹,像睡著了一般圃郊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上女蜈,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天持舆,我揣著相機(jī)與錄音,去河邊找鬼伪窖。 笑死逸寓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的覆山。 我是一名探鬼主播竹伸,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼簇宽!你這毒婦竟也來(lái)了勋篓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤魏割,失蹤者是張志新(化名)和其女友劉穎譬嚣,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體钞它,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拜银,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了遭垛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尼桶。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖耻卡,靈堂內(nèi)的尸體忽然破棺而出疯汁,到底是詐尸還是另有隱情,我是刑警寧澤卵酪,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布幌蚊,位于F島的核電站,受9級(jí)特大地震影響溃卡,放射性物質(zhì)發(fā)生泄漏溢豆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一瘸羡、第九天 我趴在偏房一處隱蔽的房頂上張望漩仙。 院中可真熱鬧,春花似錦、人聲如沸队他。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)麸折。三九已至锡凝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間垢啼,已是汗流浹背窜锯。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芭析,地道東北人锚扎。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像馁启,于是被迫代替她去往敵國(guó)和親驾孔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案进统? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • 1. 前言 前端圈有個(gè)“怪遥”:在面試時(shí),問(wèn)個(gè)css的position屬性能刷掉一半人螟碎,其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,425評(píng)論 5 15
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,306評(píng)論 2 66
  • 課程來(lái)自慕客網(wǎng):http://www.imooc.com/code/49 另外有網(wǎng)易coursera合作的課程:網(wǎng)...
    喵在野閱讀 1,747評(píng)論 3 30
  • 384期樂(lè)觀一組 日期:2018年5月30日 姓名:李萬(wàn)順 公司:長(zhǎng)春市修正藥業(yè)孕嬰童事業(yè)部吉林公司 【日精進(jìn)打卡...
    修正孕嬰延邊地區(qū)李萬(wàn)順閱讀 128評(píng)論 0 0