fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 237556477b321a264f92323475ea288143c71649 1 parent 90c39acc

重新修改样式

Inline Side-by-side
Showing 3 changed files with 136 additions and 106 deletions
... ... @@ -5,8 +5,10 @@
<p class="living">直播</p>
<div class="rec-info">
<img class="rec-head" src="" alt="头像">
<p class="rec-name">Hybird <span class="name-tag">直播红人</span></p>
<p class="rec-tag">Hybird living show</p>
<div class="rec-pannel">
<p class="rec-name">Hybird <span class="name-tag">直播红人</span></p>
<p class="rec-tag">Hybird living show</p>
</div>
</div>
</div>
<div class="rec-child">
... ... @@ -14,8 +16,10 @@
<p class="pre-living">预告18:00</p>
<div class="rec-info">
<img class="rec-head" src="" alt="头像">
<p class="rec-name">Fuckkkkkkl <span class="name-tag">潮流大人</span></p>
<p class="rec-tag">啊是的噶德国 living show</p>
<div class="rec-pannel">
<p class="rec-name">哥斯达 <span class="name-tag">潮流大人</span></p>
<p class="rec-tag">啊是的噶德国 living show</p>
</div>
</div>
</div>
</div>
... ... @@ -32,7 +36,7 @@
<section>
<img class="main-bg" src="" alt="正在直播">
<p class="main-living">直播</p>
<p class="main-intro">哈哈哈哈哈哈哈哈哈哈</p>
<p class="main-intro">哈哈哈哈哈哈哈哈哈哈aaaajjjj即可链接；离开家；了卡啊点舒服</p>
<div class="main-people">
<span class="people-icon"></span>
<p class="people-sum">50000人观看</p>
... ... @@ -47,8 +51,10 @@
<img class="pre-pic" src="" alt="直播预览图">
<p class="pre-icon">预告</p>
<p class="pre-time">今天16:00</p>
<p class="pre-title">啦啦啦魔兽世界</p>
<p class="pre-cast">主播：啦啦啦</p>
<div class="pre-pannel">
<p class="pre-title">啦啦啦魔兽世界asdfa很快将很快会离开就会立刻会</p>
<p class="pre-cast">主播：啦啦啦</p>
</div>
</li>
</ul>
</div>
... ...

3.35 KB | W: | H:

