global2.min.css 公用樣式2.0版本

文件連接 ####global2 相對於global 添加了下面的經常使用樣式 1,添加了搜索框的樣式文件(search-box) 輸入圖片說明php

<section class="search-box">
       <input class="search-text" type="search"  id="myInput" value="" placeholder="搜索專家">
       <button type="submit"  class="search-btn"><i class="icon-search"></i></button>
   </section>

2,沾滿全屏由原來的bg改成了abs-full 3,顯示隱藏 (show,hide)css

<p class="show"></p>
<p class="hide"></p>

4, 段首空兩個字符 (.tab2)app

<p class="tab2"></p>

5, 單選按鈕 (.radio) 輸入圖片說明ide

<input class="radio" type="radio" name="zhifu" value="WeiXin" checked="">
<input class="radio" type="radio" name="zhifu" value="AliPay">

6, 份數 (.buyNum) 輸入圖片說明flex

<p class="buyNum">
            <span class="sign-decrease" onclick="numberMin(this)">-</span><input type="text" value="1" class="num-display"><span class="sign-plus" onclick="numberAdd(this)">+</span>
        </p>

7, 下拉框 (select-box) 輸入圖片說明ui

<div class="box select-box">
  <select class="box-flex  input-full" id="age">
	<option value="1">20歲如下</option>
	<option value="2">20~50歲</option>
	<option value="3">50歲以上</option>
  </select>
</div>

8,分享頁頂部樣式 (btn-godown) 輸入圖片說明this

<!--開吧分享下載提醒按鈕-->
<section class="box btn-godown" onclick="justkaibaUrl()">
	<img src="http://static.kaiba315.com/kaiba-logo.png" class="btn-godown-logo" >
	<div class="box-flex">
		<h2>開吧</h2>
		<p>開啓車上新生活</p>   
	</div>
	<input type="button" class="btn-small" value="下載">
	<span><img src="http://static.kaiba315.com/kbbtn-close-grey.png" ></span>
</section>
<!--/開吧分享下載提醒按鈕-->

9,經常使用顏色 輸入圖片說明 10,活動規則經常使用文字樣式 (rule-info) 輸入圖片說明spa

11, 圓角按鈕樣式 (btn-radius) 輸入圖片說明code

<span class="btn-radius btn-gym">
  <img src="http://static.kaiba315.com/hy-1yuangou-gym.png" class="img-full">
</span>

12,底部固定樣式 (fixedFooter) 此時必定記得body上添加padding-bottom:4.4rem; 不然會遮擋內容。 輸入圖片說明視頻

<footer class="fixedFooter" onclick="openBuy(this)">
  <img src="http://static.kaiba315.com/hy-1yuangou-btn1.png" style="width:60%;" class="img-full">
</footer>

13, 進度條 (progress,status) 輸入圖片說明

<div class="progress"><span class="Arial " style="width:49%">49%</span></div>
<div class="box status">
   <div class="box-flex text-left">已售出<span class="Arial">43362</span></div>
   <div class="box-flex text-right">總份數<span class="Arial">90000</span></div>
</div>

14, 點贊 輸入圖片說明 輸入圖片說明

<a class="zan">
  <i class="btn-zan"></i>
  <span>125</span><span class="add1">+1</span>
</a>

15,留言框 輸入圖片說明

<ul class="liuyan">
   <li></li>
   <li></li>
</ul>

16,留言框--用戶區域 輸入圖片說明

<dl class="user-box box">
       <dt class="user-img man"><img src="http://media.918kaiba.com/get.php?id=logo_default_thumb_jpeg"></dt>
        <dd class="user-name box-flex"><a>匿名用戶</a><img src="http://static.kaiba315.com/icon-boy.png" class="sex-boy"></dd>
        <dd><a class="zan"><i class="btn-zan"></i><span>125</span><span class="add1">+1</span></a>
                </dd>
</dl>

17,留言框--留言文字 輸入圖片說明

<div class="user-text">你的愛那麼多</div>

18,添加了留言框中經常使用的音頻樣式 (.audio-box) 輸入圖片說明

<div class="audio-box" onclick="playAudio(this)">
    <audio src="http://media.918kaiba.com/audio.php?id=E3D05139CB8B01FA4D200FF0622D7DAC"></audio>
    <button>播放/暫停</button><span>1s''</span>
