css製作桌面上的兩個球
HTML頁面開發中,有時候需要呈現一些場景,有的用圖片來完成,有的用css來模擬完成。
下面一起來看下,怎樣用css來模擬顯示一張桌面上的兩個球。
操作方法
(01)首先是html代碼,這裏的代碼如圖,主要是用三個div來模擬,樣式名爲 y1,y2的是兩個圓, zm是桌面<div class="y1"></div> <div class="y1 y2"></div> <div class="zm"></div>
(02)接着看下y1的樣式代碼,主要是透過設定border-radius邊角弧度來讓div顯示成圓形,再添加上背景色background-color來設定圓的顏色, display: inline-block 是爲了讓兩個圓顯示在同一水平線上background-color: #4caef0; border-radius: 100px; display: inline-block; height: 200px; width: 200px;
(03)y2第二個圓同樣用 .y1的樣式,所不同的是,他有自己的樣式,就是設定高度和寬度,這使第二個圓比較小一點.y2{ height: 80px; width: 80px; }
(04)先看下目前代碼的頁面效果,就是兩個並排的圓。
(05)再加上桌面的樣式代碼,其實就是一個有背景色的div長方形 { background-color: #66aef0; border-radius: 4px; height: 30px; width: 400px; }
(06)頁面效果顯示如圖
(07)從上圖可以看到,圓和長方形有點間隔,我們在樣式上加上負的margin,讓這個間隔消失掉, margin-top: -3px;
(08)現在的效果好點了。
(09)再爲兩個圓加一點修飾,添加投影效果。樣式爲box-shadow: 5px 7px 10px #666;
(10)完成了。看下現在的效果,
-
用CSS製作三角形,替代背景圖片
網頁設計,製作,在早期,一般都是用背景圖片來呈現三角形,比如一個提示視窗,有一個三角形圖標指示,這個圖標一般就是背景圖片來的。現在我們不用背景圖片,直接用CSS來生成,需要怎麼做呢?操作方法(01)先看下html代碼,代碼很簡單,就是幾個div,我們爲其中一個div加上樣式名,angle,...
-
微博與博客到底是什麼?幹什麼用的
微博與博客到底是什麼,它們主要是用來做什麼,讓小編來給你普及指南。操作方法(01)微博和博客都是用戶用來發表文章的一個平臺系統,透過自我內容的發佈與其他網絡用戶形成互動交流。(02)微博可以看做是小型的博客,文字輸入量被限制在140字。這是微博最大的特點。另外微...
-
excel打印區域怎麼設定
MicrosoftExcel是微軟公司的辦公軟件Microsoftoffice的組件之一,是由Microsoft爲Windows和AppleMacintosh操作系統的電腦而編寫和執行的一款試算表軟件。操作方法(01)開啟Excel檔案後將鼠標移動到頁面佈局選框點擊頁邊距按鈕。(02)在頁面設定的小視窗中勾選自己所需...
-
PHP如何獲取日期的年份?
在PHP開發中,我們很多時候會用到日期,當我們只用到日期的年份時,怎麼獲取一個日期的年份?下面一起來看下。操作方法(01)用到日期函數,我們當然少不了用date方法了。看下我們的代碼,如圖,很簡單,就是用date方法獲取到當前日期,然後用‘y'標誌格式化日期輸出,只輸出年份...