前端及開發文章及欣賞 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

022018-4

Android沉浸式狀態欄

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

隨著越來越的的app使用沉浸式狀態欄，有必要對沉浸式狀態欄學習一下，查看了很多資料，沉浸式狀態欄重要的無法三點：1.實現全屏（Android4.4跟5.0全屏處理方式有別需分開處理）2.設置全屏之后為了保證自己寫的布局不與狀態欄重疊，需要在跟xml的跟布局設置android:fitsSystemWindows=”true” ?；谶@幾點處理方式可能很多，但是為了便于項目中工具類封裝，本編實現方式均已代碼方式呈現，xml設置方式可以自行查閱相關資料 3.改變狀態欄顏色

—1.全屏設置
對于4.4以上系統，因4.4以上系統是可以設置全屏，代碼如下：

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 


    
        1
    

    
        2

對于5.0系統具體代碼

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

僅僅做全屏處理，我們會發現不管是在4.4系統上還是在5.0系統上，我們的布局內容會與狀態欄內容出現重疊。

下圖為4.4系統
這里寫圖片描述

下圖為8.0系統
這里寫圖片描述

為了解決全屏設置重疊狀態欄，我們需要在全屏之上預留狀態欄的高度以便正常顯示狀態欄，而處理方式也很簡單 activity layout根目錄添加下面代碼
android:fitsSystemWindows=”true” 而此處我建議用代碼設置,因為通常我們項目中會提取BaseActivity基類抽出一些共性，這種方式比在每個xml中設置屬性更方便
rootView.setFitsSystemWindows(true) 此處的rootView指的就是activity對應的跟布局；
進行以上處理之后我們會發現現在狀態欄跟我們的布局內容不再重疊了，接下來我們就只需要處理狀態欄的顏色問題了。具體代碼如下

ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

對于4.4系統因為沒有改變狀態欄顏色的api，我們可以通過添加一個與狀態欄等高的View到根布局的父容器中，而根布局的父容器就是一個ID為android.R.id.content的幀布局被裝飾的容器中，這樣只需要設置View的顏色即可。對于5.0及以上系統，因已提供設置狀態欄和導航欄顏色的api，直接設置即可；
對于4.4以上5.0一下系統

View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.RED); content.addView(view); 


    
        1
    

    
        2
    

    
        3
    

    
        4

對于5.0及以上系統

window.setStatusBarColor(Color.RED); 


    
        1

獲取狀態欄高度

 private int getStatusHeight() { int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){ return getResources().getDimensionPixelSize(resourceId);
        } return 0;
    } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

以上就是實現沉浸式狀態欄的具體過程。整體代碼如下：

package com.example.administrator.myjavadeamo.activity; import android.graphics.Color; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import com.example.administrator.myjavadeamo.R; public class StatusBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//隱藏標題欄 setContentView(R.layout.activity_status_bar); initWindow(); }

    private void initWindow() {
        Window window=getWindow(); if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){
            //5.0以上的手機
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }
            window.setStatusBarColor(Color.GREEN); }else if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //4.4以上5.0一下的手機
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }

            View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.GREEN); content.addView(view); }
    } /**
     * 獲取狀態欄高度
     * @return
     */ private int getStatusHeight() {
        int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){
           return getResources().getDimensionPixelSize(resourceId); }
        return 0; }
}  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58
    

    
        59
    

    
        60
    

    
        61
    

    
        62
    

    
        63
    

    
        64
    

    
        65
    

    
        66
    

    
        67

最終實現結果：

4.4系統
4.4以上5.0一下系統
8.0系統

5.0以上系統

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4067)

252018-3

JS基本事件總結

JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。比如說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。主要事件表總結如下：

評論(0) 瀏覽(3976)

232018-3

Http訪問跨域解決

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一、跨域科普

跨域，即跨站HTTP請求(Cross-site HTTP request)，指發起請求的資源所在域不同于請求指向資源所在域的HTTP請求。

二、如何產生跨域

當使用前后端分離，后端主導的開發方式進行前后端協作開發時，常常有如下情景：

    a、后端開發完畢在服務器上進行部署并給前端API文檔。
    b、前端在本地進行開發并向遠程服務器上部署的后端發送請求。
    c、在這種開發過程中，如果前端想要一邊開發一邊測試接口，就需要使用跨域的方式。

三、解決方案

1、JQuery+ajax+jsonp 跨域訪問
Jsonp(JSON with Padding)是資料格式 json 的一種“使用模式”，可以讓網頁從別的網域獲取資料。

