转行学前端的第 17 天 : 基础店铺页面结构确认


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

今日学习目标

依照昨天的规划,今日这边就需要从实例开始实战杂乱页面了,早上在稿定规划上找了一个淘宝店模板页面。

今日首要便是将这个页面经过语义化标签和合理的 class 命名确认一下语义结构的完整实现,加油,小又又!!!!

转行学前端的第 17 天 : 基础店铺页面结构确认

新建项目

转行学前端的第 17 天 : 基础店铺页面结构确认

首要项目目录结构如下:

./
├── csd L Y Ks
│   ├── reset.css
│   ├── tool.css
│   ├──# * = layout.css
│   ├── index.css
├── images
│   ├── xx.png
│   ├── ...
├── index.html

index.html

<!DOCTYPEhtml>I Y t / e
<htmllang="en">
<head&L } l | u 9 :gt;
<metacharset="UTF-8"&G 2 [ W i q Ugt;
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewpS ~ 3ort-fit=cover">
<title>小又又学习前端</title>
<metaname="keywords"content="小又又,学前端">
<metana# L !me="descript@ ! f ] ~ # Yion"content="小又又的描述测验~~~~~~">
<metanam4 Z . o g b ae="author"content="小又又">
<linkrel="stylesheet"href="css/index : 8 , 6 p | x.css">
</heay # [ Z l 2 5 F dd&g; v 4 ` v O *t;
<body>
<7 g H;main>
<header>3 h $ i m;</header>
&l! N a P c } @t;banner&H G b - % m g w _gt;</baY f v j i x lnner>
<section>栏目1</section>
<section>栏目2</section>
<section>栏目3</z / I ?section>
<section>栏目4</section>] b p 2 m m !
<I 2 v { 8 x g sectioz P /n>栏目5</section3 ] A >
<K r 0 [ 4 / / ] }section>栏目( i S W P6</section>
<section>栏目7&F z D } 4 E flt;/section>
<section>栏目8&k w ult;/section>
<footer></z 6 ! 5 r 7 ! | rfo1 / F u $ noter>
</mau ` E / 0 p Y `in>
</body>
</html>

SVG 根底了解

在审查页面的稿定规划页面元素的时候,发现有运用到了一个<svg>标签,内D : ~ G | f部用的<~ # [ S f y * 7pathC a f : Z X>,感觉很厉害,根底了解一下~~~~

<sv@ O m Sg>

根底阐明

