HTML中用代码做方框/圆圈字怎么做

 时间:2024-10-08 04:30:30

用代码做出方框字或圆圈字的效果,我们我们在文字下面添加一个方框或圆框,这样就有了想溴溢菏确要的效果了,但是用代码怎么做出呢,下面我么看具体方法

HTML中用代码做方框/圆圈字怎么做

工具/原料

HTML

代码

方法/步骤

1、如图,在body区域,建立div标签,然后在div里面建立几个p标签,文字内容就写在p标签里面

HTML中用代码做方框/圆圈字怎么做

2、然后对p标签设置宽高属性,并只添加外轮廓,如图

HTML中用代码做方框/圆圈字怎么做

3、这样之后保存下,可以看到现在状态时这样的,在浏览器中预览就可以看到效果

HTML中用代码做方框/圆圈字怎么做

4、如果我们想要将方框变成圆框,在样式中需要输入转成圆角的命令,即border-radius:50%;

HTML中用代码做方框/圆圈字怎么做

5、另外文字并不是居中的位置,所以需要对文字进行简单的居中设置代码

HTML中用代码做方框/圆圈字怎么做

6、然后圆框字的效果就是这样的了

HTML中用代码做方框/圆圈字怎么做

7、我们还可以将竖排的圆框字变成横排的文字框,只要添加浮动命令float就可以了,如图

HTML中用代码做方框/圆圈字怎么做

8、最后就做好了,如图所示的效果。

HTML中用代码做方框/圆圈字怎么做

实现整个html居中最简单方法 HTML中给图片上增加文字的代码怎么写 如何在HTML中插入图片 html文本区域大小怎么设置 网页设计HTML中如何插入背景图片
热门搜索
展示架图片 小树简笔画图片大全 摔倒图片 平头发型图片 宝骏310图片