网页制作技巧：关于CSS样式命名问题

商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current
报头：　　　masthead
摘要, 概要　 summary或general
左边的浮动照图片 photoleft
右边的浮动图片 photoright
标题　　　title
条目底端　　　 entrybottom
更多　　　 extended或.more
容器背景 containerbg
服务　　 service
服务链接　　 servicelink
线　　 line
文本　　 text
右边　　 rightside
版权　　 copyright
新闻　　 news
书皮　　 wrapper
介绍　　　　　　intro-part1
专栏　　 column
路径　　 pathways
片断　　 section
模块　　 module
上导航　　 subnav
2.另外在编辑样式表时可用的注释可这样写：

<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名

主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

4.样式表中的注示
实例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */

实例二

HTML

<!--START: Header -->
<!--END: Header -->
<!--START: Content -->
<!--START: Main Navigation -->
<!--END: Main Navigation -->
<!--START: Search -->
<!--END: Search -->
<!--START: Submenu Navigation -->
<!--END: Submenu Navigation -->
<!--START: Left Column -->
<!--END: Left Column -->
<!--START: Left Column -->
<!--END: Right Column -->
<!--END: Content -->
<!-- START: Crazyegg code -->
<!-- END: Crazyegg code -->
<!--END: Body -->
<!-- 1159340743 -->

CSS

/********************** Site General Tag *************************/
/********************** Navigation Tag *************************/
/********************** Right Content Tag *************************/
/********************** Left Content Tag *************************/
/********************** Comments Tag *************************/
/********************** Header Tag *************************/
/********************** Form Tag *************************/
/********************** MOS Tag *************************/
/********************** Sub Navigation Tag *************************/
/************************ Resources Tag ***************************/
/********************** Sitemap Tag **********************/
/********************** Footer Tag *************************/

实例三（网易）

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus


HTML

<!-- 通栏1 Start -->
<!-- 通栏1 End --><!-- 第1屏 Start-->
<!-- 最新消息 Start -->
<!-- 最新消息 End --><!--产品导航 Start -->
<!-- 产品导航 End--><!-- 搜索 Start -->
<!-- 搜索 End --><!-- 第1屏小Logo Start-->
<!-- 第1屏小Logo End--><!-- 无线推荐 Start -->
<!-- 铃声搜索 -->
<!-- 铃声搜索 End --><!-- 精彩推荐 --><!-- 左边内容 -->
<!-- 右边内容 -->
<!-- 精彩推荐 END-->
<!-- 无线推荐 End -->
略……………………

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有