首頁猿問我現(xiàn)在實現(xiàn)第一張圖紅色框的符號效果...

我現(xiàn)在實現(xiàn)第一張圖紅色框的符號效果，但是實現(xiàn)出來是第二圖的效果，怎么破？？？

CSS3

erutdioup8556 2016-11-01 10:16:17

我現(xiàn)在實現(xiàn)第一張圖紅色框的符號效果，但是實現(xiàn)出來是第二圖的效果，怎么破？？？<ul> ????????????????<li?class="name1">「品牌薈」?展示?即將上線</li> ????????????????<li?class="name2">敬請期待</li> ????????????</ul>

查看完整描述

3 回答

stone310

TA貢獻361條經(jīng)驗獲得超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>

反對回復(fù) 2016-11-02

stone310

TA貢獻361條經(jīng)驗獲得超191個贊

試下效果，

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>canvas?應(yīng)用?炫酷效果</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>

反對回復(fù) 2016-11-01