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

今日学习方针

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

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

承认通用的 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;
}

完成头部分款式作用

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

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

完成海报部分款式作用

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

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 6
font-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

完成产品部分一款式作用

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

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 &top;
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

全体作用预览

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

今日总结

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

今日心境

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

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

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