我是小又又，住在武汉，做了两年新媒体，准备用 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 排版
