使用div元素来包含内容
在编写样式表时,经常要用到<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;
}
运行 效果图:
仅作为基本示例~~
使用div元素来包含内容的更多相关文章
- Path,Files巩固,题目:从键盘接收两个文件夹路径,把其中一个文件夹中(包含内容)拷贝到另一个文件夹中
这个题目用传统的File,InputStream可以做,但是如果用Files,Path类做,虽然思路上会困难一些,但是代码简洁了很多,以下是代码: import java.io.IOException ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
- 如何遍历div里面的文本内容,用each方法,
如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...
- Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- css固定div头部 滚动条滚动内容
页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- 使用python实现两个文件夹里文件的对比(包含内容的对比)
#-*-coding:utf-8-*- #=============================================================================== ...
- js修改div标签中的内容
<div id='divId'>初始文字</div> <script> $(document).ready(function(e){ $('#divId').htm ...
- HTML-点击Div读取本地文件内容
<!DOCTYPE html> <html> <div id="container" onclick="choosefile();" ...
随机推荐
- Quartz Cron表达式 在线生成器
Cron Expressions——Cron 表达式 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天(星期)(1~ ...
- 小巧数据库 Apache Derby 使用攻略
1. Derby 介绍 将目光放在小 Derby 的原因是纯绿色.轻巧.内存占用小,分分钟在你机子跑起来,自己做点需要连接数据库的代码实践非常方便. 虽然 Mysql 也可以,多一种选择,不是也挺好么 ...
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- 用html5 canvas和JS写个数独游戏
为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
- 基于Linux平台的libpcap源码分析和优化
目录 1..... libpcap简介... 1 2..... libpcap捕包过程... 2 2.1 数据包基本捕包流程... 2 2.2 libpcap捕包过程... ...
- 运维请注意:”非常危险“的Linux命令大全
Linux命令是一种很有趣且有用的东西,但在你不知道会带来什么后果的时候,它又会显得非常危险.所以,在输入某些命令前,请多多检查再敲回车. rm –rf rm –rf是删除文件夹和里面附带内容的一种最 ...
- SQL 事务回滚
事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务,SQL Server能将逻辑相关的一组操作绑定在一起,以便服 ...
- Day3-python基础3
本次学习内容 元组 字典 集合 字符编码 文件处理 一.元组 定义:与列表类似,定义是使用() 特性: 1.可存放多个值 2.元组里的元素是不可变的 3.有序,下标从0开始从左往右的顺序访问 元组常用 ...
- Java的生日
你知道巴西的税务系统,亚马逊的Kindle阅读器以及韩国的第一大镁板制造厂有什么共同点吗?乍一看上去,这简直就是风马牛不相及,但是这些系统同世界上其它100亿个设备共享一个元素,那就是Java. 19 ...