9、CSS的Class以及ID选择器

id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。
　　同样，你可以在html选择器后面使用一个选择器来指定特殊HTML元素，比如p.jam{值}将作用到带有'jam'class属性的段落。
10、这个都差点忘了。页面布局
clear float disply等这几个，关于网站用div+css主要把这个用好。
总结：基本上都差不多，css的概念都有了一个了解，必定我们是做web开发，但是css,html前端的我们不能不知道，要知道个大概，查资料也知道怎么查就行了。所以我接下来想做一个demo来演示一下。今晚发上，希望大家支持一下黑侠客，我也是一只很老的菜鸟，现在才踏进来这个web之间，希望大家多多帮助，谢～
11、演练html+css

由于我的目的是学习web开发，所以这个html＋css不要求太精，了解一下大概，在以后我拿到一个实例可以改就行了，这就是我的目的。不知道大家是什么要求。
接下来我就改一下百度的页面，因为本人比较懒，比较大的页面可能没有耐心做下去，就模仿一下百度吧，也不知道这两天学的行不行.

首先看到这个布面，我先分析结构，用html把结构弄出来，接下来再看表现方式用css定义。

代码如下 复制代码
<html>
<head>
<title>html+css baidu.com demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<body>
<div id="box">
<div id="login"><a href="#">登录</a></div>
<div id="log"></div>
<div id="txt">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">网页</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
<div id="ipt">(www.111cn.net)
<input type="text" />
<input type="button" value="百度一下" id="btn" />
</div>
<div id="help">
<ul>
<li><a href="#">帮助</a></li>
<li><a href="#">搜索</a></li>
</ul>
</div>
<div id="link">
<ul>
<li><a href="#">企业推广</a></li>
<li><a href="#">搜索风云榜</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">About Baidu</a></li>
</ul>
</div>
<div id="copy">©2008 Baidu <a href="#">使用百度前必读 京ICP证030173号</a></div>
</div>
</body>
</html>

body{
width: 98%;
margin: 0px auto;
}
#login{
float: right;
font-size: 12px;
padding-top: 7px;
}
#log{
background-image:url(../images/log.gif);
height:129px;
padding:0;
background-repeat: no-repeat;
background-position: center;
}
#txt ul{
float: left;
}
input #btn{
color: Blue;
}
#nav{
margin: 0px auto;
height: 200px;
}
#link ul{
margin: 0px auto;
color: Black;
float: left;
}
#copy{
clear: both;
text-align: center;
color: #7777cc;
font-size: 12px;
}
#copy a{
color: #7777cc;
}

from:http://www.111cn.net/cssdiv/56/f4164fcc3cd74141c519e1e5313289c4.htm

CSS的Class以及ID选择器的更多相关文章

  1. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  2. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  3. CSS ID选择器(三)

    一.ID选择器 ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称. 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一 ...

  4. css笔记10：多个id选择器/类选择器包含相同部分问题的探讨

    有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset &qu ...

  5. css笔记08：id选择器之父子选择器

    1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. Css基础-id选择器

    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...

  7. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  8. CSS——类和ID选择器的区别

    1.相同点,可以应用在任何元素. 2.不同点,ID选择器只能在元素里只能分别引用,不能同时引用. 如: <style type="text/css">.stress{( ...

  9. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

随机推荐

  1. MVC 之 缓存机制（一）

    一.概述 缓存是将信息(数据或页面)放在内存中以避免频繁的数据库存储或执行整个页面的生命周期,直到缓存的信息过期或依赖变更才再次从数据库中读取数据或重新执行页面的生命周期.在系统优化过程中,缓存是比较 ...

  2. 微信小程序 - 图片懒加载

    wxml <!-- 数据源 --> <view class='item-{{index}}' wx:for="{{lazyData}}" wx:key=" ...

  3. eclipse 运行简单JAVA程序事例

    开发JAVA已经有一段时间了,不过要运行JAVA程序,还是在命令行敲命令,很不方便,很麻烦,突然想到eclipse应该也有这个功能,于是百度了一下,将步骤晒出来,供大家参考. 1.创建JAVA工程 单 ...

  4. requestsManager:didFailRequest:withError: Error Domain=com.albertodebortoli.goldraccoon Code=-1000 "(null)" UserInfo={message=Unknown error!}

    场景:最近IOS开发中需要用到FTP上传,最初是用GoldRaccoon 看后台FTPServer日志,一直都是disconnected.自己对FTP也是懂些皮毛,所以只剩下一坑的无奈.FTP服务器是 ...

  5. Web网站错误提示页面和默认訪问页面设置

    1.asp.net 定制简单的错误处理页面 通常web应用程序在公布后.为了给用户一个友好界面和使用体验,都会在发生错误时跳转至一个自己定义的错误页面,而不是asp.net向用户暴露出来的具体的异常列 ...

  6. linux-env命令解析

    Linux的env命令查看当前用户的环境信息 [root@linux ~]# envHOSTNAME=linux.dmtsai.tw   <== 这部主机的主机名称SHELL=/bin/bash ...

  7. MySQL Replication主从复制环境下修改主库IP

    因为调整服务器子网, 数据库服务器的IP地址需要修改. 这个过程中, 需要确保的就是从库在断开主库后, 能从正确的位置再次启动. 具体的操作步骤如下 1) 需要获取的前提信息: 主库的新IP, 这在启 ...

  8. iOS12 Network框架 自签名证书认证

    发布时间:2018-09-21   技术:iOS12 xcode10 golang1.11   概述 iOS12 苹果发布了新的网络框架Network,可以更方便地操作底层网络通信了.使用TLS也很方 ...

  9. Android Studio 错误: 非法字符: &#39;\ufeff&#39; 解决方式|错误: 须要class, interface或enum

    在导入eclipse项目到Android Studio出现这种错误, 非法字符: '\ufeff' 解决方式|错误: 须要class, interface或enum.查阅后了解到Eclipse能够智能 ...

  10. 不能添加重复的Contact到RecipientBox中

    不能添加重复的Contact到RecipientBox中 在开始添加的操作时,判断是否已在RecipientBox中,如果已经在返回值为null的TextView. 再根据TextView判断是否nu ...