web前端-标题和段落-一一网

还原下面图片中的标题和段落：

一、在<div class="header-bottom"></div>中，创建一个<div class="header-bottom-inner"></div>
<–作用是让整体内容居中显示–>

.header-bottom-inner{
		width: 965px;
		height: 282px;
		margin: 0 auto;   <--作用是居中显示-->
		padding-top: 65px;  <--上间距-->
		padding-left: 29px;  <--左间距-->
}
复制代码

二、标题的创建（用 h3 标签）

<div class="header-bottom">
    <div class="header-bottom-inner">
        <h3>Welcome to Eagles Boy Scout Troops!</h3>
    </div>
</div>
复制代码

当容器与其内容之间有间距，给容器添加 内填充padding属性，加完padding后会增加对应元素实际的占位，需要更改width或者height。

padding-top: 65px;  <--加上间距-->
padding-left: 29px;  <--加左间距-->  
复制代码

给h3标签增加样式：

h3{
    color:white;
    font-size: 24px;
    margin-bottom: 19px;  <--设置标题和段落之间的间距-->  
}
复制代码

三、段落的创建（用 p 标签）

<div class="header-bottom">
    <div class="header-bottom-inner">
        <h3>Welcome to Eagles Boy Scout Troops!</h3>
	<p>Eagles is one of <a href="">free web templates</a> created by TemplateMonster.com team.It is optimized for 1280x1024 resoution.This <a href="">Eagles Template</a> goes with two packages-with PSDsource files and without them. PSD files are available for the registered members of Template Monster The basic package(without PSD source)is avaliable for anyone without registration.</p>
    </div>
</div>
复制代码

让p标签中的文字自动换行：

p{
        width: 586px;  <--让p标签自动换行-->
	color:#7f7f7f;  <--更改文字的颜色-->
	line-height: 25px;  <--设置行高-->
}
复制代码

行高属性的作用：让每行文字都有一定的间距，用line-height: 25px;来设置行高。
如何量取行高：第一行文字的最上方到第二行文字的最上方。

屏幕截图 2021-06-04 174744.jpg
四、标题和段落之间的间距的设置
如何量取标题和段落之间的行高：
先把段落的行高模拟出来，再量取标题文字最下方到模拟行高的最上方之间的距离。
<–模拟行高是让文字在量取的行高的最中间。–>

屏幕截图 2021-06-04 175846.jpg
用margin-bottom设置标题与段落之间的距离：

h3{
    color:white;
    font-size: 24px;
    margin-bottom: 19px;  <--设置标题和段落之间的间距-->  
}
复制代码

五、设置段落里面的下划线
用a标签来设置下划线
后代选择器先找容器再找对应元素，容器与对应元素之间有空格。如p a{}

p{
    width: 586px;
    color:#7f7f7f;
    line-height: 25px;
}
p a{
    color:#cb2800;
}
复制代码

<div class="header-bottom">
    <div class="header-bottom-inner">
        <h3>Welcome to Eagles Boy Scout Troops!</h3>
	<p>Eagles is one of <a href="">free web templates</a> created by TemplateMonster.com team.It is optimized for 1280x1024 resoution.This <a href="">Eagles Template</a> goes with two packages-with PSDsource files and without them. PSD files are available for the registered members of Template Monster The basic package(without PSD source)is avaliable for anyone without registration.</p>
    </div>
</div>
复制代码

六、最后的总代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面还原</title>
	<style>
	*{
		margin:0;
		padding:0; 
	}
	.header{
		width: 100%;
		height: 491px;
		background-color: black;
	}
	.header-top{
		width: 100%;
		height: 143px;
		background-color:black; 
	}
	.header-top-inner{
		width: 994px;
		height: 143px;
		margin: 0 auto;
	}
	.logo{
		width: 452px;
		height: 143px;
		background-color:blue;
		float:left;
	}
	h1{
		width: 452px;
		height: 143px;
		background-image: url(images/c_02.png);
	}
	h1 a{
		display:block;
		width: 452px;
		height: 143px;
		text-indent: -2000px;
	}
	.nav{
		width: 480px;
		height: 143px;
		float:right;
	}
	.nav li{
		list-style: none;
		float: left;
		font-size: 12px;
		margin-right: 29px;
		height: 148px;
		line-height: 148px;
		color:#7f7f7f;
	}
	.nav.ab{
		color:#cb2700;
	}
	.header-bottom{
		width: 100%;
		height: 348px;
		background-image: url(images/b_03.png);
	}
	.header-bottom-inner{
		width: 965px;
		height: 282px;
		margin: 0 auto;
		padding-top: 65px;
		padding-left: 29px;
	}
	h3{
		color:white;
		font-size: 24px;
		margin-bottom: 19px;
	}
	p{
		width: 586px;
		color:#7f7f7f;
		line-height: 25px;
	}
	p a{
		color:#cb2800;
	}
	.main{
		width: 100%;
		height: 896px;
		background-image: url(images/a_03.png);
	}
	.footer{
		width: 100%;
		height: 124px;
		background-color:black; 
	}
	</style>
</head>
<body>
	<div class='header'>
		<div class='header-top'>
			<div class='header-top-inner'>
				<div class='logo'>
					<h1>
						<a href="">EaglesTroop</a>
					</h1>
				</div>
				<div class='nav'>
					<ul>
						<li class="ab">About</li>
						<li>Foundation</li>
						<li>Program</li>
						<li>Leaders</li>
						<li>Gallery</li>
						<li>Contacts</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="header-bottom">
			<div class="header-bottom-inner">
				<h3>Welcome to Eagles Boy Scout Troops!</h3>
				<p>Eagles is one of <a href="">free web templates</a> created by TemplateMonster.com team.It is optimized for 1280x1024 resoution.This <a href="">Eagles Template</a> goes with two packages-with PSDsource files and without them. PSD files are available for the registered members of Template Monster The basic package(without PSD source)is avaliable for anyone without registration.</p>
			</div>
		</div>
	</div>
	<div class='main'></div>
	<div class='footer'></div>
</body>
</html>
复制代码

七、最终效果图

屏幕截图 2021-06-04 181345.jpg