HTML学生个人网站作业设计——HTML+CSS+JavaScript简单的大学生书店网页制作(13页) web期末作业设计网页 web结课作业的源码 web网页设计实例作业

最新推荐文章于 2024-04-20 11:53:06 发布

VIP文章我是学长霸霸

最新推荐文章于 2024-04-20 11:53:06 发布

阅读量197

点赞数

分类专栏： dw静态网页文章标签： html javascript css 课程设计

本文链接：https://blog.csdn.net/qq_38512792/article/details/129978736

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="css/index.css"/>
	<link rel="stylesheet" href="css/swiper3.07.min.css"/>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/koala.min.1.5.js"></script>
	<style>
		.swiper-container {
     
			width: 1100px;
			height: 300px;
			margin: 0 auto;
		}
	</style>
	<title>易书网</title>
</head>
<body>
<div class="top" id="item4">
	<div class="container clearfix">
		<ul class="clearfix fr">
			<li><a href="join.html#tologin" >登录</a></li>
			<li><a href="join.html#toregister" >注册</a></li>
			<li><a href="member.html" style="border: none">个人中心</a></li>
		</ul>
	</div>
</div>

<div class="header">
	<div class="container clearfix">
		<div class="logo fl">
			<a href="index.html"><img src="images/logo4.png" alt=""/></a>
		</div>
		<div class="seacher fl">
			<form action="" method="post">
				<input type="text" placeholder="小伙伴，你想找什么?"/><input type="submit" value="搜 索"/>
			</form>
			<p>热门搜索：<a href="#">自行车</a> <a href="#">笔记本</a> <a href="#">散热器</a> <a href="#">考研资料</a> <a href="#">摩托车</a> <a href="#">手机</a> <a href="#">轮滑鞋</a> <a href="#">显示器</a> <a href="#">显示器</a> <a href="#">显示器</a> <a href="#">显示器</a></p>
		</div>
		<div class="mm fr clearfix">
			<a href="list.html">我要买</a>
			<a href="publish.html">我要卖</a>
		</div>
	</div>
</div>

<div class="banner container">
	<img src="images/notice.png" alt="" style="width: 1200px;height: auto;"/>
	<div class="clearfix">
		<div class="about fl">
			<h1>易书网</h1>
			<img src="images/logo9.png" alt=""/>
			<p><span>易书网</span>是一个网上书商城。力求打造网上最大的中文图书借换系统二手书交换系统力求打造是是网上最大的中文图书借换系统二手书交换系统。易书网来了,让爱书的你花极小的支出(1到2元)就可以读到你喜欢的书且没有后顾之忧哦！</p>
		</div>
		<div id="fsD1" class="focus fl">
			<div id="D1pic1" class="fPic">
				<div class="fcon">
					<a href="detail.html"><img src="images/focus1.jpg" /></a>
					<span class="shadow"><a href="detail.html">便宜出售一本好书111111</a></span>
				</div>
				<div class="fcon">
					<a href="detail.html"><img src="images/focus2.jpg" /></a>
					<span class="shadow"><a href="detail.html">便宜出售一本好书222222</a></span>
				</div>
				<div class="fcon">
					<a href="detail.html"><img src="images/focus3.jpg" /></a>
					<span class="shadow"><a href="detail.html">便宜出售一本好书3333333</a></span>
				</div>
				<div class="fcon">
					<a href="detail.html"><img src="images/focus4.jpg" /></a>
					<span class="shadow"><a href="detail.html">便宜出售一本好书4444444</a></span>
				</div>
				<div class="fcon">
					<a href="detail.html"><img src="images/focus5.jpg" /></a>
					<span class="shadow"><a href="detail.html">便宜出售一本好书5555555</a></span>
				</div>
			</div>

			<div class="fbg">
				<div class="D1fBt" id="D1fBt">
					<a href="javascript:void(0)" class="current"><i>1</i></a>
					<a href="javascript:void(0)"><i>2</i></a>
					<a href="javascript:void(0)"><i>3</i></a>
					<a href="javascript:void(0)"><i>4</i></a>
					<a href="javascript:void(0)"><i>5</i></a>
				</div>
			</div>
		</div>
		<div class="help fr">
			<h2>最新公告</h2>
			<ul>
				<li><a href="notice-detail.html">这是易书网最新公告1</a></li>
				<li><a href="notice-detail.html">这是易书网最新公告2</a></li>
				<li><a href="notice-detail.html">这是易书网最新公告3</a></li>
				<li><a href="notice-detail.html">这是易书网最新公告4</a></li>
				<li><a href="notice-detail.html">这是易书网最新公告5</a></li>
			</ul>
			<h2>新手帮助</h2>
			<ul>
				<li><a href="help.html">如何买书</a></li>
				<li><a href="help.html">如何买书</a></li>
				<li><a href="help.html">如何买书</a></li>
				<li><a href="help.html">如何买书</a></li>
			</ul>
		</div>
	</div>
	<div class="item clearfix" id="item1">
		<h1>教材区<span></span>
			<!--<a href="list.html">+更多</a>-->
		</h1>
		<div class="list fl">
			<ul class="one">
				<li><a href="list.html">成功励志</a>
					<ul class="two">
						<li><a href="list.html">成功励志1</a></li>
						<li><a href="list.html">成功励志2</a></li>
						<li><a href="list.html">成功励志3</a></li>
						<li><a href="list.html">成功励志4</a></li>
						<li><a href="list.html">成功励志5</a></li>
						<li><a href="list.html">成功励志6</a></li>
						<li><a href="list.html">成功励志7</a></li>
					</ul>
				</li>
				<li><a href="#">法律</a>
					<ul class="two">
						<li><a href="#">法律1</a></li>
						<li><a href="#">法律2</a></li>
						<li><a href="#">法律3</a></li>
						<li><a href="#">法律4</a></li>
						<li><a href="#">法律5</a></li>
						<li><a href="#">法律6</a></li>
						<li><a href="#">法律7</a></li>
						<li><a href="#">法律8</a></li>
						<li><a href="#">法律9</a></li>
					</ul>
				</li>
				<li><a href="#">管理</a>
					<ul class="two">
						<li><a href="#">管理1</a></li>
						<li><a href="#">管理2</a></li>
						<li><a href="#">管理3</a></li>
						<li

最低0.47元/天解锁文章

我是学长霸霸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学生个人网站作业设计——HTML+CSS+JavaScript简单的大学生书店网页制作(13页) web期末作业设计网页 web结课作业的源码 web网页设计实例作业

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