国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）

2年前作者：m0_67494167分類：Toy博客閱讀(29)違法舉報

這篇具有很好參考價值的文章主要介紹了Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

主要完成了三個頁面，效果如下：

Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）

Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）?Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）

主頁面html部分源碼：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
        <link rel="icon" type="image/x-icon" href="images/tubiao.ico" /><!-- 設置網(wǎng)站圖標-->
        <link rel="stylesheet" type="text/css" href="main.css"><!-- 外鏈css文件 -->
        <script src="js/jquery-3.3.1.js"></script><!-- 引用jquery.js-->
    </head>
    <body>
    <div class="all_in">
        <!-- 頂部欄 -->
        <div class="topBar">
            <div class="container">
                <!-- 定義為行內塊顯示，否則會自動換行 -->
                <div class="topBar_list" style="display:inline">
					<a href="log.html">小米商城</a>
					<span>|</span>
					<a href="log.html">MIUI</a>
					<span>|</span>
					<a href="log.html">loT</a>
					<span>|</span>
					<a href="log.html" >云服務</a>
					<span>|</span>
					<a href="log.html" >天星數(shù)科</a>
					<span>|</span>
					<a href="log.html">有品</a>
					<span>|</span>
					<a href="log.html">小愛開發(fā)平臺</a>
					<span>|</span>
					<a href="log.html">企業(yè)團購</a>
					<span>|</span>
					<a href="log.html">資質證照</a>
					<span>|</span>
					<a href="log.html">協(xié)議規(guī)則</a>
					<span>|</span>
					<a href="log.html" class="download">下載app
                        <!-- <div class="down-box" >
                            <img src="images/download.PNG" alt="小米商城" width="88" height="88"><br>小米商城APP
                        </div> -->
                    </a>
					<span>|</span>
					<a href="log.html">智能生活</a>
					<span>|</span>
					<a href="log.html">Select Location</a>
				</div>
                <div class="login" style="float:right">
                    <a href="#">登錄</a>
					<span>|</span>
					<a href="#">注冊</a>
					<span>|</span>
					<a href="#">消息通知</a>
                </div>
				<div class="shop" style="float:right">
					<a href="log.html">
                        <span><img  id="car" src="images/car1.png" alt="購物車圖標"></span>
                        <span>  購物車（0）</span>
                        <div class="pop">
                            <p>購物車還沒有商品，趕緊選購吧！</p>
                        </div>
                    </a>
                </div>
                
            </div>
        </div>
        <!-- 導航欄 -->
        <div class="header">
            <div class="container">
                <div class="site-logo">
                    <a href="log.html">
						<img src="images/logo.png" />
					</a>
                </div>
				<div class="site-list">
                    <ul>
						<li>
							<a href="#">小米手機</a>
                            <!-- 二級菜單通欄 -->
                            <div class="pop-two">
                                <ul class="down-ui">
                                    <li class="down-li">
                                        <!-- 插入一張圖片
                                        圖片描述
                                        價格 -->
                                        <a href=""> 
                                            <img src="images/Civi.webp" alt="Civi" width="32" height="32">
                                            <h3 class="name">xiaomi civi</h3>
                                            <p class="price">2599元</p>
                                        </a>
                                    </li>
                                    <li class="down-li">
                                        <!-- 插入一張圖片
                                        圖片描述
                                        價格 -->
                                        <a href=""> 
                                            <img src="images/Civi.webp" alt="Civi" width="32" height="32">
                                            <h3 class="name" font-size="13px">xiaomi civi</h3>
                                            <p class="price">2599元</p>
                                        </a>
                                    </li>
                                    <li class="down-li">
                                        <!-- 插入一張圖片
                                        圖片描述
                                        價格 -->
                                        <a href=""> 
                                            <img src="images/Civi.webp" alt="Civi" width="32" height="32">
                                            <h3 class="name">xiaomi civi</h3>
                                            <p class="price">2599元</p>
                                        </a>
                                    </li>
                                    <li class="down-li">
                                        <!-- 插入一張圖片
                                        圖片描述
                                        價格 -->
                                        <a href=""> 
                                            <img src="images/Civi.webp" alt="Civi" width="32" height="32">
                                            <h3 class="name">xiaomi civi</h3>
                                            <p class="price">2599元</p>
                                        </a>
                                    </li>
                                    <li class="down-li">
                                        <!-- 插入一張圖片
                                        圖片描述
                                        價格 -->
                                        <a href=""> 
                                            <img src="images/Civi.webp" alt="Civi" width="32" height="32">
                                            <h3 class="name">xiaomi civi</h3>
                                            <p class="price">2599元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
						</li>
						<li>
							<a href="#">Redmi紅米</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>
						<li>
							<a href="#">社區(qū)</a>
						</li>
					</ul>
                </div>
				<div class="site-search">
                    <form action="">
						<input class=".search-text" type="text" name="shop" placeholder="黑鯊4s" size="25px" />
						<input class="search-btn"  type="submit" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"/>
						
					</form>
                </div>
            </div>
        </div>
        <!-- 主頁內容 -->
         <div class="sit-content">
            <div class="container">
                <!-- 設置側邊欄 -->
                <div class="site-category">
                    <a href="#">
                        手機
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        電腦 筆記本
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        家電
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        出行 穿戴
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                       智能 路由器
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                       電源 配件
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        健康 兒童
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        耳機 音箱
                        <span class="nav">
                        </span>
                    </a>
                    <a href="#">
                        生活 箱包
                        <span class="nav">
                        </span>
                    </a>
                </div>
              <!-- 設置輪播圖 -->
              <div id="banner">
                <div class="img-wrap">
                    <ul>
                        <li class="item" style="display:block">
                            <img src="images/banner1.webp" alt="">
                        </li>
                        <li class="item">
                            <img src="images/banner2.webp" alt="">
                        </li>
                        <li class="item">
                            <img src="images/banner3.webp" alt="">
                        </li>
                        <li class="item">
                            <img src="images/banner4.jpg"  alt="">
                        </li>
                        <li class="item">
                            <img src="images/banner5.webp"  alt="">
                        </li>
                    </ul>
                </div>
        
                <div class="lr-tab">
                    <img src="images/left-dark.png" alt="" class="zuo-btn">
                    <img src="images/right-dark.png" alt="" class="you-btn">
                </div>
        
                <div class="tab-btn">
                    <ul>
                        <li class="btn active"></li>
                        <li class="btn"></li>
                        <li class="btn"></li>
                        <li class="btn"></li>
                        <li class="btn"></li>
                    </ul>
                </div>
            </div>
            </div>
        </div>
        <!-- 內容詳情 -->
        <div class="content-desc">
            <div class="container">
                <!-- 向導欄 -->
                <div class="content-sub">
                    <div class="content-channel">
                        <ul class="channel-list">
                            <li>
                                <a href="#"><img src="images/s1.png"></a>
                                <p>保障服務</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/s2.png"></a>
                                <p>企業(yè)團購</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/s3.png"></a>
                                <p>F碼通道</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/s4.png"></a>
                                <p>米粉卡</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/s5.png"></a>
                                <p>以舊換新</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/s6.png"></a>
                                <p>話費充值</p>
                            </li>
                        </ul>
                    </div>
                    <div class="content-list">
                        <ul>
                            <li>
                                <a href="shoping.html">
                                    <img src="images/sp1.jpg" />
                                </a>
                                <a href="shoping.html">
                                    <img src="images/sp2.jpg" />
                                </a>
                                <a href="#">
                                    <img src="images/sp3.jpg" />
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    
            </div>
        </div>
        <!-- home圖 -->
        <div class="home-main">
            <div class="container">
                <a href="#"><img src="images/ul.webp"></a>
            </div>
        </div>
        <!-- 內容詳情 -->
        <div class="box-main">
            <div class="container">
                <h2>手機</h2>
                <div class="more">
                    <a href="#">
                        查看全部
                    </a>
                </div>
            </div>
        </div>
            <!-- 表格部分 -->
            <div class="con">
            <div class="con-table">
            <table cellspacing="5px">
                <tr>
                    <td rowspan="2" ><img id="rem1" src="images/rem1.webp"></td>
                    <td>
                        <div class="figure-img"><img src="images/rem2.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem3.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem4.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem5.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="figure-img"><img src="images/rem6.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem7.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem8.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                    <td>
                        <div class="figure-img"><img src="images/rem9.webp"></div>
                        <h3 class="title">Redmi Note12</h3>
                        <p class="desc">驍龍8+|1.5k高清直屏</p>
                        <p class="price">2199起</p>
                    </td>
                </tr>
            </table>
            </div>
            </div>
            <!-- 重復 -->
            <div class="box-main">
                <div class="container">
                    <h2>智能穿戴</h2>
                    <div class="more">
                        <a href="#">
                            耳機
                        </a>
                        <a href="#">
                            穿戴
                        </a>

                    </div>
                </div>
            </div>
       <!-- 表格部分 -->
       <div class="con">
        <div class="con-table">
        <table cellspacing="5px">
            <tr>
                <td rowspan="2" ><img id="rem1" src="images/xw1.webp"></td>
                <td>
                    <div class="figure-img"><img src="images/xw2.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td>
                    <div class="figure-img"><img src="images/xw3.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td>
                    <div class="figure-img"><img src="images/xw4.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td>
                    <div class="figure-img"><img src="images/xw5.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="figure-img"><img src="images/xw6.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td>
                    <div class="figure-img"><img src="images/xw7.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td>
                    <div class="figure-img"><img src="images/xw8.webp"></div>
                    <h3 class="title">xiaomi Buds4 Pro</h3>
                    <p class="desc">骨聲通話降噪</p>
                    <p class="price">1049元</p>
                </td>
                <td class="exp">
                 <div class="tab">
                    <table class="table-two" id="exp-table">
                        <tr><td><a href="#"><img src="images/mm.webp"></a><h2>骨傳導耳機</h2></td></tr>
                        <tr><td><h1>瀏覽更多</h1><p3>平衡車|滑板車</p3></td></tr>
                    </table>
                 </div>
                </td>
            </tr>
        </table>
        </div>
        </div>

