转行学前端的第 13 天 : 实现第一个页面效果-六虎

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

今日学习方针

按照昨天的规划，今日这边就需求从实例开端实战了，早上在创客贴上找了一个模板，今日首要便是将这个作用完成，加油，小又又！！！！

vscode 装置

官网

进入vscode 官网。

点击下载

点击官网上面的下载。

注意在文件下载过程中，页面会提示 此类型的文件可能会损害您的计算机。您仍然要保存......吗，请注意挑选保存~~~~

修正主题款式

试了一些主题款式之后，感觉这个Ayu字体主题我更喜欢

根底学习 emmet

在页面输入html发现这边一直在提示emmet。我在点击了承认键之后，发现页面主动生成了相关结构，就感! ^ i L觉很神奇~~~~~

官方文档地址

https://docs.emmet.io/

根底学习总结

关键词	阐明	示例	作用
`>`	能够运用`>`运算符将元素彼此嵌套	`div&gf & B #t;ul>li`	`<div><ul><li></li></ul></div>`
`+`	运用`+`运算符将元素彼此放置在同一水平线上	`div+p+bq`	`<div></div><p>&lL U v ot;/p><blockquote&g* o ) ht;</blockquote>`
`^`	运用`^`运算符，能够在树上爬\| q : [ E b v & j上一层，并更改上下文，其间应显现以下元素	`d/ : Q Q @ Liv+div>p>span+em^bq`	`<div></div><div><p><span></span><em></em>&lS ? )t;/p><blockquote></blockquote></div&gF n d X 4 % J Bt;`
`*`	运用`*`运算符，能够定义元素应输出多少次	`ul>li*5`	`<ul><li></li><li></li><li></li><li></li><li></li></ul>`
`()`	运用`()`将杂乱缩写的子树分组	`div>(header>ul>li*{ D 4 g2>a)+footer>p`	<div><header><ul><li` h 4 i b ) P><a href=""></a></li>v # B;<li><a href="">; o M / ]</a></li></ul&gN B b ?t;</headel 1 r E & kr><footer><p&j B { ) s y ,gt;</p></footer></div>
`#` & `.`	在`CSS. h C e 7 ~ 4 Q`中，运用`eP a g w @ elem#id`和`elem.class`表明法能够拜访具有指定`id`或`class`特点的元素。在`Emmet`中，能够运用完全相同的语法将这W ! @ q ^ J q v些`特点`增加到指定的`元素`	`div#header+div.page+di8 [ Y 5 C 0 { : Nv#footer.class1.class2.class3`	`<_ l e + +;div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>`
`[attr]`	能够运用7 W 4 B R j 9 4 P`[attr]`表明法（如`CSS`中相同）向元素增加自定义特点	`td[tD m ^ F 8itle="Hello world!" colspan=3]`	`<td title="Hello world!" cox d z elspan="3N \| ; [ n V / F">u n b i V</td>`
`$`	能够接连运用多个`$`将数字填充为零	`ul>li.item$$$*5`	`<ul><li class="item001"></li><li classs { [ y="item002"></li><li class="item003"></li>t h ! p B i X;<li class="item004"></lD q [i><li class="item005"></li></ul>`
`@`	运用`@`修饰符，能够更改编号方向（升序或降Z E W m z { m Y序）和基数（例如起始值）。	`ul>li.item$@-*5`	`<ul><G @ n - O D w _li class="item5"></li><li class="item4"></li><li cln 7 { ]ass="item3"></li><li class="item2"></li&, 5 Y Sgt;<li class="item1"></li></ul>`
`{}`	能够运用`{}`将文本增加到元素	`a>{click}+b{here}`	`<a href="">click<b>here</b></a>`

学习小总结

看官网这边阐明感觉很厉害，然后也是 O Y避免学的太杂，学习了一些暂时用不上的，就只学习了第一页的内容，不过这个里边如同没有说到h( ( n 1 Ftml:a ; 2 3 L ! 8 J d5，不知道为啥，学习之后感O x & W D觉仍是需求在实践中再了解一下~~~~~

了解通用项目结构

这边经过前端^ d ] u } ; P根底项目结构关键词查找的时分，发现出来了很多很繁琐的页面结构，决议选用看起来比较契合简单项目的结构。

./
├── css
├── js
├── images
├── index.html

名称	阐明
css	放置款式文件的文件夹
js	放置 js 文件的文件夹
imaG Q ^ges	放置图片文件的文件夹
index.html	主页

新建项目

首要项目目录结构如下：

./
├── css
│   ├── index.css
├── js
├── images
│   ├── flower.png
├── index.html

index.html

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset=e l m w"UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=14 ) t ?.0">
<title>小又又学习前端</title>
<metaname=H R ` + f ` % 7"keywords"d  .content, } b="小又又,学前端">
<me` Z 2 Q -taname="description"content="小又又的描绘测试~~~~~~">
<metaname="l k Aauthor"content="小又又">
<lin] c ! V mkres d q + Ul="stylesheet& 8 D"href="css/in) ] D 9dex.css">
</head>
<body>
</body>
</html>

实战

承认页面结构

我根底了解页面全体分[ K ] D A ! – K 4上下两个结构，然后下面分为左右两个结构

<divid="upper">
&e V n Q *lt;/div>
<divid="lower">
<divclass="left">
</div>
<divclass="right">
</div>
</div>

放上文字内容1 M Q l ] P ?

按照我的根底了解，图片上有换行的我先运用<br/>标签进行换行，在写的时分，我发现这边4/19的作用感觉有? a L = I点费事

<divid="upper">
</div>
<divid="lower">
<divclass="left">
<p>四月<br/>4 / I # m你好</p>
<p>拥抱日子<br/>阳光总在风雨后</p>
<M ] D ] @ B h/div>
<divclass="rig$ N f a + Xht">
<p$ Y - E K C j z }>enjoylife<` K = a g/p>
<p>4/19} K 3 X Z & , k</p>
</div>
&la | 7 : X h Nt;/div>

