1500字范文 > web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端

web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端

时间：2022-03-20 04:04:31

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

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

❤ 【作者主页——🔥获取更多优质源码】 ❤ 【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>

<!-- *{

margin: 0;

padding: 0;

list-style: none;

}

.s1{

margin: 50px auto;

width: 1226px;

height: 460px;

position: relative;

}

.t1 img{

width: 1226px;

height: 460px;

/*让图片以主父级盒子为基准，合并在一起*/

position: absolute;

top: 0;

}

.t2 li{

width: 20px;

height: 20px;

background-color:black;

color: white;

font-size: 14px;

text-align: center;

z-index: 10;

border-radius: 50%;

display: inline-block;

}

.t2 li:hover{

background-color:chocolate;

cursor: pointer;/*鼠标变小手*/

}

.t2{

position: absolute;

bottom:10px;

left: 0;

text-align: center;

width: 100%;

} -->

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>小米商城官网</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />

<script src="./js/jquery-3.1.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(function(){

//初始化，设置第一个出现的图片和触碰点

$(".t1 li").first().show();

$(".t2 li").first().addClass("active");

//鼠标悬停事件，排斥其他按钮

$(".t2 li").mouseover(function(){

//悬停时

clearInterval(t);

$(this).addClass("active").siblings("li").removeClass("active");

var index=$(this).index();//获取索引

i=index;

$(".t1 li").eq(index).fadeIn().siblings("li").fadeOut();//筛选淡入其余淡出

})

//定时自动 setInterval(所执行方法函数，毫秒)

//所设定时间为2000毫秒,即2秒一次

var i=0;

var t = setInterval(move,2000);

function move(){//一次定义函数多次使用

i++;

if(i==4){

i=0;//判断循环到四张图的时候回到第一图重新播放

}

$(".t2 li").eq(i).addClass("active").siblings("li").removeClass("active");

$(".t1 li").eq(i).fadeIn().siblings().fadeOut();//筛选淡入

}

function moveleft(){//一次定义函数多次使用(向左的滑板)

i--;

if(i==-1){

i=3;//判断循环到四张图的时候回到第一图重新播放

}

$(".t2 li").eq(i).addClass("active").siblings("li").removeClass("active");

$(".t1 li").eq(i).fadeIn().siblings().fadeOut();//筛选淡入

}

$(".s1").hover(function(){

clearInterval(t);//鼠标移入停止

},function(){

t = setInterval(move,2000);//鼠标移出继续动

})

$(".s1 .right").click(function(){

move();

})

//点击左边箭头执行的动画

$(".s1 .left").click(function(){

moveleft();

})

//下拉菜单开始

$(document).ready(function(){

$("#img1").hide();

})

$(document).ready(function(){

$(".click1").click(function(){

$("#img1").slideToggle();

})

});

</script>

<div class="dingbu">

<div class="denglu-font">

<a href="#" id="dingbuhome">小米商城</a>

<a href="#">MIUI</a>

<a href="#">loT</a>

<a href="#">云服务</a>

<a href="#">金融</a>

<a href="#">有品</a>

<a href="#">小爱开放平台</a>

<a href="#">政企服务</a>

<a href="#">下载APP</a>

<a href="#">Select Region</a>

<div class="denglu-font2">

<a href="login.html" class="dengLu">登录</a>

<a href="register.html" class="zhuche">注册</a>

<a href="#" class="xiaoxi">销售通知</a>

</div>

<!-- <div class="dingbu-right">

<a href="dengLu" class="dengLu">登录</a>

<a href="#" class="zhuche">注册</a>

<a href="#" class="xiaoxi">销售通知</a>

</div> -->

</div>

<div class="list-1">

<ul class="list-ul-2" style="position: relative;right: 190px;">

<li><img src="img/timg.jpg" width="55px" height="55px" class="img-logo"/></li>

<li><a href="#">全部商品分类</a></li>

<li><a href="#" class="click1">小米手机</a></li>

<li><a href="#">红米</a></li>