<!-- 尾部區(qū)域制作 -->
<div class="foot w">
    <!-- 尾部區(qū)域服務部分 -->
    <div class="serve">
        <ul>
            <li><a href="#" class="serve_1"><h2>預約維修服務</h2></a></li>
            <li><a href="#" class="serve_2"><h2>七天無理由退貨</h2></a></li>
            <li><a href="#" class="serve_3"><h2>15天免費換貨</h2></a></li>
            <li><a href="#" class="serve_4"><h2>滿69包郵</h2></a></li>
            <li><a href="#" class="serve_5"><h2>520余家售后網(wǎng)店</h2></a></li>
        </ul>
    </div>
    <!-- 尾部區(qū)域指南部分 -->
    <div class="guild">
        <!-- 尾部區(qū)域指南左側部分 -->
        <div class="guild_le">
            <dl>
                <dt>幫助中心</dt>
                <dd><a href="">賬戶管理</a></dd>
                <dd><a href="">購物指南</a></dd>
                <dd><a href="">訂單操作</a></dd>
            </dl>
            <dl>
                <dt>服務支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服務</a></dd>
                <dd><a href="">相關下載</a></dd>
            </dl>
            <dl>
                <dt>線下門店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服務網(wǎng)點</a></dd>
                <dd><a href="">授權體驗店</a></dd>
            </dl>
            <dl>
                <dt>關于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投資者關系</a></dd>
                <dd><a href="">企業(yè)社會責任</a></dd>
                <dd><a href="">廉潔舉報</a></dd>
            </dl>
            <dl>
                <dt>關注我們</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">聯(lián)系我們</a></dd>
                <dd><a href="">公益基金會</a></dd>
            </dl>
            <dl>
                <dt>特色服務</dt>
                <dd><a href="">F碼通道</a></dd>
                <dd><a href="">禮物碼</a></dd>
                <dd><a href="">防偽查詢</a></dd>
            </dl>
        </div>
        <!-- 尾部區(qū)域指南右側部分 -->
        <div class="guild_ri">
            <h2>400-100-5678</h2>
            <p class="time">8:00-18:00(僅收市話費)</p>
            <a href="" class="customer">人工客服</a>

        </div>
    </div>
