CSS的Class以致ID接受器

2019-12-31 05:59 来源:未知

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(..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:

TAG标签:
版权声明:本文由澳门mgm官网发布于新闻,转载请注明出处:CSS的Class以致ID接受器