初学html日记——第四阶段

HTML与CSS实战

最新推荐文章于 2025-09-07 23:02:49 发布

原创最新推荐文章于 2025-09-07 23:02:49 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一个使用HTML和CSS创建的静态网页案例，包括导航栏、横幅区域、内容区块及页脚的设计。通过实例展示了如何运用HTML进行网页结构布局，并利用CSS实现样式美化。

写的有不周到的地方，还请评论修改，谢谢！

经过几天的学习，总算是掌握了html及css的皮毛，自己也动手写了几个静态网页，从简单到稍微复杂一点，对网页的编程也算有了初步的认识，有了一点收获。斗胆再贴一下我第四阶段的学习内容吧~~~~~

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link href="css/css0.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<title>作业四</title>
	</head>

	<body>
		<div class="main-wrapper">
			<header>
				<nav>
					<li class="logo">
						<a href="#">宋小墙</a>
					</li>
					<ul>
						<li>
							<a href="#" class="active">首页</a>
						</li>
						<li>
							<a href="#">连接二</a>
						</li>
						<li>
							<a href="#">连接三</a>
						</li>
						<li>
							<a href="#">连接四</a>
						</li>
					</ul>
				</nav>
				<div id="banner">
					<div class="inner">
						<div style="height: 1px; width:40%;background:whitesmoke;margin:0 100px 8px 60px;"></div>
						<h1>宋小墙</h1>
						<div style="height: 1px; width:40%;background:whitesmoke;margin:8px 60px 0 120px;"></div>
						<p style="margin:20px;line-height: 30px;">I Love You</p>
						<button>了解我</button>
						<div class="more"><a href="#">更多</a></div>
					</div>
					<div class="arrow-down"><i class="fa fa-arrow-down"></i></div>
				</div>
			</header>
			<!--
                         	作者：1115178050@qq.com
                         	时间：2018-08-15
                         	描述：页头
                         -->
			<div>
				<section class="green-section">
					<div class="wrapper">
						<div>
							<h2 style="margin: 0;">一个标题</h2>
							<div class="hr"></div>
							<p style="font-size:16px;">It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
						</div>
						<div class="icon-group">
							<span class="icon"><div class="abc"><i class="fa fa-diamond rotate"></i></div></span>
							<span class="icon"><div class="abc"><i class="fa fa-heart-o rotate"></i></div></span>
							<span class="icon"><div class="abc"><i class="fa fa-code rotate"></i></div></span>
						</div>
					</div>
				</section>
				<section class="gary-section">
					<div class="article-preview">
						<div class="picture-section">
							<img src="img/66.jpg" alt="找不到图片">
						</div>
						<div class="text-section">
							<h2>一个标题</h2>
							<div class="sub-heading">副标题</div>
							<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
						</div>
					</div>
					<div class="article-preview">
						<div class="text-section">
							<h2>一个标题</h2>
							<div class="sub-heading">副标题</div>
							<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
						</div>
						<div class="picture-section">
							<img src="img/67.jpg" alt="找不到图片">
						</div>
					</div>
					<div class="article-preview">
						<div class="picture-section">
							<img src="img/68.jpg" alt="找不到图片">
						</div>
						<div class="text-section">
							<h2>一个标题</h2>
							<div class="sub-heading">副标题</div>
							<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
						</div>
					</div>
				</section>
				<section class="purple-section">
					<div class="wrapper">
						<div class="head-wrapper">
							<h2>一个标题</h2>
							<div class="hr"></div>
							<div class="sub-heading">
								<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
							</div>
							<div class="card-group  clear-fix">
								<div class="card">
									<h3>标题三</h3>
									<p>then places everything up to the next heading into that section</p>
								</div>
								<div class="card">
									<h3>标题三</h3>
									<p>It turns the heading into a section title</p>
								</div>
								<div class="card">
									<h3>标题三</h3>
									<p>then places everything up to the next heading into that section</p>
								</div>
								<div class="card">
									<h3>标题三</h3>
									<p>It turns the heading into a section title</p>
								</div>
								<div class="card">
									<h3>标题三</h3>
									<p>then places everything up to the next heading into that section</p>
								</div>
								<div class="card">
									<h3>标题三</h3>
									<p>It turns the heading into a section title</p>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
			<!--
                   	作者：1115178050@qq.com
                   	时间：2018-08-15
                   	描述：内容
                  -->

			<footer>
				<div class="img-footer"></div>
				<div class="img-text">
					<ul class="share-group">
						<li><a href="#"><i class="fa fa-photo scale"></i></a></li>
						<li><a href="#"><i class="fa fa-commenting-o scale"></i></a></li>
						<li><a href="#"><i class="fa fa-envelope scale"></i></a></li>
						<li><a href="#"><i class="fa fa-briefcase scale"></i></a></li>
						<li><a href="#"><i class="fa fa-paper-plane scale"></i></a></li>
					</ul>
					<div class="copy">
						&copy 宋小墙
					</div>
				</div>
			</footer>
			<!--
                         	作者：1115178050@qq.com
                         	时间：2018-08-15
                         	描述：页脚
                         -->

		</div>
	</body>

</html>

