登陆界面
<!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="style.css">
</head>
<body>
<div class="login-container">
<form action="/login" method="post">
<h2>登陆界面</h2>
<div class="form-group">
<label for="username">账号:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
学校界面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
div{
height:600px;
border:1px solid red;
background-image:linear-gradient(red,yellow,blue);
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华珠学校官网</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">学校简介</a></li>
<li><a href="courses.html">学校历史</a></li>
<li><a href="teachers.html">师资力量</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="admissions.html">招生信息</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>欢迎来到华珠学校官网</h1>
<p>我们是一所高质量学校</p>
</section>
<section class="news-highlights">
<h2>信息</h2>
<article>
<h3>欢迎新生</h3>
<p>欢迎来到华珠</p>
<a href="news-details.html">点击继续阅读</a>
</article>
<article>
<h3>毕业生风采</h3>
<p>学长学姐们给学弟学妹们的秘籍</p>
</article>
</section>
</main>
</body>
</html>
电商界面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商界面</title>
<style>
span{
font-family:"楷体";
font-size:"80px";
color:blueviolet;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新商品</a></li>
<li><a href="#">热销商品</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">登录/注册</a></li>
</ul>
</nav>
</header>
<section class="categories">
<h2>商品分类</h2>
<ul>
<li><a href="#">电子产品</a></li>
<li><a href="#">家居用品</a></li>
<li><a href="#">潮衣鞋包</a></li>
<li><a href="#">美妆护肤</a></li>
<li><a href="#">书籍书本</a></li>
</ul>
</section>
<section class="product-list">
<h2>热销商品</h2>
<div class="product-item">
<h3>书本</h3>
<p>非常好看的一本书</p>
<button>加入购物车</button>
</div>
</section>
</body>
</html>
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
