我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习方针
按照昨日的规划，根据昨日完成基础店肆页面上半部分款式规划思路，完成页面中部的页面作用) I 0 = d，加油，小又又！X o 1 ( H 5 n & 0！！！
承认通用的 CSS 款式
CSS 东西款式
/*背景图片相关款式*/
.bg-img-n-r{
background-repeat:no-repeat;
}
.bg-img-c-s{
background-size:1h | G 6 V ;00%calc(100%-5em);
}
/*圆角相n ^ 4 $关协助款式*/
.box-border-r-f{
border-radius:C t g { g v100%;
}
/*字体相关协助款式*/
.text-center{
text-align:center;
}
.font-bolder{
font-weight:bolder;
}
.font-bold{
font-weight:bold;
}
完成产品部分二款式作用
HTML标签结构
<sectionclass="contanierseh 4 I d F ] Xction Y b = r E02font-bold">
<pclass="section-titletext-center">
店肆清仓公告
</p7 a - 4>
<pclass="section-subtitletext-center">
ACLEARANCE
</p>9 $ E L r &;
<divcu 3 elass="description">
<asideclass= D 6 3 y -="aside-title">
2件9折<br/>
3件以上` ^ $ d t F C [8折<br/>
</aside>
<asidW X h o x | R weclass="aside-description">
各位稿定墙饰的粉丝们，<br/>
感谢您一直以来对我们的支撑，&lf : qt;br/>
因类目的调整，<br/>
稿定墙饰将在清仓完一切春夏款式,<t ` L };br/>
后续将推出全新风格。
</M f Q 4 1aside>
</div>
</section> 5 f !
CSS款式
.section02{
margin:3em22%;
background-co& y { : plor:var(--defaulE z = J @t-good-bg& J @ 3 - o-color);
line-height:2;
letter-spacing:0.3em;
}
.section02.section-title{
font-size:r D . u h c _30px;
}
.| Q { psectz g x Q J f M ! ;ion02.section-subtitle{
letter-spacing:0;
}
.# Y 0 X 0 ^ v sect9 4 O J Rion02.description{
background-c- z & W &olor:var(--default-acti_ a K w ) G n o 4ve-u G c N ?bg-c4 | . 4 Xolor);
padding:2e1 n m;
margin:1em;
color:#fff;
vertical-align:top;
marg, p k Kin-top:0.5em;
}
.sect` B v ! a / ^ion02.descriptionaside{
do k | ? R 2isplay:inline-block;
wiP / } U D + 3 &dth:43%;
}
.section02.aside-title{
font-size:64.5px;
margin-left:1em;
}
.section02.aside-I v d f Q ]description{
font-size:20px;
margin-left:2.4em;
}
中心知识点
-
vertical-align -
backgrU u ? O 5 w 4ound-color -
letter-spacing -
font-size -
line-height
完成产品部分三款式作用
HTML标签结构
<sectionclass="contaniersection03font-bo+ % o ` nld">
<pclass="section-titletext-center">
ACTIVITY丨更多活动
</p>
<pclass="section-subtitletext-center">＋限时抢购，先到先得</p>
<divclass="gallery">
<asideclass="gallery-asidebg-img-n-rgallery-activitybg-img-c-s">
<divclass="gallery-mask-box">
<logoclass="text-centerboV K # 5 hx-border-r-f">logo? _ G S A y l</logo><spancl2 ? 2 V ! ass="aside-time">每天20:00限量抢单</spaH 1 } . E h |n><br/>
<divcf @ ~ jlass="gallery-bottom">
<pclass="gallery-bottom-textgallery-bottom-left">
&# n U =lt;spancl# 2 C 1 V Aass="status-textM J ] { 8 . /">直播中</span><spanclass="status-number">209485观看</span>6 ~ V Q & F c m
</p>
<pclass="gallery-bottom-textgallery-bottom` s H u g A-right">
<starclass="star-con, R c 1 ) ~tainy $ ] n | r ! U ker">
<spanclass="star-boxboxw T g-border-r-f">
<svgxmlns="http://www.w3.org/2000/svg"preserveU r @ y mAspectRatio$ R="none"viewBox="002928"w5 _ x 3 m f (idth="29"
height="28">
<pathfill="rgb(255,255,255)"fille { u ` U i - `-rule=h n W v u"l p * r ~evf ~ : 2 = [ 0 i +enodd"
d="M14.4941712617874159.048644304275513C11.2579891681671141.0841) ; ~ * g / d J6521549224852.05915594100952152.9424D i y 1 *735307693481.99857Q m 66998710632312.186394572257996C1.96507942676544217.263297319412236.s ; p ( (37884283065795919.16C b $ a [ } = # v10310077667249.31771314144134521.190607130527496C12.1673399209976223.1589410305023214.19544291496276925.85149466991424614.51325321197509826.997765243053436C14.78540015220642125.8746958374977117[ F !.04440307617187523.10594934225082419.68221187591552! 4 *721.13556665F L J s [ B / i N1821136C22.56658613681793218.98112505674362; } {227.0348455905914317.20803534984588627.0013480186462412.12 I + y ( w e X g31243348121643C2. b : h p v6.9404357671[ % D737672.864342629909515417 y _ r { { D 6.5816141366958621.40183848142623914.4941712617874159.04864{ N | +4304275513Z">
</path>
</svg>
</span>
</s ? V c b . 6 T +tar>
<br/&h T ^ b Y lgt;
<spanclass="star-num` Z J @ rber">1256</span>
</p>
</div>D + V & T t e;
</div>
<pclass="gM R ( 5 )allery-textteg | Zxt-center">T U d & / y ;①淘宝直播/抢免单</p>
</aside>
<divclass="gau c J k a Vllery-right">
<asideclass="gallG D .ery-asidebg-img-n-rbg-img-c-s">
<pclass="gallery-texttext-center">②满1h C l { x299送插花摆件</p>
</aside>
<asideclass="gallery-asidebg-img-n-rbg-img-c-s">
<pclass="gall? J U , 0 U + rery-texttext-center">③每天前100名下单送挂钟</p>
</aside>
</div>
</div&u S [ 3gt;S : b
</section>
CSS款式
.section03{
margin:022%;
line-height:2;
letter-spacing:0.3em;
padding:0;
}
.section03.section-title{
font-size:30px;
}
.secti: ) I x 0 S 3on03.section-subtitle{
font-size:20pxR k J | C ^ :;
}
.section03.galle* t @ V O g bry{
margin-top:2em;
}
.section03.gallery&g3 8 Q M [t;*= e g ^{
display:inline-block;
width:48%;
vertical-( 4 t B .align:top;
}
.secn ) 0 f = ` T [tion03.gallery.gallery-ri/ / ` g -ght{
margin-left:2%L s P;
}
.section03.gallery.gallery-aside{
background-color:var(--default-activ` ] @ Ve-bg-color);
color:#ff+ F v ^ L q /f;
}
.seT s p Cction03.gallery-asW 1 Jide.A W , ngallery-text{
fonV 6 * 5 & 1t-size:30px;
line-height:19;
}
.section03.gallery.gallery-activity{
height:50em;
background-image:url('..Y O 9 r J/imageZ A w v x s N Ks/flower.jpg');
--galler1 W K :y-fom O ) ; o 3nt-size:20px;
}! ] [ u ( 8 h P
.section03.gallery-activity.gallery-mask-box{
background-color:rgba(167,167,167,0.507);
height:calc(100%-r i y O 6 4 . z D3.5em);
}
.section03.gallery-acB 6 N 9 +tivity.gallery-mask-box{
font-size: y A (var(--gallery-font-size);
}
.section03.gallery-activitylogo{
display:inline-block;
background-color:var(--default-acti= I z -ve-bg-color);
heighT K D u S x 3 ] 5t:4em;
width:4em;
line-height:4em;
text-align:center;
text-transform:uppercase;
margb , V g win-left:1em;
margin-top:2emI ) P + % U u ^;
letter-spacing:0;
}
.section03.gallery-activity.gallery-text{
line-height:2.5;
}
.section03.gallery-activity.gallery-bottom{
map } - u ` v 0 drgin-top:20em;w Y H 9 p
text-4 D I N Xalign:center;
lY * 9 9 k { u pine-height:2;
}
.section03.gallery-bottom.gallery-bottoms N ? Y 1 t G ( --text{
display:inline-block;
tes x P $ txt-align:justify;
}
.section03.ga! j & c [llery-bottom.gallT B ] s 3ery-bottom-left{
width:70%;
margin-lef3 * ^ L ? k E v [t:5%;
}
.section03.gallery-bottom.gallery-bottom-right{
width:20%;
vertical-align:middle;
}
.section03.gallery-bottom.status-text,
.secti0 } e L ~ C Q 6on03.v ` % J q fgallery-bottom.status-number,
.section03.gallery-bottomy w B S l d ).sv 4 t 1 I P Otar-box{
dis s k Xplay:inline-block;
}
.section03.gallery-bottom.status-text,
.section03.gallb ` Cery-bott$ d = F G C = % }om.star-box{
background-colV l a : F i = sor:va w p M Z 9 ~ar(--default-] g h * Q F [like-color);
}
.section03.gallery-bottom.status-textc D M 0 U 3 9 Q,
.section03.gallery-bottom.status-number{
text-indent:1em;
}
.section03.gal$ 1 Q xlery-bottom.status-number{
background-color:rgb(136,136,136);
letter-spacing:0;
padding-+ K n b d C Nright:0.5em;
}
.section03.gallery-bott X ! f 7 N [ etom.star-box{
text-align:center;
padding:0.1em0.2em;
margin-left:0.25em;
line-height:1.2;
}
.sectid * s p 5 K i 6 {on03.gallery-bottom.star-number{
letter-spacing:0;
}
.section03.gallery-g b 0 3 & xright.gallery-aside{
height:23em;
vertical-align:bottom;
}
.section03.gallery-right.gallery-aside:first-child{
margin-bottom:4em;
background-image:url('../imw ) k * ]ages/good01.jpeg');
}
.section03.gallery-right.gallery-aside:last-child{
background-i5 z j m Amage:url('../images/good02.jpeg');
}
中心知识点
-
CSS 变量作用域 -
border-radius -
background-size: 100% calc(100% - 5em) -
height: calc(S Y & f _100% - 5.05em) -
background-color&bi ! ) z I A sackground-image -
text-transform -
letter-spacing -
line-height -
height -
display -
vertical-align
取款式名好难啊~~~~~~，取名取到u p U W词穷~~~
完成产品部分四款式作用
HTM1 q E P & ~ DL标签结构
<sectionclass=^ 4 2 p !"section04">
<postercla7 R Pss="bg[ D X 9 B = I 8 *-img-n-r"&~ a c { W S L 4gt;
<divclass="contanierbg-img-n-rfont-bold">
<br/><br/>
<pclass="slogan">
SELLLIKE</p>
<pclass="slogan">HOT</p>
<p L f o m N b :class="slogan">CAKES<br/><br/></p>s u r 3 _
<pclass="slogan">热销引荐</9 L z D $ b 6 0p>
<pclass="price">
RMB:99
</p&J u a }gt;
</div>
</poster>7 L 1 ]
</section>
Cy D K Q X t TSS款式
.section04poster{
height:45em;
display:block;
background-image:url('../images/? 4 { ib{ K H I u 7g04[ # a b q : Y c K.jA - J D Speg');
background-size:100%100%;
background-position:center;
}
.O y G . Hsection04poster.contanier{
margin:3em22%;
background[ f & R i y a [-image:url(! | O'../imS d , o 9 . F qages/poster04.png'),url('../imagesF E D Y/poster05.png');
background-size:25em20%,50%80%;
background-position:1%60%,| 2 | ] ^ # | 6 p85%center;
}
.section04.slogan,.section04.price{
font-size:2.5em;
letter-spacing:0.1em;
}
.section04.price{
ma! C G ~ @rgin-top:7em;
}
中心知识点
-
background-image -
background-position
整体作用预览
今日总结
今日心情
今日主要来说便是根据CSS 变量，基础完成了电商页面中部布局，新增了很多东西款Y [ _ N @ q C h式，也领悟和实践了一下CSS 作用域~~~~~~
今日最大的感受便是取款式名好麻烦，特别在完成产品部分四款式的时候，感觉取名取到词穷~~~~~
本文运用 mdnice 排版
