圖片浮動(插入的圖片自己找)

2021-02-19 京西黑條

<!DOCTYPE html>
<html>
<head>
    <title>這tm像夢一樣</title>
<style type="text/css">

div.b1 :hover{
    cursor:pointer;
    /* transform屬性 */
    transform:translate(0,-10px)
    /* 第一個參數指定X軸的位移量,必填, 第二個參數指定Y軸的位移量,不必填 默認0*/
  }
  div.b5 :hover{
    cursor:pointer;
    /* transform屬性 */
    transform:translate(0,-10px)
    /* 第一個參數指定X軸的位移量,必填, 第二個參數指定Y軸的位移量,不必填 默認0*/
  }
  div.a :hover{
    cursor:pointer;
    /* transform屬性 */
    transform:translate(0,-10px)
    /* 第一個參數指定X軸的位移量,必填, 第二個參數指定Y軸的位移量,不必填 默認0*/
  }
.box{
    margin:0 auto;
    width: 1226px;
    height: 614px;
}
.a{
    width: 233px;
    height: 614px;
    
    float: left;
}
.b{
    margin-left: 2px;
    width: 850px;
    height: 614px;
    background-color: #D8D8D8;
float: left;
}
.b1{
    margin-left: 10px;
    width: 200px;
    height: 300px;
    
    float: left;
}
/*.b2{
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;

}
.b3{
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;
}
.b4{
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;
}*/
.b5{
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 300px;
    
    float: left;
    
}
/*.b6{
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;
}
.b7{
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;
}
.b8{
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 300px;
    background-color: red;
    float: left;*/
}
}
</style>
</head>
<body>
    <div >
<div><a href="https://www.mi.com/mixalpha"><img src="11.png"></a></div>

<div>
<div><img src="22.png" width="200px" height="300px"></div>
<div><img src="33.png" width="200px" height="300px"></div>
<div><img src="44.png" width="200px" height="300px"></div>
<div><img src="55.png" width="200px" height="300px"></div>
<div><img src="66.png" width="200px" height="300px"></div>
<div><img src="77.png" width="200px" height="300px"></div>
<div><img src="88.png" width="200px" height="300px"></div>
<div><img src="99.png" width="200px" height="300px"></div>
</div>

</div>

</body>
</html>

