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

下面试简单的示例~

moreHigh.htm

l

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>More High</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/moreHigh.css">
  7. </head>
  8. <body>
  9. 	<div>
  10. 		<p>Here are two paragraph of content.</p>
  11. 		<p>In a div containter.</p>
  12. 		<h1>more choose sign..</h1>
  13. 		<h2>same font-family but different font-size..</h2>
  14. 		<h3>use h3 and h4 with the same class</h3>
  15. 		<h4>use h4 the same class ...</h4>
  16. 	</div>
  17. 	<h1>Less choose outside the div...</h1>
  18.  
  19. 	<div class="content">
  20. 	<p>up and down to choose</p>
  21. 	<h1>and it is clear...</h1>
  22. 	<h2>This h2 is in the content not the first h2..</h2>
  23. 	<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>
  24. 	afte all, life in the development world is comfortable....</p>
  25. 	</div>
  26.  <p>class 在css中用句点.    ID在css中用#</p>
  27.  <h1>Id 选择符非常适合于一个页面中唯一的、不会重复的元素应用样式</h1>
  28.  
  29.  <div id="Menu">This time use id to creat the css style..
  30.  <h1>and in this css use #Menu to express..</h1>
  31.  <p>I like it very much</p>
  32.  </div>
  33.  
  34. <a class="BackwardLink" href="WWW.baidu.com">It is a virtual class</a>
  35. <a class="Link" href="WWW.BaiDu.com">WWW.BaiDu.com</a>
  36. <a href="www.baidu.com">back</a>
  37. <br><br>
  38.  
  39. <label for="name">Name:</label><input id="name" type="text"><br>
  40. <input type="submit" value="OK">
  41.  
  42. </body>
  43. </html>

moreHigh.css

  1. @charset "utf-8";
  2.  
  3. div {
  4. 	font-size: 34px;
  5. 	background: #B7C6CE;
  6. 	border: 0 25px 0;
  7. }
  8. h1 {
  9. 	font-family: Impact, Charcoal, sans-serif;
  10. 	font-size: 34px;
  11. 	color: #5DBA30;
  12. }
  13. h2 {
  14. 	font-family: Impact, Charcoal, sans-serif;
  15. 	font-size: 20px;
  16. 	color: #57B7F4;
  17. }
  18. h3, h4 {
  19. 	font-family: Impact, Charcoal, sans-serif;
  20. 	font-size: 15px;
  21. 	color: #E6E6E6;
  22. }
  23. h3 {
  24. 	background: #178716;
  25. }
  26. h4 {
  27. 	background: #0C1021;
  28. }
  29. .content p {
  30. 	font-size: 20px;
  31. 	color: #90C02D;
  32. }
  33. .content h1, h2 {
  34. 	background: #F4AC25;
  35. 	color: #000000;
  36. }
  37. .centent.LeadIn {
  38. 	font-size: 45px;
  39. 	color: #0C1021;
  40. }
  41. #Menu {
  42. 	font-size: 45px;
  43. 	background: #C0ADBB;
  44. 	color: #E7FF79;
  45. }
  46. .BackwardLink:link {
  47. 	color: red;
  48. }
  49. .BackwardLink:visited {
  50. 	color: blue;
  51. }
  52. .Link:link {
  53. 	color: green;
  54. }
  55. .Link:visited{
  56. 	color: blue;
  57. }
  58. input[type="text"] {
  59. 	background-color: silver;
  60. }
  61. label[for="name"] {
  62. 	width: 200px;
  63. 	color: blue;
  64. 	font-size: 24px;
  65. 	font-family: Impact, Charcoal, sans-serif;
  66. }

运行 效果图：

仅作为基本示例~~

使用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. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  2. Spring Boot 添加Shiro支持

    前言: Shiro是一个权限.会话管理的开源Java安全框架:Spring Boot集成Shiro后可以方便的使用Session: 工程概述: (工程结构图) 一.建立Spring Boot工程 参照 ...

  3. UI: 概述, 启动屏幕, 屏幕方向

    UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" x ...

  4. js中let和var定义变量的区别

    let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781671 声明后未赋值,表现相同 (fun ...

  5. 8.Android 系统状态栏沉浸式/透明化解决方案

    转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来 ...

  6. Linux ext3 ext4 区别

    Linux kernel 自 2.6.28 开始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,修改了 Ext3 中部分重要的数据结构,而不仅仅像 Ext3 对 Ext2 那样,只 ...

  7. 第一次作业——subway

    作业源程序代码:https://github.com/R-81/subway 作业程序使用说明:通过输入命令参数求解路线(仅支持-b,-c),根据参数得出路线后,程序不会结束,此时可输入地铁路线名(例 ...

  8. 脑筋急转弯——Google 面试

    1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...

  9. 简单的方向传感器SimpleOrientationSensor

    SimpleOrientationSensor是一个简单的方向传感器.能够识别手机如下表的6种方向信息: SimpleOrientation枚举变量 方向 NotRotated 设备未旋转 Rotat ...

  10. CentOS6.3 编译安装LAMP(4)：编译安装 PHP5.3.27

    所需源码包: /usr/local/src/PHP-5.3.27/libmcrypt-2.5.8.tar.gz /usr/local/src/PHP-5.3.27/mhash-0.9.9.9.tar. ...