精华内容
下载资源
问答
  • 在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?今天jb51.net再谈id与class的使用原则,把自己平时做站时的经验给大家简要讲述一下,希望能够对您有所帮助。  id...
  • 网页class命名规范

    千次阅读 2015-06-27 17:19:04
    CSS样式命名整理 页面结构容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center导航导航:nav ...

    CSS样式命名整理

    页面结构

    容器: container/wrap

    整体宽度:wrapper

    页头:header

    内容:content

    页面主体:main

    页尾:footer

    导航:nav

    侧栏:sidebar

    栏目:column

    中间内容:center

    导航

    导航:nav

    导航:mainnav/globalnav

    子导航:subnav

    顶导航:topnav

    边导航:sidebar

    左导航:leftsidebar

    右导航:rightsidebar

    边导航图标:sidebarIcon

    菜单:menu

    子菜单:submenu

    标题: title

    功能

    标志:logo

    登陆:login

    登录条:loginbar

    注册:regsiter

    产品:products

    产品价格:productsPrices

    产品评论:productsReview

    编辑评论:editor-review

    最新产品:news-release

    广告/标语:banner

    摘要:summary

    生产商:publisher

    缩略图:screenshot

    常见问题:faqs

    关键词:keyword

    博客:blog

    论坛:forum

    搜索:search

    搜索输入框:search-input

    搜索输出:search-output

    搜索结果:search-results

    加入我们:joinus

    状态:status

    按钮:btn

    滚动:scroll

    标签页:tab

    文章列表:list

    提示信息:msg/message

    当前的: current

    小技巧:tips

    皮肤:skin

    充值:pay

    活动:activities

    推广:promotion

    公告:announcement

    排行:ranking

    公司简介:companyProfile

    公司设备:equipment

    公司荣誉:glories

    企业文化:culture

    企业规模:scaleScale

    营销网络:salesNetwork

    组织机构:organization

    技术力量:technology

    分支机构:branches

    企业资质:EnterpriseQualification

    公司实力:strengthStrength

    经营理念:operationPrinciple

    经理致辞:manager_oration

    发展历程:developmentHistory

    工程案例:EngineeringProjects

    分类浏览:browseByCategory

    应用领域:applicationFields

    人力资源:humanResourceHr

    领导致辞: leader_oration

    客户留言:customerMessage

    客户服务:customerService

    您的要求:yourRequirements

    销售信息:salesInformation

    招商:EnterpriseEstablishing

    教育培训:EducationTraining

    在线交流:onlineCommunication

    质量认证:qualityCertification

    合作加盟:joinInCooperation

    产品描述:productsDescription

    业务范围:businessScope

    产品销售:salesSales

    联系我们:contactUs

    信息发布:Information

    返回首页:homepage

    产品定购:order

    电子商务:E-business

    版权所有:copy Right

    友情连结:hot Link

    行业新闻:tradeNews

    行业动态:trends

    邮编:postalCodeZipcode

    新闻动态:newsTrends

    公司名称:companyName

    销售热线:salesHot_Line

    联系人:contactPerson

    建设中:InConstruction

    证书:certificate

    地址:ADD/Add

    电话:TEL/Tel

    传真:FAX/Fax

    产品名称:productName

    产品说明:description

    价格:price

    品牌:brand

    规格:specification

    尺寸:size

    生产厂家:manufacuturer

    型号:model

    产品标号:Item No

    技术指标:techniqueData

    产品描述:description

    产地:productionPlace

    用途:application

    论坛:Forum

    在线订购:on_lineOrder

    招标:bidInviting

    综述:general

    业绩:achievements

    大事:greatEvent

    动态:trends

    服务:service

    投资:Investment

    行业:Industry

    规划:programming

    环境:environment

    发送:delivery

    提交:submit

    重写:reset

    社区:community

    业务:business

    在线调查:onlineInquiry

    下载中心:download

    意见反馈:feedback

    常见问题:FAQ

    中心概况:generalProfile

    游乐园:amusementPark

    专题报道:specialReport

    图标: icon

    注释:note

    指南:guild

    服务:service

    热点:hot

    新闻:news

    下载:download

    投票:vote

    商 标:label/branding

    当前位置:breadcrumb/loc

    购物车:shop

    标签:tag

    信誉:siteinfo-credits

    网站信息:siteinfo

    法律声明:siteinfo-legal

    合作伙伴:partner

    友情链接:friendlink

    版权:copyright


    展开全文
  • CLASS和ID的区别 在样式表定义一个样式的时候,可以定义id也可以定义class。 1、在CSS文件里书写时,ID加前缀“#”;CLASS用“.” 2、id一个页面只可以使用一次;class可以多次引用。 3、ID是一个标签,用于区分不同...

       CLASS和ID的区别

      在样式表定义一个样式的时候,可以定义id也可以定义class。


      1、在CSS文件里书写时,ID加前缀“#”;CLASS用“.”
      2、id一个页面只可以使用一次;class可以多次引用。
      3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;
          CLASS是一个样式,可以套在任何结构和内容上,就象一件衣服;
      4、从概念上说就是不一样的:
          id是先找到结构/内容,再给它定义样式;
          class是先定义好一种样式,再套给多个结构/内容。

      目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。

    展开全文
  • webdesign-class-php-001 注册学生使用php进行网页设计
  • 飞利浦 Class 2 改进 Stylus 作为预处理器的使用,响应式网页设计
  • XHTML CSS网页布局中ID与class的理解应用: 要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是,凡事都应该带着OO的思想来看问题,也勉强可以凑数拉。其实,早在零几年就有人提出了OO-style,不过已找不到。...
  • 今天有点闲,想向大家请教一下id和class的使用。按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。...

    今天有点闲,想向大家请教一下id和class的使用。

    按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。

    但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单:

    那些只会在页面中出现一次的元素应该用id来表示。比如页头(header) 页尾(footer),导航菜单(main-menu)等。但是真的这么简单么?

    我先举几个例子来说明我所遇到的尴尬:

    1. 大多数的页面都是两栏布局的:一个主栏(main column),一个侧栏(side column)。就像这样:

      OK,我们会用两个div来表示它们。问题来了,应该使用id还是class?按照常规的理解,一个页面只会有一个主栏,一个侧栏咯,所以当然应该用id。文档写成这:

      <div id="main-col"></div>
      <div id="side-col"></div>

      #main-col { float: left; width: 700px;}
      #side-col { float: right; width: 200px; }

      也是很赏心悦目的,不是么?所以我决定用id。

      于是页面做好了,网站做好了,上线了,运营了,访问量大了。这时候公司决定,嗯,我们应该在一些页面中加几个通栏广告。“通栏”哦!这就意味着它必 须横跨主栏和侧栏,把它们俩拦腰截断。于是我们重新“发明”一个样式:banner,让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图:

      所以HTML应该是这样:

      <div id="main-col"></div>
      <div id="side-col"></div>

      <div class="banner></div>

      <div id="main-col"></div>
      <div id="side-col"></div>

      问题轻松解决(多亏偶经验丰富啊,表扬一下自己,咔咔。)。唯独只有一个问题:main-col和side-col这两个id重复了。这个问题其实也不麻烦,把它们全部改成class不就好啦(甚至,不去改它,我就不信浏览器会给我报错,哼)。

      1. 但是,我这不是自己给了自己一个嘴巴么?当初还信誓旦旦的说,main-col只会出现一次,所以用id……。所以教训就是,main-col和 side-col,或是left-col, right-col ,extra-col, xxx-col,这些用来分栏布局的样式,都给我用class。嗯,记在本本上。
      2. 设计页面的时候,在页头和主菜单之间放了一个搜索框(search-box)。既然我们的页头(header),导航栏(main -menu),登录框(login-box)都用的是id,和它们在一起的search-box也应该用id咯?呃,小心啊,老板很可能会让你在页尾也放 一个搜索框的,你用id你就死定了。所以search-box应该用class。不过这样怪怪的,凭什么login-box用id,而search- box却用class呢?
      3. 慢着,你以为导航栏就可以保证唯一了么?我来讲一个例子:

        喏,老板要来一点不同的,让把导航栏放在左侧。这个没问题,用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿,他说,嗯,为了可用性(咳咳。。),我们需要把菜单分成两部分。就像:

        呃。。好说,分成两个ul就好了。但是,它们的id都叫main-menu么??哎,老问题又来了。

        例子举了这么多,你可看得出,仅仅因为“只出现一次的元素”这个理由,就决定给它用id而不是class,这是绝对行不通的。因为你几乎很难判断某个元素是不是一定只出现一次。但是,这样的分析会得出一个可怕的结论:所有的样式都应该用class。

        对此,我其实并不怀疑。事实上,以我的看法,95%以上的样式,都应该通过class而不是id来设置。或者说,除非是一些很细微很特殊的位置,可 以使用id来设置样式,其他的样式都应该用class来设置。这个结论似乎和WaSP的圣经书《网页重构》里讲的矛盾,因为他老人家是专门批评了所谓的 classitis(class麻疹,见该书148页)。但是很抱歉,铁证如山的事实底下,我不得不否定他那句“热爱id”(见该书150页)。

        当然,我很希望我是错的,毕竟背叛经典是一件很让人不舒服的事情。所以欢迎大家来讨论,指出我的错误。更重要的是,对于我举出的哪些尴尬的例子给出一个更好的解决方案。

        总结:尽量用class而不是id来控制样式的理由:

      4. 可维护性。你不能保证你用id的元素只在页面中出现一次,即使在网页设计初稿中确实是只有一次。
      5. id可能被Ajax程序员使用。如果页面要用ajax的话,某些元素的id值应该由Ajax程序员而不是页面设计师来决定,至少应该是双方共同商定。那么,你怎么能放心你的id值既用来设置CSS样式,又用来供JS调用呢?
      6. 同一个元素可以定义多个class,却只能有一个id。你明白我的意思了吧?
      7. id的优先级高于class。所以如果对于某个特定的元素,我们想赋予特定的样式,可以给它加id。但是反过来,如果我们一开始就是用id,你去加class是没有效果的啦。

      最后,关于Zeldman老先生讲的classitis。我的理解是不要为了某个特定的样式置顶一个特定的class。尽量创造一些能够重复使用的 class。而id由于不能重复,反而才容易造成iditis呢。到时候我们的网站会出现search-box-top, search-box-bottom,甚至search-box-under-the-header-but-above-the-main-menu, 哈哈。更可怕的是,它们的属性定义其实都一模一样。

                                                                                                                                                             出处: 蓝色理想
                                                                                                                                                             责任编辑: moby
    展开全文
  • 校园班级网页设计制作网页作品介绍作品首页截图网页代码预览作品来源 网页作品介绍 班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部...

    网页作品介绍

    班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度为学生网页作业标准的1024PX,使用CSS制作了导航鼠标经过和页面选中效果,有表单页面。

    作品首页截图

    校园班级网页设计

    网页代码预览

    说明:以下为首页部分代码示例

    <body>
    <div class="top">
    	<div class="head">
    		<div class="logo"><img src="images/logo.png" height="60px"></div>
    		<div class="menu">
    			<ul>
    				<li><a href="">班级首页</a></li>
    				<li><a href="">班级通知</a></li>
    				<li><a href="">班级活动</a></li>
    				<li><a href="">失物招领</a></li>
    
    			</ul>
    		</div>
    	</div>
    </div>
    <div class="banner"><img src="images/banner.jpg" width="100%"></div>
    </body>
    

    作品来源

    www.stu-works.com/html/xiaoyuan/282.html

    展开全文
  • 结合了富有新的语义化标记的HTML5,CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量,我们的控制权将趋于无穷大! 即使没有那些高级的CSS选择器...
  • 网页布局中CSS的Class灵活应用来源:未知相信学过CSS的朋友都知道CLASS这个东西,不知道你平时制作网页时是怎么应用的,我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧我把class分为2种,布局class,...
  • 网页布局id vs class

    2007-09-24 20:00:00
    无论是class还是id,都是XHTML所有对象都支持的一种公共属性,并且也是其中的核心属性。1. 什么是id 1.1 id是XHTML元素的一个属性,用于标示元素名称。除了可以定义样式,也方便交互,比如JS控制. 但id名称在使用...
  • 大学生网页设计个人主页网站模板采用DIV CSS布局制作,网页作品共4个页面,包括个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,...
  • 该文档主要是为刚刚接触网页设计者编写的 采用软件自带的功能 采用CSS <td height="28"><font color="#0000FF">住址:, Times New Roman, Times, serif">16#506</font> 电话:, Times New Roman, Times, serif...
  • 网页设计期末大作业成品使用DIV CSS布局制作,题材为奥迪概念车。顶部LOGO区及首页的汽车区使用 CSS3动画属性 制作了鼠标经过动画特效(鼠标经过图片缓慢放大,鼠标离开缓慢缩小)。同时顶部LOGO区域使用 CSS3动画...
  • class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种“宏”的使用方式 使用CSS css文件 html文件 import CSS 同时import 两个CSS文件 CSS文件 html文件 同时...
  • HTML静态华为网站设计作品模板网页作品介绍网页效果预览网页文件展示网页代码展示网页作品下载 网页作品介绍 本HTML静态网页作品采用DW制作,主题为华为热门产品,共10个页面,首页1页,二级图文页面1页,二级产品1...
  • 大学生个人主页网页设计制作作品介绍截图演示代码演示作品来源 作品介绍 此作品为学生个人主页网页设计题材,代码为简单学生水平 DIV CSS布局制作,整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页...
  • 学生简单静态个人主页网页设计作品作品介绍知识点应用作品简介绍网页演示网页首页演示源码文件展示网页代码预览作品修改作品下载 作品介绍 知识点应用 背景音乐、背景图片、留言表单、鼠标经过 作品简介绍 学生个人...
  • 海贼王动漫网页制作学生作品为航海王漫画介绍主题,网页设计使用DIV CSS布局制作,三层结构共16个页面:网站首页、故事介绍、主要角色、创作背景、账户注册、会员登录(角色下设10个三级角色介绍页面)。 网页整体...
  • 制作网页

    2019-09-23 15:06:38
    1.先创建一个html的网页,用div来完成网页的框架 代码如下: 首页 登入 注册 购物车 <div style="background-color: black;height: 50px;">...
  • 有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写“最近”的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质... 以前喜欢用class-name写
  • 学生在线网课网页设计网页知识点网页作品介绍网页代码展示代码展示登录页面部分代码展示头部区域代码演示小导航代码演示网页效果预览首页效果表单页面详情页面作品地址 网页知识点 DIV CSS布局、CSS3效果(阴影、...
  • 郑州旅游网页设计制作知识点应用作品介绍网页首页效果网页文件首页部分HTML代码作品源地址 知识点应用 JavaScript弹窗、表单、网页背景图、鼠标经过动态菜单、DIV CSS布局 作品介绍 作业成品为我的家乡类网页制作,...
  • MakeCAB是微软提供的制作CAB的文件,详细的MakeCAB介绍请参考微软MSDN。 正好这几天做的一个WEB ActiveX SIP Phone需要打包成.CAB文件,于是稍微研究了一下MakeCAB的用法。 直接运行MakeCAB,系统给出命令用法...
  • 网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。  ◦引入所需库  ◦选项卡原理  ◦业务核心  ◦完整小...
  • 网页设计课程设计报告

    万次阅读 多人点赞 2019-03-01 21:45:11
    学号 课 程 设 计 课程名称 网页设计 题 目 鑫晨之家特效网站设计 专 业 软件工程 ...
  • 适合dreamweaver学生网页作业制作个人主页博客使用,需要修改个人信息及相关图片。 网页演示 以下为网页作品首页截图 代码演示 代码说明:为保障作品的原创性,以下仅展示首页部分代码供参考 <div class=...
  • 大学生校园篮球静态HTML网页设计作品共5页,采用DIV CSS布局制作,内容包括:校园篮球、篮球技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含...
  • 网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type=text/css>UL.myul1 LI{background-color: [removed]this.sourceIndex%2==0?’#9FB7F6′:’#B6C8F8′);}</style>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 147,585
精华内容 59,034
关键字:

网页设计class