网页设计div和class，网页的每个部位都是怎么命名的

Posted 2023-05-16

常用CSS命名参考资料

　　在Xhtml中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。
　　(1)页面结构类
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　(2)导航类
　　导航：nav
　　主导航：mainnav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　位置导航： crumb
　　菜单：menu
　　子菜单：submenu
　　面包屑：breadcrumb(即页面所处位置导航提示)
　　(3)网页内容类
　　标题: title
　　摘要: summary
　　箭头： arrow
　　商标： label
　　网站标志： logo
　　转角/圆角： corner
　　横幅广告： banner
　　栏目： column
　　子菜单： subMenu
　　搜索： search
　　搜索框： searchBox
　　登录： login
　　工具条： toolbar
　　下拉： drop
　　标签页： tab
　　当前的： current
　　列表： list
　　滚动： scroll
　　服务： service
　　提示信息： msg
　　新闻： news
　　小技巧： tips
　　下载： download
　　栏目标题： title
　　热点： hot
　　加入： joinus
　　注册： regsiter
　　指南： guide
　　友情链接： friendlink
　　状态： status
　　版权： copyright
　　按钮： btn
　　合作伙伴： partner
　　投票： vote
　　头：header
　　内容：content/container
　　尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　登录条：loginbar
　　标志：logo
　　广告：banner
　　页面主体：main
　　热点：hot
　　新闻：news
　　下载：download
　　子导航：subnav
　　菜单：menu
　　子菜单：submenu
　　搜索：search
　　友情链接：friendlink
　　页脚：footer
　　版权：copyright
　　滚动：scroll
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态：status
　　投票：vote
　　合作伙伴：partner
　　(二)注释的写法:
　　/* Footer */
　　内容区
　　/* End Footer */
　　(三)id的命名:
　　(1)页面结构
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　(2)导航
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu
　　子菜单：submenu
　　标题: title
　　摘要: summary
　　(3)功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
　　(四)class的命名:
　　(1)颜色:使用颜色的名称或者16进制代码,如
　　.red color: red;
　　.f60 color: #f60;
　　.ff8600 color: #ff8600;
　　(2)字体大小,直接使用"font+字体大小"作为名称,如
　　.font12px font-size: 12px;
　　.font9pt font-size: 9pt;
　　(3)对齐样式,使用对齐目标的英文名称,如
　　.left float:left;
　　(4)标题栏样式,使用"类别+功能"的方式命名,如
　　.barnews
　　.barproduct
　　注意事项::
　　1.一律小写;
　　2.尽量用英文;
　　3.不加中杠和下划线;
　　4.尽量不缩写，除非一看就明白的单词.
　　主要的 master.css
　　模块 module.css
　　基本共用 base.css
　　布局，版面 layout.css
　　主题 themes.css
　　专栏 columns.css
　　文字 font.css
　　表单 forms.css
　　补丁 mend.css
　　打印 print.css
　　头：header
　　内容：content/container
　　尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：leftrightcenter
　　登录条：loginbar
　　标志：logo
　　广告：banner
　　页面主体：main
　　热点：hot
　　新闻：news
　　下载：download
　　子导航：subnav
　　菜单：menu
　　子菜单：submenu
　　搜索：search
　　友情链接：friendlink
　　页脚：footer
　　版权：copyright
　　滚动：scroll
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态：status
　　投票：vote
　　合作伙伴：partner
　　(二) 注释的写法：
　　/*Footer*/
　　内容区
　　/*EndFooter*/
　　(三) id的命名：
　　(1)页面结构
　　容器：container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：leftrightcenter
　　(2)导航：
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu
　　子菜单：submenu
　　标题:title
　　摘要:summary
　　(3)功能：
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的:current
　　小技巧：tips
　　图标:icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
　　(四) class的命名：
　　(1)颜色：使用颜色的名称或者16进制代码，如：
　　以下为引用的内容：
　　.redcolor:red;
　　.f60color:#f60;
　　.ff8600color:#ff8600;
　　(2)字体大小，直接使用“font+字体大小”作为名称，如：
　　以下为引用的内容：
　　.font12pxfont-size:12px;
　　.font9ptfont-size:9pt;
　　(3)对齐样式，使用对齐目标的英文名称，如：
　　以下为引用的内容：
　　.leftfloat:left;
　　(4)标题栏样式，使用”类别+功能”的方式命名，如：
　　以下为引用的内容：
　　.barnews
　　.barproduct
　　(五) 文件名命名：
　　主要的：master.css
　　模块：module.css
　　基本共用：base.css
　　布局，版面：layout.css
　　主题：themes.css
　　专栏：columns.css
　　文字：font.css
　　表单：forms.css
　　补丁：mend.css
　　打印：print.css
　　(六) 注意事项：
　　(1)一律小写。
　　(2)尽量用英文。
　　(3)不加中杠和下划线。
　　(4)尽量不缩写，除非一看就明白的单词。追问

