在编写样式表时,经常要用到<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. PHP中使用CURL请求页面,使用fiddler进行抓包

    在PHP中使用CURL访问页面: <?php $ch = curl_init('http://www.baidu.com'); curl_setopt($ch, CURLOPT_RETURNTR ...

  2. Android开发自学笔记(Android Studio)—4.5 ProgressBar及其子类

    一.前言 ProgressBar本身代表了进度条组件,它还派生出了两个常用的组件:SeekBar和RatingBar,他们的使用方法类似,只是显示界面有一定的区别.我们看一下API文档中的说明: 从图 ...

  3. python基础-函数式编程

    python基础-函数式编程  高阶函数:map , reduce ,filter,sorted 匿名函数:  lambda  1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层 ...

  4. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

  5. bzoj1835[ZJOI2010]base基站选址

    据说正解是什么线段树优化DP,但是作为脑子有坑选手,我们需要5k的做法: 主席树+决策单调性..... F[m][i]表示已经放置了m个基站,第m个基站放置在第i个村庄,第i个村庄及之前的村庄的总最少 ...

  6. html5离线应用和缓存

    1 localstorage和sessionstorage sessionStrage: session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,se ...

  7. pyspider爬豆瓣电影实例

    直接copy官网实例会出现599的错误,百度了很久发现是因为证书的问题 添加这一句忽略证书 validate_cert = False 代码如下: ++++++++++++++++++++++++++ ...

  8. 国内优秀npm镜像推荐及使用

    npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便.下面整理出了一部分国内优秀的npm镜像资源,国内用户可以选 ...

  9. CSS DIV自动适应高度

    当div需要设定自适应高度时,可用到的css属性,min-height:200px;代表的是当div的内容超出了200px时,就会自动适应高度,兼容所有浏览器(IE6除外),如果是IE6则需要设置&q ...

  10. 机器学习笔记----四大降维方法之PCA(内带python及matlab实现)

    大家看了之后,可以点一波关注或者推荐一下,以后我也会尽心尽力地写出好的文章和大家分享. 本文先导:在我们平时看NBA的时候,可能我们只关心球员是否能把球打进,而不太关心这个球的颜色,品牌,只要有3D效 ...