css\css3\html5综合实验案例

其他 2020-01-12 21:54:48 阅读次数: 0

成品

在这里插入图片描述

一、先布局出框架

在这里插入图片描述
index.html

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="container">
		<div id="header"></div>
		<div id="nav"></div>
		<div id="main">
			<div id="aside"></div>
			<div id="content"></div>

		</div>
		<div id="footer"></div>
	</div>
	
</body>
</html>

style.css

*{
	margin: 0px;
	padding: 0;
}
body{
	font-size: 16px;
	color:#673929;
}
#container{
	width:  900px;
	margin: 0 auto;
}
#header{
	height: 220px;
	margin-bottom: 5px;
}
#nav{
	height: 30px;
	margin: 5px;
	background-color: #09c;
	font: 18px/30px;
	color: white;
	letter-spacing: 2px;
	text-align: center;
}
#main{
	background-color: #000;
	height: 2050px;
}
#aside{
	float: left;
	width: 300px;
	height: 500px;
	background-color: #6cf;
	text-align: center;
	font-size: 14px;
}
#content{
	float: right;
	width: 595px;
	height: 2050px;
	background-color: #cff;
	margin-bottom: 5px;
}
#footer{
	height: 60px;
	line-height: 60px;
	background-color: #6cf;
	clear: both;
	text-align: center;


}

添加导航栏

在这里插入图片描述
index1.html

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style1.css">
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="images/banner.jpg" alt="错误">
		</div>
		<div id="nav">
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
		</div>
		<div id="main">
			<div id="aside"></div>
			<div id="content"></div>

		</div>
		<div id="footer"></div>
	</div>
	
</body>
</html>

style1.css

*{
	margin: 0px;
	padding: 0;
}
body{
	font-size: 16px;
	color:#673929;
}
#container{
	width:  900px;
	margin: 0 auto;
}
#header{
	height: 220px;
	margin-bottom: 5px;
}
#nav{
	height: 30px;
	line-height: 30px;
	margin: 5px;
	background-color: #09c;
	font: 18px/30px;
	color: white;
	letter-spacing: 2px;
	text-align: center;
}
#nav a{
	text-decoration: none;
}
a:link{
	color: #fff;
	text-decoration: none;
}
a:visited{
	color: #fff;
	text-decoration: none;
}
a:hover{
	color: yellow;
	text-decoration: none;
}
a:active{
	color: #fff;
	text-decoration: none;
}
#main{
	background-color: #000;
	height: 2050px;
}
#aside{
	float: left;
	width: 300px;
	height: 500px;
	background-color: #6cf;
	text-align: center;
	font-size: 14px;
}
#content{
	float: right;
	width: 595px;
	height: 2050px;
	background-color: #cff;
	margin-bottom: 5px;
}
#footer{
	height: 60px;
	line-height: 60px;
	background-color: #6cf;
	clear: both;
	text-align: center;


}

三、添加主要内容

在这里插入图片描述
index2.html

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style2.css">
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="images/banner.jpg" alt="错误">
		</div>
		<div id="nav">
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
		</div>
		<div id="main">
			<div id="aside"></div>
			<div id="content">
				<div class="subcon">
					<img src="images/Cappuccino.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quaerat pariatur dolor quis laboriosam numquam.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Espresso.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quos, eos unde possi2mus inventore tempora.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Latte.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda mollitia quasi libero pariatur, ullam alias.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Mocha.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, fugit animi quisquam quidem dolorum! Nostrum.</p>
					</div>
				</div>
			</div>

		</div>
		<div id="footer"></div>
	</div>
	
</body>
</html>

style2.css

*{
	margin: 0px;
	padding: 0;
}
body{
	font-size: 16px;
	color:#673929;
}
#container{
	width:  900px;
	margin: 0 auto;
}
#header{
	height: 220px;
	margin-bottom: 5px;
}
#nav{
	height: 30px;
	line-height: 30px;
	margin: 5px;
	background-color: #09c;
	font: 18px/30px;
	color: white;
	letter-spacing: 2px;
	text-align: center;
}
#nav a{
	text-decoration: none;
}
a:link{
	color: #fff;
	text-decoration: none;
}
a:visited{
	color: #fff;
	text-decoration: none;
}
a:hover{
	color: yellow;
	text-decoration: none;
}
a:active{
	color: #fff;
	text-decoration: none;
}
#main{
	background-color: #000;
	/*height: 2050px;*/
}
#aside{
	float: left;
	width: 300px;
	height: 500px;
	background-color: #6cf;
	text-align: center;
	font-size: 14px;
}
#content{
	float: right;
	width: 595px;
	/*height: 2050px;*/
	background-color: #cff;
	margin-bottom: 5px;
}
.subcon{
	width: 570px;
	margin: 10px auto;
	clear: both;

}
.subcon img{
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px dashed #000;
}
.subcon .subtext{
	width: 60%;
	float: left;
	margin: 5px;
}
.subcon h2{
	margin: 5px;

}
.subcon p{
	font:16px/2em;/*设置字体和行高*/
}
#footer{
	height: 60px;
	line-height: 60px;
	background-color: #6cf;
	clear: both;
	text-align: center;


}

四、添加右侧，和尾部栏

