5.模块化<2>
什么是模块化？ 1.一系列相关联的结构组成的整体 2.这个整体带有一定语义化
比如说page分页、比如说图片轮播。
怎么做？ 1.为模块分类命名如(m-,md-)表示一个模块 2.唯一的根节点 3.使用以主选择器开头的后代选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*导航模块*/
.m-nav{}/*模块容器*/
.m-nav li{}
.m-nav a{}
.m-nav .active a{}
</style>
</head>
<body>
<div class="m-nav">
<ul>
<li class="active"><a href="#">linnk1</a></li>
<li><a href="#">link2</a></li>
</ul>
</div>
</body>
</html>比如说导航上面又添加一个按钮，之前的样式保留，所以我只需要添加一个样式，通过添加的样式来控制按钮
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*导航模块*/
.m-nav{}/*模块容器*/
.m-nav li{}
.m-nav a{}
.m-nav .active a{}
</style>
</head>
<body>
<div class="m-nav m-nav-1">
<ul>
<li class="active"><a href="#">linnk1</a></li>
<li><a href="#">link2</a></li>
</ul>
<a href="btn">login</a>
</div>
</body>
</html>模块化的优点： 利于多人协同开发 便于扩展和重用 可读性、可维护性好 不会引起样式污染
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.11.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读