下面給出例子：

html 前端代碼：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>

</head>

<script type="text/javascript">

$(function(){

/*

//簡寫形式，效果相同

$.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",

         function(data){

             $("#showcontent").text("Result:"+data.result)

});

*/

$.ajax({

     type : "get",

     async:false,

     url : "http://app.example.com/base/json.do?sid=1494&busiId=101",

     dataType : "jsonp",//數據類型為jsonp

     jsonp: "jsonpCallback",//服務端用于接收callback調用的function名的參數

     success : function(data){

         $("#showcontent").text("Result:"+data.result)

     },

     error:function(){

         alert('fail');

     }

});

});

</script>

<body>

<div id="showcontent">Result:</div>

</body>

</html>

服務器端：

[java] view plain copy

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;



@Controller

public class ExchangeJsonController {

@RequestMapping("/base/json.do")

public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {

    try {

     response.setContentType("text/plain");

     response.setHeader("Pragma", "No-cache");

     response.setHeader("Cache-Control", "no-cache");

     response.setDateHeader("Expires", 0);

     Map<String,String> map = new HashMap<String,String>();

     map.put("result", "content");

     PrintWriter out = response.getWriter();

     JSONObject resultJSON = JSONObject.fromObject(map); //根據需要拼裝json

     String jsonpCallback = request.getParameter("jsonpCallback");//客戶端請求參數

     out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式數據

     out.flush();

     out.close();

   } catch (IOException e) {

    e.printStackTrace();

   }

}

}

2、通過注解的方式允許跨域

在Controller類或其方法上加@CrossOrigin注解，來使之支持跨域。
舉例：

[java] view plain copy

@CrossOrigin(origins = "*", maxAge = 3600)

@RestController

@RequestMapping("/User")

public class UserController {

}

其中origins為CrossOrigin的默認參數，即跨域來源，*即任何來源，也可以是其他域名。即可以以以下形式：

[java] view plain copy

@CrossOrigin("http://test.com")

@CrossOrigin(origins="http://test.com",maxAge=3600)

該注解用于方法上，寫法相同，處理時，SpringMVC會對類上標簽和方法上標簽進行合并。

3、通過配置文件的方式允許跨域

在web.xml中添加如下配置：

[html] view plain copy

