仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1344|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:css定名划定规矩:图片切图转网页的代码标准

[复制链接]
灵魂腐蚀 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:12:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
破洛洛文章简介:网页切图过程当中div+CSS定名划定规矩.
网上收拾的对照好的css定名划定规矩,为css代码的标准化做参考,增添代码的可读性。

id的定名:
(1)页面布局
容器:container页头:header内容:content/container
页面主体:main页尾:footer导航:nav
侧栏:sidebar栏目:column摆布中:leftrightcenter
页面核心把持全体结构宽度:wrapper
(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;}
.bottom{float:bottom;}
(4)题目栏款式,利用"种别+功效"的体例定名,如
.barnews{}
.barproduct{}

注重事项:
1.不利用年夜写情势的类名和id名;

2.尽量利用形貌性的英文单词的组互助为类名和id名;

3.id名及类名的多个英文单词之间利用“_”短横线分开;

4.按地区举行形貌编号例:main01_div01_ul01(能够了解为主体第一地区第一DIV下的第一个UL)

附:一些CSS框架的定名参考
次要的master.css模块module.css基础共用base.css
主题themes.css专栏columns.css打印print.css
笔墨font.css表单forms.css补钉mend.css
结构,版面layout.css
</p>
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
只想知道 该用户已被删除
沙发
发表于 2015-1-17 20:42:40 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
深爱那片海 该用户已被删除
板凳
发表于 2015-1-26 22:45:23 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
山那边是海 该用户已被删除
地板
发表于 2015-2-5 06:00:43 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
柔情似水 该用户已被删除
5#
发表于 2015-2-11 07:38:45 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
简单生活 该用户已被删除
6#
发表于 2015-3-2 00:55:09 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
不帅 该用户已被删除
7#
发表于 2015-3-11 03:58:14 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
飘飘悠悠 该用户已被删除
8#
发表于 2015-3-17 22:09:15 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
莫相离 该用户已被删除
9#
发表于 2015-3-25 08:13:11 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-14 12:48

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表