我现在实现第一张图红色框的符号效果，但是实现出来是第二图的效果，怎么破？？？
我现在实现第一张图红色框的符号效果，但是实现出来是第二图的效果，怎么破？？？
<ul> <li class="name1">「品牌荟」 展示 即将上线</li> <li class="name2">敬请期待</li> </ul>
浏览 1362回答 3
3回答
-
stone310
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul{ font-size:40px; } li{ height:1em; } .name1 > :first-child { vertical-align: top; display: inline-block; overflow: hidden; height: .5em; } .name1 > :last-child { vertical-align: bottom; display: inline-block; overflow: hidden; position: relative; width: 1em; height: .5em; } .name1 > :last-child div{ position: absolute; bottom: 0; } </style> </head> <body> <ul> <li class="name1"><span>「</span>品牌荟<span><div>」</div></span>展示 即将上线</li> <li class="name2">敬请期待</li> </ul> </body> </html>00 -
stone310
试下效果，<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 应用 炫酷效果</title> <script src="easeljs-0.8.2.min.js"></script> <style> .name1 > :first-child { font-size: 50%; vertical-align: top; } .name1 > :last-child { font-size: 50%; vertical-align: bottom; } /*或者这么写，看需求*/ /*.name1 > :first-child + span { font-size: 50%; vertical-align: bottom; }*/ </style> </head> <body bgcolor="#7fffd4"> <ul> <li class="name1"><span>「</span>品牌荟<span>」 </span>展示 即将上线</li> <li class="name2">敬请期待</li> </ul> </body> </html>00 -
Lemon156
你给「 」这两个符号添加标签写特定的样式，不然会跟随字体的样式变成图二的效果00
相关分类