<filter-mapping>

    <filter-name>CorsFilter</filter-name>

    <url-pattern>/*</url-pattern>

</filter-mapping>

使用這個Filter即可讓整個服務器全局允許跨域。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4960)

222018-3

【ionic3】ionic2.x與ionic3.x之間的部分區別

在用2.x開發時有的地方的顏色樣式是通過添加 color="primary" 屬性的形式設置的，但是升級3.x之后這種方式除了一些自帶的color屬性的組件、標簽（eg: ）可以生效，其他的都失效了。

評論(0) 瀏覽(4886)

212018-3

學習解析XML(1）

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

什么是xml, xml有什么作用？

XML 是獨立于軟件和硬件的信息傳輸工具

XML 指可擴展標記語言（EXtensible Markup Language）。

XML 是一種很像HTML的標記語言。

XML 的設計宗旨是傳輸數據，而不是顯示數據。

XML 標簽沒有被預定義。您需要自行定義標簽。

XML 被設計為具有自我描述性。

XML 是 W3C 的推薦標準。

XML 和 HTML 之間的差異

XML 不是 HTML 的替代。

XML 和 HTML 為不同的目的而設計：

XML 被設計用來傳輸和存儲數據，其焦點是數據的內容。

HTML 被設計用來顯示數據，其焦點是數據的外觀。

HTML 旨在顯示信息，而 XML 旨在傳輸信息

xml的用途:

XML 把數據從 HTML 分離

XML 簡化數據共享

XML 簡化數據傳輸

XML 簡化平臺變更

XML 使您的數據更有用

XML 用于創建新的互聯網語言

<?xml version="1.0" encoding="UTF-8"?> 聲明

以及根元素子元素以及定義根元素結尾

如例

聲明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定義根元素結尾

命名的規范

所有的 XML 元素都必須有一個關閉標簽

XML 標簽對大小寫敏感、

XML 必須正確嵌套

XML 屬性值必須加引號

實體引用

XML 以 LF 存儲換行

在 Windows 應用程序中，換行通常以一對字符來存儲：回車符（CR）和換行符（LF）。

在 Unix 和 Mac OSX 中，使用 LF 來存儲新行。

在舊的 Mac 系統中，使用 CR 來存儲新行。

XML 以 LF 存儲換行。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3987)

202018-3

小程序復選框-在線預定

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

<view class='header1'>

  <view class='header'>

    <view class='header_con flex_between'>

      <view class='left'>

        共計{{items.length}}件商品

      </view>

      <view class='right flex_end'>

        <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>

          管理

        </view>

        <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>

          完成

        </view>

      </view>

    </view>

  </view>

</view>

<view class='header2'>

  <view class='header'>

    <view class='header_con flex_between'>

      <input value='類目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">

      </input>

      <view class='right flex_end'>

        <block wx-if="{{title_disabled}}">

          <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>

        </block>

        <block wx-if="{{!title_disabled}}">

          <view class='flex_center' bindtap='finish_classname'>

            完成

          </view>

        </block>

      </view>

    </view>

  </view>

</view>

<view class='onlinechoose'>

  <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>

    <view class='list_cons flex_start'>

      <view wx:if="{{management_good}}" class='lefts'>

        <block wx-if="{{!i.checked}}">

          <view class='icon_none'></view>

        </block>

        <block wx-if="{{i.checked}}">

          <icon type="success" size="30" color="red" />

        </block>

      </view>

      <image src='../../../image/hotel/demoimg.jpg'></image>

      <view class='right'>

        <view class='name'>

          {{i.name}}

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition1'>

              16㎡|雙人床|含早

            </view>

            <view class='condition2'>

              <block>

                間數：10

              </block>

              <block>

                間數：2

              </block>

            </view>

          </view>

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition2'>

              類目一

            </view>

          </view>

        </view>

      </view>

    </view>

  </view>

</view>

<view class='bottom flex_between' wx:if="{{management_good}}">

  <view class='left flex_start'>

    <block wx:if="{{select_all}}">

      <view bindtap='select_none' class='flex_start'>

        <icon type="success" size="30" color="red" />

        <view>

          取消全選

        </view>

      </view>

    </block>

    <block wx:if="{{!select_all}}">

      <view bindtap='select_all' class='flex_start'>

        <view class='select_none'>

        </view>

        <view>

          全選

        </view>

      </view>

    </block>

  </view>

  <view class='right flex_end'>

    <view style='text-align:right'>

      <view class='all'>

        共選中{{middlearr.length}}件商品

      </view>

    </view>

    <view bindtap='deleteitem' class='sure'>

      刪除

    </view>

  </view>

</view>

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4089)

182018-3

前端框架Bootstrap的使用

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1. 下載Bootstrap

下載地址：https://v3.bootcss.com/
進入后下載這個標題的Bootstrap

下載完成后，將所需的css,js復制到工程中即可

2. 拷貝官方的模塊文件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

3. 頁面添加組件

下面一個按鈕為例：

喜歡的樣式

<button type="button" class="btn btn-primary">（首選項）Primary</button>

1

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

1

2

3

4

5

然后將二者結合即可：

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>

1

2

3

4

5

- 最后的結果如下：
Left Middle Right

至此你就可以簡單的用前端框架做出美觀的界面了！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4139)

162018-3

CSS3彈性布局怎么兼容IE（11）？

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

彈性布局（Flexbox）確實為我們構建復雜、靈活的布局帶來了很大的便利，但是它的兼容性確實讓人很頭痛，下面是我遇到的一個問題：

理想效果：

IE11效果：

html大概結構：

[html] view plain copy

<div class="box">

    <div class="input-container">

        <input />

        <div class="tooltip"></div>

    </div>

    <button></button>

</div>

這里大致說一下css，input-container寬高沒設死，由input決定，并設置position: relative;相對定位，并采用display: flex;彈性布局。tooltip設置絕對定位，通過top調整垂直位置，由input-container的彈性布局屬性設置水平居中（是不是覺得我很作死，為什么不直接用絕對定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過，能實際體會一下flexbox帶來的問題，我覺得也挺好的）。

結果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說彈性布局是支持IE11的（下圖），但是從上圖來看，IE下垂直方向是對的，但是水平方向卻不對，說明flexbox還是沒被支持，我也嘗試著添加了各種前綴，還是不行。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3915)

152018-3

html模糊查詢

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

<head>

    <meta charset="UTF-8">

    <title>模糊查詢</title>

<style type="text/css">

    body{

        text-align:center;

    }

    #datas{

        display:none;

    }

    #txt{

        font-size:300%;

        width:80%;

        height:10%;

        margin-top:10%;

    }

    #msg{

        margin:0 auto;

        text-align:left;

        width:80%;

        border: medium solid #C0C0C0;

    }

</style>

</head>

<body>



<form action="" method="post">



<input type="text" id='txt' />

</form>



<div id="msg"></div>





<div id="datas">

城市,北京市,海淀區,東城區,西城區,宣武區,豐臺區,朝陽區,崇文區,大興區,石景山區,門頭溝區,房山區,通州區,順義區,懷柔區,昌平區,平谷區,密云縣,延慶縣,天津市,和平區,河西區,河北區,河東區,南開區,紅橋區,北辰區,津南區,武清區,塘沽區,西青區,漢沽區,大港區,寶坻區,東麗區,薊縣,靜海縣,寧河縣 ,上海,黃浦區,盧灣區,徐匯區,長寧區,靜安區,普陀區,閘北區,楊浦區,虹口區,閔行區,寶山區,嘉定區,浦東新區,金山區,松江區,青浦區,南匯區,奉賢區,崇明縣 ,重慶,渝中區,大渡口區,江北區,沙坪壩區,九龍坡區,南岸區,北碚區,萬盛區,雙橋區,渝北區,巴南區,萬州區,涪陵區,黔江區,長壽區,江津區,永川區,南川區,綦江縣,潼南縣,銅梁縣,大足縣,榮昌縣,璧山縣,墊江縣,武隆縣,豐都縣,城口縣,梁平縣,開縣,巫溪縣,巫山縣,奉節縣,云陽縣,忠縣,石柱土家族自治縣,彭水苗族土家族自治縣,酉陽苗族自治縣,秀山土家族苗族自治縣,新疆維吾爾自治區,烏魯木齊,克拉瑪依,石河子,阿拉爾市,圖木舒克,五家渠,哈密,吐魯番,阿克蘇,喀什,和田,伊寧,塔城,阿勒泰,奎屯,博樂,昌吉,阜康,庫爾勒,阿圖什,烏蘇 ,西藏自治區,拉薩,日喀則,寧夏回族自治區,銀川,石嘴山,吳忠,固原,中衛,青銅峽市,靈武市,內蒙古自治區,呼和浩特,包頭,烏海,赤峰,通遼,鄂爾多斯,呼倫貝爾,巴彥淖爾,烏蘭察布,霍林郭勒市,滿洲里市,牙克石市,扎蘭屯市,根河市,額爾古納市,豐鎮市,錫林浩特市,二連浩特市,烏蘭浩特市,阿爾山市 ,廣西,南寧,柳州,桂林,梧州,北海,崇左,來賓,賀州,玉林,百色,河池,欽州,防城港,貴港,岑溪,憑祥,合山,北流,宜州,東興,桂平,黑龍江,哈爾濱,大慶,齊齊哈爾,佳木斯,雞西,鶴崗,雙鴨山,牡丹江,伊春,七臺河,黑河,綏化加格達奇,五常,雙城,尚志,納河,虎林,密山,鐵力,同江,富錦,綏芬河,海林,寧安,穆林,北安,五大連池,肇東,海倫,安達,吉林,長春,吉林,四平,遼源,通化,白山,松原,白城,九臺市,榆樹市,德惠市,舒蘭市,樺甸市,蛟河市,磐石市,公主嶺市,雙遼市,梅河口市,集安市,臨江市,大安市,洮南市,延吉市,圖們市,敦化市,龍井市,琿春市,和龍市,遼寧,沈陽,大連,金州,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島,新民,瓦房店,普蘭,莊河,海城,東港,鳳城,凌海,北鎮,大石橋,蓋州,燈塔,調兵山,開原,凌源,北票,興城 ,河北,石家莊,唐山,邯鄲,秦皇島,保定,張家口,承德,廊坊,滄州,衡水,邢臺,辛集市,藁城市,晉州市,新樂市,鹿泉市,遵化市,遷安市,武安市,南宮市,沙河市,涿州市,固安..定州市,安國市,高碑店市,泊頭市,任丘市,黃驊市,河間市,霸州市,三河市,冀州市,深州市,山東,濟南,青島,淄博,棗莊,東營,煙臺,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,菏澤,濱州,章丘,膠南,膠州,平度,萊西,即墨,滕州,龍口,萊陽,萊州,招遠,蓬萊,棲霞,海陽,青州,諸城,安丘,高密,昌邑,兗州,曲阜,鄒城,乳山,文登,榮成,樂陵,臨清,禹城,江蘇,南京,鎮江,常州,無錫,蘇州,徐州,連云港,淮安,鹽城,揚州,泰州,南通,宿遷,江陰市,宜興市,邳州市,新沂市,金壇市,溧陽市,常熟市,張家港市,太倉市,昆山市,吳江市,如皋市,通州市,海門市,啟東市,東臺市,大豐市,高郵市,江都市,儀征市,丹陽市,揚中市,句容市,泰興市,姜堰市,靖江市,興化市,安徽,合肥,蚌埠,蕪湖,淮南,亳州,阜陽,淮北,宿州,滁州,安慶,巢湖,馬鞍山,宣城,黃山,池州,銅陵,界首,天長,明光,桐城,寧國,浙江,杭州,嘉興,湖州,寧波,金華,溫州,麗水,紹興,衢州,舟山,臺州,建德市,富陽市,臨安市,余姚市,慈溪市,奉化市,瑞安市,樂清市,海寧市,平湖市,桐鄉市,諸暨市,上虞市,嵊州市,蘭溪市,義烏市,東陽市,永康市,江山市,臨海市,溫嶺市,龍泉市,福建,福州,廈門,泉州,三明,南平,漳州,莆田,寧德,龍巖,福清市,長樂市,永安市,石獅市,晉江市,南安市,龍海市,邵武市,武夷山,建甌市,建陽市,漳平市,福安市,福鼎市,廣東,廣州,深圳,汕頭,惠州,珠海,揭陽,佛山,河源,陽江,茂名,湛江,梅州,肇慶,韶關,潮州,東莞,中山,清遠,江門,汕尾,云浮,增城市,從化市,樂昌市,南雄市,臺山市,開平市,鶴山市,恩平市,廉江市,雷州市吳川市,高州市,化州市,高要市,四會市,興寧市,陸豐市,陽春市,英德市,連州市,普寧市,羅定市,海南,?？?三亞,瓊海,文昌,萬寧,五指山,儋州,東方,云南,昆明,曲靖,玉溪,保山,昭通,麗江,普洱,臨滄,安寧市,宣威市,個舊市,開遠市,景洪市,楚雄市,大理市,潞西市,瑞麗市,貴州,貴陽,六盤水,遵義,安順,清鎮市,赤水市,仁懷市,銅仁市,畢節市,興義市,凱里市,都勻市,福泉市,四川,成都,綿陽,德陽,廣元,自貢,攀枝花,樂山,南充,內江,遂寧,廣安,瀘州,達州,眉山,宜賓,雅安,資陽,都江堰市,彭州市,邛崍市,崇州市,廣漢市,什邡市,綿竹市,江油市,峨眉山市,閬中市,華鎣市,萬源市,簡陽市,西昌市,湖南,長沙,株洲,湘潭,衡陽,岳陽,郴州,永州,邵陽,懷化,常德,益陽,張家界,婁底,瀏陽市,醴陵市,湘鄉市,韶山市,耒陽市,常寧市,武岡市,臨湘市,汨羅市,津市市,沅江市,資興市,洪江市,冷水江市,漣源市,吉首市,武漢,襄樊,宜昌,黃石,鄂州,隨州,荊州,荊門,十堰,孝感,黃岡,咸寧,大冶市,丹江口市,洪湖市,石首市,松滋市,宜都市,當陽市,枝江市,老河口市,棗陽市,宜城市,鐘祥市,應城市,安陸市,漢川市,麻城市,武穴市,赤壁市,廣水市,仙桃市,天門市,潛江市,恩施市,利川市,河南,鄭州,洛陽,開封,漯河,安陽,新鄉,周口,三門峽,焦作,平頂山,信陽,南陽,鶴壁,濮陽,許昌,商丘,駐馬店,鞏義市,新鄭市,新密市,登封市,滎陽市,偃師市,汝州市,舞鋼市,林州市,衛輝市,輝縣市,沁陽市,孟州市,禹州市,長葛市,義馬市,靈寶市,鄧州市,永城市,項城市,濟源市,山西,太原,大同,忻州,陽泉,長治,晉城,朔州,晉中,運城,臨汾,呂梁,古交,潞城,高平,介休,永濟,河津,原平,侯馬,霍州,孝義,汾陽,陜西,西安,咸陽,銅川,延安,寶雞,渭南,漢中,安康,商洛,榆林,興平市,韓城市,華陰市,甘肅,蘭州,天水,平涼,酒泉,嘉峪關,金昌,白銀,武威,張掖,慶陽,定西,隴南,玉門市,敦煌市,臨夏市,合作市,青海,西寧,格爾木,德令哈,江西,南昌,九江,贛州,吉安,鷹潭,上饒,萍鄉,景德鎮,新余,宜春,撫州,樂平市,瑞昌市,貴溪市,瑞金市,南康市,井岡山市,豐城市,樟樹市,高安市,德興市,臺灣,臺北,臺中,基隆,高雄,臺南,新竹,嘉義,板橋市,宜蘭市,竹北市,桃園市,苗栗市,豐原市,彰化市,南投市,太保市,斗六市,新營市,鳳山市,屏東市,臺東市,花蓮市,馬公市 ,特別行政區,香港：中西區,東區,九龍城區,觀塘區,南區,深水埗區,黃大仙區,灣仔區,油尖旺區,離島區,葵青區,北區,西貢區,沙田區,屯門區,大埔區,荃灣區,元朗區,澳門：花地瑪堂區,圣安多尼堂區（花王堂區）,望德堂區,大堂區,風順堂區（圣老楞佐堂區）,離島,氹仔,路環,

</div>

<script type="text/javascript">

    function handle(){

        var data = datas.split(",");

        var word = document.getElementById('txt').value;

        var value = "";

        for(var i = 1;i < data.length;i++){

            if(word!="" && data[i].match(word+".*") != null){

                value += "<a onclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";

            }

        }

        document.getElementById('msg').innerHTML=value;

    }

    function add(city){

        document.getElementById('txt').value=city;

    }

    //firefox下檢測狀態改變只能用oninput,且需要用addEventListener來注冊事件。

    if(/msie/i.test(navigator.userAgent))    //ie瀏覽器

        {document.getElementById('txt').onpropertychange=handle

    } else{//非ie瀏覽器，比如Firefox

    alert(1)

        document.getElementById('txt').addEventListener("input",handle,false);

    }

    var datas = document.getElementById('datas').innerHTML;



</script>



</body>

</html>

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4509)

142018-3

清除浮動的八種方法

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

浮動是什么？

浮動元素會脫離文檔流進行左浮或者右浮，直到碰到父級元素或者其他的浮動元素。

為什么清除浮動：浮動會導致父元素高度坍塌，因為浮動脫離文檔流，浮動以后不占文檔流的位置，撐開的父元素高度肯定會坍塌。

清除浮動的八種方法：

1、父級div給出固定的高度。手動定義height，這樣就解決了父級元素獲取不到高度的問題。

優點：代碼量少，簡單容易掌握。

缺點：只適合高度固定的布局，如果高度和父級div不同會出現問題。

2、overflow，設置overflow：hidden。

優點：代碼少，瀏覽器支持。

缺點：會把超出的部分隱藏起來，而且不能配合position使用

3、額外標簽，添加一個新的標簽，如div，或者br，并且設置標簽的屬性clear：both；清除浮動，讓父級能自動獲得高度。

優點：代碼少，瀏覽器支持，不會各種問題。

缺點：會有很多空的div或者br。

4、使用單偽類after和zoom，使用方法：

.clearfloat:after{

content:"";//設置內容為空

height:0;//高度為0

line-height:0;//行高為0

display:block;//將文本轉為塊級元素

visibility:hidden;//將元素隱藏

clear:both//清除浮動

}

.clearfloat{

zoom:1;為了兼容IE

　}

優點：瀏覽器支持好，大型的瀏覽器都在使用，建議使用。

缺點：代碼多，需要after和zoom都要使用才能兼容主流的瀏覽器。

5、雙偽類清除浮動。使用方法：

.clearfloat:before,.clearfloatafter {

content: "";

display: block;

clear: both;

}

.clearfloat {

zoom: 1;

}

缺點：不嚴謹不建議使用

6、父級div跟著浮動，所有代碼一起浮動就會形成一個整體，

缺點：會產生新的問題，不建議使用。

7、父級定義display：table；將div屬性變成的表格。

缺點：產生新的問題，而且影響布局。

8、overflow：auto；需要設置width，不設置height，瀏覽器會自動檢測浮動區的高度。

缺點：容易生成滾動條。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4282)

« 1 ... 87 88 89 90 91 92 93 ... 104 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合