web方向网页模块开发-搭建框架
2017-07-11 本文已影响64人
JollyJerry
针对于小白！在初识
HTML和CSS编写静态网页的时候，会有懵逼的状态，给一个整体网页，怎么下手呢？
看下面：
首先div的命名 ： 可以显示出专业！🤔
头部：
header
内容：content/containe
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
左、中、右：xx_left、xx_center、xx_right
登录条：loginbar
登录：login
注册：register
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
搜索：search
标签页：tab
文章列表：list
指南：guild
状态：status
合作伙伴：partner
摘要：summary
标题：title
提示信息：msg
图标：icon
注释：note
其他的自己体会……
看效果展示：
Snip20170711_13.png
代码展示：
这里为了展示效果，所以CSS选取标签用的都是ID选取！
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 480px;
height: 50px;
background: red;
padding: 0 200px;
}
#nav {
background: yellow;
height: 50px;
width: 100%;
text-align: center;
line-height: 50px;
}
#main {
background: beige;
width: 480px;
height: 400px;
padding: 0 200px;
}
#content_left {
float: left;
width: 30%;
background: blue;
height: 400px;
text-align: center;
}
#content_right {
float: right;
width: 68%;
background: blueviolet;
height: 100%;
text-align: center;
}
#footer {
width: 480px;
height: 100px;
background: gray;
padding: 0 200px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="nav">
这个是设置导航栏
</div>
</div>
<div id="main">
<div id="content_left">
这个是左边的内容区
</div>
<div id="content_right">
这个是右边的内容区
</div>
</div>
<div id="footer">
这个是底部内容
</div>
</body>
</html>
</pre>
<h6>编写静态页面，先把模块分清楚，在填写内容哦！</h6>
