- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

IT司马青衫发表于 2022/08/13 16:03:22 2022/08/13

【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】@TOC...

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

@TOC

一、网页介绍📖

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>	
                   <!-- <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>
        <div class="t2">
<ul>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>
        </div>
        <div class="anniu left">
        <
        </div>
        <div class="anniu right">
        >
        </div>
    </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>
        <br>
<p style="color: red;font-size: 18px">10:00&nbsp;场</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>

</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>
<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>
</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"/>
        <div class="jiange"><a href="#dingbuhome">&nbsp;小米商城&nbsp;</a>|<a href="">&nbsp;MIUI&nbsp;</a>|<a href="">&nbsp;米家&nbsp;</a>|<a href="">&nbsp;米聊&nbsp;</a>|<a href="">&nbsp;多看&nbsp;</a>|<a href="">&nbsp;游戏&nbsp;</a>|<a href="">&nbsp;路由器&nbsp;</a>|<a href="">&nbsp;米粉卡&nbsp;</a>|<a href="">&nbsp;政企服务&nbsp;</a>|<a href="">&nbsp;小米天猫店&nbsp;</a>|<a href="">&nbsp;隐私政策&nbsp;</a>|<a href="">&nbsp;问题反馈&nbsp;</a>|<a href="">&nbsp;廉政举报&nbsp;</a>|<a href="">&nbsp;Select Region&nbsp;</a></div>
        <p>
            <a href="">&copy;<span>mi.com</span>京ICP证110507号</a>&nbsp;
            <a href="">京ICP备10046444号</a>&nbsp;<a href="">京公网安备11010802020134号</a>&nbsp;<a href="">京网文[2017]1530-131号</a>
        </p>
        <p>
            <a href="">(京)网械平台备字(2018)第00005号</a>&nbsp;
            <a href="">互联网药品信息服务资格证(京)-非经营性-204-0090</a>&nbsp;
            <a href="">营业执照</a>&nbsp;
            <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、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

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

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

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

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品