设置页面全体巨细

了解宽度设置 CSI s sS 语法

了解高度设置 CSS 语法

查看海报巨细640 * 1008 px

设置页面全体的款式巨细

body{
width:640px;
height:1008px;
}

设置布景突变作用

刚好将那天仅仅根底了解的布景色彩突变进行实Y & + @践~~~~

这边应该是归于R j 5 ` ~ c E线性突变（Linear Gr& 1 $adients）- 向下/向上/向左t B - 3 U/向右/对角方向。

background-image:linear-gradient(direction,color-stop% v D ] Y `1,# ] W 3 { ,color-stj + 8 6 Xop2,...);

首要是两种色彩突变，一个是#fdfadd，一个是#ff8e9c。

body{) d 0 x l q r 3
width:640px;
height:X r 6 #  V 61008po n ` mx;
background-image:linear-gradient(#fdfadd,#ff8e9c);
}

不知道为啥，给body设置了宽; u H M ? p H t度和高度，可是突变作用如同是应用到了整个页面~~~

经过给body设置了高度没有生效关键词进行了相关查找，如) ? 1 &同都是设置为100%的问题，和这个如同不太相同。

决议先将后边的完善一下再来处理一下这个问题~~

设置页面上半部分作用

设置上半部分高度

#uppeg & $ t C d g 5 7r{
width:583px;
height:583px;
}

设置布景图片

#upper{
width:583px;
height:583px;
background-image:url(/images/flower.png);
}

可是页面没显现这个布景图片？

处理布景图片没显现的问题

经过设置了布景图片可是没显现查找词，查找了一些可能原因