</div>

        <!-- 頁腳 -->
        <div class="footer">
            <div class="container" >
                <div class="bottom-logo"><img src="images/logo.png"></div>
            <div class="bottom-font">
                <p><a href="" class="bottom-change">小米商城</a>|<a href="" class="bottom-change"> MIUI </a>|<a href=""
                        class="bottom-change">米家</a>|<a href="" class="bottom-change">米聊</a>|<a href=""
                        class="bottom-change">多看</a>|<a href="" class="bottom-change">游戲</a>|<a href=""
                        class="bottom-change">政企服務</a>|<a href="" class="bottom-change">小米天貓店</a>|<a href=""
                        class="bottom-change">小米集團隱私政策</a>|<a href="" class="bottom-change">小米公司兒童信息保護規(guī)則</a>|<a href=""
                        class="bottom-change">小米商城隱私政策</a>|<a href="" class="bottom-change">小米商城用戶協(xié)議</a>|<a href=""
                        class="bottom-change">問題反饋</a>|<a href="" class="bottom-change">Select Location</a></p>
                <p><a href="" class="bottom-change">北京互聯(lián)網(wǎng)法院法律服務工作站</a>|<a href="" class="bottom-change">中國消費者協(xié)會</a>|<a
                        href="" class="bottom-change">北京市消費者協(xié)會</a></p>
                <p>?&nbsp;mi.com京ICP證110507號&nbsp;京ICP備10046444號&nbsp;公網(wǎng)安備11010802020134號&nbsp;京網(wǎng)文[2020]0276-042號<br>
                    (京)&nbsp;網(wǎng)械平臺備字&nbsp;(2018)&nbsp;第00005號&nbsp;互聯(lián)網(wǎng)藥品信息服務資格證&nbsp;(京)-非經營性-2014-0090&nbsp;營業(yè)執(zhí)照&nbsp;醫(yī)療器械質量公告<br>
                    增值電信業(yè)務許可證&nbsp;網(wǎng)絡食品經營備案&nbsp;京食藥網(wǎng)食備202010048&nbsp;食品經營許可證<br>
                    違法和不良信息舉報電話: 171-5104-4404 知識產權侵權投訴本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實驗室測試
                </p>
            </div>
            <div class="bottom-img">
                <img src="images/bt1.png" alt="">
                <img src="images/bt2.png" alt="">
                <img src="images/bt3.png" alt="">
                <img src="images/bt4.png" alt="">
                <img src="images/bt5.png" alt="">
            </div>
        </div>

    </div>
    <!-- 引入js文件 -->
    <script src="js/func.js"></script>
    </body>
