我现在实现第一张图红色框的符号效果，但是实现出来是第二图的效果，怎么破？？？

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>

0 0

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>

0 0

Lemon156

你给「」这两个符号添加标签写特定的样式，不然会跟随字体的样式变成图二的效果

0 0