css實現九宮格

阿新 • • 發佈：2017-12-04

http order content image 九宮格 bili back lan osi

原理：浮動+margin負邊距

示例代碼：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>css實現九宮格</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            ul.box  
{
                list-style: none;
                width: 165px;
                height: 165px;
                padding: 30px;
            }
            
            .box li {
                /*關鍵--浮動*/
                float: left;
            }
            
            .box a {
                display 
: block;
                width: 50px;
                height: 50px;
                border: 5px solid blue;
                /*關鍵--margin負值*/
                margin-left: -5px;
                /*關鍵--margin負值*/
                margin-top: -5px;
            }
            
            .box a:hover { 

                /*關鍵--相對定位*/
                position: relative;
                border-color: red;
                /*關鍵-- z-index*/
                z-index: 100;
            }
            
            .box:after {
                content: "";
                height: 0;
                visibility: hidden;
                clear: both;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <ul class="box">
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
            </ul>
        </div>
    </body>

</html>

效果：

技術分享圖片

鼠標懸浮效果：

技術分享圖片

css實現九宮格

http order content image 九宮格 bili back lan osi 原理：浮動+margin負邊距示例代碼： <!DOCTYPE html> <html lang="zh"> <head>

JS 　實現九宮格算法

idt dia ssh cli mage 定義變量 absolute tns 距離九宮格算法核心：利用控件索引index計算出控件所在的行數和列數；利用控件計算出left距離；利用控件計算出top距離；寫特效時需要用到定位公式：行 row=parseIn

WPF Border實現九宮格背景畫刷

Xaml <customcontrol:NineGridBorder ImageMargin="2,2,2,8" Image="/xxxxx;component/Images/xxxx.png">

js實現九宮格拖拽

/思路：拖拽出去的結點克隆一份放在拖拽節點移除的位置，利用勾股定理，比較拖拽節點和九個位置的距離，和距離最近的節點交換位置，最後刪除克隆節點；交換時：距離最近的結點的left和top賦給拖拽節點，克隆節點的left和top賦給距離最近的節點（注意：此時的克隆節點left和top儲存的是拖拽節

React Native之ListView實現九宮格效果

概述在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢？我們來看一下ListView的原始碼ListView是基於ScrollView擴充套件得來的，所以具有ScrollView的相關屬性：dataSource：

RecyclerView使用GridLayoutManager實現九宮格佈局 item居中對齊問題

用RecyclerView實現九宮格的佈局，除了常規的LinearLayout之外，還有比較常用的GridLayoutManager和StaggeredGridLayoutManager，後兩種分別是九宮格佈局、瀑布佈局。本人這次主要運用用了GridLayoutManager

使用GRID來實現九宮格選單

１、標頭檔案中宣告用到的變數 CAknGrid* iGrid; CAknGridM* iGridM; TInt iNumOfRows; TInt iNumOfColumns; TSize iCellSize; TInt iGraphHeight;

週記6——css實現類似朋友圈九宮格縮圖完美展示

公司有在做一個類似qq空間的開發，發表說說避免不了的要有圖片展示。產品提出的空間縮圖的展示類似*信朋友圈那種效果——圖片不變形、能看到中間部分。這裡給出3種解決方案(jsbin地址失效時可複製程式碼到jsbin.com看效果）： 1、 img + position + translate <!D

周記6——css實現類似朋友圈九宮格縮略圖完美展示

一個 home src 屬於 center 鏈接 www ref 規範公司有在做一個類似qq空間的開發，發表說說避免不了的要有圖片展示。產品提出的空間縮略圖的展示類似*信朋友圈那種效果——圖片不變形、能看到中間部分。這裏給出3種解決方案(jsbin地址失效時可復制代碼

CSS九宮格的4種實現

文章目錄實現效果實現方法 1. float佈局 2. flex佈局 3. grid佈局 4. table佈局總結

css實現類似朋友圈九宮格縮圖完美展示

公司有在做一個類似qq空間的開發，發表說說避免不了的要有圖片展示。產品提出的空間縮圖的展示類似*信朋友圈那種效果——圖片不變形、能看到中間部分。這裡給出3種解決方案(複製程式碼到jsbin.com即可看到效果）： 1、 img + position + translate <!DOCTYPE htm

使用GridView和SimpleAdapter實現手機界面常見的九宮格

adapt height lns androi code 兩個 sha itme find 首先是兩個XML界面： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

IOS 自定義按鈕（代碼實現）＋九宮格

uifont 排列 end uiview height iyu void rec name 在一些下載應用裏整個頁面都是按鈕，有好多好多，但是仔細觀察不難發現他們很有規律。就像下面一樣?? 很有規律的排列在屏幕上，那麽這需要我們怎麽去做能。正如標題，我們需要了解兩個知

css九宮格

css rst child wid nbsp last tex ast first <style type="text/css"> li { width: 100%; float: left; } li:first-child:nth

CSS實現table固定寬度，超過單元格部分內容省略

效果 org lips cell 間距 tex round nal 長度 <table>單元格的寬度是根據內容的大小自適應的，沒有內容的地方就擠到了一起。需要固定表格寬度和每一列的寬度。 table-layout:fixed 在固定表格布局中，水平布局僅取決

CSS九宮格樣式

idt adding add ali cnblogs padding pad logs title CSS .main>div { width: 14%; min-width: 160px; padding: 2%; height: 6

VUE實現的九宮格抽獎功能

效果圖如下：前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。 HTML程式碼： <template> <div class="lu

利用約束佈局ConstraintLayout實現全適配九宮格

android五花八門品類眾多尺寸各異的螢幕，一直是產品經驗和開發人員的心中難以解開的疙瘩，畫素，DP，英寸各種的不方便。面對競爭激烈的APP市場，介面平庸了不出容易出彩，介面特殊了又會帶來適配方面的難題。如何解決開發人員心中的痛，也是谷歌安卓團隊繞不開的坑。借鑑網頁開發的優點，早期已經有很多高手把

利用ActivityLifecycleCallBack監控app前後臺狀態切換，實現手勢密碼即九宮格解鎖

轉載註明出處：http://blog.csdn.net/coderder/article/details/51063493 利用ActivityLifecycleCallbacks監控app前後臺狀態

Android控制元件GridView之仿支付寶錢包首頁帶有分割線的GridView九宮格的完美實現

部落格時間：2015-02-04 15:03 今天我們來模仿一下支付寶錢包首頁中帶有分割線的GridView，俗稱九宮格。先上圖，是你想要的效果麼？如果是請繼續往下看。

css實現九宮格

相關推薦