转行学前端的第 20 天 : 基础店铺页面样式实现(2)

我是小又又，住在武汉，做了两年新媒体，准备用 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 ptext-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 排版