我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。
今日学习目标
按照昨天的规划,今天这边就需要从实例开始实战了,早上在创客贴上找了一个模板,今天主要就是将这个效果实现,加油,小又又!!!!
vscode 安装
官网
进入vscode 官网。
点击下载
点击官网上面的下载
。
注意在文件下载过程中,页面会提示
此类型的文件可能会损害您的计算机。您仍然要保留......吗
,请注意选择保留
~~~~
修改主题样式
试了一些主题样式之后,感觉这个Ayu
字体主题我更喜欢
基础学习 emmet
在页面输入
html
发现这边一直在提示emmet
。我在点击了确认键
之后,发现页面自动生成了相关结构,就感觉很神奇~~~~~
官方文档地址
- https://docs.emmet.io/
基础学习总结
关键词 | 说明 | 示例 | 效果 |
---|---|---|---|
> |
可以使用> 运算符将元素相互嵌套 |
div>ul>li |
<div><ul><li></li></ul></div> |
+ |
使用+ 运算符将元素彼此放置在同一水平线上 |
div+p+bq |
<div></div><p></p><blockquote></blockquote> |
^ |
使用^ 运算符,可以在树上爬上一层,并更改上下文,其中应显示以下元素 |
div+div>p>span+em^bq |
<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div> |
* |
使用* 运算符,可以定义元素应输出多少次 |
ul>li*5 |
<ul><li></li><li></li><li></li><li></li><li></li></ul> |
() |
使用() 将复杂缩写的子树分组 |
div>(header>ul>li*2>a)+footer>p |
<div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer></div> |
# & . |
在CSS 中,使用elem#id 和elem.class 表示法可以访问具有指定id 或class 属性的元素。在Emmet 中,可以使用完全相同的语法将这些属性 添加到指定的元素 |
div#header+div.page+div#footer.class1.class2.class3 |
<div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div> |
[attr] |
可以使用[attr] 表示法(如CSS 中一样)向元素添加自定义属性 |
td[title="Hello world!" colspan=3] |
<td title="Hello world!" colspan="3"></td> |
$ |
可以连续使用多个$ 将数字填充为零 |
ul>li.item?$*5 |
<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li></ul> |
@ |
使用@ 修饰符,可以更改编号方向(升序或降序)和基数(例如起始值)。 |
ul>li.item$@-*5 |
<ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul> |
{} |
可以使用{} 将文本添加到元素 |
a>{click}+b{here} |
<a href="">click<b>here</b></a> |
学习小总结
看官网这边说明感觉很厉害,然后也是避免学的太杂,学习了一些暂时用不上的,就只学习了第一页的内容,不过这个里面好像没有提到html:5
,不知道为啥,学习之后感觉还是需要在实践中再理解一下~~~~~
了解通用项目结构
这边通过前端基础项目结构
关键词搜索的时候,发现出来了很多很繁琐的页面结构,决定采用看起来比较符合简单项目的结构。
./
├── css
├── js
├── images
├── index.html
名称 | 说明 |
---|---|
css | 放置样式文件的文件夹 |
js | 放置 js 文件的文件夹 |
images | 放置图片文件的文件夹 |
index.html | 主页 |
新建项目
主要项目目录结构如下:
./
├── css
│ ├── index.css
├── js
├── images
│ ├── flower.png
├── index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小又又 学习 前端 </title>
<meta name="keywords" content="小又又,学前端">
<meta name="description" content="小又又的描述测试~~~~~~">
<meta name="author" content="小又又">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>
实战
确认页面结构
我基础理解 页面整体分上下两个结构,然后下面分为左右两个结构
<div id="upper">
</div>
<div id="lower">
<div class="left">
</div>
<div class="right">
</div>
</div>
放上文字内容
按照我的基础理解,图片上有换行的我先使用<br/>
标签进行换行,在写的时候,我发现这边4/19
的效果感觉有点麻烦
<div id="upper">
</div>
<div id="lower">
<div class="left">
<p>四月<br/>你好</p>
<p>拥抱生活<br/>阳光总在风雨后</p>
</div>
<div class="right">
<p>enjoy life</p>
<p>4/19</p>
</div>
</div>
设置页面整体大小
了解宽度设置 CSS 语法
了解高度设置 CSS 语法
查看海报大小
640 * 1008 px
设置页面整体的样式大小
body{
width: 640px;
height: 1008px;
}
设置背景渐变效果
刚好将那天只是基础了解的背景颜色渐变进行实践~~~~
这边应该是属于线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
主要是两种颜色渐变,一个是#fdfadd
,一个是#ff8e9c
。
body{
width: 640px;
height: 1008px;
background-image: linear-gradient(#fdfadd, #ff8e9c);
}
不知道为啥,给body
设置了宽度和高度,但是渐变效果好像是应用到了整个页面~~~
通过给body设置了高度没有生效
关键词进行了相关搜索,好像都是设置为100%
的问题,和这个好像不太一样。
决定先将后面的完善一下再来解决一下这个问题~~
设置页面上半部分效果
设置上半部分高度
#upper{
width: 583px;
height: 583px;
}
设置背景图片
#upper{
width: 583px;
height: 583px;
background-image: url(/images/flower.png);
}
可是页面没显示这个背景图片?
解决背景图片没显示的问题
通过设置了背景图片但是没显示
搜索词,搜索了一些可能原因
css
没有被调用;请检查css
调用是否成功。css
图片地址不对;请检查css
图片地址是否正确。div
的高度没有固定,是auto
或者没有设值;div
设置错误容易导致背景图片高度太大则无法显示。div
被嵌套;查看嵌套的div
是否设置正确。div
代码不规范;请检查div
代码是否书写正确。
因为我这边在css
文件中设置的背景颜色,在页面上是生效了的,所以不是第一个原因。
那怎么看页面图片地址呢?我看我 css 中地址感觉很对,通过基础搜索之后,我大概清楚了怎么调试页面。
关键词就是F12
,在打开的浏览器页面中按下F12
快捷键,就可以出现调试窗口
,不过好像文章中的截图和我的浏览器调试窗口
不太一样,应该是版本问题吧。
打开了调试窗口之后,发现页面有一个报错,GET file:///E:/images/flower.png net::ERR_FILE_NOT_FOUND
,这个路径好像有些不太对。
我决定将这个路径修改为相对路径
,注意修改为相对路径,一定要在路径前后添加引号,要不然会报错的~~~~
#upper{
background-image: url('../images/flower.png');
}
出来啦~~~~~~~~~~~~~~~~~~~
设置页面下半部分效果
设置下半部整体大小
#lower{
width: 583px;
height: 400px;
}
设置下半部背景颜色
#lower{
width: 583px;
height: 400px;
background-color: #ff6e80;
}
为啥这边页面默认上部分
和小部分
之间会有一个间距,奇怪~~~~
设置下半部字体颜色
#lower{
width: 583px;
height: 400px;
background-color: #ff6e80;
color:#fdfadd;
}
设置下半部整体为左右结构
通过怎么通过css设置左右结构
关键词,搜索之后发现大致有以下几种做法。
table
inline-block
float
flexbox
(css3
)float
+margin
float
+overflow
(block formate context
)position: absolute
一共六种方式,文章中说table
实现不建议,然后这边就试了一下inline-block
方法,发现已经变成左右结构了,决定先用这个版本。
#lower .left,#lower .right{
display: inline-block;
}
设置下部分左侧 -
四月你好
效果
发现之前忘记给p
标签添加class
了,将页面结构修改如下:
<div id="upper">
</div>
<div id="lower">
<div class="left">
<p class="left-1">四月<br/>你好</p>
<p class="left-2">拥抱生活<br/>阳光总在风雨后</p>
</div>
<div class="right">
<p class="right-1">enjoy life</p>
<p class="right-2">4/19</p>
</div>
</div>
了解字体大小样式怎么写
修改字体大小,看页面上当时设置的是72px
~~~
所以设置了这个大小
#lower .left .left-1{
font-size: 72px;
}
搜索了一下怎么给文字设置圆圈效果,看了相关文章和我这个效果好像不太一样,之后要再处理一下。
设置下部分左侧 -
拥抱生活 阳光总在风雨后
效果
修改字体大小,看页面上当时设置的是24px
~~~
所以设置了这个大小
#lower .left .left-2{
font-size: 24px;
}
为何这边上下两段文字之间,会有这么多间距?
设置下部分右侧 -
enjoy life
效果
修改字体大小,看页面上当时设置的是32px
~~~
原本enjoy life
下面有一条线,突然想到了那天学习的text-decoration
,就试着用一下,看看效果
#lower .right .right-1{
font-size: 32px;
text-decoration: underline overline dotted #fdfadd;
}
字体还有一个倾斜的效果,了解相关语法规范
#lower .right .right-1{
font-size: 32px;
text-decoration: underline overline dotted #fdfadd;
font-style:italic
}
不知道为何四月你好
和enjoy life
不在一排显示?
设置下部分右侧 -
4/19
效果
修改字体大小,看页面上当时设置的是81px
~~~
#lower .right .right-2{
font-size: 81px;
direction:rtl;
unicode-bidi: bidi-override;
}
海报中文字方向是反的,通过搜索CSS文字方向
得知了设置语法~~~
#lower .right .right-2{
font-size: 81px;
direction:rtl;
unicode-bidi: bidi-override;
}
哈哈哈,变成了91/4
,不太清楚如何解决这个问题,我觉得将页面中4/19
换成了 4/91
。
<div id="upper">
</div>
<div id="lower">
<div class="left">
<p class="left-1">四月<br/>你好</p>
<p class="left-2">拥抱生活<br/>阳光总在风雨后</p>
</div>
<div class="right">
<p class="right-1">enjoy life</p>
<p class="right-2">4/91</p>
</div>
</div>
然后文字一上一下的效果,暂时没想到好的解决办法~~~
设置下部分左右侧宽度
看了一下效果之后发现下部分的左右宽度占比很不对,修改一下左右占比
#lower .left{
width: 50%;
}
#lower .right{
width: 40%;
}
原本设置的是左右都是50%
,结果发现页面换行了,就调整为左右占比不一样了。
设置下部分间距
看了一下效果之后发现海报中下部分有一个默认的间距,感觉需要添加一下,文字贴着边缘确实感觉很不好。
了解间距设置语法
#lower{
width: 583px;
height: 400px;
background-color: #ff6e80;
color:#fdfadd;
margin: 15px;
}
结果和我想象中的不太一样。
然后再搜索之后,发现还有一个设置间距的,之前那个是外间距
,这个是内间距
,了解内间距
设置语法。
最开始我写的是调整#lower
的padding: 15px;
结果发现效果和我理解还是有些偏差,后面调整成了修改#lower .left
和#lower .right
的内间距。
#lower .left{
width: 50%;
padding-left: 15px;
}
#lower .right{
width: 40%;
padding-bottom: 15px;
}
解决文字的默认间距
通过搜索p标签默认间距清除
,了解到浏览器默认会给p标签添加间距,需要使用margin: 0px;
进行清除。
p{
margin: 0px;
}
设置下部分
left
文字内间距
主要是增加了左内间距
。
#lower .left{
width: 50%;
padding-left: 30px;
}
设置下部分文字行间距
了解行间距
语法
添加相关行间距
,我尝试了具体像素值,百分比,后面发现还是具体数字效果好一些~~~
#lower{
width: 583px;
height: 400px;
background-color: #ff6e80;
color:#fdfadd;
line-height: 1.7;
}
设置下部分文字字间距
了解字间距
语法
添加相关字间距
,我尝试给整体添加字间距
,结果发现最后还是单个添加样式好一些~~~~
#lower .right .right-1{
font-size: 32px;
text-decoration: underline overline dotted #fdfadd;
font-style:italic;
letter-spacing: 0.5em;
}
#lower .left{
width: 50%;
padding-left: 30px;
letter-spacing: 1em;
}
设置下部分文字边线效果
了解边线
语法
添加相关边线
,我尝试给整体添加边线
,结果发现最后还是需要使用border-bottom
~~~~
#lower .right .right-1{
font-size: 32px;
font-style:italic;
letter-spacing: 0.5em;
border-bottom:thick solid #fdfadd;
}
设置下部分
enjoy life
效果
感觉对齐的高度不太对,我竟然想到了通过height
和padding-top
进行调整~~~~~
#lower .right .right-1{
font-size: 32px;
border-bottom:thick solid #fdfadd;
font-style:italic;
letter-spacing: 0.5em;
height: 160px;
padding-top: 30%;
}
放上对比效果图
今日学习名词
名称 | 名词解析 |
---|---|
Emmet |
Web 开发人员必备的工具包,可以大大改善 HTML 和 CSS 工作流程 |
调试窗口 | 在打开的浏览器页面中按下F12 快捷键,就可以出现调试窗口 ,在调试窗口中,所有的HTML元素 都会呈现在调试窗口 中 |
BFC |
BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box 参与, 它规定了内部的Block-level Box 如何布局,并且与这个区域外部毫不相干。 |
CSS3 |
CSS3 是CSS (层叠样式表)技术的升级版本 |
今日学习总结
今日心情
很高兴,今天基础实现了目标,虽然还有些区别,之后可能会再改进,但是我自己感觉已经有些满意了~~~
本文使用 mdnice 排版