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

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习方针

依照昨日的规划，根据昨日学习的CSS变量完成根底店肆页面上半部分款式作用了，加油，小又= p z k 7 T o O又！！！！

承认通用的 CSS 款式

CSS 变量

:root{--C f ; -defaulC ] % ;t-font-color:rgb(51,51,51);--default-active-bg-color:rgb(66,107,110);--default-good-bg-color:rgb(242,242,242);--default-good-font-color:rgb(254,254,254);--defv ^ 7ault-title--font-weight:bolder;}body{color:vQ $ J  X t uar(--default-font-color);}

CSS 工具款式

/*通用的页面布局居中*/.contanier{max-w@ X C T Y 5 H didth:70vw;margini c U I h u Z 8 !:0auto;height:100%;padding:2rem;box-sizing:border-boxt A V % . /;}/*背景图片默许v 8 b n  q U -不重复*/.bg-iD ! # Rmg-n-r{background-repeat:no. l v Y *-L Y P ) / y t Orepeat;}

完成头部分款式作用

HTML标签结构

<header><divclaj V y B ] % # Zss='contanier'><logo><svgxmlns="/ p _ 5http://www.w3.org/2000/svg"preserveAspi T EectRatio="none"h v z P % 4 = a OviewBox="-1-15959"width="93"height="93R M R A 6 A &"><textx="f z b O + H e y15"y="25">LO</text><textx="13"y="45">GO</text><pathfill="rgba(0%,0%,0%,0)"fill-rule="evenodd"strL M ? z E c ! Foke="rgb(51,51,51)"stroke-width="2"stroke-linecap="butt"stroke-linejoin="miter"d="M28.4999819993972780.9999865293502808C43.68779778480530.999986529350280855.9999547004699713.l N J I _ $ _ v T31214487552642855.99995470046e t 1 ! ; : [ V (99728.49996030330658C: g ? x 9 f G , 155.9999547004699743.6877757310867343.687797784805355.9999340772628821 J H { 7 * + { G8.49998199939727855.99993407726288C13w C C i A _.31216621398925855.999934k I m077262880.9999445676_ 9 j a W80358943.6877757  A - 5 E v31086730.999{ # D T 3944567680358928.49996030330658C0.999944567680358913.31214487A T % v $552642813.3121662139892580.999986529350280828.4999819993972780.9999865293502808Z"></path></svg></logo><pclass="& q x Plogo-text"><spanclass=b Q A H "shop-logo-namev x ~ r l { K *font-bold">gao.ding<br/></span><spanclass="shop-name">r U # m;稿定墙饰旗舰店<br/></span></p><star><pclass="star-container"><spanclass="star-box"><svgx@ Y 2 [ i p = ymlns="htN f } 2 Z Y tp://www.w3.org/2000/svg"preserveAspectRatio="none"viewBox="002928"width9 Y ! s q h="29"height="28g D ; F"><pathfill="rgb(96%,24%| K m T * n P r D,25%)"fill-rule="evenodd"d="M14.4941712617874159.048644304275513C11.2579891681671141.08416521549224852.05915594100952152.9  y 8 3 T A 8 -42473530766 N x g93481.998576998710632312.18639d C e Y #4572257996C1.965079426765442_ Y = 5 d k * X P17.263297319412236.37884283065795919.1610310077667249.31771314144134521.190607130527496C12.16733992099) , V76223.158941030502326 v g (14.19544291496276925.85149466991424h W X ; X614.513253211/ g T 8 N `97509826.997q h y M o O s P b765243053436C14.78540015220642125.8746958374977117.044403076` . p 5 x *171c k  g V D ! |87523.10594934225082419.6822118759157 K W ) a N | E -52721.135566651821136C22.56658613681793218.98112505674362227.0348455905914317.20803534984588627.0013480186462412.1312433481k 6 ! P h [21643C26.9404357671737672.864342629909515417.5816141366958621.40183848142623914.4941712617874159.04n & P j R v . &8644304L G L 0 $ ; @ m275513Z"></path></svg></span><spanclass="shop-name9 b u ; c"><br/>收藏店肆</sp? F 5 1an></p></star>] V x V b #</div></header>

CSS款式

header{--h! r C ? ) H Veader-h# 2 Feight:10em;background-color:var8 L . D(--defa) P ) 5 = F + _ ult-good-q E a -bg-color);height:var(--header-height);ov! e & ; z $ *erflow:hidden;}header>} R 7 ) _ u D W q.contanier>*{display:inline-block;}logotext{font-size:20px;line5 i 7 Y 8 X D-heighy d - 2 6t:50px;width:50px;}header.logo-text{vertical-align:top;margin-left:0.5em;}header.shop-logo-name{font-size:35.9px;text-transform:uppercase;line-ht d / * ^ } v * }eight:1.6;}header.shop-name{font-si6 G z E ] b ze:17.9px;letter-spacink x b J  [ ; 1g:0.5em;font-we9 L Qight:*  7 5 obold;}headerstar{width:calc(100%-330px);}headerstar.star-containeZ y ` lr{text-align:right;}headerstar.star-box{text-align:center;display:inline-block;padding:0.4em0.5em;bord@ E 3 Der:2pxsolidvar(--defo R T sault-font-color);border-radius:100%;margin-right:2.5em;}

核心知识点

