div+css怎样实现圆圈里放个图片

html+css

代码编纂器:Dreamweaver CS5

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解div+css如何实现圆圈里放个图片。

    9c16fdfaaf51f3ded399971b9beef01f3a2979a1.jpg
  2. 2

    在test.html文件内,利用div标签建立一个模块,并设置其class为picdiv,本家儿要用于下面经由过程该class来设置css样式。

    77c6a7efce1b9d1699bbb41efcdeb48f8c546454.jpg
  3. 3

    在test.html文件内,在div标签内,利用img标签建立一张图片,图片的路径是images文件夹下面的2.jpg。

    35a85edf8db1cb133c42126cd254564e92584ba1.jpg
  4. 4

    在test.html文件内,编写标签,页面的css样式将写在该标签内。

    a71ea8d3fd1f41341d0a2b012a1f95cad1c85e8b.jpg
  5. 5

    在test.html文件内,设置类名为picdiv的div样式,利用width属性设置div的宽度为100px,利用height属性设置div的高度为100px,利用border-radius属性设置div为圆形(50%),利用border属性设置div的边框为1px的红色边框。

    48540923dd54564eeb19ca46bcde9c82d1584f54.jpg
  6. 6

    在test.html文件内,设置div内的图片样式,利用width属性和height属性设置img的宽度和度度都为100%,即占满整个div,利用border-radius属性设置图片为圆形(50%)。

    9d82d158ccbf6c81004b0297b33eb13533fa4054.jpg
  7. 7

    在浏览器打开test.html文件,查看实现的结果。

    962bd40735fae6cdc289851e00b30f2442a70f8b.jpg
  • 发表于 2019-11-28 17:02
  • 阅读 ( 1181 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具