</html>

主頁面css部分：

/* 引入外部字體 */
@font-face{
    font-family:'coarse_font';
    src:url('font/王漢宗粗楷體簡.ttf');
}
@font-face{
    font-family:'read_font';
    src:url("font/LXGWWenKai-Bold.ttf");
}
html,body{width: 100%; height: 100%;}
body{
	font: 14px/1.5 Helvetica Neue ;
}
/* 設置頁面的大盒子 */
.all_in{
    display: flex;
    flex-wrap: wrap;
   justify-content: center;
   text-align: center;
}
/* 每一行的效果實現(xiàn)中的小盒子 */
.container{
    display: flex;
	width: 1226px;
	height: 100%;
    justify-content: space-between;
	
}
/* ——————————————————————————————————頭部區(qū)域—————————————————————————————————— */
/* 使用彈性布局后，float元素失效 */
/* .topBar.topBar_list{
	float: left;
} */
/* .topBar.shop{
	float: right;
}
.topBar.login{
	float: right;
} */
.topBar{
    display: flex;
	width: 100%;
	height: 40px;
	background-color: #333;
    justify-content: center;
    align-content: center;
    position: relative;
}
/* .topBar  .container .topBar-list{
    display: flex;
    align-items: flex-start; 
}*/
.container .shop{
    position: relative;
    width: 120px;
    display: flex;
    background-color: rgb(76, 73, 73);
    justify-content: space-around;


}
.container .login{
    margin-right: 20px;
}
.topBar a{
	color: #d2cfcf;
	font-size: 12px;
	display: inline-block;
	line-height: 40px;
    text-decoration: none;
    /* align-self: flex-end; */
}
.topBar span{
	margin: 3.5px;
}
#car{
    width: 20px; 
    height: 23,.5x; 
    margin-top: 6px;
}
.topBar a:hover{
	color: #fffdfd;
    background-color: #333;
}
.topBar.shop a{
    /* 購物車按鈕是的鼠標懸停范圍和圖標一致 */
	width: 120px;
	height: 40px;
	display: inline-block;
}
.container .shop a:hover{
    background-color: #e0e0e0;
    color: #0e0e0e;
}
.container .shop .span{
    text-align: center;
}
/* 二級購物車顯示 */
.container .shop .pop{
    width: 360px;
    top: 40px;
    position: absolute;
    right: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px;
    display: none;
    z-index: 1000;
}
.container .shop:hover .pop{
    display: block;
}
/* 二級菜單download設置  */
/* .topBar .topBar-list .download{
    position: relative;
} */
/* .topBar .topBar-list .download .down-box{
    display: flex;
    justify-content: center;
    align-content: center;
} */

.topBar .topBar-list .download .down-box img{
    width: 88px;
    height: 88px;
    /* display: block; */
}
.topBar .topBar-list .download .down-box{
    
    width: 126px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 29px;
    margin-left: -63px;
    margin-top: 20px;
    padding-top: 20px;
    box-shadow: rgb(170, 170, 170) 0px 1px 5px;
    text-align: center;
    /* z-index: 1000; */
    font-style: normal;
    color: #323232;
    font-size: 13px;
    display: none;
}

