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

最新推荐文章于 2023-11-26 18:30:08 发布

我是学长霸霸

最新推荐文章于 2023-11-26 18:30:08 发布

阅读量375

点赞数 1

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

版权

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

一、网页介绍📖

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

最低0.47元/天解锁文章

我是学长霸霸

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码

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

扫一扫