HTML-如何用代码做出圆形头像的样式

 时间:2026-04-29 16:57:24

1、打开代码软件,然后做出一个div标签,中间包含一个图片标签如图

HTML-如何用代码做出圆形头像的样式

2、将文件保存并且和准备的图片放在一个文件夹内,如图所示

HTML-如何用代码做出圆形头像的样式

3、然后继续在代码软件中,将刚才的图片位置添加到Img标签中,如图所示,必须将图片的所有命名都填写上

HTML-如何用代码做出圆形头像的样式

4、这时候保存代码,然后观看效果是显示图片原来大小尺寸的

HTML-如何用代码做出圆形头像的样式

5、在div中可以设置div宽高属性,然后对里面的子集img进行宽度的设置,高度会自动变

HTML-如何用代码做出圆形头像的样式

6、这样我们看到的就是我们设置的大小尺寸了

HTML-如何用代码做出圆形头像的样式

7、我们看到的头像很多都是圆角的,我们也可以用代码实现,在div中将边缘化变成圆角的就可以了,如图所示,然后再设置个溢出隐藏

HTML-如何用代码做出圆形头像的样式

8、这样我们看到的头像就是圆形的了,是不是很简单。

HTML-如何用代码做出圆形头像的样式

HTML-如何用代码做出圆形头像的样式

  • html如何把两个网页连接起来
  • 怎样让html中的文字垂直水平居中显示
  • HTML怎样链接css
  • css如何设置span的宽高呢
  • 如何在HTML中插入图片
  • 热门搜索
    手机怎么远程控制电脑 小说大纲怎么写 怎么生成二维码 智齿牙龈肿痛怎么办 户口本丢了怎么办 怎么用丹田唱歌 肚子右边疼是怎么回事 月经量少发黑怎么调理 怎么摇号 腰闪了怎么办