<li><a href="tv4c.html">电视</a></li>

<li><a href="bijibenmenu.html">笔记本</a></li>

<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>

<li><a href="#">社区</a></li>

</ul>

</div>

<div id="img1" style="z-index: 999; display: inline;position: absolute;left: 100px;">

<ul>

<li>

<div id="img1-1">

<a href="MIX3.html" style="text-decoration: none;">

<img src="img/mix3-320.png" width="130px" height="100px"/>

<center>

<p style="font-size: 12px; color: #000000;">小米MIX3</p>

<p style="font-size: 11px; color: #FFA500;">3299元起</p>

</center>

</a>

</div>

</li>

<li>

<div id="img1-2" >

<a href="#" style="text-decoration: none;">

<img src="img/pc-320-220-mi8.png" width="130px" height="100px"/>

<center>

<p style="font-size: 12px;">小米8 青春版</p>

<p style="font-size: 11px; color: #FFA500;">1399元起</p>

</center>

</a>

</div>

</li>

<li>

<div id="img1-3">

<a href="mi8.html" style="text-decoration: none;">

<img src="img/pingmu-320.png" width="130px" height="100px"/>

<center>

<p style="font-size: 12px;">小米8 屏幕指纹版</p>

<p style="font-size: 11px; color: #FFA500;">3199元起</p>

</center>

</a>

</div>

</li>

<li>

<div id="img1-4" style="text-decoration: none;">

<a href="#" style="text-decoration: none;">

<img src="img/qingchun-320.png" width="130px" height="100px"/>

<center>

<p style="font-size: 12px;">小米8</p>

<p style="font-size: 11px; color: #FFA500;">2699元起</p>

</center>

</a>

</div>

</li>

</ul>

</div>

<div class="s1">

<div class="s2">

<ul class="s2-ul">

<a href="mix3.html"><li><span>手机电话卡</span></li></a>

<a href="tv4c.html"><li><span>电视盒子</span></li></a>

<a href="bijibenmenu.html"><li><span>笔记本平板</span></li></a>

<a href="er.html"><li><span>家电插电板</span></li></a>

<a href="#"><li><span>出行穿戴</span></li></a>

<a href="#"><li><span>智能路由器</span></li></a>

<a href="#"><li><span>电源配件</span></li></a>

<a href="#"><li><span>健康儿童</span></li></a>

<a href="#"><li><span>耳机音响</span></li></a>

<a href="#"><li><span>生活箱包</span></li></a>

</ul>

</div>

<div class="t1">

<ul>

<li><a href="./mix3.html"><img src="./img/1.jpg" alt=""></a></li>

<li><a href="#"><img src="./img/2.jpg" alt=""></a></li>

<li><a href="./index2.html"><img src="./img/3.jpg" alt=""></a></li>

<li><a href="#"><img src="./img/4.jpg" alt=""></a></li>

</ul>

<style>

.t1-1{

background-color: white;

}

</style>

<div class="t1-1">

</div>

<div class="t2">

<ul>

<li></li>

</ul>

</div>

<div class="anniu left">

<

</div>

<div class="anniu right">

>

</div>

<center>

<div class="s3">

<a href="#"><img src="./img/left-img.png" alt="" width="234px" height="170x" class="s3-img-1"></a>

<a href="mi8.html"><img src="./img/xmad_1.jpg" alt="" width="316px" height="170x" class="s3-img-2"></a>

<a href="#"><img src="./img/xmad_2.jpg" alt="" width="316px" height="170x" class="s3-img-3"></a>

<a href="er.html"><img src="./img/xmad_3.jpg" alt="" width="316px" height="170x" class="s3-img-4"></a>

</div>

</center>

<div class="s4-123">

<div class="s4">

<p class="s4-headfont" style="display: inline-block;">小米闪购</p>

<div class="s4-1" >

<center>

<br>

<p style="color: red;font-size: 18px">10:00场</p>

<br>

<img src="./img/flashpurchase.png" alt="">

<br>

<p style="color: black;opacity: 0.6;">距离结束还有</p>

