用代码做一个橙色的标题贴纸背景
1、定义一个橙色的边框。这是最外面的大边框,需要我们定义它的边距、背景、对齐方式等等。
<section style="
width:20em;
margin:1em auto;
text-align: center;" id="标题贴纸" >
2、白色的虚线框进行代码的声明。
<section class="xhr" style="padding: 5px; color: white; transform: rotate(360deg); background-color: orange;">
3、橙色的背景框与文字的样式。
<section class="wihudong" style="border: 1px dashed white; padding: 10px; color: black;">
我喜欢每天学习
</section>
4、给这个标题框加上一个背景。我们这次采用了一个元素背景图片的声明。
<section style="
background-image: url(****.png);
background-repeat: no-repeat;
background-size: 100% auto;
width: 20em;
height: 3em;
margin-top: -1.8em;
"></section>
5、更多不同的颜色效果。我们把background 改成 #1E90FF ,就是一种蓝色的效果。
6、更多不同的文字效果。改变文字的内容,改变背景色的数值之后又获得了一种全新的效果。
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:177
阅读量:25
阅读量:20
阅读量:163
阅读量:72