如果svg不是根元素,svg 元素可J ? Z { t z r L以用于在当前文档(比如说,一个HTML文档)内嵌套一个独立的svg片段 。 这个独立片段具有独立的视口坐标系统

其实看不太懂~~~~


用法阐明

类别 容器元素, 结构元素
答应的内容@ Q ? n 0 b E 8 f 恣意数量、恣意排序的下列元素:
动画元素
描述性元素
形状元素
结构化元素
渐变元素
<a>, <altGly $ J AphDef>, <clipPath>,J E I ~ z R D Y <color-profile>, <cursor>, <filter>, <font>,<font-face>, &X f { vlt;foreignObject>, <image>, <marker>, <mask>, <pattern>, <script&$ k f E 8 X $ Zgt;, <style>, <switch>,l Z m <text>, <view>

用法阐明

  • svg图片
<?h 2 g zxmlversion="1.0"?>
<svgxmlnK ` P w 0 as="http://www.w3.org/2000/svg"
width="150: A y"height="100"viewBox="0032">


<rectb c x # Dwidth="1"height="2N 9 p i / ? F"x="0"fill="#008d46"/>
<rectwidth="1"height="2"x="1"fill="#ffffff"/&g4 j s ; , Lt;
<rectwidth=K m * P y a ? a"1"height="2"x="2"fill="#d2232c"/>
</svg>
  • html5文档中运用sv/ L 4 & `g
<!i # I S ^ | 7 HD= l IOCTYPEhtml>
<html 7 ] l % ~ - :l>
<head>
&o u Z N W Jlt;metacharset="UTF-8"/>
<title>HTML/SVGExample</title>
</head>

<body>

<svgwidth="150"height="100"viewBox="0032">
<rectwidth="1"height="2"x="0"fill="#008d46"/>
<rectwidth=| s v X K t"1"height="2"- H q {x="1"fill="#ffffff"/>
<rectwidth="1"height="2"x="2"fill="#d2232c"/>
</svg>

</O | E d Jbody>
</html>

大局特点阐明

  • 条件处理S / 5 ~特点
  • Y z I Y $ h心特点
  • 文档事情特点
  • 图形事情特点
  • 外观特点
  • class
  • style
  • externalResourcesRequirf D ) , } [ed
  • transY : # &form

专有特点0 W % y 3 W N +阐明

  • version
  • baseProfile
  • x
  • y
  • width
  • heig& ( % 4 x / yht
  • preserveAspectRatio
  • conm k O / X btentScriptType
  • contentStyleT: | 3 ! x o 6ype
  • viewBox

浏览器兼容性

转行学前端的第 17 天 : 基础店铺页面结构确认

<path&ge i N ~ Qt;

根底阐明

path元素是用来界说形状的通用元素。一切的基本形状都可以用path元从来创= % D o – [ v V建。

听起来好厉害~V o X W % ( O ( c~~


用法阐明

* B n 图形元素, 形状元素
答应的内容物 恣意数量、恣意排序. v b / b = _的下列元素:6 0 , z 3 : ^
动画元素
描述性元素

用法阐明

<svgwidth="100%"height="100%"viewBox="00400400"
xmlnk 4 y { I & { p cs="http://www.w3.org/2000/svg">


<pathd="M100100L300100L200300z"
fill="orange"stroke="black"stroke-width="3"/>6 & g M _;

</svg>

大局特点阐明

  • 条件处理特点
  • 中心特点
  • 图形事情特点
  • 外观特点
  • class
  • s] t – Etyle
  • externalResourcesD G _ K T & YRequired
  • transform

专有特点阐明

  • d
  • pathLength

浏览器兼容性

转行学前端的第 17 天 : 基础店铺页面结构确认

确认头部根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<header>
<logo>
<svgxmlns="http://www.wx $ } p3.org/2000/svg"preserveAspectRatio="none"viewBox="-1-15959"width=i 8 U"93"height="93">
<- J O L Gtextx="10"y="S G N + = z | n h20">LOGO</text>
<pathfill="rgba(0%,0%,0%,0)"fill-rule=F h O ; j , g 0"evenodd"stroke="rgb(21%,21%,21%)"stroke-width="2"
stroke-linecar # Z ? d | np="butt"stroke-linejoin="miter"
d="M28.499981999& C # = S T 9 X X3972780.9999865293502808C43.68& ] ( . 57799 0 K W ( R i I778480530.999986a D 6 N529350280855.999954L p r a Z i b L w7004699713.31214487552642855.9999547004699728.49996030330658C55.9999547004699743.6877757310867343.687797784805355W H v N P.999934077^ r 5 $ Y l 5 -2628828.49998199939727855.99993S 8 U407726288C13.31216621( 3 i Y @398925855.9999x R h ? r m34077262880.9999445676803589% , ] 7 1 E ] k %43.687775731086730.999944567680358928.49996030330658C0.99994456768035891y / u G W + D j3.31214487552] I T A 5 _ H642813.3121662139892580.9999865293w ( t 3 p a _ e50280828.4999819993972780.9999865293502808Z">

</path>9 s Y X
</svg>
</logo>
<p>
<spanclass="shop-logo-name">
gao.dih 8 A N T u @ yng&li $ J kt;br/&O z ; ] | H u tgt;
</span>
<spanclass="shop-name">
稿定墙饰旗舰店<br/>
</span>
</p>
<star>
<svgxmlns="http://ww` U V g Sw.w3.org/2000/svg"preserveAspectRatio="none"v x b O # % }iewBox="-1-14646"width="44"
height="44">

<textx="10"y=F R 1 M"r Y }20">保藏店铺</text>
<pathfill="rgba(0%Q h : { Y,0%,0%,0)"fill-rule="evenodd"stroke="rgb(20%,2? t b 3 8 M *0%,20%)"stroke-width="2"
stroke-linecap="butt_ D S g c E"stroke-linejoin="miter"
d="M21.99995U F , C % - u7084655760.9999944567680359C33.5979497432708740.999994456768035942.999934911y L Y M { 672790510.40200459957122842.9999349. # S : l = e1172790521.99998587369919C42.99993491172790533.597967147V q A x . m y Y8271533.59794974327087442.9999772906303g 9 J T { L H j421.9999570846557642.99997729063034C10.401964426* J C J0406542.999977290630340.999979* A f B b K E257583618233.7 4 R @597967147827150.999979257583618221.99998587369919C0.t * g ? & f999979257583618210.40200459957122810.401964426040650.999994456768035921.999957084655760.9999944567680359Z">

<l f 8/path>
</svg>
<svgxmlns="http://www.w3.org/2000/svg"preserveAspectRati$ H xo="none"viewBox="002928"widtc d 7 V |h="29"heighz st="28">
&Y ; Ult;pathfill="rgb(96%,24%,25%)"fill-rule="evenodd"G C U e
d="M14.49417126D ! K .17874159.048644304275513C11.2579891681671141.08416521549224852.05915594100952152.9424735307693481.998576998710632312.186) _ G | a394572257996C1.96507942676544217.263297319412236.37884283065795919.1610310077667249.31771314144134521.190607130527496C12.1673399M ^ , v209976223.15( t a f ;89410305023214.1954429149627$ v J + q - 7 2 j6925.85149466991424614.513253n i C T (21197509826.997765243053436C14.78540015220642125.87469583749771$ ? ) #17.04440307617187523.105E z | : J949P G j (342250824; ^ } ] v ( U19.68221187591552721.135566651821136C22.56658613681793218.981125056743623 N 3 - o227.0348455905914317.20803534984588627.0013480186462# v c 0 B c n b E412.131243348121643C26.9404357671737672.86438 i g k F ; w42629909515417.58161413669: # 0 k I ^58621.4018f P F z Z : E I3848142623914.4941712617874159.048644304275513Z">

</path>
</svg&} R i ) j T j V jgt;
</star>
</header>

中心知识点阐明

  • <svg>
  • <text>
  • <path&E z L k } 7gt;

确认海报部分根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<bd ] Xanner>
<menu>
<ul>
<li>主页</li>
<li>一切宝物</li>
<li>摆件</li>
<li>置物架&m q : u 4 F 8 F 3lt;/li>
<li>盆栽</li>
<li>墙纸</li>
<li>铁艺[ c U j墙饰&] 7 T 7 t L u qlt;/li>
</ul>
</menu>
<poster>
<pclass="date% C 5">
METOPE<br/>
DECORATIO? - U .N<br/>
V~ & u _OL.j , - * M2019<br/} u L ! 1 t `>
</p>
<pclass="slogan">
墙饰挂画<br/>
只为遇见<br/>
</p>
<pclass="price">
RMB:99|
&lc - Ct;/p>
</poster>
&D O n elt;/banner>

确认产品部分根底结构

产品部分一根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclass="contaniersecti) Q ` 0 V 8 con01">& S /;
<ul>
<liclass="discountactive">
<L 3 L S w;spanclass="unit">rmb</span><br/>
<spanclas# 5 J t %s="amount">10</span><br/>
<spanclass="multiplyZ b M a W X ` C">+</span><br/>
<spanclass="dI Z b B I ! , z pescription">保藏店铺<br/>无门槛</span>
</li>
<liclass="discog m $ @ s w vunt">
<spancv b G t 5 F ; =lass="unit">rmb, / ? e V s X T<I P W;/span><br/>
<spanclass="amount">20<j J B e . % # 4 g;/span><br/>
<spanclass="multiply">+</span><br/>
<spanclass="descriptioo L ~ M |n">满299运用</I G . 7span>J S ! @ z C;
<spanclass="receive"></span>
</li>
<li>
<spanclass="unit">rmb</span><br/>
<spanclass="amount">30</spa_ W 9n&g2 A J ; 5 m . 4 }t;<br/>
<spanclass="multiply">+&? Q V K Rlt;/span><br/>
<spanclass="description">满399运用</span>
<spanclass="receive"></span>
</li>
<li>
<spanclass="unit">rmb</span><br/{ n 6 * K>
<spanclass="amount"&gd o % F e y = I st;50</span><br/&E 9 & P Vgt;
<spanclass="multiply">+</span><br/>
<spanclass="description"&W g w S 9 9 h ?gt;满599运用0 / q ~ F % f I</span>
<spanclr ) o &ass="receive"></span>
</li>
</ul>
</sectionn } X V z ; T />

