前端日记04_从0开始仿页面

1 前言

胖胖最近又模仿了一个电动车官网的页面,纯手写css因为还不会用其他工具(小声bb:我太难了！)。
以下是一些总结，走过路过不要错过~

2 准备工作

• 一个不知道从哪里搞来的网页…
  中国中能机车集团有限公司官网
• 环境：vscode
• 还有脑子🧠和手

3 开工

3.1制作头部导航栏

3.1.1 头部导航栏

如下图：

3.1.2 Q&A

Q1: 如何使上图中(1)部分的国旗和文字水平垂直对齐？
A1:

//html代码
<a class="lan_link" href="#">                 
	<div class="English_img"></div>
    <span class="lang-text">English</span>
</a>

.lan_link{
    color: #aaa;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8em;
    margin-right: 5px;
}
.English_img{
    background: url("https://5irorwxhqqjorik.ldycdn.com/static/t-mmBqBKkKxkijxrbk/assets/widget/images/langBar/sprites.png");
    background-repeat: no-repeat;
    width:21px;
    height:14px;
    display:inline-block;
    background-position: -252px -116px;
    margin-right:2px;
    vertical-align: middle;
}

• 文字通过继承父类的line-height可以垂直居中。
• 图片可设置vertical-align：middle垂直居中，也可采用div包裹img+span，使用flex布局。
• 顺带可了解一下background-position，见菜鸟教程

.lan_link{
    color: #aaa;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8em;
    margin-right: 5px;
}
.English_img{
    background: url("https://5irorwxhqqjorik.ldycdn.com/static/t-mmBqBKkKxkijxrbk/assets/widget/images/langBar/sprites.png");
    background-repeat: no-repeat;
    width:21px;
    height:14px;
    background-position: -252px -116px;
    margin-right:2px;
    display:inline-block;
    /*一般针对的是设置display：inline/inline-blockd元素的对齐方式*/
    vertical-align: middle;
}
.Chinese_img{
    background:url("https://5irorwxhqqjorik.ldycdn.com/static/t-mmBqBKkKxkijxrbk/assets/widget/images/langBar/sprites.png");

	/*English_img同上设置*/
	...
}

Q2: 由于块级元素独占一行而不能和其他元素并排，(2)中的布局方式该如何选取？
A2:此处选取flex布局，更多使块级元素同行排列方式请见此链接。

• 以下为logo和列表的排版片段

/*css代码（删减版）*/

.band_logo{
    height:60px;
    line-height: 60px;
    display:inline-block;
    float:left;
    display:flex;
    justify-content: center;
    align-items: center;

}

.nav_list{
    width:950px;
    display:inline-block;
    float:right;
    line-height: 60px;
    display: flex;
    justify-content: space-evenly;

}

• 设置letter-spacing(文字间距)可以使界面文字更美观，更透气。

3.2 制作主体部分

3.2.1 主体的排序部分

3.2.2 主体的列表卡片

鼠标悬浮图片上有放大效果：

3.2.3 Q&A

Q3:卡片排列如何布局？

• 此处选取flex布局，更多方法请见使块级元素同行排列方式。

Q4:每个详情卡片如何制作？

• 排列方式可选择display:table，详情见此链接,此处我们选用的是ul+li制作每个卡片,采用flex-wrap布局进行换行。(或许也可以使用dl+dd）

Q5：一行排列四个元素，不足四个元素则对齐上方从左到右排列如何解决？

• 每个元素设置width:20%，最后一排不足部分用伪类配合空内容补齐

.body .motor_detail .motor_container .motor_list .motor_list_wrap:after {
  content: "";
  width: 20%;
}

Q6:如何做到鼠标悬浮图片变大？

• 用transform+transition配合完成，父元素设置overflow:hidden

.body .motor_detail .motor_container .motor_list .motor_list_wrap .motor_img {
  overflow: hidden;
}
.body .motor_detail .motor_container .motor_list .motor_list_wrap .motor_img img {
  width: 100%;
  height: 100%;
  transition: transform 1s;
}

• 具体csdn文本教程见此链接

3.3 制作尾部

3.3.1 Q&A

Q7:鼠标悬浮图片上时如何使logo上移？

• 使用translateY()配合transition即可

Q8：一行文字太多如何换行？

• 设置overflow-wrap:break-word,更多overflow-wrap换行问题详见此链接
  Q9:如何制作输入栏和按钮
• 此处使用的是input+div
• 也可使用input+button，不过此时两者之间会有间隙，需设置border:0，以及padding:0。

总结

• 内联样式尽量少用，不利于移动端做自适应，项目大的时候对联合开发也会埋下一些坑。

• 手写的css没有使用编译工具，那还是应该考虑到兼容性的一些写法。最经典的比如flex
  flex兼容性,可参见此链接

• !important的作用是啥?
  提高指定样式规则的应用优先权，用来区分IE和其他的样式，具体可参见这个回答。

• csshack是啥?
  针对不同浏览器或者不同版本写出可解析的css的过程就是csshack。
  CSShack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

• 移动端适配上尚有欠缺，作品上是固定px布局，该了解rem的使用和css媒体适配。

• Js没有体现，css书写上冗余比较多。可以体会一下按功能拆分。比如引入reset.css专做重置。然后按照功能模块区分，比如像motor_03 motor_02 这种写法尽量避免。

• 会尝试编译工具比如gulp，fis3，等活用scss，less等语法，学习一下mixin等写法，可以让css看起来更清晰。强推一个声音超好听的神仙up，学习sass基础。

“凡有成者，必务于实。凡有所学，皆成性格。”