前端html入门

最新推荐文章于 2025-09-13 15:06:44 发布

原创最新推荐文章于 2025-09-13 15:06:44 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #thunder #案例

前端html 专栏收录该内容

4 篇文章

订阅专栏

本案例展示了使用HTML和CSS创建一个菜单网页的过程。页面包括顶部导航栏、背景图片、多个菜品展示区域以及底部logo。每个菜品区域包含图片、菜品名和描述。

案例1

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>menu</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body ondragstart="return false">
	<div class="top">
		<div class="logo">
			<img src="image/Logo.png" alt="logo">
			<span>Gratia</span>
		</div>
		<div class="more">
			<a href="#">About</a>
			<a href="#">Menu</a>
			<a href="#">Gallery</a>
			<a href="#">Contact</a>
		</div>
	</div>
	<div style="background-image: url(image/background.png);" class="gratia">
		<p class="MENU">MENU</p>
		<p class="under_MENU">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="main">
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="detail">
			<img src="image/Soups.png" alt="soups">
			<p class="under_img">SOUPS</p>
			<p class="under_soup">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
	<div class="bottom">
		<div class="circle">
			<img src="image/Logo.png" alt="logo">
		</div>
	</div>
</body>
</html>

css代码

body
{
	margin: 0;
	background-color: #eeeef2;
	text-align: center;
	-webkit-user-select:none;
  	-moz-user-select:none;
  	-ms-user-select:none;
  	user-select:none;
}

.top
{
	display: inline-block;
	width: 90%;
	height: 50px;
}

.logo
{
	float: left;
	height: 100%;
	color: black;
}

.logo img
{
	margin-top: 2px;
	height: 100%;
	vertical-align: middle;
}

.logo span
{
	font-family: Montserrat;
	font-weight: 600;
	vertical-align: middle;
	line-height: 100%;
}

.more
{
	float: right;
	height: 100%;
}

.more a
{
	font-family: Montserrat;
	font-weight: 600;
	text-decoration: none;
	color: black;
	vertical-align: middle;
	margin-left: 50px;
}
.more a:hover
{
	color: #d89b64;
}

.under_logo
{
	width: 600px;
	display: inline-block;
	margin-top: 120px;
	background-size: 600px;
	background-repeat: no-repeat;
	background-position: 50% 115%;
}

.MENU
{
	font-family: Montserrat;
	font-size: 120%;
	margin-top: 160px;
}

.under_MENU
{
	font-family: Crimson Text;
	font-size: 80%;
	margin-bottom: 40px;
}

.gratia
{

	background-repeat: no-repeat;
	background-position: 50% 115%;
	width: 600px;
	display: inline-block;
	background-size: 600px;
}

.main
{
	display: inline-block;
	width: 90%;
	margin-top: 50px;
	min-width: 972px;
}

.detail
{
	display: inline-block;
	width: 26%;
	margin: 2%;
	height: 440px;
	text-align: center;
	background-color: white;
}

.detail img
{
	width: 100%;
}

.under_img
{
	font-family: Montserrat;
	font-weight: 600;
	font-size: 160%;
	margin-top: 50px;
}

.under_soup
{
	font-family: Crimson Text;
	font-size: 80%;
	color: #8b909d;
}

.bottom
{
	margin-top: 200px;
	width: 100%;
	border-top-style: solid;
	border-top-color: rgba(0,0,0,0.2);
	border-top-width: 1px;
	height: 500px;
	text-align: center;
}

.circle
{
	display: inline-block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.2);
	margin-top: -55px;
	background-color: #eeeef2;
}

.circle img
{
	width: 80%;
	margin-top: 11px;
}