.topBar .topBar-list .download:hover .down-box{
    background-color: #fff;
    display: block;
}
/* ——————————————————————————————————導航欄區(qū)域—————————————————————————————————— */
.header{
	height: 100px;
    position: relative;

}
/* 設置logo大小 */
.header .site-logo{
	width:62px;
	margin-top: 15px;
    margin-left: 5px;
}
/* 讓logo的超鏈接大小與logo大小一致 */
.header .site-logo a{
	display: block;
	width: 62px;
	height: 62px;
}
.header .site-logo a:hover{
    background-color: #fff;
}
/* 設置ul的位置 */
.header .site-list ul{
    display: flex;
	width: 820px;
	height: 66px;
	padding: 12px 0 0 8.53px;
	font-size: 16px;
    list-style-type: none;
    justify-content: space-around;
}
/* 設置a標簽屬性 */
.header .site-list ul li a{
	display: block;
	padding: 11px 10px 38px;
	color: #333;
    text-decoration: none;
}
/* 設置a標簽鼠標懸浮時屬性  */
.header .site-list ul li a:hover{
    color: #e6652e;
    background-color: #fff;

}
/* 設置搜索欄屬性 */
.header .site-search{
    display: flex;
	width: 250px;
	margin-top: 15px;
    justify-content:center;
}
.header .site-search form{
    display: flex;
	width: 250px;
	height: 50px;
    justify-content:space-around;
}
/* 設置兩個表單元素 */
.header .site-search form .search-text{
	height: 48px;
	border:1px solid #0e0e0e;
	font-size: 1.32px;
	padding: 1px;
	}
.header .site-search form .search-btn{
	margin-left: -1px;
	width: 50px;
	height: 50pxrem;
	border: 1px solid #0e0e0e;
    background-image: url("");
}
/* 二級菜單欄 */
.header .site-list .pop-two{
   
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: #fff;
    z-index: 1000;
    left: 0;
    display: none;
    
}
.header .site-list .pop-two .down-li{
    
    width: 200px;
    /* padding-top: 15px; */
    text-align: center;
}
.header .site-list:hover  .pop-two{
    display: block;
}

/* ——————————————————————————————————側邊欄————————————————————————————————— */
.site-category a {
    display: block;
    text-decoration: none;
    width: 250px;
    height: 42px;
    background-color: rgb(133, 128, 128);
    color: rgb(253, 247, 247);
    line-height: 42px;
    text-indent: 2em;
}

a:hover {
    background-color: rgb(223, 115, 27);
}

.nav::after {
    /* 使用箭頭符號編碼 */
    content: '\276F';
    font-size: 20px;
    /* 讓箭頭對齊 */
    float: right;
    padding-right: 40px;
}
/* ——————————————————————————————————輪播圖————————————————————————————————— */
#banner{
    width:980px;
    height: 378px;
    position:relative;
    }
    ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    #banner .item{
        display: none;
        /* 絕對定位 */
        position: absolute;
        top: 0;
        left: 0;
    }
    #banner .item img{
        width:980px;
        height: 378px;
    }
    .lr-tab img{ 

        position: absolute;
        top: 160px;
        opacity:0.5;
    }
     .lr-tab .zuo-btn{
        left: 0;
        width: 50px;
        height: 50px;
    }
    .lr-tab .you-btn{
        right: 0;
        width: 50px;
        height: 50px;
    }
    .lr-tab img:hover{
        opacity:1;
        cursor: pointer;
    }
    .tab-btn {
        bottom: 6px;
        right: 450px;
        position: absolute;
        width: 120px;
        height: 20px;
    }
    .tab-btn .btn{
        float: left;/*左浮動*/
        width: 6px;
        height: 6px;
        background: #868686;
        border-radius: 50%;/*邊框圓角*/
        border: 2px solid #c3c3c3;/*邊框*/
        margin-left: 11px;
    }
    .tab-btn .btn:hover{
        border-color: #7f7f7f;/*單獨設置邊框顏色*/
        background: #e4e4e4; 
        cursor: pointer;
    }
    .tab-btn .active{
        border-color: #7f7f7f;
        background: #e4e4e4; 
    }
    /* ——————————————————————————————————向導————————————————————————————————— */
    .content-sub{
        margin-top: 18px;
        overflow: hidden;
    }
    .content-sub .content-channel{
        background-color: #5f5750;
        float: left;
        width: 248px;
    }
    .content-sub .content-channel ul{
        font-size: 12px;
        text-align: center; 
    }
    .content-sub .content-channel ul li{
        float: left;
        width: 33.33%;
        height: 85px;
        text-align: center;
    }
    .content-sub .content-channel ul li a{
        margin-top: 15px;
        display: block;
        color: rgba(255,255,255,0.6);
    }
    .content-sub .content-channel ul li a img{
        width: 24px;
        height: 24px;
    }
    .content-sub .content-channel ul li a:hover{
        background-color:#5f5750;
        margin: 0.25px;
    }
    .content-sub .content-channel ul li p{
        color: #ffffff;
    }

    .content-sub .content-list{
        float: left;
        width: 970px;
        margin-left :8px; 
    }
    .content-sub .content-list ul li{
       display: flex;
       justify-content: space-around;
       align-content: center;

    }
    .content-sub .content-list ul li a{
        background-color: #fff;
    }
    .content-sub .content-list ul li a:hover{
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)
    }
    .content-sub .content-list ul li a img{
        width: 316px;
        height: 170px;
    }
    