</div>

19,添加了留言框中經常使用的視頻樣式 (.video_file) 輸入圖片說明

<div class="video_file only" onclick="playVideo(this)">
    <button>播放/暫停</button>
    <img class="img-full video_img" src="http://com-hz-czfw-app.s.qupai.me/v/36a6a7ff-0add-4f43-95b3-74c2b2585057.jpg?token=VRkQFpENB9EUPZEW4QXYRJXaZpkYvg2NlRHcgMWN0kzNhRjZ4QGO1MmN2MjZ3MWZwczYkZzM4YGM4ASYzEzM1kzY4MTOhJGNwIDIyASN2QzMzkTO5QTM" width="150">
     <video src="http://com-hz-czfw-app.s.qupai.me/v/36a6a7ff-0add-4f43-95b3-74c2b2585057.mp4?token=VRkQFpENB9EUPZEW4QXYRJXaZpkYvg2NlRHcgMWN0kzNhRjZ4QGO1MmN2MjZ3MWZwczYkZzM4YGM4ASYzEzM1kzY4MTOhJGNwIDIyASN2QzMzkTO5QTM" class="video"></video>
    <p class="clearfix video_size"><span class="fl">0.4M</span><span class="fr">00:04</span></p>
</div>

20,添加了留言框中經常使用的圖片展現樣式 --一張圖的時候展現 (.detail-img) 輸入圖片說明

<div class="detail-img">
   <a rel="gallery-58f09a4ab25ffa31ec4b2d76" class="swipebox" href="http://media.918kaiba.com/get.php?id=FD24FF64B721934B38B3ED461E1E5758_jpeg"><img style="width:200px" src="http://media.918kaiba.com/get.php?id=FD24FF64B721934B38B3ED461E1E5758_thumb_jpeg"></a>
</div>

-- 多張圖的時候展現,比一張圖時多添加了muli-img (.detail-img.muli-img) 輸入圖片說明

<div class="detail-img muli-img">
  <a rel="gallery-58f09aceb25ffa31bd056eee" class="swipebox" href="http://media.918kaiba.com/get.php?id=38743270B5B972D7784E9ADC10BB246B_jpeg"><img style="width:200px" src="http://media.918kaiba.com/get.php?id=38743270B5B972D7784E9ADC10BB246B_thumb_jpeg"></a>
  <a rel="gallery-58f09aceb25ffa31bd056eee" class="swipebox" href="http://media.918kaiba.com/get.php?id=1D4F44576EB5721F96FEB7A15A5FB182_jpeg"><img style="width:200px" src="http://media.918kaiba.com/get.php?id=1D4F44576EB5721F96FEB7A15A5FB182_thumb_jpeg"></a>
  <a rel="gallery-58f09aceb25ffa31bd056eee" class="swipebox" href="http://media.918kaiba.com/get.php?id=3D7FA9096AE38DE53EB6A3AEFCB6F843_jpeg"><img style="width:200px" src="http://media.918kaiba.com/get.php?id=3D7FA9096AE38DE53EB6A3AEFCB6F843_thumb_jpeg"></a>
</div>

21, 留言框--留言時間+地址 輸入圖片說明

<div class="box user-btm"><p class="box-flex"><span class="time Arial">04-14 14:16</span>&nbsp;&nbsp;<span>濟南市歷城區華能路</span>
            </p><span class="btn-huifu"><img src="http://static.kaiba315.com/hf.png" width="18" height="14"></span>
            </div>

22, 留言框--點讚的用戶 輸入圖片說明

<div class="zan-person"><img src="http://static.kaiba315.com/hudong-xin2.png" width="15"><span class="zan-name"><i>null</i><i>發發哈哈</i></span></div>

23,留言框--回覆 輸入圖片說明

<div class="reply-box">
    <p><a class="reply-name" href="">天外🌠流星:</a><span>😰</span></p>
    <p><a class="reply-name" href="">天外🌠流星:</a><span>再來一個</span></p>
</div>

24,加載更多,加載完畢(.click-next-page,.load-over) 輸入圖片說明 輸入圖片說明

<div class="click-next-page" data-page="2" style="display: block;">點擊加載更多</div>
<div class="load-over" style="display: none;">加載完畢</div>
相關文章
相關標籤/搜索