发表于： 2018-06-11 21:45:24
2 619
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
再次做了任务三,完后才能了百度前端作业页面制作做了一半
明白了怎么把本地仓库的更改上传到云端,gitHUb客户端还是好用~
今天偷懒了(一上课就不想敲代码~嘿嘿哈哈)
明天计划的事情：（一定要写非常细致的内容）
浏览一下任务四的作业
遇到的问题：（遇到什么困难，怎么解决的）
规范命名问题,坚持用合理的命名要求来要求自己.
收获：（通过今天的学习，学到了什么知识）
学习了css+div的命名规范,语义化的必要性和代码的可维护性是我们一直要追求的
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
三、DIV+CSS命名参考表： - TOP
以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：
| CSS样式命名 | 说明 |
|---|---|
| 网页公共命名 | |
| #wrapper | 页面外围控制整体布局宽度 |
| #container或#content | 容器,用于最外层 |
| #layout | 布局 |
| #head, #header | 页头部分 |
| #foot, #footer | 页脚部分 |
| #nav | 主导航 |
| #subnav | 二级导航 |
| #menu | 菜单 |
| #submenu | 子菜单 |
| #sideBar | 侧栏 |
| #sidebar_a, #sidebar_b | 左边栏或右边栏 |
| #main | 页面主体 |
| #tag | 标签 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情连接 |
| #title | 标题 |
| #summary | 摘要 |
| #loginbar | 登录条 |
| #searchInput | 搜索输入框 |
| #hot | 热门热点 |
| #search | 搜索 |
| #search_output | 搜索输出和搜索结果相似 |
| #searchBar | 搜索条 |
| #search_results | 搜索结果 |
| #copyright | 版权信息 |
| #branding | 商标 |
| #logo | 网站LOGO标志 |
| #siteinfo | 网站信息 |
| #siteinfoLegal | 法律声明 |
| #siteinfoCredits | 信誉 |
| #joinus | 加入我们 |
| #partner | 合作伙伴 |
| #service | 服务 |
| #regsiter | 注册 |
| arr/arrow | 箭头 |
| #guild | 指南 |
| #sitemap | 网站地图 |
| #list | 列表 |
| #homepage | 首页 |
| #subpage | 二级页面子页面 |
| #tool, #toolbar | 工具条 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜单 |
| #status | 状态 |
| #scroll | 滚动 |
| .tab | 标签页 |
| .left .right .center | 居左、中、右 |
| .news | 新闻 |
| .download | 下载 |
| .banner | 广告条(顶部广告条) |
| 电子贸易相关 | |
| .products | 产品 |
| .products_prices | 产品价格 |
| .products_description | 产品描述 |
| .products_review | 产品评论 |
| .editor_review | 编辑评论 |
| .news_release | 最新产品 |
| .publisher | 生产商 |
| .screenshot | 缩略图 |
| .faqs | 常见问题 |
| .keyword | 关键词 |
| .blog | 博客 |
| .forum | 论坛 |
| CSS文件命名 | 说明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模块 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主题 |
| columns.css | 专栏 |
| font.css | 文字、字体 |
| forms.css | 表单 |
| mend.css | 补丁 |
| print.css | 打印 |
CSS命名其它说明:
DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。
通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。
DIVCSS5建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。
2.CSS样式文件命名如下
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
html命名规范
default/index.html 首页 404.html 404错误页 print.html 打印页 header.html 页头 footer.html 页脚 sitemap.html 网站地图 passport.html 通行证 rank.html 排行榜 roll.html 滚动新闻 solution.html 解决方案 joinus.html 加入我们 partner.html 合作伙伴 service.html 服务 aboutus.html 关于我们 contact.html 联系我们 company.html 公司介绍 organization.html 组织结构 culture.html 企业文化 strategy.html 发展策略 honor.html 公司荣誉 aptitudes.html 企业资质 events.html 大事记 business.html 商务合作 contract.html 服务条款 privacy.html 隐私声明 CSR.html 企业社会责任 news-开头.html 新闻相关 article-开头.html 资讯相关 picture-开头.html 图片相关 photo-开头.html 相册相关 product-开头.html 产品相关 goods-开头.html 商品相关 system-开头.html 系统相关 tag-开头.html tag相关 brand-开头.html 品牌相关 help-开头.html 帮助相关 member-开头.html 会员相关 search-开头.html 搜索相关
返回列表
评论