/* ——————————————————————————————————home圖————————————————————————————————— */   
.home-main .container a{
    margin-top: 20px;
    margin-left: 98.5px;
    background-color: #fff;
}
.home-main .container a img{
    width: 1226px;
    height: 120px;
}
/* ——————————————————————————————————內容部分————————————————————————————————— */ 
.box-main{
    display: flex;
    justify-content: center;
    align-items: center;

}

.box-main .container h2{
    font-size: 22px;
	font-weight: 200;
	line-height: 28px;
	color: #333;

}
.box-main .container .more a{
	font-size: 22px;
	line-height: 58px;
	color: #424242;
    text-decoration: none;

}
.box-main .container .more a:hover{
    color: #e6652e;
    background-color: #fff;
    text-decoration: underline;
}
/* 表格 */
.con{
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-content: center;
}
.con-table{
    width: 1226px;
}
 .con-table table{
    width: 1226px;
    height: 628px;
    background-color: #fff;
    /* border-style: solid; */
    
 }
 #rem1{
    width: 234px;
    height:614px ;
 }
 .con .con-table table tr td{
    padding: 0;
    box-shadow: 0px 0px 30px 0px rgba(-20,-20,0,0.1);
 }
 .con .con-table table tr td:hover{
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25);
 }
.con .con-table table tr td img{
    width: 160px;
    height: 160px;
}
.con .con-table table tr td .figure-img{
    text-align: center;
}
.con .con-table table tr td .title{
    text-align: center;
    overflow: hidden;
}
.con .con-table table tr td .desc{
    text-align: center;
    overflow: hidden;
}
.con .con-table table tr td .price{
    text-align: center;
    overflow: hidden;
}
/* 重復  */
#exp-table{
     padding: 0;

}
.con .con-table table tr td{
    padding: 0;
    width: 217px;
}
.con .con-table table tr td .tab .table-two{
    width: 219px;
    height: 300px;
    /* border-collapse: collapse;
    border-spacing: 0; */
}
.con .con-table table tr td .tab .table-two tr td{
   width: 219px;
}
.con .con-table table tr td .tab .table-two img{
    width: 80px;
    height: 80px;
}

/* ——————————————————————————————————尾部區(qū)域————————————————————————————————— */ 

.foot {
    background-color: #fff;
}

/* 尾部區(qū)域模塊 */

.foot .serve {
    display: flex;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #ddd;
    justify-content: space-around;
    align-items: center;
}

.foot .serve ul li {
    float: left;
    text-align:center;
    width: 245px;
}

.foot .serve ul li a {
    display: inline-block;
    color: #ff6709;
    text-decoration: none;
}


.foot .serve ul li .serve_5::before {

margin-left: 50px;

} 

.foot .serve ul li a:hover {
    color:  #ff6709;
    background: none;
}

.guild {
    display: flex;
    margin-top: 30px;
    height: 250px;
    justify-content: space-around;
    align-content: center;
}

/* 尾部區(qū)域指南左側模塊 */

.guild_le {
    float: left;
    text-align: right;
}

.guild_le dl {
    float: left;
    width: 160px;
}

.guild_le dl dt {
    margin-bottom: 10px;
    font-size: 14px;
}

.guild_le dl dd {
    margin: 5px 0;
}

.guild_le dl dd a {
    font-size: 12px;
    color: #757575;
    text-decoration: none;
}

.guild_le dl dd a:hover {
    color:#ff6709 ;
    background-color: #fff;
}

/* 尾部區(qū)域指南右側模塊 */

.guild_ri {
    float: left;
    width: 266px;
    text-align: center;
    border-left: 1px solid #ddd;
}

.guild_ri h2 {
    color: #ff6709;
}

.guild_ri .time {
    font-size: 12px;
    color: #757575;
}

.guild_ri .customer {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #ff6709;
    background-color: #ddd;
    border: 1px solid #ff6709;
    transition: background-color .6s;
    text-decoration: none;
}

.guild_ri .customer::before {
  
    margin-right: 5px;
}

.guild_ri .customer:hover {
    background-color: #ff6709;
    color: #fff;
    text-decoration: none;
}

.guild_ri .view {
    margin-top: 10px;
    font-size: 14px;
    color: #757575;
}

.guild_ri .view a {
    color: #5f5750;
    text-decoration: none;
}


.guild_ri .view a:hover {
    color: #ff6709;
    text-decoration: none;
}

