经典DIV + CSS Layout

在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg {}。

还有一些其他的比如搜索框之类的应该怎么命名呢?下面有一些可以算得上是标准的命名吧。

如果有错误或者遗漏请朋友们帮忙补上,谢谢!

页头:header

登录条:loginbar

标志:logo

侧栏:sidebar

广告:banner

导航:nav

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

友情链接:friendlink

页脚:footer

版权:copyright

提交:submit

文本框:textbox

统计:count

以上结构可以组合使用,例如:左列标题lefttitle;底部导航footernav 书写原则是: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词。

Div结构示例如下:

│body {} /*这是一个HTML元素,具体我就不说明了*/

└#Wrap {} /*页面层容器*/

├#Header {} /*页面头部*/

├#Main {} /*页面主体*/

│ ├#Sidebar {} /*侧边栏*/

│ └#Content {} /*主体内容*/

└#Footer {} /*页面底部*/

相关文章:

1、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

2、纯CSS制作随着鼠标跑动的裸男
https://www.onexin.net/naked-man-running-the-pure-css-production-with-the-mouse/

3、CSS+DIV基础知识大观
https://www.onexin.net/css-div-basics-of-grand/

4、网站重构:利用CSS改善网站可访问性
https://www.onexin.net/site-reconstruction-using-css-to-improve-website-accessibility/

5、DIVC+SS网页特效欣赏:非常酷的角BANNER
https://www.onexin.net/divc-ss-web-effects-appreciate-very-cool-angle-banner/

转载请注明出处:https://www.onexin.net/classic-div-css-layout/

Leave a Reply

Your email address will not be published. Required fields are marked *