html+css
代码编纂器：Dreamweaver CS5方式/
1新建一个html文件 ， 定名为test.html ， 用于讲解div+css如何实现圆圈里放个图片 。
2在test.html文件内 ， 利用div标签建立一个模块 ， 并设置其class为picdiv ， 本家儿要用于下面经由过程该class来设置css样式 。
3在test.html文件内 ， 在div标签内 ， 利用img标签建立一张图片 ， 图片的路径是images文件夹下面的2.jpg 。
4在test.html文件内 ， 编写标签 ， 页面的css样式将写在该标签内 。
5【div+css怎样实现圆圈里放个图片】在test.html文件内 ， 设置类名为picdiv的div样式 ， 利用width属性设置div的宽度为100px ， 利用height属性设置div的高度为100px ， 利用border-radius属性设置div为圆形（50%） ， 利用border属性设置div的边框为1px的红色边框 。
6在test.html文件内 ， 设置div内的图片样式 ， 利用width属性和height属性设置img的宽度和度度都为100% ， 即占满整个div ， 利用border-radius属性设置图片为圆形（50%） 。
7在浏览器打开test.html文件 ， 查看实现的结果 。
以上内容就是div+css怎样实现圆圈里放个图片的内容啦 ， 希望对你有所帮助哦！
猜你喜欢
- 怎样用WPS文字快速制作流程图思维导图
- 怎样查看QQ空间浏览量
- 快手小视频怎样能看聊天记录
- 怎样查询自己电脑的IP地址
- 怎样安装固态硬盘
- toad怎样自动补全代码
- 怎样快捷利用Windows7截图工具
- 怎样在word中设置图片效果
- 怎样在Labplus中创建角色
- 怎样双面打印Word文档