<br>

<p style="display: inline-block;color: black;width: 40px;height: 40px;">00</p>

<p style="display: inline-block">:</p>

<p style="display: inline-block;color: black;width: 40px;height: 40px;">00</p>

<p style="display: inline-block">:</p>

<p style="display: inline-block;color: black;width: 40px;height: 40px;">00</p>

</center>

</div>

<style>

.s5 img{

margin-left: 80px;

}

</style>

<div class="s5" style="position: relative; bottom: 345px ;left:300px">

<a href="#"><img src="./img/shangou1.png" alt=""></a>

<a href="#"><img src="./img/shangou2.png" alt=""></a>

<a href="#"><img src="./img/shangou3.png" alt=""></a>

<center>

<br>

<img src="./img/heisha.jpg" alt="" width="1226px" height="120px" style="position: relative; right: 450px ;top:50px;cursor: pointer;">

</center>

</div>

<div class="s6">

<h2>手机</h2>

<a href="mix3.html"><img src="./img/shoujileft.jpg" alt="" width="234px" height="628px" style=""></a>

<style>

.s6{

position: relative;

bottom:260px;

left: 150px;

}

.s6 div{

display: inline-block;

position: relative ;

bottom: 370px;

margin-left: 10px;

cursor: pointer;

}

.s6 div:hover{

box-shadow: #000000 1px 1px 5px;

}

.s6-2-1,.s6-2-2,.s6-2-3,.s6-2-4{

position: relative;

left: 240px;

top:-300px;

}

</style>

<div class="s6-1">

<img src="./img/shouji1.jpg" alt="">

<p style="position: relative;left: 30px;font-size: 14px">小米8 青春版 4GB+64GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:20px;">潮流镜面渐变色，2400万自拍旗舰</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">1399元</p>

</div>

<div class="s6-2">

<img src="./img/shouji2.png" alt="">

<p style="position: relative;left: 10px;font-size: 14px">小米8 屏幕指纹版 8GB+128GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:20px;">压感屏幕指纹，双频GPS超精..</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">3599元</p>

</div>

<div class="s6-3">

<img src="./img/shouji3.jpg" alt="">

<p style="position: relative;left: 30px;font-size: 14px">小米8 SE 4GB+64GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:20px;">AI超感光双摄，三星AMOLED屏幕</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">1699元</p>

</div>

<div class="s6-4">

<img src="./img/shouji4.jpg" alt="">

<p style="position: relative;left: 30px;font-size: 14px;">小米MIX 2S 8+256GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:20px;">骁龙845年度旗舰处理器，艺术品般陶..</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">3599元</p>

</div>

<br>

<div class="s6-2-1">

<img src="./img/shouji5.jpg" alt="">

<p style="position: relative;left: 50px;font-size: 14px;">小米6X 4GB+64GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:40px;">全索尼相机，骁龙660 AIE处理器</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">1199元</p>

</div>

<div class="s6-2-2">

<img src="./img/shouji6.jpg" alt="">

<p style="position: relative;left: 30px;font-size: 14px;">小米Max 2 4GB+64GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:20px;">6.44''大屏，5300mAh 充电宝级的大电量</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">1699元</p>

</div>

<div class="s6-2-3">

<img src="./img/shouji7.jpg" alt="">

<p style="position: relative;left: 30px;font-size: 14px;">小米MIX 2 全陶瓷尊享版</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:45px;">全面屏2.0，Unibody 全陶瓷</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">2699元</p>

</div>

<div class="s6-2-4">

<img src="./img/shouji8.jpg" alt="">

<p style="position: relative;left: 50px;font-size: 14px;">红米S2 3GB+32GB</p>

<p style="font-size:11px;color:black;opacity: 0.5;position: relative;left:40px;">前置1600万超大像素智能美拍</p>

<p style="font-size: 14px;position:relative;left: 80px;color: #FFA500">999元</p>

</div>

<br>

<center>

<img src="./img/dianshi.jpg" alt="" width="1226px" height="120px" style="position: relative; bottom: 500px" >

