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

小又又
8,089 阅读14分钟

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

avatar
文章
阅读
粉丝