編程基礎html：我就是想做圓形的人物介紹

物hello，小夥伴們，勤勞的小編又來給大家分享知識了，今天給大家分享的呢就是製作一個圓型的像是窗口，來介紹我們的人。

這是效果圖。

這是滑鼠划上圖片後的效果圖

（找不到把滑鼠貼上圖片的方法，只好暫時這樣了！！）

那小夥伴們對這個效果感覺如何呢！

先分析

GIF/15K

GIF/15K

想要製作上面的顯示效果，首先我們要有一張圖片，小夥伴們可以自己準備自己喜歡的圖案。

小編就直接用這個圖片了。

那麼之後我們新建頁面，就可以開始製作了。

首先分析這個效果，簡單來說就是建立兩個盒子，

然後讓我們的滑鼠滑動到圖片區域的時候顯示文字的這麼一個效果。

（怎麼樣是不是很明了啊！）

寫頁面

GIF/15K

GIF/15K

小編決定用ul標籤來寫這個頁面，先建好頁面然後。

把我們的ul標籤的內容寫出來

這就是我們滑鼠滑過圖片是顯示的內容，

剩下的就交給我們的樣式來做了。

記住這個效果，在我們完成代碼之後他將重獲新生。（得意ing）

首先進行頁面的初始化

把遊覽器默認格式以及ul標籤的默認格式去掉。

給body一個背景顏色。然後我們利用類選擇器給ul設置屬性寬、高、外邊距、形狀以及背景圖片等等。

效果如下：

已經很有樣子了，然後在設置li標籤中的字體樣式。

效果貼圖如下：

怎麼樣是不是和我們的效果題一樣呢？

如果你以為這樣就完成了！

最後一步，為我們的 li 標籤設置樣式讓他可以響應滑鼠的動作這才是ok的！

這才是完整的程序代碼！！！

小夥伴們可以自己試試哦！

知識點總結

GIF/15K

GIF/15K

知識點1：

這個就是我們用來畫圓角的屬性：

border-radius:50%;

我們可以給這個屬性賦值的一些情況：

四個值： 左上    右上    右下    左下

三個值： 左上    右上左下    右下

兩個值： 左上右下    右上左下

一個值： 所有角一樣的值

知識點2：

背景圖片的大小  等比例縮放至邊框

background-size:cover;

知識點3：

:hover

此選擇器用於選擇滑鼠指針浮動在上面的元素。

也就是我們的效果顯示的滑鼠滑過圖層顯示。

全部代碼奉上：

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六   學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！