第四次网页前端培训（CSS常用属性和盒子模型）

本文链接：https://blog.csdn.net/qq_59470001/article/details/122833160

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibilin

1.安装编译器

VS Code：Visual Studio Code - Code Editing. Redefined
Sublime Text:Sublime Text - Text Editing, Done Right
HBuilder X:HBuilderX-高效极客技巧

2.基础内容

1）背景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>背景</title> 
<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	background-color:#cccccc;
}
</style>
</head>

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

</body>
</html>

2）文本（修饰、转换、缩进）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

p {text-indent:50px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>

</html>

3）字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>字体</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

</html>

4）对齐方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>对齐方式</title> 
<style>
body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative;
    width: 100%;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="container">
	<div class="right">
	<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
	</div>
</div>
</body>
</html>

5）display属性

hidden

h1.hidden {visibility:hidden;}

none

h1.hidden {display:none;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display块</title> 
<style>
span
{
	display:block;
}
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

</body>
</html>

内联

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display内联</title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示：</p>

<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

</body>
</html>

6）浮动

彼此相邻

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动

.text_line
{
    clear:both;
}

7）盒子模型

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子模型</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>

</body>
</html>

8）网页布局

头部区域

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

菜单导航区域

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3.代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#div1 {
			height: 600px;
			background-color: #EEE8AA;
		}
		
		#div2 {
			/*字体颜色*/
			color:#0000FF;
		    /*对齐方式  left  center  right  */
			text-align: center;
			/*文本修饰*/
			text-decoration: line-through overline underline;
			/*首行缩进*/
			text-indent: 2em;
		}
		
		a {
			/*去除文本效果（去除超链接下划线）*/
			text-decoration: none;
			
		}
		
		#p {
			/*对齐方式  center right left  justify两端对齐*/
			text-align: justify;
		}
		
		h2 {
			/*display属性 none隐藏元素 block显示元素*/
			display: none;
		}
		
		#d1 {
			/*浮动*/
			width: 100px;
			height: 100px;
			background-color: #DA70D6;
			/*左浮动left*/
			float: left;
		}
		
		#d2 {
			/*浮动*/
			width: 100px;
			height: 100px;
			background-color: #86dad5;
			/*左浮动left*/
			float: left;
		}
		
		</style>
	</head>
	<body>
		
		<hr />
		<div id="div2">
			龙族
		</div>
		<a href="">路明非</a>
	    <hr />
		
		<p id="p1">
			路明非，作家江南创作的长篇魔幻小说《龙族》系列及其衍生作品中的男主角。
			卡塞尔学院唯一的S级学生，看似是一个再普通不过的大学生，大学之前的生活平庸至极，
			因为龙血而产生血之哀也无法融入群体，生活平淡无味甚至略带灰色轨迹。路明非很小就
			寄宿在叔叔家里，据说父母远在大洋的彼岸，从事重要的研究，但从未与他见面，路明非
			对于父母的印象也很模糊，被昂热称作是一件能结束龙族历史的工具。
			入学前后在灵视中遇到自称他弟弟的魔鬼路鸣泽，在青铜计划中为了救诺诺而成为路鸣泽
			的客户，可以交换四次生命换得愿望，接连解决了青铜与火之王和大地与山之王与新生白
			王的苏醒事件，因上杉绘梨衣之死而决定变强。在四年级时通过尼伯龙根计划提升能力，
			成为卡塞尔学院学生会主席，为了寻找被人遗忘的楚子航而重返故乡却遭遇奥丁，在挡下
			昆古尼尔时承认自己是世界上最大的怪物，找到楚子航后为了寻找自己的真相而前往黑天
			鹅港。
			
		</p>
		<hr />
        
		<div id="d1"></div>
		<div id="d2"></div>
		
	</body>
</html>