masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Salam cikgu, sila bantu saya membuat kesilapan semasa memilih versi dan warna Apabila saya memilih yang kedua, warna pilihan lalai tidak kembali kepada warna asal.
Time
Time 2019-01-07 18:04:43
0
4
1550

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="/stylesheets" href="/stylesheets" href=" detail.css" />

<link rel="stylesheet" href="static/css/layui.css" />

<link rel="stylesheet" href="static/css/style. css" />

<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<script type= "text/javascript" src="static/js/layui.all.js" ></script>

<script type="text/javascript" src="static/js/jquery-3.3.1. min.js" ></script>

<script type="text/javascript" src="static/js/detail.js" ></script>

<title>红米6A立即购买—小米商城</title>

<style>

*{padding: 0;margin: 0;list-style: none;text-decoration: none;}

.header-lr{width:100%;height: 50px; bayang-kotak: 0px 10px 10px #ccc;margin-top: 10px;border-top: 2px pepejal #ccc;}

.header-lr-box{width: 1226px; ketinggian: 50px;margin:0 auto;}

.header-lefts li{width:70px;height: 50px;float: left;text-align: center;line-height: 50px;}

.header-lefts li a{color: #23262E;font-size: 14px;font-weight: none;}

.header-right{float: right;}

.header-right li{float: left; lebar: 70px;height: 50px;line-height: 50px;text-align: center;}

.header-right span{float: left;line-height: 50px; warna: #aaa;saiz fon: 12px;}

.detail-img{lebar: 1226px;margin: 0 auto;}

.detail-img h6{saiz fon: 16px;berat fon: bold;margin : 10px auto;float: left;}

/*主要内容*/

.content-box{lebar: 1226px;margin: 30px auto;}

.content-box-left{width: 560px; tinggi: 600px;float: kiri;}

.content-box-right{width: 600px;float: right;}

.content-box-right p{color: #aaa;margin: 10px auto;}

.content-box-map{width: 100%;height: 100px;background: /*rgba(51,51,51,0.2)*/#fafafa;margin: 20px auto;border: 1px solid #ccc;}

.content-box-map span{display: inline-block;margin-top: 10px;margin-left: 15px;}

.content-box-map i{position: relative;left: 12px;}

.content -box-money .rls{border: 1px solid #FF8200;}

.content-box-money div{width: 255px;height: 50px;text-align: center;float: left;border: 1px solid #ccc; ketinggian garis: 50px; padding: 0px 20px;}

.jangka-kotak-isi kandungan{float: kanan;warna: #ccc;}

.content-box-money p{font-size: 18px;color: #333;margin: 15px 0px;}

.content-box-color p{font-size: 18px; warna: #333; jidar: 15px auto;}

🎜.content-box-color div{width:255px ; height:50px ;float: left; padding:0px 20px;text-align: center;line-height: 50px;border:1px solid #ccc;}🎜

.rentang warna-kotak-kandungan{display:inline-block;height: 16px;width: 16px;border-radius: 8px;margin-right: 10px;}

.content-bz-box0 p{float: left; saiz fon: 18px; warna: #333;margin: 20px 0px;}

.content-bz-box0 a{float: right;font-size: 14px; jidar: 20px 0px; warna: #ff8200;}

.content-bz-box1{lebar: 598px;tinggi: 150px;sempadan: 1px pepejal #ccc;}

.content-bz-box1 span{float: kiri;lebar: 10px;tinggi : 10px;line-height: 10px;border-radius: 6px;display: inline-block;margin: 60px auto;margin-left: 40px;}

.content-bz-box1 img{float: left;margin: 50px 20px;}

.content-bz-p{margin: 40px auto;}

.content-bz-p p{margin: 10px auto;}

.content-bz-p span{float: right;margin: 0px;margin-kanan:20px; warna: #ccc;lebar: 50px;}

.content-bz-btn{color:rgba(0,0,0,0);border: 1px solid #ccc;}

.content-zs{width: 100 %; ketinggian: 130px;latar belakang: #f9f9f9;margin-top: 30px;}

.content-zs div{margin: 0px 30px 20px;height: 50px; ketinggian garisan: 30px; }

.content-zs p {float: left;}

.content-zs span{float: right;line-height: 50px;}


.content-box-color .rls{border: 1px pepejal #FF8200;}

.isi-kotak-wang,.isi-kotak-warna{lebar: 600px;}

.shop-che{lebar: 240px;tinggi: 50px;teks-jajar: tengah;garis-tinggi : 50px;latar belakang: #FF5722;warna: #FFF; }



</style>

</head>

<body>

<div class="header"&

;

<ul class="menu-left">

<li>

<a href="#">小米商城</a><span>|</span>|</span </li>

<li>

<a href="#">MIUI</a><span>|</span></li>

<li>

<a href="#">IOT</a><span>|</span></li>

<li>

<a href="#">云服务</a><span>|</span></li>

<li>

<a href="#">小爱分享平/lta; span>|</span></li>

<li>

<a href="#">金融</a><span>|</lt;/gt; li>

<li>

<a href="#">有品</a><span>|</span></li>

<li>

<

<a href="#">企业服务</a><span>|</span></li>

<li>

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

</li>

</ul>

<div class="menu-right">

<

<li>

<a href="#">登录</a><span>|</span></li>

<li> href="#">注册</a><span>|</span></li>

<li>

<a href="#">我的订单;/a>

</li>

<li class="menu-rshop">

<a><i class="fa fa-shopping-cart">  购物车(0)</i></a>

<div>购物车中还没有商品，赶紧选购吧！<

/div！<

</ ul>

</div>

</div>

</div>

<div class="contents" style="latar belakang: #F6F6F6;;"

<div class="content">

<div class="contentMenu">

<div class="contentMenu-imgbox">

<img src="static/images/footlogo. png" style="margin: 3px 5px;margin-right: 10px;" />

<img src="static/images/logoAD.gif" />

</div>

<!--下拉新品N-->

;

"contentMenu-ul">

<li>小米手机

<div class="mi-box">

<div class="mi-boxdiv"<div class="gt;

" div class="mi-box1">

<div class="mi-new">新品</div>

<div class="mi-shop">

<img src ="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span> span>

<div class="mi-box1">

<div class="mi-new">新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href ="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span></span>

<div class="mi-box1">

<div class="mi-new" ;新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元< ;/a>

</div>

</div>

<span></span>

<div class="mi-box1">

"mi-new">新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200; ">3299元</a>

</div>

</div>

<span></span>

<

<

</div>

</li>

<li>红米

<div class="mi-box">

<div class="mi-boxdiv">

<div class=" mi-box1">

<div class="mi-new">新品</div>

<div class="mi-shop">

<img src="static/ images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span></span>

<div class="mi-box1">

<div class="mi-new">新品</div>

div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#"> ;小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div

</div>

<span></span>

<div class="mi-box1">

<div class="mi-new"><新div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span></span>

<div class="mi-box1">

<div" class="mi-box1" >新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br /> ;

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span></span>

</div>

</liv>

; t ;

<li>电视</li>

<li>笔记本</li>

<li>盒子</li>我>

<li>路由器

<div class="mi-box">

<div class="mi-boxdiv">

<div class="mi-box1">

<div class="mi-new">新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href ="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元</a>

</div>

</div>

<span></span>

<div class="mi-box1">

<div class="mi-new" ;新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200;">3299元< ;/a>

</div>

</div>

<span></span>

<div class="mi-box1">

"mi-new">新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png" />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style=" color: #FF8200; ">3299元</a>

</div>

</div>

<span></span>

<

< box1

<div class="mi-new">新品</div>

<div class="mi-shop">

<img src="static/images/phone/phone1.png " />

<br />

<a href="#">小米2s</a>

<br />

<a href="#" style= " warna: #FF8200;">3299元</a>

</div>

</div>

<span></span>

</span>

</div>

</li>

<li>智能硬件</li>

<li>服务</li>

;

<li>

;

<

</ ul>

<div class="contentMenu-form">

<form action="">

<input type="text" />

<div class="contentMenu- intxt">

<a href="#">预热618</a>

<a href="#">小米电视</a>

<

<

<

<div class="sousou-btn"><i class="fa fa-search"></i></div>

</form>

</div>

</div>

</div>

</div>

<div class="clear"></div>

" <er-divr >

<div class="header-lr-box">

<div class="header-lefts">

<ul>

<li>

;

小米8</a>

</li>

<li>

<a>小米8se</a>

<&

</ div>

<div class="header-right">

<ul>

<li>

<a>概述</a></a>< ;|</span>

<li>

<a>图集</a>

</li><span>|</span>

<a>参数</a>

</li><span>|</span>

<li>

<a>頭

</li><span>|</span>

<li>

<a>用户评价</a>

<

&

<

ul> ;

</div>

</div>

</div>

<div class="clear"></div>

<!--Penghujung bahagian pengepala-->

<div class="content-box">

<div class="content-box-left">

< ;div class="layui-carousel" id="test1">

<div carousel-item>

<div><img src="static/images/lun/1.jpg"> < ;/div>

<div><img src="static/images/lun/2.jpg"></div>

<div><img src="static/images/ lun /3.jpg"></div>

<div><img src="static/images/lun/4.jpg"></div>

</div>

</div> Pemproses / 5.45" skrin penuh kompak / 13 juta kamera definisi tinggi / badan "Pinggang willow kecil"</p>

                                 ...

" " <span> ;Beijing Bandar Beijing Daerah Dongcheng Yongdingmenwai Street <a href="#" style="color: #FF8200;">Ubah suai</a></span> ;<br                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

. 4G+64G Penuh Netcom<span data-val="599">599</span></div>

                                                                                                             + 64G Full Netcom<span data-val="699">699</span></div>

                                                                                                                         ;

        <div class="content-box-color">

        <p>选择颜色</p>

 -content  ;-v-color class="content-color-content" " style="margin-right: 5px;margin-bottom: 5px;"><span  style="background:#F6E6D8;"></span>金色</div>

        < ="content-color-left"><span  style="background:#3C3F43;"></span>深灰</div>

        <div class="content-color-left" style="margin-right: 5px;"><span  style="background:#D93239;"></span>亮红</div>

        <div class="content-color- left"><<span  style="background:#3871B7;"></span>亮蓝</div>

        </div>

  ;& div t="clear class" ;/div>

        <div class="content-box-bz">

        <div class="content-bz-box0">保障服务< /p>

        <a href="#">了解保障条款</a>

        <div class="clear"><<</div gt;

        < ;div class="content-bz-box1">

        <span class="fa fa-check-circle content-bz-btn"></span>

        <img src="static images/bz.jpg">

<div class="content-bz-p">

<p style="font-size: 18px; warna: #000;">意外保障服务</p>

<p>手机意外摔落/进水/碾压等损坏<fa check-square content-bz-btn"></b>  我已阅读 <a href="#"> 服务条款 </a><a><a> "#"> 服务条款 </a>

<span data-val="99">99元</span>

</div>>

</div> 

;

        </div>

                                                                                                                                                                                                                              kelas "> /images/bz.jpg">

<div class="content-bz-p">

<p style= "font-size: 18px; color: #000;">Perkhidmatan perlindungan skrin rosak</p>

<p>Skrin telefon pecah secara tidak sengaja</p>

<b class="fa-check -square content-bz-btn"></b>   Saya telah membaca <a href="#"> Syarat Perkhidmatan </a>|<a href="# "> Syarat Perkhidmatan </a>

<span data-val="179">179 yuan</span>

</div>                                                                " ></div> ;

                                                                                                                                                                                 ; t;</div>

            <p id="tojg" style="color:#FF6A00;font-size: 25px;margin-left: 30px;"> ;Jumlah  ： 699 yuan</p>

                                                      ;       ;      ;       ; gt;</i> 7 hari tiada soalan ditanya < i class="fa fa-check-circle-o"></ i> Penggantian 15 hari untuk isu kualiti <i class="fa fa-check-circle-o"></ i> Waranti 365 hari</p>

/div>

</div>

<t;gt;;

<!--Penerangan-->

<div class="detail-img">

<h6>Arahan khas</h6>

<img src="images" /sm.jpg" />

<h6>WeChat Rasmi</h6>

<img src="static/images/2.jpg" />

</div>


<!--Ekor-->

<div class="footers">

<div class="footer">

<div class="for-li"> ;

<a href="#"><i class="fa-wrench"> Tempah perkhidmatan pembaikan</i><span>|</span></a> ;

<a href="#"><i class="fa-rotate-right"> 7 hari tiada soalan diajukan</i><span>|</span> a>

<a href="#"><i class="fa fa-refresh"> 15 hari pertukaran percuma</i><span>|</ span></ a>

<a href="#"><i class="fa-gift"> Penghantaran percuma</i><span>|< ;/span></a>

<a href="#"><i class="fa-map-marker"> Lebih daripada 520 cawangan selepas jualan</i>< /a>

</ div>

</div>

</div>

<div class="for-li-1">

<div class="for-li-a">

<dl>

<dt>Pusat Bantuan</ dt> ;

<dd>

<a href="#">Pengurusan Akaun</a>

</dd>

<dd>

" <a href="# Panduan Membeli-belah</a>

</dd>

<dd>

<a href="#">Operasi Pesanan</a>

</dd>

</dd>

>

</dd>

<dd>

<a href="#">Layanan diri</a>

</dd>

<dd> href = "#" & gt; muat turun yang berkaitan & lt;/a & gt;

& lt;/dd & gt;

& lt;/dl & gt;

& lt; dl & gt;

& lt; dt & gt; ;

<a href="#">Xiaomi Home</a>

</dd>

<dd>

<a href="#">Cawangan perkhidmatan </a ;

</dd>

<dd>

<a href="#">Kedai Pengalaman Dibenarkan</a>

</dd>

;

<

;dl>

<dt> Perihal Xiaomi /dd>

<dd>

<a href="#">Sertai Xiaomi</a>

<

<

;

<a href="# ">Perhubungan Pelabur</a>

</dd>

</dl>

<dl>

;Follow us </dd> ;

<dd>

<a href="#">Sina Weibo</a>

</dd>

<dd>

;

<dd>

;

Weibo rasmi< /a>

</dd>

<dd>

<a href="#">Hubungi kami</a>

</dd>

</dd> ;

<dl>

<dt>Perkhidmatan Khusus</dt>

<dd>

<a href="#">F码通道</a>

</dd>

<dd>

<a href="#">>礼物破;

</dd>

<dd>

<a href="#">防伪查询</a>

</dd>

</dd>

;div class="for-conten">

<p class="suorg">Feir-520-1314</p>

<p class="suorg-1">周一至周日8:00-18:00<br />(仅收市话费)</p>

<button class="btn"><span class="fa-komen"></ span> 联系客服</button>

</div>

</div>

</div>

<div class="clear"&

class="for-end">

<div class="end-1" style="margin-right: 15px;"><img src="static/images/footlogo.png" alt=" " /></div>

<div class="end-2">

<div class="endli">

<ul>

;li>

;小米商城<span></span></li>

<li>MIUI<span></span></li>

;

< /span></li>

<li>米聊<span></span></li>

<li>多看<gt;<> li>

<li>游戏<span></span></li>

<li>路由器<span><<.gt;<< ;米粉卡<span></span></li>

<li>政企服务<span></span></li>猜猜店< ;span></span></li>

<li>隐私政策<span></span></li>

<<li< / span></li>

<li>Pilih Wilayah</li>

</ul>

</div>

<div class="endli-p">

<a href="#">©mi.com</a>

No. Sijil ICP Beijing 110507

<a href= " #">Beijing ICP No. 10046444</a>

<a href="#">Beijing Public Network Security No. 11010802020134</a><.;< [2014] No. 0059-0009</a>

</a>

<br> Talian pelaporan maklumat yang tidak sah dan berbahaya: 185-0130-1238, kecuali dinyatakan sebaliknya, kecuali dinyatakan sebaliknya data datang daripada ujian makmal kami

</div>

</div>

<div class="end-3">

<img src="static/images/ footericon1.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/images/footericon2.png" alt="" class="icon " style=" margin-kanan: 10px;" />

<img src="static/images/footericon3.png" alt="" class="icon" style="margin-right: 10px;" / >

<img src="static/images/footericon4.png" alt="" class="icon" style="margin-right: 10px;" />

<img src="static/ images/footericon5. png" alt="" class="icon" />

</div>

<div class="font">Teroka teknologi hitam, Xiaomi lahir kerana demam! </div>

</div>

</body>


<skrip>

layui.use('carousel', function(){

var carousel = layui.carousel. //Build

instance.

render({

elem: '#test1'

,width: '560px' //Tetapkan lebar bekas

,height:'600px'

,anak panah: 'sentiasa' //Sentiasa paparkan anak panah

/, anim: 'updown' //Tukar mod animasi

});

});

</script>

<skrip>

//Versi lalai pertama Gantikan kaedah nama kelas

$( document ).ready(function(){

//Dapatkan kelas eq traversal (0) bermula dari 0 (mewakili yang pertama) dan gantikan nama kelas dengan .content-box-bb rls

$(".detail_much_left ").eq (0).attr("class",".detail_much_left rls")

$(".content-color-left").eq(0).attr("class",".content-color -rls kiri" )

//Klik pada versi yang dipilih

$(".detail_much_left").klik(function(){

$(".detail_much_left").attr("class",". detail_banyak_kiri")

$(this).attr("class",".detail_banyak_left rls")

})

//Klik untuk menukar warna

$(".content-color-left"). klik(fungsi(){

$(".warna-kandungan-kiri").attr("kelas",".warna-kandungan-kiri")

$(ini).attr("kelas",". content-color-left" rls ")

})


})

</script>

</html>


Time
Time

你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。

membalas semua(2)
灭绝师太
灭绝师太2019-01-08 10:40:21 Tingkat 2

Terdapat masalah dengan kaedah penulisan anda, attr("class","Seharusnya tiada noktah sebelum nama kelas"); ini adalah butiran yang sangat kecil, sila ambil perhatiannya

Suka +1
Tambah Balasan
  • balas Terima kasih banyak!
    Time pengarang 2019-01-08 10:41:26
Time
Time2019-01-08 10:36:37 Tingkat 1

Selesai

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan