标签归档：css3

网页模块命名规范

通常网页模块的命名规范需要遵循以下三个原则：

  • 命名避免使用中文字符（如id=“内容”）；
  • 命名不能以数字开头（如id=“1header”）；
  • 命名不能使用关键字（如id=“div”）；
  • 命名应尽量用最少的字母表达含义，使之简明、易懂。

在网页开发中，常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。

驼峰式命名：除第一个单词外后面的单词首字母都要大写，其余小写，如navOne。

帕斯卡命名：每个单词之间用“_”连接，如nav_one。

下面列举网页中常用的一些命名。

常用命名
模块 命名 模块 命名
头部 header 标签页 tab
内容 content/container 文章列表 list
尾部 footer 提示信息 msg
导航 nav 小技巧 tips
子导航 subnav 栏目标题 title
侧栏 sidebar 加入 joinus
栏目 column 指南 guild
左右中 left right center 服务 service
登录条 loginbar 注册 register
标志 logo 状态 status
广告 banner 投票 vote
页面主体 main 合作伙伴 partner
热点 hot CSS文件 命名
新闻 news 主要的 master.css
下载 download 模块 module.css
菜单 menu 基本共用 base.css
子菜单 submenu 布局，版面 layout.css
搜索 search 主题 themes.css
友情链接 frIEndlink 专栏 columns.css
页眉 header 文字 font.css
页脚 footer 表单 forms.css
版权 copyright 补丁 mend.css
滚动 scroll 打印 print.css

CSS Zen Garden禅意花园中有这样一段话~

 E文看不懂：那咱们用百度翻释下吧：记忆力越来越差，还是文章起来吧~
View source is a feature, not a bug. Thanks for your curiosity and   interest in participating!

查看源代码是一种特性,而不是一个bug。感谢你的好奇心和兴趣参与!
Here are the submission guidelines for the new and improved csszengarden.com:

以下是新的和改进的csszengarden.com的提交指南：
– CSS3? Of course! Prefix for ALL browsers where necessary.-CSS3？当然！必要时为所有浏览器添加前缀。
– go responsive; test your layout at multiple screen sizes.-快速响应；以多种屏幕大小测试布局。
– your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android-您的浏览器测试基准：ie9+、最新的chrome/firefox/safari和ios/android
– Graceful degradation is acceptable, and in fact highly encouraged.优雅降级是可以接受的,事实上非常鼓励。
– use classes for styling. Don’t use ids.使用类样式。不要使用id。
– web fonts are cool, just make sure you have a license to share the files. Hosted services that are applied via the CSS file (ie. Google Fonts) will work fine, but  most that require custom HTML won’t. TypeKit is supported, see the readme on this page for usage instructions: https://github.com/mezzoblue/csszengarden.com/

-web字体很酷,只要确保你有一个共享文件的许可证。主办通过css文件（即google字体）应用的服务可以正常工作，但是大多数需要自定义HTML的都不支持。支持typekit，请参阅使用说明页面：https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:

还有一些关于构建css文件的提示：
– use :first-child, :last-child and :nth-child to get at non-classed elements

-使用：first child、：last child和：nth child获取非类元素
– use ::before and ::after to create pseudo-elements for extra styling

-使用::before和::after创建用于额外样式设置的伪元素
– use multiple background images to apply as many as you need to any element

-使用多个背景图像对任何元素应用所需的任意数量

– use the Kellum Method for image replacement, if still needed. http://goo.gl/GXxdI

-如果仍然需要，请使用kellum方法进行图像替换。http://goo.gl/gxxdi

 
– don’t rely on the extra divs at the bottom. Use ::before and ::after instead. 

-不要依赖底部额外的div。改用::before和::after。

另外：有篇文章很亦意思，评论回复的更有意思啊。

在这里：https://stackoverflow.com/questions/48966786/background-pentagon-in-header

CSS Zen Garden

CSS Zen Garden