个人总结之前端技巧-----页面的设计流程

首先先说说我们编写一个前端页面的流程：
1设计HTML：
首先根据页面的布局，来确定对应的div区域，接着判断处在同一层级或其样式是否是相同的，若是相同的，则将这些相同样式的类定义一个相同的类名。（方便再接下来编写对应的样式的时候，集中写在一起，减少代码重复率，并同时提高代码的可维护性，便于后期进行维护，
**2设计CSS:**接着就是来编写对应的样式了，如果在前期设计HTML阶段，设计的合理，那么这一步就会很方便了，为对应的类名定义对应的样式
3在JS中设计方法:
为了将这个讲的深一点，我们提出一个实际例子，讲解起来更加深刻
比如淘宝网顶部导航栏上的“我的淘宝”这个按钮，我们将鼠标放在上面的时候，会出现对应的下拉菜单栏：
（1该菜单栏的初始颜色为#cdd0d4,点击之后该背景颜色需要被更改为白色，且出现#cdd0d6颜色的边框
2该菜单右边的按钮图标会发生变化，所以就需要我们更换该图片）
我们要做的就是实现这个功能：
有以下三种方式可以实现，
1将该hover方法写在JS中，如下：
JS:

$(".dropdown").hover(function(){
var $dropdown=$(this);//this代表该函数的执行环境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#fff";
border-color:"#cdd0d6"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown-act.png";
)},function(){//鼠标移出之后，就恢复之前的样式
var $dropdown=$(this);//this代表该函数的执行环境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#cdd0d4";
border-color:"#cdd0d4"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown.png";
}

以上就是我们完成了对应的更改，
这是第一种方法，同时也是最不建议的一种方法，主要有以下三种原因：
1重绘
在我们使用js来改变div的样式的时候，浏览器会为了显示这个新样式会重新绘一遍该对应的div，影响浏览器的性能
2回流
和重绘类似，在使用js改变div属性的时候，比如长和高，不仅会该变自身，其周围的元素都有可能会受到影响，所以会导致浏览器重新计算一遍这些受影响的元素标签，这也是大大影响了浏览器的性能
3是否易于维护
采用这种方式编写，是非常不利于维护的，修改起来困难复杂

于是我们可以选择将实现该功能的方法写在js中，将具体的样式更改写在css中
JS：
$(".dropdown").hover(function(){
$(this).addClass(".dropdown-hov");//挡鼠标移动到该元素的时候，添加类名为dropdown-hov的样式
},function()}
$(this).removeClass(".dropdown-hov");//当鼠标移开的时候，删除该样式

CSS:
.dropdown-hov .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown-hov .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
这就是我们的第二种方式，将方法的声明写在该js中，将样式的变换写在css中

除了这两种写法之外还有第三种写法：
将该方法和样式的都写在CSS中
CSS：
.dropdown:hover .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown:hover .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
//适用于，该.dropdown-act类在.dropdown类中

这就是我们的第三种了，也是最简单直接的写法，便于修改和维护

个人总结之前端技巧-----页面的设计流程相关推荐

Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
IC-CAD IC 设计流程及 EDA 工具
IC 设计流程是每个 IC 从业者的必修课,虽然多数人的从业方向只是 IC 设计流程中的一部分,但是了解 IC 设计流程全貌对正确认识每个 IC 设计环节的作用是有很大帮助的. 对于一个 CAD 来说 ...
前端页面可视化设计工具
(3条消息) [html]前端页面可视化设计工具总结_XYZ-CSDN博客_html可视化布局工具
WEB基础与前端开发--课程表页面的设计
在WEB静态网页设计当中,HTML,CSS和JavaScript是三大利器,发挥着必不可少的作用.最近的一次实验课,进行了课程表页面的设计,这次的实验内容相对比较简单,主要是HTML当中表单类标记的使 ...
如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
推荐7款超棒的单页面网站设计模板。关键是！免费！！
之前我们推荐过Bootstrap的实用开发教程和8款HTML5实现的特效和应用,反映非常强烈,很多前端爱好者纷纷要求多分享些类似的教程和模板.今天我们推荐的这7套单页面网站设计模板不仅带有独立的在线演 ...
面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...

个人总结之前端技巧-----页面的设计流程

个人总结之前端技巧-----页面的设计流程相关推荐

最新文章

热门文章