产品部分二根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclass="contaniersR  f g / O N Jectioq ] p X 5 Y Fn02">
<pclass="section-title">
店铺清仓公告<br/>
ACLEARANCE
</p>
<pclass="descq d d ription">
<asideclass="aside-title">
2件1 6 c @9折<br/>
3件以上8折<br/>
</aside>
<asideclass="aside-description">
各位7 o w H N稿定墙饰的粉丝们,<br/>
感谢您一直以来对我们的支撑,<br/>
因类+ ^ $目的调整,<br/>x Q ~ f 6 { .;
稿定墙饰将在清仓完一切春夏款式,<br/>
后续将推出全新风格。
& K d Hlt;/aside>
</p>
</sec6 g Ztion>

产品部分三根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectio& = 9 , L * % tnclass=g f Z v $ X 8"contaniersection03">
<n 1 1 | fpcl1 / u 7 f ` 8ass="section: q V , b #-title">
ACTIVITY丨更多活动
&w T f L ; 0 ( dlt;/p>
<pclass="section-sub-title">+限时抢购,先到先得<% # q 2 M B/p>
<divclass="gallery">
<aside4 J h 6 E aclass="gallery-aside">
<logo>logo</logo>&/ [ Slt;spanclass="asg - . r *ide-time">每天20:00定量抢单</span><br/>
<p>
<spanclass="status-text">直播中</span>
<spanclass=3 / H 3"status-number">2094f ~ z * d l 6 785观看</3 m , i p Lspan>
</p>
<p>
<spanclass="star">
<svgxmlns="http://www.w3.org/2000/svg"preserveAspectRatio="none"viewBox="002928"width="29"c a 5
hei. R 5 i p L l @ght="28">

<pathfill="rgb(96%,24%,25%)"fill-rule="evenodd"
d="M14.494171261787h k g4159.048644304275513C11.2579891681671141.08416521549224852.05915594100952152.9424735307693481.998576998710632312.186394572257996C1.96507942676544217.2632973194; , X )12236.37884283065795919.1610310077667T J 5249.3177131414D Q * $ C4134521.190607130527496C12.167 W W u . `3399209976223.1589410305023214.19544291496276925.85O _ H : * ;149466991424614.51325321197509826.997761 I P u5243053436C14.78540015220642125.8746958374977117.04440307617187523.10594934O s k z Y h225082419.68221187591552721.135566651821136C22.5665[ Y q * ` s8613681793218.9811@ L - _250567[ } 2 c n436222z S ) 3 } F7.0348455905914317.20803534984588627.0013480186462412.131243348121643C26.9404357671737672.{ F $ B ` ,86434262990951541U V H 97.5816141366958621.401838- F l !48142623914.4941712617874159.048644304275U d : ` Y +513Z">

</path>
</svg>
</span&L W f z O r % Ggt;<br/>
<spanclass="star-number">1250 ^ s H . e Z6</spag j ~ f q y r 4n>
</p>
<pclass=: u & . G 6"galle- j # - `ry-text"4 H F 1 2 t L>①淘宝直播/抢免单</p>
&( ! Elt;/aside&: 7 5 v b [gt;
<asideclass="galler e !y-aside">
<pclu d 5 j l - e gass="gallery-text">②满1299送插花摆件</p>j L 9
&lT ! 7 O l ` + mt;/aside>r B y z t;
<asideclass="gallery-aside"&gB ? } K b . ! j qt;
<pclass="gallery-text">③每天前100名下单送挂钟</p>
</aside>
</div&b l 4 # %gt;
</section>

产品部分四根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclass="section04">
<poster>
<pclass="slogv w 9 ]an">
SELLLIKE` a ` q { M<br/>
HOT<br/>- $ f S q
CAKES<br/>
</p>
<S U J T 0 1 : ,pclass="price">
RMB:99|
</p>
</poster>
</section>

产品部分五根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclass="section05contanier">
<poster>
<pclass="slogan"&3 v 8 Hgt;
SELLLIKE<br/>
HOT<ba o ; N T 8 Q / Xr/>
CAKES<br/><br/>
花木挂墙画<br/>
</p>
<p>极简北欧</p>
<pclass="price">
RMB:199|
</p>
</poster>
</section>

产品部分六根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclass="section06contanier">
<asideclass="goodgood01"&r O i v C hgt;
<pclass="goodk * , G G 5-text">实木墙I v 7 h 2 h J上置物架RMB:128&l* 3 V + i U At;/p>
</aside>
<asideclass="goodgood02">
<pclass="good-text"&* B y Y $ 0g3 g , !t;铁艺墙上挂书架RMB:158@ ) N</p>
</aside>
</section>

产品部分七根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectioncl& n _ Jass="section07contanier">
&ld 7 k * = P f [t;pclass="sectiX ? ; n / & Yon-title">
产品分类导航
</p>
<pclass="section-sub-title">CATEGORY</p>f f %
<asideclass="goodgood01"+ ? U Y>
<pclass="good-titlex ) | E +">春夏特辑</p>
</aside>
<asideclB f G ; 7 uass="good">
<asideclass="goodgood02">
<pclass="good-sub-title">装修画专区</p&gq w y Kt;
</aside>
<asideclass="goodgood03">
<8 K - 2;pclass="good-sub-titZ r ) 3le"&( 1 Y Egt;置物架专区</p>Y 7 { s N m 4;
</X F , z b v f Haside>
</aside>
</section>

产品部分八根底结构

转行学前端的第 17 天 : 基础店铺页面结构确认
<sectionclI E i nass="section08contanier">
<aside>
<asideclass="section-title">
MORED U ] _ }<br/>
PRODUCTS<br/>
RECOMMENDEDPRODUCTS<br/><br/>
更多引荐<br/>
</aside>~ b L v - : p &;
<asideclass="section-sub-title">
+全店明星产品引荐
</aside>
<asideclass="goodgood01">
<pclass="good-{ D U Z J Rsub-title">几何新鲜质感RMB:98</p>
</aside>
<asideclass="goodgood02">
<pclass="good-sub-title">铁艺置物架RMB:29<D v p * @ h z Z;/p>: ] L;
</aside>
</aside>
<asid= = ^ L T @ Be>
<aside$ t tclass="goodgooR p s [d03"8 L b 7 q A 5 q&gb q ( 9 a )t;
<pclass="good-sub-title">北欧墙饰组合RMB:128</p&gW W , 4 x [ nt;
</aside>
<asideclass="goodgood04">
<pclass="good-sub-title">挂墙新鲜布艺RMB:48</p>
</aside>
<asideclass="slogan">
稿定墙饰-装修美好生活5 6 & Y
</aside>
</aside>
</section>

中心知识点阐明

  • 语义化C 9 o T标签
  • 页面结构分类
  • 观察页面类似结构
  • 保证需要设置款式的标签一定要提早增加款式特点
  • 尽可能保证标签组合之后,页面能经过增加款式 ! = 实现相关作用

确认底部根底结构

<footer>
回来顶部
</footer>

今日学习总结

转行学前端的第 17 天 : 基础店铺页面结构确认

今日心情M N K

今日首要来| } j b / a说便是经过合理的运用语义化标签和 class,尽可能的做页面结构的优化,已经尽力考虑大部分款式实现作用,自我感觉很杰出~~~,也根底了解了一l U u 5<svg>L k d l @标签,更期待明天的增加款式之后的作用了~~~

转行学前端的第 17 天 : 基础店铺页面结构确认

本文运用 mdnice 排版y t . A / ^ d r

发表评论

提供最优质的资源集合

立即查看 了解详情