我现在实现第一张图红色框的符号效果，但是实现出来是第二图的效果，怎么破？？？<ul>
<li class="name1">「品牌荟」 展示 即将上线</li>
<li class="name2">敬请期待</li>
</ul>
3 回答
stone310
TA贡献361条经验 获得超191个赞
<!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>
stone310
TA贡献361条经验 获得超191个赞
试下效果，
<!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>
- 3 回答
- 0 关注
- 1361 浏览
添加回答
举报
0/150
提交
取消