/* ——————————————————————————————————底部欄————————————————————————————————— */ 
.footer{
    display: flex;
    height: 210px;/* 204px */
    padding: 30px 0;
    font-size: 12px;
    background: #fafafa;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .footer .container{
    display: flex;
    width: 1226px; ;
    position: relative;
    /* height: 157px; */
    color: #b0b0b0;
    padding-left: 77px;
    font-size: 12px;
    flex-wrap: wrap;
  }
  .bottom-logo{
    width: 56px;
    height: 56px;
    margin-right: 20px;
    background: url(/images/logo.png) no-repeat;
    background-size: 56px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bottom-font{
    width: 1170px;
    color: #b0b0b0;
    padding-left: 4px;
    font-size: 12px;
  }
  .bottom-img{
    height: 28px;
    margin: 4px 0 15px;
    padding-left: 5px;
    background-color: #fff;
  }
  .bottom-img img{
    width: auto;
    height: 28px;
    margin-left: 0;
  }
  .bottom-change{
    color: #757575;
    transition: all .2s;
  }
  .bottom-change:hover{
  color: #ff6700;
  background-color: #e4e4e4;
  }

js部分：文章來源地址http://www.zghlxwxcb.cn/news/detail-510145.html

var index = 0;//初始化一個變量 指向下標

   $(".tab-btn .btn").click(function () {
       index = $(this).index();//獲取點擊元素的下標
       $(this).addClass("active").siblings().removeClass("active");
       $(".item").eq(index).fadeIn().siblings().fadeOut();
    //eq(參數(shù))方法 找到第某下標的圖片，讓它淡入
	//siblings()返回所有被選元素的同級元素
	//addClass(）動態(tài)添加classname
    //同時為了避免每張圖片只能點擊一次，所以找到其他圖片，讓他們淡出
     });//通過點擊事件 點擊到小按鈕

    //siblings().  當我們點擊給他添加樣式的時候，
    //找到除了點擊以外的其他的兄弟元素，刪除他的class名字


	//點擊右邊按鈕
    $(".lr-tab .you-btn").click(function () {
        index++;//下標變大
        if (index > 4) {
            index = 0;
            }

        $(".item").eq(index).fadeIn().siblings().fadeOut();
    //找到圖片，找到現(xiàn)在index指向的那張圖片，讓他淡入，并將其他的圖片淡出
        $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
    //這里和之前類似，找到當前下標的按鈕，給他添加顯示樣式，給其他兄弟移除樣式。
    });//通過點擊事件 點擊到小按鈕


	//點擊左邊按鈕
    $(".lr-tab .zuo-btn").click(function () {
        index--;
        if (index < 0) {
            index = 4;
            }
		
        $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到圖片，找到現(xiàn)在index指向的那張圖片，讓他淡入，并將其他的圖片淡出
        $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //這里和之前類似，找到當前下標的按鈕，給他添加顯示樣式，給其他兄弟移除樣式。
    });//通過點擊事件 點擊到小按鈕
        //siblings().  當我們點擊給他添加樣式的時候，
        //找到除了點擊以外的其他的兄弟元素，刪除他的class名字
  
    var timer = setInterval(function () {
        index++;//正常按照下標變大順序播放
        if (index > 4) {
            index = 0;
        }
        $(".item").eq(index).fadeIn().siblings().fadeOut();
        //找到圖片，找到現(xiàn)在index指向的那張圖片，讓他淡入，并將其他的圖片淡出
        $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
        //這里和之前類似，找到當前下標的按鈕，給他添加顯示樣式，給其他兄弟移除樣式。
        //通過點擊事件 點擊到小按鈕
        //siblings().  當我們點擊給他添加樣式的時候，
        //找到除了點擊以外的其他的兄弟元素，刪除他的class名字
        }, 3000);//定時器，定義翻頁速度

到了這里，關于Web課程設計——小米商城頁面實戰(zhàn)（html，css，js實現(xiàn)）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

  • 【W(wǎng)eb前端HTML+CSS基礎——小米官網(wǎng)項目實戰(zhàn)】

    【W(wǎng)eb前端HTML+CSS基礎——小米官網(wǎng)項目實戰(zhàn)】

    小米官網(wǎng)是學習前端實戰(zhàn)項目鍛煉最多的一個項目，基本上就是學習完HTML和CSS之后就可以開始鍛煉自己實戰(zhàn)的能力，學習如何搭建自己一個完整的頁面實戰(zhàn)，對之后的學習打下很好的基礎，在這個博客的代碼中，我只是涉及到相關的HTML和CSS，圖片路徑可以自己改并且找一些

    2024年02月04日
    瀏覽(22)
  • 簡單個人靜態(tài)HTML網(wǎng)頁設計作品 基于HTML+CSS+JavaScript仿小米手機網(wǎng)站 html靜態(tài)在線購物商城網(wǎng)頁制作

    簡單個人靜態(tài)HTML網(wǎng)頁設計作品 基于HTML+CSS+JavaScript仿小米手機網(wǎng)站 html靜態(tài)在線購物商城網(wǎng)頁制作

    常見網(wǎng)頁設計作業(yè)題材有 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設計題目

    2024年02月09日
    瀏覽(96)
  • Web實戰(zhàn)丨基于django+html+css的在線購物商城

    Web實戰(zhàn)丨基于django+html+css的在線購物商城

    本期內容：基于Django+HTML+CSS+的在線購物商城 實驗環(huán)境： vscode或pycharm python(3.11.4) django celery dj-static 代碼下載地址：https://download.csdn.net/download/m0_68111267/88718630 使用Django+HTML+CSS開發(fā)一個在線購物商城系統(tǒng)，該在線購物商城分為四大部分：購物界面、購物車、訂單界面以及后臺。

    2024年02月02日
    瀏覽(793)
  • 小米商城主頁展示HTML+CSS

    小米商城主頁展示HTML+CSS

    大佬們呀，花了好幾天的時間總算是看著頁面展示可以了，求賜教！ 小米商城主頁，對大佬來說肯定簡單爆了，我抄寫了好久呀，總是有一點點的小問題，還搞不明白 主要是一個靜態(tài)的小米商城頁面，HTML前端代碼不復雜，一堆的div和ul、li就沒問題了，主要是css代碼搞不懂導

    2024年02月03日
    瀏覽(24)
  • HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè)(家居網(wǎng))

    HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè)(家居網(wǎng))

    ??文章目錄 ??二、??網(wǎng)站介紹?? ??三、??網(wǎng)站效果?? ????1.視頻演示?? ???? 2.圖片演示?? ??四、?? 網(wǎng)站代碼?? ????HTML結構代碼?? ????CSS樣式代碼?? ??五、??更多源碼?? ??網(wǎng)站布局方面 ：計劃采用目前主流的、能兼容各大主

    2024年02月12日
    瀏覽(34)
  • 大二Web課程設計——美食網(wǎng)站設計與實現(xiàn)（HTML+CSS+JavaScript）

    大二Web課程設計——美食網(wǎng)站設計與實現(xiàn)（HTML+CSS+JavaScript）

    ?????靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計?????,常用的網(wǎng)頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁適合修改成為各種類型的產品展示網(wǎng)頁，比

    2024年02月06日
    瀏覽(42)
  • web前端大作業(yè)_Html5+CSS3+JS原生項目_京東商城首頁 詳細代碼

    web前端大作業(yè)_Html5+CSS3+JS原生項目_京東商城首頁 詳細代碼

    index.html css index.css js index.js 效果圖如下： ? ? ? ? ? ?

    2024年02月11日
    瀏覽(26)
  • 前端三大件html,css,js原生實現(xiàn)學生信息管理系統(tǒng)（課程設計）

    前端三大件html,css,js原生實現(xiàn)學生信息管理系統(tǒng)（課程設計）

    ? 目錄結構如該圖所示，只要將文件命名成圖上三種。代碼即可正常運行。分別有三個文件，一個是app.js，放學生信息刪除添加查詢主要邏輯代碼。login.html放登錄頁面樣式以及相關邏輯。studentList.html 放置學生管理的頁面。 運行效果圖： ? 代碼： ?app.js login頁面 studentList.

    2024年02月04日
    瀏覽(30)
  • HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè) 京劇文化水墨風書畫

    HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè) 京劇文化水墨風書畫

    Web前端開發(fā)技術 描述 網(wǎng)頁設計題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設計期末課程大作業(yè)，茶文化網(wǎng)站 | 中華傳統(tǒng)文化題材 | 京劇文化水墨風書畫 | 中國民間年畫文化藝術網(wǎng)站 | HTML期末大學生網(wǎng)頁設計作業(yè) HTML：結構 CSS：樣式 在操作方面上運用了html5和css3， 采用了div+css結構、

    2024年01月21日
    瀏覽(26)
  • 《web課程設計》使用HTML+CSS制作大學生校園二手交易網(wǎng)站

    《web課程設計》使用HTML+CSS制作大學生校園二手交易網(wǎng)站

    ? 【作者主頁——??獲取更多優(yōu)質源碼】 ? 【學習資料/簡歷模板/面試資料/ 網(wǎng)站設計與制作】 ? 【web前端期末大作業(yè)——????畢設項目精品實戰(zhàn)案例】 # 一、?????網(wǎng)站題目 ?? 校園網(wǎng)頁設計 、學校班級網(wǎng)頁制作、學校官網(wǎng)、小說書籍、等網(wǎng)站的設計與制作。 ???

    2024年02月02日
    瀏覽(26)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包