905 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
.live-rec {
height: 405px;
height: 420px;
width: 640px;
.rec-child {
... ... @@ -11,75 +11,85 @@
img {
height: 320px;
width: 320px;
background: gray;
}
.pre-living {
position: absolute;
top: 25px;
left: 25px;
top: 30px;
left: 30px;
height: 35px;
width: 123px;
background: url("/activity/pre-living.png") no-repeat center center;
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-size: 19px;
font-size: 22px;
text-align: center;
line-height: 35px;
}
.living {
position: absolute;
top: 25px;
left: 25px;
height: 30px;
width: 60px;
background: url("/activity/living-status.png") no-repeat center center;
top: 30px;
left: 30px;
height: 35px;
width: 70px;
background: #D0021B;
border-radius: 20px;
color: #fff;
font-size: 19px;
font-size: 22px;
text-align: center;
line-height: 30px;
line-height: 35px;
}
.rec-info {
position: relative;
height: 85px;
height: 100px;
width: 320px;
.rec-head {
position: absolute;
top: 17px;
left: 25px;
height: 51px;
width: 51px;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
}
.rec-name {
position: absolute;
top: 17px;
left: 94px;
font-size: 22px;
color: #444;
line-height: 100%;
}
.name-tag {
display: inline-block;
height: 22px;
width: 73px;
font-size: 15px;
background: url("/activity/name-tag.png") no-repeat;
color: #fff;
text-align: center;
line-height: 22px;
}
.rec-pannel {
position: absolute;
top: 20px;
left: 110px;
.rec-tag {
position: absolute;
bottom: 17px;
left: 94px;
font-size: 17px;
color: #444;
line-height: 100%;
.rec-name {
margin-bottom: 14px;
font-size: 26px;
color: #444;
line-height: 100%;
}
.name-tag {
display: inline-block;
height: 25px;
width: 85px;
font-size: 18px;
background: #444;
border-radius: 20px;
color: #fff;
text-align: center;
line-height: 25px;
}
.rec-tag {
font-size: 20px;
color: #444;
line-height: 100%;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
... ... @@ -88,42 +98,43 @@
.live-main {
.title {
width: 640px;
height: 68px;
height: 80px;
text-align: center;
line-height: 68px;
line-height: 80px;
color: #444;
font-size: 27px;
font-size: 32px;
}
header {
position: relative;
height: 85px;
height: 100px;
width: 640px;
.main-head {
position: absolute;
top: 17px;
left: 25px;
height: 51px;
width: 51px;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
}
.header-info {
position: absolute;
top: 17px;
left: 94px;
line-height: 1;
top: 20px;
left: 110px;
.main-name {
font-size: 22px;
font-size: 26px;
color: #444;
margin-bottom: 12px;
margin-bottom: 14px;
line-height: 26px;
}
.main-tag {
font-size: 17px;
font-size: 20px;
color: #b0b0b0;
line-height: 20px;
}
}
}
... ... @@ -140,34 +151,41 @@
.main-living {
position: absolute;
top: 25px;
left: 25px;
height: 30px;
width: 60px;
background: url("/activity/living-status.png") no-repeat center center;
top: 30px;
left: 30px;
height: 35px;
width: 70px;
background: #D0021B;
border-radius: 20px;
color: #fff;
font-size: 19px;
font-size: 22px;
text-align: center;
line-height: 30px;
line-height: 35px;
}
.main-intro {
position: absolute;
bottom: 64px;
left: 25px;
font-size: 24px;
color: #fff;
bottom: 75px;
left: 30px;
font-size: 28px;
color: #ccc;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.main-people {
position: absolute;
bottom: 20px;
left: 25px;
height: 35px;
width: 160px;
bottom: 22px;
left: 30px;
height: 40px;
width: 185px;
font-size: 19px;
background: url("/activity/main-people.png") no-repeat center center;
line-height: 35px;
background: rgba(4,4,4,0.5);
border-radius: 20px;
line-height: 40px;
.people-icon {
position: absolute;
... ... @@ -192,7 +210,7 @@
.people-sum {
position: absolute;
left: 40px;
font-size: 19px;
font-size: 22px;
color: #fff;
}
}
... ... @@ -204,11 +222,11 @@
.title {
width: 100%;
height: 68px;
height: 80px;
text-align: center;
line-height: 68px;
line-height: 80px;
color: #444;
font-size: 27px;
font-size: 32px;
}
.pre-list {
... ... @@ -218,48 +236,54 @@
.pre-pic {
position: absolute;
top: 17px;
left: 26px;
height: 128px;
width: 128px;
top: 20px;
left: 37px;
height: 150px;
width: 150px;
}
.pre-icon {
position: absolute;
top: 17px;
left: 179px;
height: 30px;
width: 60px;
top: 20px;
left: 220px;
height: 35px;
width: 70px;
border: 1px solid #444;
border-radius: 20px;
font-size: 19px;
line-height: 30px;
font-size: 22px;
line-height: 35px;
text-align: center;
color: #444;
}
.pre-time {
position: absolute;
top: 17px;
left: 260px;
top: 20px;
left: 310px;
color: #444;
font-size: 20px;
font-size: 24px;
line-height: 35px;
}
.pre-pannel {
position: absolute;
top: 77px;
left: 220px;
}
.pre-title {
position: absolute;
top: 67px;
left: 179px;
font-size: 24px;
font-size: 28px;
color: #444;
line-height: 100%;
margin-bottom: 12px;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.pre-cast {
position: absolute;
top: 100px;
left: 179px;
font-size: 19px;
font-size: 22px;
color: #b0b0b0;
line-height: 100%;
}
... ...