HTML CSS JAVASCRIPT 学习周记第三周CSS background-color 实例!这是一个可见标题这是一个隐藏标题

96 阅读 0 评论 64 点赞

我是靠谱客的博主朴素世界，最近开发中收集的这篇文章主要介绍HTML CSS JAVASCRIPT 学习周记第三周CSS background-color 实例!这是一个可见标题这是一个隐藏标题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML CSS JAVASCRIPT 学习周记第三周

CSS的背景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>

</body>
</html>

菜鸟教程(runoob.com)
CSS background-color 实例!

该文本插入在 div 元素中。
该段落有自己的背景颜色。
我们仍然在同一个 div 中。

CSS尺寸

属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

CSS布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>

<div class="center">
  <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>

</body>
</html>

菜鸟教程(runoob.com)
元素居中对齐

水平居中块级元素 (如 div), 可以使用 margin: auto;

注意: 使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。

CSS Display(显示) 与 Visibility（可见性）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
</html>