针对于小白!在初识
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
其他的自己体会……
看效果展示:
代码展示:
这里为了展示效果,所以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>