相關焦點

  • 圖片插入Word/WPS後發現圖片和文字重疊怎麼辦?
    我們在使用WORD或者WPS插入圖片時，經常會出現圖片和文字重疊的現象，在這裡，小編提供兩種方法來實現圖文分離。當我們在WPS/Word中插入一張圖片時，我們會看到圖片和文字部分重疊，且圖片的上半部分被隱藏了。
  • 在Word中如何批量插入不同圖片?
    如何在一篇文檔中批量插入不同的照片？遇到這種問題，可以藉助郵件合併來完成。第一步：準備數據源這裡的數據源包括Word文檔、照片和Excel表格數據，由於需要插入圖片，因而在表格數據中我們需要準備好相應的圖片路徑，這裡要注意的是路徑格式，單槓需要轉為雙斜槓。
  • Word中插入大量圖片後,怎樣快速調整它們的尺寸為統一的大小?
    在工作中經常會遇到在Word中插入圖片的情況，有時甚至會一次性插入幾十張圖片。但是這些圖片往往尺寸大小不統一，看起來並不美觀。有沒有辦法可以快速調整這些圖片的尺寸為統一大小呢？答案是可以！這裡小雨為大家介紹兩種方法。方法一：神奇的F4鍵在Word中有許許多多的快捷鍵，其中有一個【F4】像神一樣的存在著，但是許多人並沒有掌握它的用法。
  • PPT中圖片的導入導出進階教程:如何將喜歡的PPT背景圖片收為己用
    在PPT裡插入圖片，可以說是很基礎的一個技能了。在幻燈片裡插入一張圖片誰不會呢？可是插入10張，100張呢？難道還要用原始的方法一張一張插入嗎？相信大家的手指都會表示深深的拒絕。當我們要把數量較多的圖片導入到我們的PPT當中，一張一張來的操作顯然是不科學的，那怎麼做可以快速地導入較多的圖片到不同的幻燈片中呢？這裡我們就需要用到PPT裡的【相冊】功能啦。我們需要做的是在點擊【插入】找到【相冊】，選擇【新建相冊】，然後點擊【文件磁碟】，選中我們需要用到的圖片，這樣就可以得到圖一的界面了。
  • word圖片技巧:怎麼調整word圖片的大小
    日常辦公中，為了讓Word文檔的美觀性，常會在文檔中插入與之相匹配的圖片。而在插入圖片之後，通常為使文檔風格統一，大小符合要求，可以根據需要調整插入圖片的大小。因此，Word中調整圖片大小的方法有多種，一起來看一看吧！
  • 圖片療愈:神聖幾何,生命之花,梅爾卡巴
    神聖幾何能量療愈 　　文：知樂 圖：網絡 　　音樂來自幾支曲子的合集，音樂最後15分鐘來自巴夏推薦的一個腦波頻譜切換冥想，據巴夏的介紹，通過練習這種頻率的切換，我們會記得自己的夢
  • 如何撰寫SCI論文圖片標題?
    Figure CaptionFigure Caption就是圖片標題（Figure1. ********）。許多SCI期刊投稿都要求圖文分離，就是文章主體（text）中不能插入圖片，將圖片放到最後一頁，同時圖片標題再放到額外一頁。
  • Word圖片顯示空白怎麼辦
    Word圖片顯示不全怎麼辦呢？向Word中插入圖片時顯示不全或不顯示該如何解決呢？在編輯Word過程中，我們會向其中插入圖片，有時可能會出現圖片顯示不全的問題，或者在打開Word文檔後不顯示圖片。對此我們可以通過以下方法來解決。
  • 自己製作的面具圖片
    還要準備一支鉛筆，便於描繪面具形狀也好擦去，最主要的是先要畫形狀要找感覺。由於是臨時起意找不著彩色筆，就用一支細的紫色籤字筆取代。然後我們需要在網站上或是生活中找到你需要的面具圖案，這就是看你創造性的時刻了。我已經找到了下圖的形狀。用鉛筆根據你臉型大小畫長寬範圍，然後用鉛筆勾勒出面具的大體樣子，如下圖所示，如果嫌不方便或是怕勾勒的不對稱，就先對摺，勾一半，用剪刀剪形狀。
  • 圖片翻譯神器!沒有美工也能自己翻譯圖片—附操作教程
    相信大家都會遇到跟蝦叔團隊一樣的問題，採集的商品，主圖都有很多描述性文字，上到臺灣或者東南亞，都會影響轉化率，但是每個圖片都找美工改，我們的美工怕是都要跑了，為了提高上新效率，團隊裡必須人人都會改圖。阿里翻譯-功能介紹成功登陸後，直接選擇圖片翻譯，開始使用其他功能就不一一贅述了（反正蝦叔團隊也沒研究怎麼用），直接看圖片翻譯進入後，請選擇：本地圖片翻譯（反正在線商品肯定不支持Shopee，暫時不理它）現支持：繁體中文，英語，馬來語，泰語，越南語，印尼語等等。
  • 條碼列印軟體如何批量導入圖片和圖片名稱
    條碼列印軟體可以實現批量導入圖片的方法，大家可能比較清楚，那麼如果和實現圖片和圖片名稱同時顯示在每個標籤紙上且一一對應呢？首先，我們可以先打開條碼列印軟體，然後點擊新建，紙張和布局方法先默認A4紙即可。
  • 把自己的名字轉變成圖片,圖片炫酷太贊了
    【簡單幾步，完成炫酷精美的頭像和壁紙】【快訊哥應用分享第028期】應用：圖癢支持平臺：IOS/安卓【公眾號內回復編號：「028」即可獲取】大家好，首先我們看一下下面幾張圖片我們可以通過自己的名字，照片做成一張特別的頭像或牆紙。想要這款應用的小夥伴們，可以關注「快訊哥」公眾號，並在聊天窗口內回復編號「028」即可獲取。
  • 小蝌蚪找媽媽的故事及過程的圖片 最全版本小蝌蚪找媽媽
    小蝌蚪找媽媽的故事及過程的圖片 最全版本小蝌蚪找媽媽 來源：www.18183.com作者：似水流年時間：2017-04-21 小蝌蚪找媽媽的故事及過程的圖片去哪裡找呢？本文小編為您帶來小蝌蚪找媽媽的故事及過程的圖片 最全版本小蝌蚪找媽媽。
  • JPG圖片怎麼轉換成PDF?這才是圖片轉PDF的免費軟體
    JPG圖片怎麼轉換成PDF？圖片是我們平時最常見的一種文件格式。除了閱覽，我們也會把圖片進行轉換操作，用以適用不同的場景，就比如將多張JPG圖片轉成PDF文件，保存和傳輸都很方便。那麼我們該怎麼將圖片轉換成PDF文件呢？下面我就教給你圖片轉PDF的方法。
  • Excel表格如何製作圖片九宮格呢?
    Excel表格如何製作圖片九宮格呢？圖片九宮格相信大家都見過，是不是覺得圖片九宮格很不錯呢？很有特色呢？那麼要怎麼製作圖片九宮格呢？Excel表格可以製作圖片九宮格嗎？答案是可以的。那麼下面小編就簡單介紹一下Excel表格如何製作圖片九宮格，希望能幫到您。
  • 如何對word/wps中的多個圖片進行組合。
    在日常生活和工作中我們往往需要用到將幾個圖片組合到一起，在一個頁面呈現出來。如：在百度經驗的認證帳戶信息填寫中需將身份證正反面放在同一張圖片內上傳，那麼如何來設置呢？一起來看看吧。新建一個WPS或Word空白文檔，點擊」插入「，選擇「圖片「——」來自文件「，插入即將參與演示組合的兩張圖片。在這裡要記住有些剛插入的圖片不能同時選中，這個時候要將兩張圖片的版式修改一下：分別選中每張圖片，右擊彈出菜單，選擇」設置對象格式「。彈出對話框，選擇」版式「，在版式界面內選擇四周型或其他非嵌入型格式。
  • 有趣的立體圖片,用PPT也能做.
    具體操作方法如下：第一步：插入素材圖片，按住Ctrl的同時使用拖動圖片，複製一張。然後插入一張梯形形狀，並放於小鳥腳部合適位置，如下所示。第二步：選擇圖片，按住Shift鍵的同時，選擇上方的梯形形狀，點擊【格式】-【插入形狀】-【合併形狀】按鈕，在彈出的菜單中選擇「相交」命令，將圖片裁剪為形狀。
  • 簡單易懂,設置圖片在Word文檔中的環繞方式
    我們在使用Word文檔編輯圖文的時候，有時候會遇到文字和圖片放在一起的時候，看上去總感覺很彆扭，有點不協調，原因很簡單，就是我們插入文字裡的圖片沒有進行環繞方式的設置，默認狀態下，極有可能會出現文字和圖片不協調的情況。
  • SCI論文圖片處理與組圖技巧
    本刊編輯部現搜集整理了部分SCI論文圖片與處理技巧，與廣大讀者作者朋友們分享。SCI文章投稿最重要的莫過於圖片的處理,一般雜誌對圖片要求：圖片最低解析度300DPI，部分雜誌要求不低於600DPI，點線圖及柱狀圖部分雜誌要求達800DPI甚至1200DPI。雜誌要求的解析度是指原始圖片的解析度，經過Photoshop處理後修改圖片的解析度以達到雜誌的要求通常是不可取的。
  • Axure:電商網站圖片放大鏡效果
    本文是關於電商網站圖片放大鏡的實現效果，一起來文中看看~為了加深對動態面板的理解，所以嘗試了圖片放大鏡實現效果，中間也遇到一些小問題。該練習主要用到元件跟隨滑鼠移動、動態面板。一、分析實現效果：倒推需要實現的功能：放大鏡在圖片內跟隨滑鼠移動；滑鼠移動顯示該區域的放大圖片；原圖片放大。二、準備需要放大的圖片：小圖放大不清晰，所以直接選擇了清晰的大圖作為放大之後的圖片，等待放大的底圖在該圖片基礎上等比例縮小。案例圖片大小：【760×760】。