学习过程中自己练习的测试代码,都是小白式先写好HTML中架构,然后对这些“骨架”进行增添样式,感觉没毛病呀。
譬如,假设创建6个盒子,一个盒子宽高100px、背影颜色红色;一个宽高300px、蓝色;一个宽高450px、黄色;一个宽高100px、蓝色;一个宽高450px、红色;一个宽高300px、黄色。
作为传统的我一直采用传统的正向顺序编写,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传统正向开发</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="传统正向开发.css" />
<!-- <script src="main.js"></script> -->
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
需要6个盒子,好的,就先写了6个盒子,排排站好。然后就是给每个盒子改造改造,
.box1{
width:100px;
height:100px;
background-color: red;
}
.box2{
width:300px;
height:300px;
background-color: blue;
}
.box3{
width:450px;
height:450px;
background-color: yellow;
}
.box4{
width:100px;
height:100px;
background-color: blue;
}
.box5{
width:450px;
height:450px;
background-color: red;
}
.box6{
width:300px;
height:300px;
background-color: yellow;
}
如期完成,真的没毛病呀。
但是,however,but,正所谓学海无涯,自学眼光短浅,今日看了某教学视频,领教了大企业,大开发,大神般的处理流程,果真不一样的,想的角度也不一样的,可能对于大佬们会觉得稀疏平常,但是我真心觉得很受启发呀。
正因为问题中要求的功能就是很固定的这几种,按照传统正向开发顺序,先写HTMl中的box再根据每个box写对于的样式,这样太过于局限。所以可以采用逆向开发思维,已知的就那么几种功能,就可以先定义CSS文件中所需要的功能,这样就可以根据功能去配选不同功能,搭建出不同的box,这样更加灵活。不仅如此,逆向开发可以将写好的CSS文件封装,留有后人开发引用,一个HTML文件中不止可引用一个CSS文件,一般开发中只需要写一个main CSS文件,写入自己开发的样式,其它可以引用他人写好的CSS文件。嗯...以上都是看视频记录的话,我没经验说出来,就是这么诚实。
先根据功能,写好CSS中的样式,
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.size100{
width:100px;
height:100px;
}
.size300{
width:300px;
height:300px;
}
.size450{
width:450px;
height:450px;
}
再依据这些功能,选配各种功能搭建盒子,这样的前提是因为标签的class可以有多个呀,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>逆向开发</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="逆向开发.css" />
<!-- <script src="main.js"></script> -->
</head>
<body>
<div class="red size100"></div>
<div class="blue size300"></div>
<div class="yellow size450"></div>
<div class="blue size100"></div>
<div class="red size450"></div>
<div class="yellow size300"></div>
</body>
</html>
关注我吧
关注「前端一起学」公众号 ,看着项目进阶学习,让我们一起学前端,一起进步。