辛苦你了

参考技术A 1，小型网站，公司网站，个人网站，博客型。

此类网站简单明了，命名方式随意，可以用方位来命名（上中下左中右）或者是板块的开头字母，或者是英文单词。

2.大型网站，门户性，电子商务型。

此类网站页面较长，样式复杂，容易引起混淆。本人的解决方案就是以行和列来命名。（第一行.R1第一列.C1｛R和C相信应该知道是什么了吧。｝第一行第一列（.R1_C1））板块都用独立ID控制。比如新闻板块就取名(#NEW)，新闻下面的第一行第三列（#NEW .R1_C3） ID具有唯一性，相信提问你的应该清楚。

好，接下来我在告诉你我对你上图的处理办法

.spam width:300px; height:30px; overflow:hidden; line-height:30px;
.spam a display:inline-block; width:80px; height:30px; overflow:hidden; margin-right:10px; text-indent:10px;

<div clalss="spam"><a href="#"><img src.....路径自己加，顺便说下写代码真累>1</a><a href="#">2</a><a href="#">3</a></div>

如此就解决了你上图的方法而且不用命名追问

谢谢你，但是我的问题不是问这个

参考技术B 命名规范，主要是给自己以后维护和其它成员快速阅读、修改增加便利！
楼上哥们说的对：
头部：head,header
菜单：menu
主体：main
内容：content
尾部：foot,footer
但是更细致的命名规则一般是按层级来命名
例如：
头部命名为：header，那么头部菜单命名为header-menu，头部菜单一级分类header-menu-1
虽然文字比较长，但是对于别人阅读，你只要告知相关的关键词即可！ 参考技术C 头部：head,header

导航：menu
主体：main
内容：content
尾部：foot,footer
其他部分按照自己做的内容命名就好，这些地方也可以命名其他的，只不过加上注释会更好，这样代码让人一看就懂。 参考技术D

啥也不说了，里面很全..

追问

什么啊

追答

这个文档里是命名规则，你可以下载下来好好看看

追问

你给我发文档了吗，没收到

追答

额。下面那个div css命名规则.doc就是啊

追问

我没收到什么文件

在Dreamweaver中 怎样用DIV+CSS来制作网页

div是：
HTML <div> 标签
定义和用法
<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色：

<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>

CSS是：把文件的样式和排版都放在一个文件中，需要用的直接引用那个问题就好了

参考资料：http://zhidao.baidu.com/question/209965874.html

参考技术A 你主要是想问什么？dreamweaver的操作还是不清楚div+css，或者说你不懂怎么写一个页面，div+css也只是一个思想，首先如果要写一个网页的话，你根据需要，首先写出结构，可以一部分一部分的实现，然后用css控制结构的样式，达到你希望的样子。
dreamweaver的操作的话，首先创建一个站点，（站点即是一个文件夹）然后根据需要在站点文件夹下创建相应的文件夹，比如存放图片的文件夹，css样式的文件夹，网页的话，一般直接存放在站点文件夹最外面。

建议你问的更详细点。 参考技术B 主要是你需要学习css 找一本css书学习下 不是一句两句 就能说会你的 参考技术C 这个不是一两句能说出来的，看书吧！
《精通css+div网页样式与布局》 我看的是这本。 参考技术D 你只要会使用div+css用什么编辑器不重要