CSS實現動態圖片的九宮格布局的實例代碼_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

!DOCTYPEhtml>全兼容的HTML九宮格布局重置瀏覽器默認標簽樣式*/body,ul,li{margin:0;padding:0;}xttblog{width:1200px;height:170px;margin-top:50px;margin-left:auto;margin-right:auto;}box{margin-left:5px;margin-top:5px;list-style-type:none;}box:after{content:".;display:block;line-height:0;width:0;height:0;clear:both;visibility:hidden;overflow:hidden;}box li{float:left;line-height:230px;}box li a,.box li a:visited{display:block;border:5px solid#ccc;width:380px;height:230px;text-align:center;margin-left:-5px;margin-top:-5px;position:relative;z-index:1;}box li a:hover{border-color:#f00;z-index:2;}a href="#"title="1"><img src="sh.jpg"/></a>a href="#"title="2"><img src="bd.jpg"/></a>a href="#"title="3"><img src="tb.jpg"/></a>a href="#"title="4"><img src="fh.jpg"/></a>a href="#"title="5"><img src="tb.jpg"/></a>a href="#"title="6"><img src="tb.jpg"/></a>a href="#"title="7"><img src="tb.jpg"/></a>a href="#"title="8"><img src="tb.jpg"/></a>a href="#"title="9"><img src="tb.jpg"/></a>源碼,有些不一樣,自己改下,html+css不懂得話,得自學下,這個是很簡單的了,可以看下php中文網的一些課程,我自己也是自學的,網樓主采納!www.13333515.buzz防采集請勿采集本網。

前提條件: content="width=750"

QQ空間設置九宮格圖片,需要先借助制圖軟件做出切圖,再將圖片上傳到QQ空間上即可: 制作九宮格圖片。在此以“美圖秀秀”為例,利用軟件打開圖片,切換到“更多功能”選項卡,點擊“九宮格切圖”按鈕。

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

軟件AE.愛剪輯都可以。添加特效或者音樂都 可以。但是你就算剪輯或者加上字的視頻也發不了朋友圈。因為需要壓縮到1M以下,并且通過轉發軟件才可以發到朋友圈。具體看視頻

效果圖如下:

下載以前的qq空間版本,不止蘋果。其他手機的qq空間也是九宮格的。

 

1、三分法構圖 三分法構圖也被稱為九宮格構圖,是一種比較常見和應用十分簡單的構圖方法。一般有兩橫兩豎將畫面均分,使用時將主體e799bee5baa6e79fa5e98193e58685e5aeb931333431343661放置在

需求分析

cinepic為什么使用九宮格就閃退是怎么回事啊

高寬:

1張圖【寬320,高320】[2倍稿尺寸]

2張圖時【寬332,高332】

3張圖、4張圖、6張圖,7張圖、9張圖時【寬220,高220】

5張圖、8張圖時【第4、第5張寬高332】,【其余220】

間距:

2張時,【最后一張】只有left方向margin

3張時,【第2張】左右margin

4張時,【第2張】和【最后一張】都只有left方向的margin,【3,4】有top方向的margin

5張時,【最后一張】只有left方向margin

6張、7張時,【第2張、第4張】有左右margin,從【第4張起】top有

8張時,【第2張、第4張】時左右margin,從【第4張起】top有,【最后一張】只有left

9張時,【第2張、第4張、第8張】有左右margin

圓角10:

1張圖時【都有】圓角

2張圖時、3張圖-【第1張左上、左下】,【最后一張右上,右下】

4張圖時【第1張左上】,【第2張右上】,【第3張左下】,【最后一張右下】

5張圖時【第1張左上】,【第3張右上】,【第4張左下】,【最后一張右下】

6張圖時【第1張左上】,【第3張右上】,【第4張左下】,【最后一張右下】

7張圖時【第1張左上】,【第3張右上】,【第7張左下、右下】

8張圖時【第1張左上】,【第3張右上】,【第7張左下】,【最后一張右下】

9張圖時【第1張左上】,【第3張右上】,【第7張左下】,【最后一張右下】

歸納法

大家在中學的時候都學過數學的歸納法,就是一個命題先求出n=1的時候成立,然后假設n=k成立,證明n=k+1也成立,從而證得命題在n=k【k=任意實數】的時候都成立。

代碼

<div class="grid-img-box"> <van-image class='grid-img' v-for="value in data.photo" :key="value" fit="cover" :src="value" /></div>.grid-img{ /** 寬高 1. 3n+1且是倒數第2張時 2. 3n+1且是最后一張時 以上兩種情況圖片的寬高均應為320; 剩余兩種情況是: 3. 只有一張時寬高320; 4. 其余的情況和索引寬高都為220; */ display: inline-block; width: 220px; height: 220px; &:only-child{ width: 320px; height: 320px; } &:nth-child(3n+1):nth-last-child(2), &:nth-child(3n+2):last-child{ width: 332px; height: 332px; } /** 間距/布局 */ &:nth-child(3n+2){ margin: 0 6px; } &:nth-child(n+4){ margin-top: 6px; } &:first-child{ border-top-left-radius: 10px; } &:last-child{ margin-right: 0; border-bottom-right-radius: 10px; } /** 圓角 */ //左下圓角:最后一行第一個 &:nth-child(3n+1){ &:last-child, &:nth-last-child(2), &:nth-last-child(3){ border-bottom-left-radius: 10px; } } //處理四個布局 //增大第二個margin講第三個擠到下一行 &:nth-child(2):nth-last-child(3){ margin-right: 220px; } //重置第二個圓角 &:nth-child(2):nth-last-child(3){ border-top-right-radius: 10px; } //重置第三個的margin和radius &:nth-child(3):nth-last-child(2){ margin-top: 6px; margin-right: 6px; border-radius: 0 0 0 10px; } //重置第4個的圓角 &:nth-child(4):last-child{ border-radius: 0 0 10px 0; }}

總結

到此這篇關于CSS實現動態圖片的九宮格布局的文章就介紹到這了,更多相關css 九宮格布局內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

同問內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • css實現頁面九宮格布局的簡單示范
  • 為什么有些qq動態頁面是九宮格的而我的一直是老版橫排的怎么切換
  • 求九宮格html代碼
  • 微信怎樣用九宮格樣式發送多張圖片?
  • 朋友圈發的九張圖組成的九宮格,點開變成另一張圖怎么做到的
  • 怎么弄QQ九宮格動態
  • 朋友圈這種六宮格或九宮格翻照片小視頻是用什么軟件制作的?謝謝大家。最近朋友圈很火
  • iPhone QQ空間里的“我的空間”九宮格布局怎么改回原來的?
  • 攝影構圖有哪幾種構圖方法
  • 在使用Cinepic時打開照片用九宮格拖圖時會閃退是什么原因?
  • 如何在一個電腦中以九宮格形式進行多視頻同時播放
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程動態圖片九宮格布局csscss實現頁面九宮格布局的簡單示范css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css 實現漸變效果小結( linear-gradient線性漸變 和 r解決type=file 文件修改表單 名稱不能正常回顯的問題移動端前端適配方案(總結)css 橫向進度條和豎向進度條實現代碼css運用阿里巴巴矢量庫快速在對應位置加上好看的圖標詳解盒模型大小取決于它的padding,margin,border數css+svg實現b站充電效果的示例代碼css動畫實現領積分效果的思路詳解html/css中的空格處理及如何保留頁面中的空格css實現氣泡的小尖角效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果