</center>

<style>

#zui{

width: 100%;

height: 300px;

display: block;

position: relative;

}

#zui img{

width: 150px;

height: 150px;

}

#zui div span a{

text-decoration: none;

}

.jiange{

position: relative;

left: 170px;

bottom: 150px;

}

#zui div a{

text-decoration: none;

color: #000000;

}

#zui p a{

line-height: 50px;

text-decoration: none;

color: #000000;

opacity: 0.6;

}

#zui p{

position: relative;

left: 170px;

bottom: 150px;

display: block;

}

#zui p a:hover{

color: orange;

}

#zui div a:hover{

color: orange;

}

#zui{

position: relative;

left: 150px;

bottom: 400px;

}

</style>

<div id="zui">

<img src="img/timg.jpg"/>

<p>

<a href="">©<span></span>京ICP证110507号</a>

<a href="">京ICP备10046444号</a><a href="">京公网安备1101080204号</a><a href="">京网文[]1530-131号</a>

</p>

<p>

<a href="">(京)网械平台备字()第00005号</a>

<a href="">互联网药品信息服务资格证(京)-非经营性-204-0090</a>

<a href="">营业执照</a>

<a href="">医疗器械公告</a>

</p>

</div>

</body>

</html>

2.CSS样式代码 🏠

<style>

*{

padding: 0;

margin: 0;

list-style: none;

}

.t1 img{

width: 1226px;

height: 460px;

}

.s1{

width: 1226px;

height: 460px;

margin: 50px auto;

position: relative;

bottom: 50px;

}

.s2{

position: absolute;

left: 0;

top: 0;

width: 234px;

height: 460px;

background: #000000;

z-index:10;

opacity: 0.8;

}

.s2 li{

width: 234px;

height: 46px;

text-align: center;

}

.s2 li:hover{

background-color: chocolate;

}

.s2-ul span{

display: inline-block;

position: relative;

top: 10px;

font-size: 16px;

}

.s2-ul a{

text-decoration: none;

color: white;

}

.t1 li{

position: absolute;

top: 0;

left: 0;

display: none;

}

.t2 li{

width: 20px;

height: 20px;

background: white;

font-size: 14px;

border-radius: 50%;

text-align: center;

display: inline-block;

cursor: pointer;

}

.t2 li.active{

background-color: chocolate;

}

.t2{

position: absolute;

bottom: 10px;

left:50%;

}

.s1 .anniu{

width: 30px;

height: 60px;

background: rgba(0, 0, 0, 0.3);

color: white;

font-size: 14px;

text-align: center;

line-height: 60px;

position: absolute;

top: 50%;

margin-top: -30px;

cursor: pointer;

}

.s1 .left{

left: 234px;

}

.s1 .right{

right: 0;

}

.dingbu-right{

display: inline-block;

float: right;

position: relative;

right: 300px;

}

.dingbu-right div{

padding: 20px;

}

.dingbu{

background: black;

line-height: 40px;

}

.dingbu a{

color: white;

text-decoration: none;

font-size: 13px;

opacity: 0.5;

padding:6px;

}

.dingbu a:hover{

opacity: 1;

}

.s3{

position: relative;

bottom: 80px;

left: 140px;

}

.s3-img-1{

position: relative;

right: 155px;

}

.s3-img-2{

position: relative;

right: 155px;

}

.s3-img-3{

position: relative;

right: 135px;

}

.s3-img-4{

position: relative;

right: 115px;

}

.s4-1{

width: 234px;

height: 340px;

background: white;

border-top: 2px solid red;

}

.s4-headfont{

font-size: 22px;

}

.s4{

position: relative;

left: 60px;

}

.list-1{

position: relative;

left: 200px;

}

.denglu-font{

position: relative;

left: 160px;

}

#img1{

position: absolute;

left: 230px;

}

.denglu-font2{

position: relative;

display: inline;

left: 450px;

}

.s4-123{

position: relative;

left: 100px;

}

</style>

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分；所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。