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


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

今日学习方针

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

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

vscode 装置

官网

进入vscode 官网。

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

点击下载

点击官网上面的下载

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

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

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

修正主题款式

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

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

根底学习 emmet

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

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

官方文档地址

  • https://docs.emmet.io/
转行学前端的第 13 天 : 实现第一个页面效果

根底学习总结

关键词 阐明 示例 作用
> 能够运用>运算符将元素彼此嵌套 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#idelem.class表明法能够拜访具有指定idclass特点的元素。在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 主页

新建项目

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

首要项目目录结构如下:

./
├── 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>
转行学前端的第 13 天 : 实现第一个页面效果

设置页面全体巨细

了解宽度设置 CSI s sS 语法

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

了解高度设置 CSS 语法

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

查看海报巨细640 * 1008 px

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

设置页面全体的款式巨细

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);
}
转行学前端的第 13 天 : 实现第一个页面效果

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

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

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


设置页面上半部分作用

设置上半部分高度

转行学前端的第 13 天 : 实现第一个页面效果
#uppeg & $ t C d g 5 7r{
width:583px;
height:583px;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置布景图片

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

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

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


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

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

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

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

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

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

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

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

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

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

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

#upper{
background-image:url('../images/flower.png');
}
转行学前端的第 13 天 : 实现第一个页面效果

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


设置页面下半部分作用

设置下半部全体巨细

#lower{
width:583px;
height:400px;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置下半部布景色彩

#lower{
widthp b ) ~:583px;
height:400px;
background-color:#ff6e80;
}
转行学前端的第 13 天 : 实现第一个页面效果

为啥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;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

经过怎样经过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;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

发现之: ? 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>

了解字体巨细款式怎样写

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

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

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

所以设置了这个巨细

#lower.left.left-1{
font-size:72px;` i -
}
转行学前端的第 13 天 : 实现第一个页面效果

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


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

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

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

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

#lower.left.left-2{
font-size:24j 6 y t % X x ;px;
}
转行学前端的第 13 天 : 实现第一个页面效果

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


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

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

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

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

#lower.right.right-1{
font-size:32px;
text-decoration:underlineoverlinedotted#fdfadd;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

转行学前端的第 13 天 : 实现第一个页面效果
#lower.right.right-1{
font-size:32px;
texta @ p O 1 c m `-decoration:underlineoverlinedotted#fdfadd;
font-style:italic
}
转行学前端的第 13 天 : 实现第一个页面效果

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


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

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

转行学前端的第 13 天 : 实现第一个页面效果
#lower.right.right; 6 r 2 m G )-2{
font-size:81px;
direction:rtl;
unicode-bidi:bidi-override;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

转行学前端的第 13 天 : 实现第一个页面效果
#lower.right.right-2{
font-size:81px;
direction:rtl;t ? ; N 4 L f 7
unicode-bidi:bidi-override;
}
转行学前端的第 13 天 : 实现第一个页面效果

哈哈哈,变成了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;
转行学前端的第 13 天 : 实现第一个页面效果

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


设置下部分左右侧宽度

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

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

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

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

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

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

了解距离设置语法

转行学前端的第 13 天 : 实现第一个页面效果
#lower{
width:583px;
height:400px;
background-cop 8 l L F ^ ulor:#ff6e80;
color:#fdfadd;
margin:15px;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

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

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

最开] l ( # , c端我写的是调整#lowerpadding: 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;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置下部分left文字内距离

首要是增加了左内距离

#lower.left{
width:50%;
padding-left:30px;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置下部分文字行距离

了解行距离语法

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

增加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;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置下部分文字字距离

了解字距离语法

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

增加相关字距离,我测验给全体增加字距离,成果发现最终仍是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;
}
转行学前端的第 13 天 : 实现第一个页面效果

设置下部分文字边线作用

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

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

增加相关边线,我测验# 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;
}
转行学前端的第 13 天 : 实现第一个页面效果

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

感觉对齐F M s – % P {的高度不太对,我竟然想到b { g y * n – R 0了经过heightpadding-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%;
}
转行学前端的第 13 天 : 实现第一个页面效果

放上比照作用图

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

今日学习名词

名称 名词解析
Emmet Web 开发人员必备N b E 3 I Q w /的工具包,能够大大改善 HTMLCSS 工作流程
调试窗口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 CSS3CSS3(层叠款式表)技能的升级版别

今日学习总结

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

今日心情

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

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

本文运用 mdnice 排版

发表评论

提供最优质的资源集合

立即查看 了解详情