• <text>标签的位置调整
• font-size
• text-transform
• letter-spacing
• vertical-a; _ [ 7 Slign
• calc

完成海报部分款式作用

HTML标签结构

<banner><menu><ulclass="contanierfont-boldmenu-b~ P { 6 F 0 v [ox"><li>首页</li><li>所有宝物</li><li>摆G m } y j ( } }件</li><li>置物架</li><li>盆栽</li><li>墙纸</li><li>铁艺墙饰</li></ul></menu>9 Z c;<posterclass="bg-img-np _ S 3 q t D-r"><divclass="contanierbg-img-n-rfont-boldx i w y i"><pclass="date">METOPE<br/>DECORATION<br/>VOL.2019<br/&gQ : Ft;</p><pclass="slogan">墙饰挂画<br? v m/>只为遇见<br/>; P 6 D;</p><pclass="price">RMB:99</p></div></poster></banner>

CSS款式

bannermenu{background-color:var(--default-active-bg-color);color:#fff;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inli8 ` 4 6 J g q 6 9ne-start:0;}banner.menT ] o U c R . 8 =u-box{padding:0.5em0;}menuli{display:inline;paddil p F q e e 0 # ~nq R N ^g:04em;font-size:15px;}bannerposter{height:40em;display:blockR H _ w c X;background-image:url('../images/bg01.png');2 J 9 ,backgrP ^ P C u Bound-size:100%100%;background-position:center;}bannerpost7 y ! $ i d ]er.contanier{background-image:url('../images/bg02.png'),url('../images/border.png'),url('../images/poster01.jpeg'),url('../images/border.png'),url('..1 $ ^/images/: / h 4poster02.jpeg')& ? G d,url('../images/borV h x 5der.png'),url('../images/p- g Z E 7oster03.jpeg( w M # ` W 4 [');background-si, & fze:25em80%,14.5em19em,13em17em,14.5em19em,13em17em,14.5eF 9 * Lm19em,13em17em;background-position:lefZ L j 8 ] A F l `tv ? w ] N3em,35.4P m V %4.3em,35%5: h [ / v ?em,55.7%4.3eu X t 7 O p Hm,55%5em,76.4%4.3em,75%5em;}banner.date,banner.slogan,banner.price{margin-top:1em;$ j E 6font-size:2.5em;letter-spacing:0.1em;}bG C ] O k V M Q manner.date{m# 3 i Zargin-to, N # ? W y c =p:2.5em;}

核心知识点

• margiK N 8n-block-start
• background-imO * y c 6 $ + P +age
• back? : jground-3 P T y ! 0 )size
• backgr| V S tound1 I ; =-position

完成产品部分一款式作用

HTML标签结构

<sectionclass="contaniersection01font-bold"><ul><liclass="discountaQ x z ct 9 Xiv~ ? P ) / ? ue"><spanclass="unit">rmb</span><br/><spanclass="amoun ( ht">10</span&gz 9 o r W 0 S o 2t;<br/><spanclav r = X y / +ss="multiply">+</spanq  g f B H H }><br/>T K k B a G L v<spanclass0 { @ W 8 | : =="description"&g_ G X n 0 R ? ot;收藏店肆<br/>无门槛<g Q F q J a;/span></lT 4 $i><liclass="discount"><spanclass="unit">rmb</span><br/>&l{ }  ^ } Qt;spanclass="ad | 1 H m # ^mount">20&2 z + glt;/sf K P Y  h  ! .pan><br/><spanclaS & g N L M ; I !ss="multiply">+</span><bri y K ? h/><spanclass="description">满5 m , $ =299运用</span><br/><spanclass="receive">领</span></li><liclass="discou Y / O ] A q a qunt"><spanclass="unit"f 5 _ R>rmb</span><= m s cbr/><spanclass="amou# 7 d xnt">30</span><br/><spanclass="multiply">+</span><br/><spanclass="description">满399运用</span><br/>&g l C V h _ g d flt;spanclass="receive">领</span></li><liclass="discount"><spancla9 ) 6 { ~  hss="unit">rmb</span&{ D .gt;<br/><spanclass="amountz 6 W { R @ 4 . b">50</span>y ) . Z ? E u<M M 1 D r m ~br/{   u r u k F +><: / xspanclass="multiply">+</span><br/><spanclass="description">满u A f [599运用</span>5 4 B 7 ~ 2 L e<br/><spanclass="receive">领</span></li></ul></section>

CSS款式

.m ~ p y w  9 %section01{margin:3em21%;}% r  E.sectiono z t e . -01.discount{display:inline-block;padding:2em0;bacs Z ukground-color:var(--defaul` i u Ft-good-bg-color);margin:2em1em;height:Z + v13em;width:7.2em;box-si6 ? { E Nzing:border-box;font-sizK ~  g [e:27px;text-alignB 6 1 % p z:center;vertical-align:E A @ * A ⊤text-transform:uppercase;}.section01.discount.active{background-color:var(--default-active-bg-color);color:#fff;}.section01.discount.amount{font-size:100px;line-height:1.2;}.section01.disi ^ ) + ; I S % ecount.multiply{transform:r, K r wotate(-45deg);display:inline-block;}.section01.discount.description{margin-bottom:0.2em;display:inli} E . ~ ? 8ne-block;}.section01.discount.receive{bacE @ ~ _ P K Ykground-color:rgb(245,615 U v Q e P ,,64);bS z 5 VoM i ) e R C grder-raq p 1 * idius:100%;padding:0.2em;color:#fT P ? (  3ff;margin-top:0.2em;}

核心知识点

• display
• box-sizing
• vertical-align
• font-size
• text-transform
• transl E q Kformg q ; D

全体作用预览

今日总结

今日心境

今日首要来说就是根据CSS 变量，根底完成了电商页面上半部分布局，变量真的很给力呢~~，感觉今日K ~ ;写图片定位好啰嗦麻烦，首要有很多重复的 CSS 代码，不知道是不是我没设计好/ j –~~~~

本文运用 mdnicee v S G M 8 w 排版