c? w /ss没有被调用；请查看css调/ V F n ( `用是否成功。
css图片地址不对；请查看css图片地址是否正确。
div的高度没有固定，是auto或者没有设值；div设置过错容易导致布景图片高度太大则无法显现。
dR ? 7iv被嵌套；查看嵌套的div是否设置| = J正确。
div代码不标准；请查看div代码是否书写正确。

由于我这边在css文件中设置的布景色彩，在页面上是生效了的，所以不是第一个原因。

那怎样看页面图片, 9 r & g地址呢？我看我 css 中地址感觉很对，经过根底查找之后，我大概清楚了怎样调试页面。

关键词便是F12,在打开的浏览器页面中按下F12快捷键，就能够出现调试窗口，不过如同/ l , R S C文章中的截图和我的浏览器调试窗口不太相同，应该是版别问题Q n t 2 8 e V ? k吧。

打开了调试窗口之后，, , 5 ;发现页面有一个报错，GET file:///E:/images/flower.png net::ERR_FILE_NOT_FOUND，这个途径如同有些不太F q $ 8 c W对。

我决议将这个途径修正为相对途径，注意修正为相对途径，必定要在途径前后增加引号，要不然会报错的~~~~

#upper{
background-image:url('../images/flower.png');
}

出来啦~~~~~~~~~~~~~~~~~~~

设置页面下半部分作用

设置下半部全体巨细

#lower{
width:583px;
height:400px;
}

设置下半部布景色彩

#lower{
widthp b ) ~:583px;
height:400px;
background-color:#ff6e80;
}

为啥h ? P ( b j B这边页面默许上部分和小部分之间会有一个距离，古怪~~~~

设置下半部字体色彩

#lo{ W W } x f 5wer{
width:583px;
height:400px;
backgroundO 9 r Z + 2 *-y = n s 3 ?color:#ff6e80;
c_ R 4 y w O m d Molor:#fdfadd;
}

设置下半部全体为左右结构

经过怎样经过css? v R K v : ( U &设置左右结构关键词，查找之后发现大致有以下几种做法X ~ E X。

table
inline-block
float
flexbox(css3)
float + margin
float + overflh o ] s { $ how(blA & / _ ,ock formate context)
positio; c Qn: absolute

总共六种方式，文) b ! l S章中说table完成不R l (建议，然后这边就试了一下inline-blockE G 方法，发现现已变成左右结构了，决议先用这个版别。

#lower.left,#l! c 1 H % k Hower.right{
display:inline-block;
}

设置下部分左边 – 四月你好作用

发现之: ? R `前忘记给p标签增加class了，将页面结构修正如下：

<- V N n i 5 } J odivid="upper3 G c S y P n">
</div>
<divid( g y G="lowerq B o = $ 8 ) f">
<divclass="left">
<pclass="lefk . kt-1">四月<br/>你好</p>
<pclass="left-n O s 4 A2">拥抱日子<br/>阳光总在风雨后&* v O N 0 o vlt;/p>
</div>
<divclass="right">
<pclass="right-1"u u T [ o ^>enjoylife</p>
<pclass="right-2">4/19&lz U Kt;/p>
</div>
</div>

了解字体巨细款式怎样写

修正字体巨细，看页面上其时设置的是7p D * y2p9 P I `x~~~

所以设置了这个巨细

#lower.left.left-1{
font-size:72px;` i -
}

查找了一下怎样给文字设置圆圈作用，看了相关文R i 0 r % } B i f章和我这个作用如同不太相同，之 K M P O y b B q后要再b ] U l b S # 处理一下。

设置下部分左边 – 拥抱日子阳光总在风雨后作用

修正字体巨细，看页面上其– P 7 F时设置的是24px~~~

所以设置了v , : , x A这个巨细

#lower.left.left-2{
font-size:24j 6 y t % X x ;px;
}

为何这边上下两段文字之间，会有这么多距离？

设置下部分右侧 – enjoy life作用

修正字体巨细，看V ; , Y页面上其时设置的是32px~~~

本来enjoy life下面有一条线，{ ^ ) A突然想到了那天学习的text-decoration，就试着用一下，看看作用

#lower.right.right-1{
font-size:32px;
text-decoration:underlineoverlinedotted#fdfadd;
}

字体还有一个倾斜的作用，了解相关语法标准

#lower.right.right-1{
font-size:32px;
texta @ p O 1 c m `-decoration:underlineoverlinedotted#fdfadd;
font-style:italic
}

不知道为何四月你好和enjoy life不在一排显现？

设置下部分右侧 – 4/19作用

修正字体巨细，看页面上其时设置的是81px~~~

#lower.right.right; 6 r 2 m G )-2{
font-size:81px;
direction:rtl;
unicode-bidi:bidi-override;
}

海! R *报中V [ r a z文字方向是反的，经过查找CSS文字方向得知了设置语法~~~

#lower.right.right-2{
font-size:81px;
direction:rtl;t ? ; N 4 L f 7
unicode-bidi:bidi-override;
}

哈哈哈，变成了91/4，不太清楚怎么处x ^ o u { 1理这个问题，我觉得将页面中4/19 换成了 4/91 。# Y 0 $ K X

<divid="upper">
</div>
<divid="lower">
<div! ) z d Z _ O ^class="left">
<pclass="left-1">$ p } @ i;四月<br/>你好</p>
<pclass="left-2">拥抱日子<bK 0 rr/>阳光总在风雨后&( 6 E 5 %lt;/p>
</div>
<divclass="right">
<pclass="right-1">enjoylife</p>
<pclass="right-2">4/91</p&gx B Y $ @ xt;K } F
</div&gE  ` @ E d j & #tV x Q;
</div) F | / k @&K 1 D v M l b xgt;

然后文字一上一下的作用，暂时没想到好的处理办法~~~

设置下部分左右侧宽度

