web网页设计期末课程大作业基于HTML+CSS仿苹果商城电商项目的设计与实现

news2024/11/22 21:52:54

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

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>
<head>
    <meta charset="utf-8" />
    <title>iPad</title>
	<link rel="stylesheet" href="css/iPad.css">
</head>
<body>
    <div class="a">
		<div class="b">
			<a href="Apple.html" class="logo"><img src="images\logo.jpg" height="18px" width="16px" /></a>
			<a href="Mac.html" target="_self" class="top2">Mac</a>
			<a href="iPad.html" class="top3">iPad</a>
			<a href="iPhone.html" class="top4">iPhone</a>
			<a href="AirPods.html" class="top6">AirPods</a>
			<a href="lianxi.html" class="top8">联系我们</a>
            <a href="zhuce.html" class="top10">登录/注册</a>
		</div>
		<div class="c">
			<p class="word">有些人认为创新就是改变，我们从来不这么看，我认为，让事情变得更好，就是创新-库克。</p>
		</div>
        	<div class="w">
   				<div>
            		<h2 class="h2">iPad Pro，<br/><br/>再次定义生产力</h2>
            		<img src="images\ipad.jpg" width="400" height="400" class="ipad">
                	<img src="images\ipad1.jpg" width="350" height="350" class="ipad1">
            	</div>
            	<div>
            	<img src="images\ipad.gif" class="gif">
                <h3 class="h3">强者的强</h3>
            	</div>
            </div>
            	<div class="z">
            	<img src="images\ipad2.jpg" width="600" height="550" class="ipad2">
                <img src="images\ipad3.jpg" width="700" height="500" class="ipad3">
                <h4 class="h4">完美兼容 iPadOS,游戏大作，轻而易举。<br/><br/>性能最强的移动设备,户外办公的随身利器。</h4>
            	</div>
            <div class="g">
				<div>
					<P class="ban">您有问题，可致电xxx。</P>
					<hr class="hr"/>
				</div>
				<p  class="ban">Copyright © 2021 Apple Inc. 保留所有权利。</p>
			</div>
		</div>
</body>
</html>

2.CSS样式代码 🏠


@charset "utf-8";
/* CSS Document */
		body{margin:0px;padding:0px;}
		.a{width:100%;height:1700px;}
		.b{height:50px;background:#272727;position:relative;font-family:"微软雅黑";font-size:14px;}
		.c{width:100%;height:50px;background:#d0d0d0;position:absolute;}
		.word{text-align:center;line-height:25px;font-family:"微软雅黑";font-size:14px;color:#272727;}
		.logo{position:absolute;top:16px;left:350px;}
		.top2{color:#F0F0F0;position:absolute;top:16px;left:440px;text-decoration:none;}
		.top3{color:#F0F0F0;position:absolute;top:16px;left:570px;text-decoration:none;}
		.top4{color:#F0F0F0;position:absolute;top:16px;left:700px;text-decoration:none;}
		.top6{color:#F0F0F0;position:absolute;top:16px;left:850px;text-decoration:none;}
		.top8{color:#F0F0F0;position:absolute;top:16px;left:1010px;text-decoration:none;}
		.top10{color:#F0F0F0;position:absolute;top:16px;left:1300px;text-decoration:none;}
		.text{width:150px;height:15px;}
		a:hover{color:#ffffff;}
		.h2{font-size:35px;font-family:"微软雅黑";position:absolute;top:80px;left:650px;text-align:left;}
		.h3{font-size:30px;font-family:"幼体";position:absolute;top:280px;right:140px;text-align:left;}
		.h4{font-size:35px;font-family:"微软雅黑";position:absolute;top:1300px;left:700px;text-align:left;}
		.ipad{position:absolute;right:300px;top:250px;}
		.ipad1{position:absolute;right:15px;top:360px;}
		.ipad2{position:absolute;left:10px;top:750px;}
		.ipad3{position:absolute;right:30px;top:780px;}
		.gif{position:absolute;top:260px;}
		.w{height:660px;background:#FAF4FF;}
		.z{height:800px;}
		.g{height:90px;background:#F0F0F0;position:relative;top:100px;}
		.ban{text-align:center;color:#8E8E8E;line-height:20px;}
		.hr{width:50%;}