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

下面试简单的示例~

moreHigh.htm

l

<!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;

}

运行 效果图：

仅作为基本示例~~

使用div元素来包含内容的更多相关文章

  1. Path,Files巩固,题目:从键盘接收两个文件夹路径,把其中一个文件夹中(包含内容)拷贝到另一个文件夹中

    这个题目用传统的File,InputStream可以做,但是如果用Files,Path类做,虽然思路上会困难一些,但是代码简洁了很多,以下是代码: import java.io.IOException ...

  2. CSS如何让DIV的宽度随内容的变化

    [css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...

  3. 如何遍历div里面的文本内容，用each方法，

    如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...

  4. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  5. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  6. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  7. 使用python实现两个文件夹里文件的对比（包含内容的对比）

    #-*-coding:utf-8-*- #=============================================================================== ...

  8. js修改div标签中的内容

    <div id='divId'>初始文字</div> <script> $(document).ready(function(e){ $('#divId').htm ...

  9. HTML-点击Div读取本地文件内容

    <!DOCTYPE html> <html> <div id="container" onclick="choosefile();" ...

随机推荐

  1. RCW 生存期控制

    RCW是.net 对com的包装,比如office就是通过RCW来被.net调用的.可以百度:office pia 了解更多信息. RCW 是一个.net类. 1.关闭线程对rcw的自动清理 Syst ...

  2. java中使用MD5加密技术

    在项目中经常会对一些信息进行加密,现在常用的信息加密技术有:MD5.RSA.DES等,今天主要说一下,md5加密,以及如何在java代码根据自己的业务需求使用md5. MD5简介: MD5即Messa ...

  3. requestAnimationFrame，Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  4. Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 (VERR_UNRESOLVED_ERROR).

    Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 ( ...

  5. windows2003安装证书服务:csp配置不正确、您没有此密钥容器的写访问权限

    1.填写CA名称后在生成密钥时提示:csp配置不正确或安装不完整.      原因:可能的原因为CS服务(Crysptographic Service)没有启动 . ps:该服务依赖RPC服务,但RP ...

  6. 【bzoj4514】 Sdoi2016—数字配对

    http://www.lydsy.com/JudgeOnline/problem.php?id=4514 (题目链接) 题意 n个数,每个数值为a[i],有b[i]个,权值为c[i].若两个数能配对当 ...

  7. Iptables防火墙NAT地址转换与端口转发

    开启系统转发功能: [root@localhost /]# vim /etc/sysctl.conf # Generated by iptables-save v1.4.7 on Thu May 12 ...

  8. sphinx 配置文件全解析

    sphinx的配置文件是在配置的时候最容易出错的了: 我们先要明白几个概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一 ...

  9. Java排序算法——希尔排序

    package sort; //================================================= // File Name : ShellSort //------- ...

  10. debian下NTFS分区无法访问解决

    打开终端 # ntfsfix /dev/sda3 (/dev/sda3是上图中划红框的部分,根据实际情况替换) 如果这个磁盘可以正常挂载,说明问题已经解决了,其他磁盘在重启后也可以挂载了 如果不想重启 ...