看了一下作用之后发现下部分的左右宽度占比很不对，$ 6 d Q M修正一下左右占比

#lowet m = } } ! Dr.left{
width:50%;
}
#lower.rightW - H T d & #{
width:4I ( J h 6 T ;0%;
}

本来设置的是左右都是50%，成果发现页面换行了，就调整为左右占比不相同了。

设置b s } ) 4 1 T下部分距离

看了一下作用之e e ( &后发现海报中下部分有一个默许的距离，感觉需求增加一下，文字贴着边际确实感觉很欠好。

了解距离设置语法

#lower{
width:583px;
height:400px;
background-cop 8 l L F ^ ulor:#ff6e80;
color:#fdfadd;
margin:15px;
}

成果和我想象中的不太相同。

然后再查找之后，发现还有一个设置距K x d – + @ ` _离的，之前那个是外距离，这个是内距离，了解内距离设置语法。

最开] l ( # , c端我写的是调整#lower的padding: 15px;成果发现作用和我了解仍是有些误差，后边调整成了修正#lower .b } 1 Sleft和#J r 2 J klower .right的内距离。

#lower.. y G 5 M ^ ;left{
width:50%;
pY t ; ! T 5 q Iadding-left:15pxM u w );
}
#lower.right{
wi` q `dth:40%;
padding-bottom:15px;
}

处H t v @ b q `理 M S q V文字的默许距离

经过查找p标签默许距离清除，了解到浏览器默许会给p标签增加距离，需求运用margin: 0px;进行清除。

p{
margin:0px;
}

设置下部分left文字内距离

首要是增加了左内距离。

#lower.left{
width:50%;
padding-left:30px;
}

设置下部分文字行距离

了解行距离语法

增加G – ] z 1 N =相关行距离，我测验了详细像素值，百分比，后边发现仍是详细数字作用好一些~~~

#lower{
width:583px;
height:400px;
background-color:#ff6e80;
color:#fdfadd;
line-heigT ; . ? M V 9htm , 3 2 ~ % c y:Q w C p 9  : I g1.7;
}

设置下部分文字字距离

了解字距离语法

增加相关字距离，我测验给全体增加字距离，成果发现最终仍是j B , t A 2单| J d h E T x v w个增加款式好一些~~e * `~~

#lower.right.right-1{
font-size:32px;
text-decoration:unde1 ; !rlineoverlinedotB E U 2 X l $ H :ted#fdfaa = ( # $dd;
font-style:italic;
letN 6 5 Pter-spacing:0.5em;
}
#lower.left{
width:50%;
padding-left:30px;
letter-spacing:1em;
}

设置下部分文字边线作用

了解边线~ * U 2 Z v 语法

增加相关边线，我测验# e u g – ! a给全体增加边线，成果发现最终仍是需求运用border-bottom~~~~

#lt B ( ] Nower.right.right-1{
font-size:32px;
font-style:italic;
letter-spacing` O O:0.5em;
border-bottom:thicksolid#fdfad8 r } S | % ) ed;
}

设置下部分enjoy liE B 2 H H @ efe作用

感觉对齐F M s – % P {的高度不太对，我竟然想到b { g y * n – R 0了经过height和padding-top进 x d , _行调整~~~~~

#lower.right.right-1{
font-size:32px;
bK X ; c eorder-bottom:thicksolid#fdfadd;
font-style:italic;
letter-spacing:0.5em;
height:160px;
padding-o T ] 0 Vtop:30%;
}

放上比照作用图

今日学习名词

名称	名词解析
`Emmet`	Web 开发人员必备N b E 3 I Q w /的工具包，能够大大改善 `HTML` 和 `CSS` 工作流程
调试窗口I 2 %	在打开的浏览器页面中按下`F12`快捷键，就能够出现`调试窗口`，在调试窗口中，所有的`HTML元素`都会呈现在`调试窗口`中
`BFC`	`BFC(BloK t { W P nck fo0 ) m z d $ G Qrmatting context)`直译为”块级格式化上下y _ 8 a h 4 N :文”。它是一个独立的渲染区域，只有`Block-level box`参与，它规定了内部的`Block-level Box`怎么布局，而且与这个区域外部毫不相干。
`CSS3`	`CSS3`是`CSS3`（层叠款式表）技能的升级版别

今日学习总结

今日心情

很快乐，今日根底完成了方针，虽然还有些差异，之后可能会再改进，可是我自己感V 0 G V U n Q } T觉现已有些满足了~~~

本文运用 mdnice 排版

转行学前端的第 13 天 : 实现第一个页面效果