在这里插入图片描述
index3.html

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style3.css">
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="images/banner.jpg" alt="错误">
			<div id="icon-list">
				<img src="images/1.bmp" alt="">
				<img src="images/2.bmp" alt="">
				<img src="images/3.bmp" alt="">
				<img src="images/4.bmp" alt="">
			</div>
		</div>
		<div id="nav">
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
		</div>
		<div id="main">
			<div id="aside">
			<h2>咖啡MENU</h2>
		<table >
		  <tr>
		  	<th ></th>
		    <th >拿铁<br />Latte</th>
		    <th >卡布奇诺<br />Cappuccino</th>
		    <th >摩卡<br />Mocha</th>
		    <th >浓缩咖啡<br />Espresso</th>
		  </tr>
		  <tr>
		    <th scope="row"  >大杯</th>
		    <td>35</td>
		    <td>35</td>
		    <td>35</td>
		    <td>30</td>
		  </tr>
		  <tr>
		    <th scope="row"  >中杯</th>
		    <td>30</td>
		    <td>30</td>
		    <td>30</td>
		    <td >25</td>
		  </tr>
		  <tr>
		    <th scope="row"  >小杯</th>
		    <td>25</td>
		    <td>25</td>
		    <td>25</td>
		    <td>20</td>
		  </tr>
		</table>
				<div id="imglist">
					<div class="pol rotate-left">
						<img src="images/Cappuccino.jpg" alt="">
					</div>
					<div class="pol rotate-right">
						<img src="images/Espresso.jpg" alt="">
				    </div>
					<div class="pol rotate-left">
						<img src="images/Latte.jpg" alt="">
					</div>
					<div class="pol rotate-right">
						<img src="images/Mocha.jpg" alt="">
					</div>
				</div> 
				
			</div>
			<div id="content">
				<div class="subcon">
					<img src="images/Cappuccino.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quaerat pariatur dolor quis laboriosam numquam.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Espresso.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quos, eos unde possi2mus inventore tempora.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Latte.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda mollitia quasi libero pariatur, ullam alias.</p>
					</div>
				</div>
				<div class="subcon">
					<img src="images/Mocha.jpg" alt="">
					<div class="subtext">
						<h2>咖啡名称</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, fugit animi quisquam quidem dolorum! Nostrum.</p>
					</div>
				</div>
			</div>

		</div>
		<div id="footer">
			<h2>作者：csu-benjamin</h2>
			<p>参考：中国大学mooc，北京林业大学</p>
		</div>
	</div>
	<div id="l-fix">
	<img src="images/Latte.jpg" alt="ahha">
	</div>
</body>
</html>

style3.css

*{
	margin: 0px;
	padding: 0;
}
body{
	font-size: 16px;
	color:#673929;
}
#container{
	width:  900px;
	margin: 0 auto;
}
#header{
	height: 220px;
	margin-bottom: 5px;
	position: relative;
}
#icon-list{
	position: absolute;
	top:170px;
	right: 50px;
	width: 200px;
	/*height: 500px;*/
	font-size: 0;/*可取消图片直接的间隔*/

}
#nav{
	height: 30px;
	line-height: 30px;
	margin: 5px;
	background-color: #09c;
	font: 18px/30px;
	color: white;
	letter-spacing: 2px;
	text-align: center;
}
#nav a{
	text-decoration: none;
}
a:link{
	color: #fff;
	text-decoration: none;
}
a:visited{
	color: #fff;
	text-decoration: none;
}
a:hover{
	color: yellow;
	text-decoration: none;
}
a:active{
	color: #fff;
	text-decoration: none;
}
#main{
	background-color: #000;
	/*height: 2050px;*/
}
#aside{
	float: left;
	width: 300px;
	/*height: 500px;*/
	background-color: #6cf;
	text-align: center;
	font-size: 14px;
	
}
#imglist{
	width:100px;
	margin: 0 auto;
}
.pol{
	
	width:100px;		
	padding: 10px;
	background-color: #eee;
	border:1px solid #BFBFBF;
	box-shadow:2px 2px 4px #aaa;
	border-radius: 5px;
}
.rotate-left{
	-webkit-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
}
.rotate-right{
	-webkit-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	transform: rotate(-7deg);
}
#imglist img{
	
	height: 95px;
	width: 85px;
	margin: 0 auto;
	/*font-size: 0;*/
}
#content{
	float: right;
	width: 595px;
	/*height: 2050px;*/
	background-color: #cff;
	margin-bottom: 5px;
}
.subcon{
	width: 570px;
	margin: 10px auto;
	clear: both;

}
.subcon img{
	/*width: 100px;
	height: 100px;*/
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px dashed #000;
}
.subcon .subtext{
	width: 300;
	float: left;
	margin: 5px;
}
.subcon h2{
	margin: 5px;

}
.subcon p{
	font:16px/2em;/*设置字体和行高*/
}
#footer{
	
	line-height: 60px;
	background-color: #6cf;
	clear: both;
	text-align: center;


}
#l-fix{
	position: fixed;
	top: 100px;
	left: 5px;
}
CSU-Benjamin
发布了18 篇原创文章 · 获赞 8 · 访问量 2095
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43698704/article/details/103847469
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022