.clear-fix:after{
	content:'';
	display:block;
	clear:both;
}

a{
	text-decoration: none;
	color:whitesmoke;
}

ul{
	margin:0;
}

nav{
	background:rgba(0,0,0,0.1);
	height:50px;
}

header div{
	background:transparent;
	height:680px;
}

nav ul{
	list-style: none;
	margin:0 ;
	float:right;
}

nav ul li{
	margin-top:-8px;
}

nav ul li,nav .logo{
	display:inline-block;
	line-height: 50px;
	margin-right:20px;
}

nav  ul li a{
	line-height:inherit;
	text-decoration:none;
	display:inline-block;
	height:inherit;
	color:white;
}

nav ul li.logo {
	float:left;
	padding:10px;
}

#banner{
	float:inherit;
	position: relative;
}

#banner .inner{
	max-width: 300px;
	text-align:center;	
	margin:0 auto;
	position: relative;
	top:140px;
	height:320px;
	color:whitesmoke;
}

#banner .inner .line{
	width:30%;
	height:1px;
	background: #000;
}

#banner .inner h1{
	margin:0;
	letter-spacing:2px;
}

button{
	border:none;
	background: #9796a5;
	color:#333;
	padding:7px 10px;
}

#banner  button{
	padding:12px 30px;
}

#banner .inner .more{
	margin-top:280px;
	height:50px;
	letter-spacing: 1.5px;
}

.arrow-down{
	color:gainsboro;
	text-align: center;
	width:30px;
	height:50px;
	transform: scale(1.5,1.8);
	position:absolute;
	left:735px;
	bottom:20px;
	padding-top:60px;
}

.logo{
	font-size:20px;
	font-weight: 700;
	letter-spacing: 5px;
}

.logo a{color:white;}

.hr{
	width:100%;
	height:2px;
	background:#096 ;
	margin:20px auto;
}

header{
	background: rgba(0,0,0,0.1);
}

.green-section{
	text-align: center;
	background: #399;
	color:white;
	padding:160px;
}

.green-section .hr{
	width:60%;
	height:2px;
	background: #6cc;
}

.rotate{
	transform: rotate(320deg);
	transform: scale(2,2);
	text-align: center;
}

.abc{
	transform: rotate(-45deg);
	margin:12px auto;
}

.green-section .icon-group .icon{
	display:inline-block;
	width:50px;
	height:50px;
	background: #066;
	transform: rotate(45deg);
	margin:20px;
}

.green-section .icon-group{
	margin:25px;
}

.wrapper{
	max-width: 970px;
	margin:0 auto;
}

.gary-section{
	background:#322d2b;
	color:whitesmoke;
	font-size:0;
}

.gary-section .picture-section{
	width:45%;
}

.picture-section img{
	height:400px;
	width:100%;
}

.gary-section .text-section{
	width:55%;
}

.article-preview > div{
	float:left;
}

.article-preview:after{
	content:'';
	display:block;
	clear:both;
}

.article-preview:nth-child(odd){
	background-color: rgba(200,200,200,0.1);
}

.text-section{
	position:relative;
	top:50px;
	left:60px;
}

.text-section h2{
	font-size:22px;
	margin:20px;
}

.text-section p{
	font-size:18px;
	letter-spacing: 1px;
}

.text-section > *{
	max-width: 90%;
}

.article-preview .sub-heading{
	font-size:20px;
	margin-top: 0 ;
}

.purple-section{
	background:#352c5b;
	color:whitesmoke;
	height:1000px;
}

h2{
	margin:0;
	font-size:26px;
}

h3{
	font-size:18px;
}

.purple-section .head-wrapper{
	text-align: center;
}

.purple-section .hr{
	background:#3f3968;
	width:60%;
}

.purple-section .wrapper .head-wrapper h2{
	padding-top:40px;
}

.card{
	float:left;
	width:50%;
	min-height:250px;
	padding:50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

p{
	font-size:16px;
	letter-spacing: 1px;
}

.card:first-child{
	background:rgba(0,0,0,0.05);
}

.card:nth-child(2){
	background:rgba(0,0,0,0.08);
}
.card:nth-child(3){
	background:rgba(0,0,0,0.11);
}

.card:nth-child(4){
	background:rgba(0,0,0,0.14);
}

.card:nth-child(5){
	background:rgba(0,0,0,0.17);
}

.card:nth-child(6){
	background:rgba(0,0,0,0.20);
}

footer{
	
	color:#e1e2e7;
	min-height: 180px;
	text-align:center;
}

.img-footer{
	height:200px;
	width:100%;
	background: rgba(0,0,0,0.1);
}

.img-text {
	background: rgba(0,0,0,0.4);
	width:100%;
	height:280px;
}

ul.share-group {
	display:block;
	width:970px;
	margin: 0 auto;
	padding:45px;
	padding-top:65px;
	
	
}

ul li{
	display:inline-block;
	padding:12px;
}

.scale{
	transform: scale(1.3,1.3);
}

.copy{
	padding-top: 20px;
}

.main-wrapper{
	background: #444 url(../img/69.jpg);
	background-attachment:fixed;
	background-repeat:no-repeat ;
	background-size:cover ;
	background-position:center center;
}