使用div元素来包含内容

最新推荐文章于 2023-11-17 02:02:14 发布

Hellowongwong

最新推荐文章于 2023-11-17 02:02:14 发布

阅读量433

点赞数

文章标签：面试

原文链接：http://www.cnblogs.com/haixiaomei/p/5017952.html

版权

在编写样式表时，经常要用到<div>元素来包含内容~~

下面试简单的示例~

moreHigh.htm

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>More High</title>
	<link rel="stylesheet" type="text/css" href="css/moreHigh.css">
</head>
<body>
	<div>
		<p>Here are two paragraph of content.</p>
		<p>In a div containter.</p>
		<h1>more choose sign..</h1>
		<h2>same font-family but different font-size..</h2>
		<h3>use h3 and h4 with the same class</h3>
		<h4>use h4 the same class ...</h4>
	</div>
	<h1>Less choose outside the div...</h1>

	<div class="content">
	<p>up and down to choose</p>
	<h1>and it is clear...</h1>
	<h2>This h2 is in the content not the first h2..</h2>
	<p><span class="LeadIn">this is in the content class of the LeadIn class in the content class<br></span>you're probably feeling pretty good.<br>
	afte all, life in the development world is comfortable....</p>
	</div>
 <p>class 在css中用句点.    ID在css中用#</p>
 <h1>Id 选择符非常适合于一个页面中唯一的、不会重复的元素应用样式</h1>

 <div id="Menu">This time use id to creat the css style..
 <h1>and in this css use #Menu to express..</h1>
 <p>I like it very much</p>
 </div>

<a class="BackwardLink" href="WWW.baidu.com">It is a virtual class</a>
<a class="Link" href="WWW.BaiDu.com">WWW.BaiDu.com</a>
<a href="www.baidu.com">back</a>
<br><br>

<label for="name">Name:</label><input id="name" type="text"><br>
<input type="submit" value="OK">


</body>
</html>

moreHigh.css

@charset "utf-8";

div {
	font-size: 34px;
	background: #B7C6CE;
	border: 0 25px 0;
}
h1 {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 34px;
	color: #5DBA30;
}
h2 {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 20px;
	color: #57B7F4;
}
h3, h4 {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 15px;
	color: #E6E6E6;
}
h3 {
	background: #178716;
}
h4 {
	background: #0C1021;
}
.content p {
	font-size: 20px;
	color: #90C02D;
}
.content h1, h2 {
	background: #F4AC25;
	color: #000000;
}
.centent.LeadIn {
	font-size: 45px;
	color: #0C1021;
}
#Menu {
	font-size: 45px;
	background: #C0ADBB;
	color: #E7FF79;
}
.BackwardLink:link {
	color: red;
}
.BackwardLink:visited {
	color: blue;
}
.Link:link {
	color: green;
}
.Link:visited{
	color: blue;
}
input[type="text"] {
	background-color: silver;
}
label[for="name"] {
	width: 200px;
	color: blue;
	font-size: 24px;
	font-family: Impact, Charcoal, sans-serif;
}

运行效果图：

仅作为基本示例~~

转载于:https://www.cnblogs.com/haixiaomei/p/5017952.html

Hellowongwong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用div元素来包含内容

在编写样式表时，经常要用到<div>元素来包含内容~~下面试简单的示例~moreHigh.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>More High</title> &lt...
复制链接

扫一扫