网页设计css的基础知识（网页设计得懂css的规范）

网页设计切图 网页设计得懂css的规范

在初级的前端工作人员， 刚入职的时候，可能在学习前端技术，写代码不是否那么的规范，而在工作中，命名的规范的尤为重要，它直接与你的代码质量挂钩。网上也受很多，但比较杂乱，在加上每年的命名都会发生一变化。

，本文也对设计来说也很重要。

页头header 如#header{属性:属性值}或.header{属性:属性值},也许你需要了解class与id区别及用法

登录条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

常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u

1.CSS的 ID 的命名 也许你需要了解class与Id区别

外　套wrap 主导航mainNav 子导航subnav

页　脚footer 整个页面content 页　眉header

版 权copyRight 商　标label 标　题title

主导航mainNav(globalNav) 顶导航topnav

边导航sidebar 左导航leftsideBar 右导航rightsideBar

旗　志logo 标　语banner 菜单内容1 menu1Content

菜单容量menuContainer 子菜单submenu

边导航图标sidebarIcon 注释note

面包屑breadCrumb(即页面所处位置导航提示)

容器container 内容content 搜索search

登陆login 功能区shop(如购物车，收银台)

当前current

DIV+CSS命名小结无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们更好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有

wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1h2h3h4标签使用)

、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

DIVCSS5建议主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

2.CSS样式文件命名如下

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

也许你需要了解一下css引用到html

你熟练掌握命名的规范，这对你在网站开发中团队合作是相当有益的，也会大大的提高你的书写代码速率。

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号qietuwang

网页设计css基本知识 网页设计中如何定义css