ccs3-综合实验--样式表文件--设计一个菜单页面

最新推荐文章于 2023-03-11 16:15:35 发布

¡Venceremo

最新推荐文章于 2023-03-11 16:15:35 发布

阅读量169

点赞数

分类专栏： CSS3 HTML 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125860487

版权

HTML 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS3

26 篇文章 0 订阅

订阅专栏

首先查看页面结构：看分成哪几部分

总体效果

具有放大图片

具有固定定位

具有链接的各种作用

css3代码：

/*首先进行初始化----依次设置每个部分*/
/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
}
body{
	font-size: 16px;/*字号*/
	color: #673929;
}

#container{
	width: 900px;
	margin: 0px auto;/*上下边距0，左右边距自动 及实现水平居中*/	
}

#header{
	height: 220px;
	margin-bottom: 5px;	/*下侧外边距*/
	border: black solid 1px;
	position: relative;
}

#header p img{
	height: 220px;
	width: 898px;
}
#icon-list{
	position: absolute;
	/*之后设置子元素的位置*/
	top: 170px;
	right: 30px;
	width: 130px;
	height: 30px;
	/*font-size: 0px; img标签添加的图片默认具有一个下空隙*/
}

#nav{
	height: 30px;
	background-color: #09c;
	margin-bottom: 5px;	
	color:white ; /*字体颜色白色*/
	font: 18px/30px; /*字体18px,30px行高*/
	letter-spacing: 2px; /*每个字符的间距*/
	text-align: center; /*文本对齐方式 居中*/
	line-height: 30px;
}
#nav a{
	text-decoration: none; /*无下划线*/
	color: white;
}
#nav a:link{ /*没有访问的*/
	color: white;	

}
#nav a: visited{/*已经访问的*/
	color: red;
}
#nav a:hover{/*鼠标悬停*/
	color: yellow;	
}
#nav a:active{/*超链接激活*/
	color: red;
	
}


#main{	
	/*height: 2050px;*/
	background-color: black;
	
}
#aside{
	/*分左右 使用浮动布局*/
	float: left;
	
	width: 300px;
	background-color: #6cf;
	text-align: center; /*文本对齐方式 居中*/
	font-size: 14px;/*字号*/
}
#aside h2{
	color: black;
	margin: 20px;
}
#aside table{
	color: black;
	margin: 0 auto;

}
#img{
	width: 130px;
	margin: 0 auto;
}

.pol{
	width: 85px;
	padding: 10px;
	background-color: #eee; /*背景颜色灰色*/
	border:1px solid #eee ;
	box-shadow: 2px 2px 4px #aaa; /*盒子阴影水平偏移 垂直偏移 模糊距离 颜色；*/
	border-radius: 5px; /*圆角边框*/
	
}
#img div img{
	height: 95px;
	width: 85px;
}
#img div img:hover{
    transform: scale(1.2); /* 标准语法 */
}
.rotate-left{ /*可以使用奇偶选择器*/
	transform: rotate(-7deg);
	transform: scale(1.2); /* 标准语法 */
}
.rotate-left{
	transform: rotate(7deg);
}


#content{
	float: left;
	/*height: 2050px;*/
	width: 595px;
	background-color: #cff;
	margin-bottom: 5px;
	margin-left: 5px;
}
.subcon{
	width: 570px;
	margin: 10px auto; /*上下边距合并 中间居中*/
	clear: both; /*清除左右浮动 防止上移动*/
}
.subcon img{
	width: 190px;
	height: 170px;
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px dashed #000;
}
.subcon .subtext{ 
	width: 60%;/* 父的60%*/
	float: left;
	margin: 5px;

	font-size: 16px;/*字号*/
}
.subcon h2{
	margin: 5px;
}
.subcon p{
	font-size: 16px/2em;/*字号 行高*/
}
#footer{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 60px;
	line-height: 60px; /*高度行号相同会垂直居中对齐*/
	background-color: #6cf;
	clear: both; /*清除左右浮动 防止上移动*/
	text-align: center;
}

#l-fix{ /*固定定位 根据浏览器窗口*/
	position: fixed;
	top: 100px;
	left: 5px;

}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>咖啡菜单页面</title>
	<link rel="stylesheet" href="css/style3.css">
</head>
<body>
	<div id="container"> 
		<div id="header">
			<p><img src="images/header.jpg" alt=""></p>

			<div id="icon-list"> <!-- 由于header部分没有位置 汇集下方 -->
				<img src="images/biao.jpg" alt=""></img>
				<img src="images/biao.jpg" alt=""></img>
				<img src="images/biao.jpg" alt=""></img>
				<img src="images/biao.jpg" alt=""></img> <!-- 使用层定位 跟随父元素 -->
			</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> <!-- 4行5列 -->
					<tr>
						<th></th>
						<th>咖啡 <br>cofee</th>
						<th>咖啡 <br>cofee</th>
						<th>咖啡 <br>cofee</th>
						<th>咖啡 <br>cofee</th>
					</tr>
					<tr>
						<th>大杯</th>
						<td>44</td>
						<td>55</td>
						<td>55</td>
						<td>55</td>
					</tr>
					<tr>
						<th>中杯</th>
						<td>44</td>
						<td>55</td>
						<td>55</td>
						<td>55</td>
					</tr>
					<tr>
						<th>小杯</th>
						<td>44</td>
						<td>55</td>
						<td>55</td>
						<td>55</td>
					</tr>
				</table>

				<div id="img">
					<div class="pol rotate-left"><img src="images/4.jpg" alt=""></div>
					<div class="pol rotate-right"><img src="images/4.jpg" alt=""></div>
					<div class="pol rotate-left"><img src="images/4.jpg" alt=""></div>
					<div class="pol rotate-right"><img src="images/4.jpg" alt=""></div>
				</div>
			</div>


			<div id="content">
				<!-- 4行 有图片 标题  文字-->
				<div class="subcon"><!-- 行 -->
					<img src="images/menu1.jpg" alt=""> <!-- 图片 -->
					<div class="subtext">

						<h2>咖啡名称</h2><!-- 标题 -->
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quae, labore ab. Quis, cumque, quae.</p> <!-- 文字 -->
					</div>
				</div>
				<div class="subcon"><!-- 行 -->
					<img src="images/menu2.jpg" alt=""> <!-- 图片 -->
					<div class="subtext">

						<h2>咖啡名称</h2><!-- 标题 -->
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quae, labore ab. Quis, cumque, quae.</p> <!-- 文字 -->
					</div>
				</div>
				<div class="subcon"><!-- 行 -->
					<img src="images/menu3.jpg" alt=""> <!-- 图片 -->
					<div class="subtext">

						<h2>咖啡名称</h2><!-- 标题 -->
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quae, labore ab. Quis, cumque, quae.</p> <!-- 文字 -->
					</div>
				</div>
				<div class="subcon"><!-- 行 -->
					<img src="images/menu4.jpg" alt=""> <!-- 图片 -->
					<div class="subtext">

						<h2>咖啡名称</h2><!-- 标题 -->
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quae, labore ab. Quis, cumque, quae.</p> <!-- 文字 -->
					</div>
				</div>

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

	<div id="l-fix"> <!-- 固定定位的图片 -->
		<img src="images/5.jpg" alt="">
	</div>


</body>
</html>