当前位置:   article > 正文

Web课程设计——小米商城页面实战(html,css,js实现)_小米商城的网页代码

小米商城的网页代码

主要完成了三个页面,效果如下:

 

主页面html部分源码:

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小米商城</title>
  6. <link rel="icon" type="image/x-icon" href="images/tubiao.ico" /><!-- 设置网站图标-->
  7. <link rel="stylesheet" type="text/css" href="main.css"><!-- 外链css文件 -->
  8. <script src="js/jquery-3.3.1.js"></script><!-- 引用jquery.js-->
  9. </head>
  10. <body>
  11. <div class="all_in">
  12. <!-- 顶部栏 -->
  13. <div class="topBar">
  14. <div class="container">
  15. <!-- 定义为行内块显示,否则会自动换行 -->
  16. <div class="topBar_list" style="display:inline">
  17. <a href="log.html">小米商城</a>
  18. <span>|</span>
  19. <a href="log.html">MIUI</a>
  20. <span>|</span>
  21. <a href="log.html">loT</a>
  22. <span>|</span>
  23. <a href="log.html" >云服务</a>
  24. <span>|</span>
  25. <a href="log.html" >天星数科</a>
  26. <span>|</span>
  27. <a href="log.html">有品</a>
  28. <span>|</span>
  29. <a href="log.html">小爱开发平台</a>
  30. <span>|</span>
  31. <a href="log.html">企业团购</a>
  32. <span>|</span>
  33. <a href="log.html">资质证照</a>
  34. <span>|</span>
  35. <a href="log.html">协议规则</a>
  36. <span>|</span>
  37. <a href="log.html" class="download">下载app
  38. <!-- <div class="down-box" >
  39. <img src="images/download.PNG" alt="小米商城" width="88" height="88"><br>小米商城APP
  40. </div> -->
  41. </a>
  42. <span>|</span>
  43. <a href="log.html">智能生活</a>
  44. <span>|</span>
  45. <a href="log.html">Select Location</a>
  46. </div>
  47. <div class="login" style="float:right">
  48. <a href="#">登录</a>
  49. <span>|</span>
  50. <a href="#">注册</a>
  51. <span>|</span>
  52. <a href="#">消息通知</a>
  53. </div>
  54. <div class="shop" style="float:right">
  55. <a href="log.html">
  56. <span><img id="car" src="images/car1.png" alt="购物车图标"></span>
  57. <span> 购物车(0)</span>
  58. <div class="pop">
  59. <p>购物车还没有商品,赶紧选购吧!</p>
  60. </div>
  61. </a>
  62. </div>
  63. </div>
  64. </div>
  65. <!-- 导航栏 -->
  66. <div class="header">
  67. <div class="container">
  68. <div class="site-logo">
  69. <a href="log.html">
  70. <img src="images/logo.png" />
  71. </a>
  72. </div>
  73. <div class="site-list">
  74. <ul>
  75. <li>
  76. <a href="#">小米手机</a>
  77. <!-- 二级菜单通栏 -->
  78. <div class="pop-two">
  79. <ul class="down-ui">
  80. <li class="down-li">
  81. <!-- 插入一张图片
  82. 图片描述
  83. 价格 -->
  84. <a href="">
  85. <img src="images/Civi.webp" alt="Civi" width="32" height="32">
  86. <h3 class="name">xiaomi civi</h3>
  87. <p class="price">2599元</p>
  88. </a>
  89. </li>
  90. <li class="down-li">
  91. <!-- 插入一张图片
  92. 图片描述
  93. 价格 -->
  94. <a href="">
  95. <img src="images/Civi.webp" alt="Civi" width="32" height="32">
  96. <h3 class="name" font-size="13px">xiaomi civi</h3>
  97. <p class="price">2599元</p>
  98. </a>
  99. </li>
  100. <li class="down-li">
  101. <!-- 插入一张图片
  102. 图片描述
  103. 价格 -->
  104. <a href="">
  105. <img src="images/Civi.webp" alt="Civi" width="32" height="32">
  106. <h3 class="name">xiaomi civi</h3>
  107. <p class="price">2599元</p>
  108. </a>
  109. </li>
  110. <li class="down-li">
  111. <!-- 插入一张图片
  112. 图片描述
  113. 价格 -->
  114. <a href="">
  115. <img src="images/Civi.webp" alt="Civi" width="32" height="32">
  116. <h3 class="name">xiaomi civi</h3>
  117. <p class="price">2599元</p>
  118. </a>
  119. </li>
  120. <li class="down-li">
  121. <!-- 插入一张图片
  122. 图片描述
  123. 价格 -->
  124. <a href="">
  125. <img src="images/Civi.webp" alt="Civi" width="32" height="32">
  126. <h3 class="name">xiaomi civi</h3>
  127. <p class="price">2599元</p>
  128. </a>
  129. </li>
  130. </ul>
  131. </div>
  132. </li>
  133. <li>
  134. <a href="#">Redmi红米</a>
  135. </li>
  136. <li>
  137. <a href="#">电视</a>
  138. </li>
  139. <li>
  140. <a href="#">笔记本</a>
  141. </li>
  142. <li>
  143. <a href="#">家电</a>
  144. </li>
  145. <li>
  146. <a href="#">路由器</a>
  147. </li>
  148. <li>
  149. <a href="#">智能硬件</a>
  150. </li>
  151. <li>
  152. <a href="#">服务</a>
  153. </li>
  154. <li>
  155. <a href="#">社区</a>
  156. </li>
  157. </ul>
  158. </div>
  159. <div class="site-search">
  160. <form action="">
  161. <input class=".search-text" type="text" name="shop" placeholder="黑鲨4s" size="25px" />
  162. <input class="search-btn" type="submit" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"/>
  163. </form>
  164. </div>
  165. </div>
  166. </div>
  167. <!-- 主页内容 -->
  168. <div class="sit-content">
  169. <div class="container">
  170. <!-- 设置侧边栏 -->
  171. <div class="site-category">
  172. <a href="#">
  173. 手机
  174. <span class="nav">
  175. </span>
  176. </a>
  177. <a href="#">
  178. 电脑 笔记本
  179. <span class="nav">
  180. </span>
  181. </a>
  182. <a href="#">
  183. 家电
  184. <span class="nav">
  185. </span>
  186. </a>
  187. <a href="#">
  188. 出行 穿戴
  189. <span class="nav">
  190. </span>
  191. </a>
  192. <a href="#">
  193. 智能 路由器
  194. <span class="nav">
  195. </span>
  196. </a>
  197. <a href="#">
  198. 电源 配件
  199. <span class="nav">
  200. </span>
  201. </a>
  202. <a href="#">
  203. 健康 儿童
  204. <span class="nav">
  205. </span>
  206. </a>
  207. <a href="#">
  208. 耳机 音箱
  209. <span class="nav">
  210. </span>
  211. </a>
  212. <a href="#">
  213. 生活 箱包
  214. <span class="nav">
  215. </span>
  216. </a>
  217. </div>
  218. <!-- 设置轮播图 -->
  219. <div id="banner">
  220. <div class="img-wrap">
  221. <ul>
  222. <li class="item" style="display:block">
  223. <img src="images/banner1.webp" alt="">
  224. </li>
  225. <li class="item">
  226. <img src="images/banner2.webp" alt="">
  227. </li>
  228. <li class="item">
  229. <img src="images/banner3.webp" alt="">
  230. </li>
  231. <li class="item">
  232. <img src="images/banner4.jpg" alt="">
  233. </li>
  234. <li class="item">
  235. <img src="images/banner5.webp" alt="">
  236. </li>
  237. </ul>
  238. </div>
  239. <div class="lr-tab">
  240. <img src="images/left-dark.png" alt="" class="zuo-btn">
  241. <img src="images/right-dark.png" alt="" class="you-btn">
  242. </div>
  243. <div class="tab-btn">
  244. <ul>
  245. <li class="btn active"></li>
  246. <li class="btn"></li>
  247. <li class="btn"></li>
  248. <li class="btn"></li>
  249. <li class="btn"></li>
  250. </ul>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. <!-- 内容详情 -->
  256. <div class="content-desc">
  257. <div class="container">
  258. <!-- 向导栏 -->
  259. <div class="content-sub">
  260. <div class="content-channel">
  261. <ul class="channel-list">
  262. <li>
  263. <a href="#"><img src="images/s1.png"></a>
  264. <p>保障服务</p>
  265. </li>
  266. <li>
  267. <a href="#"><img src="images/s2.png"></a>
  268. <p>企业团购</p>
  269. </li>
  270. <li>
  271. <a href="#"><img src="images/s3.png"></a>
  272. <p>F码通道</p>
  273. </li>
  274. <li>
  275. <a href="#"><img src="images/s4.png"></a>
  276. <p>米粉卡</p>
  277. </li>
  278. <li>
  279. <a href="#"><img src="images/s5.png"></a>
  280. <p>以旧换新</p>
  281. </li>
  282. <li>
  283. <a href="#"><img src="images/s6.png"></a>
  284. <p>话费充值</p>
  285. </li>
  286. </ul>
  287. </div>
  288. <div class="content-list">
  289. <ul>
  290. <li>
  291. <a href="shoping.html">
  292. <img src="images/sp1.jpg" />
  293. </a>
  294. <a href="shoping.html">
  295. <img src="images/sp2.jpg" />
  296. </a>
  297. <a href="#">
  298. <img src="images/sp3.jpg" />
  299. </a>
  300. </li>
  301. </ul>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. <!-- home图 -->
  308. <div class="home-main">
  309. <div class="container">
  310. <a href="#"><img src="images/ul.webp"></a>
  311. </div>
  312. </div>
  313. <!-- 内容详情 -->
  314. <div class="box-main">
  315. <div class="container">
  316. <h2>手机</h2>
  317. <div class="more">
  318. <a href="#">
  319. 查看全部
  320. </a>
  321. </div>
  322. </div>
  323. </div>
  324. <!-- 表格部分 -->
  325. <div class="con">
  326. <div class="con-table">
  327. <table cellspacing="5px">
  328. <tr>
  329. <td rowspan="2" ><img id="rem1" src="images/rem1.webp"></td>
  330. <td>
  331. <div class="figure-img"><img src="images/rem2.webp"></div>
  332. <h3 class="title">Redmi Note12</h3>
  333. <p class="desc">骁龙8+|1.5k高清直屏</p>
  334. <p class="price">2199起</p>
  335. </td>
  336. <td>
  337. <div class="figure-img"><img src="images/rem3.webp"></div>
  338. <h3 class="title">Redmi Note12</h3>
  339. <p class="desc">骁龙8+|1.5k高清直屏</p>
  340. <p class="price">2199起</p>
  341. </td>
  342. <td>
  343. <div class="figure-img"><img src="images/rem4.webp"></div>
  344. <h3 class="title">Redmi Note12</h3>
  345. <p class="desc">骁龙8+|1.5k高清直屏</p>
  346. <p class="price">2199起</p>
  347. </td>
  348. <td>
  349. <div class="figure-img"><img src="images/rem5.webp"></div>
  350. <h3 class="title">Redmi Note12</h3>
  351. <p class="desc">骁龙8+|1.5k高清直屏</p>
  352. <p class="price">2199起</p>
  353. </td>
  354. </tr>
  355. <tr>
  356. <td>
  357. <div class="figure-img"><img src="images/rem6.webp"></div>
  358. <h3 class="title">Redmi Note12</h3>
  359. <p class="desc">骁龙8+|1.5k高清直屏</p>
  360. <p class="price">2199起</p>
  361. </td>
  362. <td>
  363. <div class="figure-img"><img src="images/rem7.webp"></div>
  364. <h3 class="title">Redmi Note12</h3>
  365. <p class="desc">骁龙8+|1.5k高清直屏</p>
  366. <p class="price">2199起</p>
  367. </td>
  368. <td>
  369. <div class="figure-img"><img src="images/rem8.webp"></div>
  370. <h3 class="title">Redmi Note12</h3>
  371. <p class="desc">骁龙8+|1.5k高清直屏</p>
  372. <p class="price">2199起</p>
  373. </td>
  374. <td>
  375. <div class="figure-img"><img src="images/rem9.webp"></div>
  376. <h3 class="title">Redmi Note12</h3>
  377. <p class="desc">骁龙8+|1.5k高清直屏</p>
  378. <p class="price">2199起</p>
  379. </td>
  380. </tr>
  381. </table>
  382. </div>
  383. </div>
  384. <!-- 重复 -->
  385. <div class="box-main">
  386. <div class="container">
  387. <h2>智能穿戴</h2>
  388. <div class="more">
  389. <a href="#">
  390. 耳机
  391. </a>
  392. <a href="#">
  393. 穿戴
  394. </a>
  395. </div>
  396. </div>
  397. </div>
  398. <!-- 表格部分 -->
  399. <div class="con">
  400. <div class="con-table">
  401. <table cellspacing="5px">
  402. <tr>
  403. <td rowspan="2" ><img id="rem1" src="images/xw1.webp"></td>
  404. <td>
  405. <div class="figure-img"><img src="images/xw2.webp"></div>
  406. <h3 class="title">xiaomi Buds4 Pro</h3>
  407. <p class="desc">骨声通话降噪</p>
  408. <p class="price">1049元</p>
  409. </td>
  410. <td>
  411. <div class="figure-img"><img src="images/xw3.webp"></div>
  412. <h3 class="title">xiaomi Buds4 Pro</h3>
  413. <p class="desc">骨声通话降噪</p>
  414. <p class="price">1049元</p>
  415. </td>
  416. <td>
  417. <div class="figure-img"><img src="images/xw4.webp"></div>
  418. <h3 class="title">xiaomi Buds4 Pro</h3>
  419. <p class="desc">骨声通话降噪</p>
  420. <p class="price">1049元</p>
  421. </td>
  422. <td>
  423. <div class="figure-img"><img src="images/xw5.webp"></div>
  424. <h3 class="title">xiaomi Buds4 Pro</h3>
  425. <p class="desc">骨声通话降噪</p>
  426. <p class="price">1049元</p>
  427. </td>
  428. </tr>
  429. <tr>
  430. <td>
  431. <div class="figure-img"><img src="images/xw6.webp"></div>
  432. <h3 class="title">xiaomi Buds4 Pro</h3>
  433. <p class="desc">骨声通话降噪</p>
  434. <p class="price">1049元</p>
  435. </td>
  436. <td>
  437. <div class="figure-img"><img src="images/xw7.webp"></div>
  438. <h3 class="title">xiaomi Buds4 Pro</h3>
  439. <p class="desc">骨声通话降噪</p>
  440. <p class="price">1049元</p>
  441. </td>
  442. <td>
  443. <div class="figure-img"><img src="images/xw8.webp"></div>
  444. <h3 class="title">xiaomi Buds4 Pro</h3>
  445. <p class="desc">骨声通话降噪</p>
  446. <p class="price">1049元</p>
  447. </td>
  448. <td class="exp">
  449. <div class="tab">
  450. <table class="table-two" id="exp-table">
  451. <tr><td><a href="#"><img src="images/mm.webp"></a><h2>骨传导耳机</h2></td></tr>
  452. <tr><td><h1>浏览更多</h1><p3>平衡车|滑板车</p3></td></tr>
  453. </table>
  454. </div>
  455. </td>
  456. </tr>
  457. </table>
  458. </div>
  459. </div>
  460. <!-- 尾部区域制作 -->
  461. <div class="foot w">
  462. <!-- 尾部区域服务部分 -->
  463. <div class="serve">
  464. <ul>
  465. <li><a href="#" class="serve_1"><h2>预约维修服务</h2></a></li>
  466. <li><a href="#" class="serve_2"><h2>七天无理由退货</h2></a></li>
  467. <li><a href="#" class="serve_3"><h2>15天免费换货</h2></a></li>
  468. <li><a href="#" class="serve_4"><h2>满69包邮</h2></a></li>
  469. <li><a href="#" class="serve_5"><h2>520余家售后网店</h2></a></li>
  470. </ul>
  471. </div>
  472. <!-- 尾部区域指南部分 -->
  473. <div class="guild">
  474. <!-- 尾部区域指南左侧部分 -->
  475. <div class="guild_le">
  476. <dl>
  477. <dt>帮助中心</dt>
  478. <dd><a href="">账户管理</a></dd>
  479. <dd><a href="">购物指南</a></dd>
  480. <dd><a href="">订单操作</a></dd>
  481. </dl>
  482. <dl>
  483. <dt>服务支持</dt>
  484. <dd><a href="">售后政策</a></dd>
  485. <dd><a href="">自助服务</a></dd>
  486. <dd><a href="">相关下载</a></dd>
  487. </dl>
  488. <dl>
  489. <dt>线下门店</dt>
  490. <dd><a href="">小米之家</a></dd>
  491. <dd><a href="">服务网点</a></dd>
  492. <dd><a href="">授权体验店</a></dd>
  493. </dl>
  494. <dl>
  495. <dt>关于小米</dt>
  496. <dd><a href="">了解小米</a></dd>
  497. <dd><a href="">加入小米</a></dd>
  498. <dd><a href="">投资者关系</a></dd>
  499. <dd><a href="">企业社会责任</a></dd>
  500. <dd><a href="">廉洁举报</a></dd>
  501. </dl>
  502. <dl>
  503. <dt>关注我们</dt>
  504. <dd><a href="">新浪微博</a></dd>
  505. <dd><a href="">官方微信</a></dd>
  506. <dd><a href="">联系我们</a></dd>
  507. <dd><a href="">公益基金会</a></dd>
  508. </dl>
  509. <dl>
  510. <dt>特色服务</dt>
  511. <dd><a href="">F码通道</a></dd>
  512. <dd><a href="">礼物码</a></dd>
  513. <dd><a href="">防伪查询</a></dd>
  514. </dl>
  515. </div>
  516. <!-- 尾部区域指南右侧部分 -->
  517. <div class="guild_ri">
  518. <h2>400-100-5678</h2>
  519. <p class="time">8:00-18:00(仅收市话费)</p>
  520. <a href="" class="customer">人工客服</a>
  521. </div>
  522. </div>
  523. </div>
  524. <!-- 页脚 -->
  525. <div class="footer">
  526. <div class="container" >
  527. <div class="bottom-logo"><img src="images/logo.png"></div>
  528. <div class="bottom-font">
  529. <p><a href="" class="bottom-change">小米商城</a>|<a href="" class="bottom-change"> MIUI </a>|<a href=""
  530. class="bottom-change">米家</a>|<a href="" class="bottom-change">米聊</a>|<a href=""
  531. class="bottom-change">多看</a>|<a href="" class="bottom-change">游戏</a>|<a href=""
  532. class="bottom-change">政企服务</a>|<a href="" class="bottom-change">小米天猫店</a>|<a href=""
  533. class="bottom-change">小米集团隐私政策</a>|<a href="" class="bottom-change">小米公司儿童信息保护规则</a>|<a href=""
  534. class="bottom-change">小米商城隐私政策</a>|<a href="" class="bottom-change">小米商城用户协议</a>|<a href=""
  535. class="bottom-change">问题反馈</a>|<a href="" class="bottom-change">Select Location</a></p>
  536. <p><a href="" class="bottom-change">北京互联网法院法律服务工作站</a>|<a href="" class="bottom-change">中国消费者协会</a>|<a
  537. href="" class="bottom-change">北京市消费者协会</a></p>
  538. <p>©&nbsp;mi.com京ICP证110507号&nbsp;京ICP备10046444号&nbsp;公网安备11010802020134号&nbsp;京网文[2020]0276-042号<br>
  539. (京)&nbsp;网械平台备字&nbsp;(2018)&nbsp;第00005号&nbsp;互联网药品信息服务资格证&nbsp;(京)-非经营性-2014-0090&nbsp;营业执照&nbsp;医疗器械质量公告<br>
  540. 增值电信业务许可证&nbsp;网络食品经营备案&nbsp;京食药网食备202010048&nbsp;食品经营许可证<br>
  541. 违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
  542. </p>
  543. </div>
  544. <div class="bottom-img">
  545. <img src="images/bt1.png" alt="">
  546. <img src="images/bt2.png" alt="">
  547. <img src="images/bt3.png" alt="">
  548. <img src="images/bt4.png" alt="">
  549. <img src="images/bt5.png" alt="">
  550. </div>
  551. </div>
  552. </div>
  553. <!-- 引入js文件 -->
  554. <script src="js/func.js"></script>
  555. </body>
  556. </html>

主页面css部分:

  1. /* 引入外部字体 */
  2. @font-face{
  3. font-family:'coarse_font';
  4. src:url('font/王汉宗粗楷体简.ttf');
  5. }
  6. @font-face{
  7. font-family:'read_font';
  8. src:url("font/LXGWWenKai-Bold.ttf");
  9. }
  10. html,body{width: 100%; height: 100%;}
  11. body{
  12. font: 14px/1.5 Helvetica Neue ;
  13. }
  14. /* 设置页面的大盒子 */
  15. .all_in{
  16. display: flex;
  17. flex-wrap: wrap;
  18. justify-content: center;
  19. text-align: center;
  20. }
  21. /* 每一行的效果实现中的小盒子 */
  22. .container{
  23. display: flex;
  24. width: 1226px;
  25. height: 100%;
  26. justify-content: space-between;
  27. }
  28. /* ——————————————————————————————————头部区域—————————————————————————————————— */
  29. /* 使用弹性布局后,float元素失效 */
  30. /* .topBar.topBar_list{
  31. float: left;
  32. } */
  33. /* .topBar.shop{
  34. float: right;
  35. }
  36. .topBar.login{
  37. float: right;
  38. } */
  39. .topBar{
  40. display: flex;
  41. width: 100%;
  42. height: 40px;
  43. background-color: #333;
  44. justify-content: center;
  45. align-content: center;
  46. position: relative;
  47. }
  48. /* .topBar .container .topBar-list{
  49. display: flex;
  50. align-items: flex-start;
  51. }*/
  52. .container .shop{
  53. position: relative;
  54. width: 120px;
  55. display: flex;
  56. background-color: rgb(76, 73, 73);
  57. justify-content: space-around;
  58. }
  59. .container .login{
  60. margin-right: 20px;
  61. }
  62. .topBar a{
  63. color: #d2cfcf;
  64. font-size: 12px;
  65. display: inline-block;
  66. line-height: 40px;
  67. text-decoration: none;
  68. /* align-self: flex-end; */
  69. }
  70. .topBar span{
  71. margin: 3.5px;
  72. }
  73. #car{
  74. width: 20px;
  75. height: 23,.5x;
  76. margin-top: 6px;
  77. }
  78. .topBar a:hover{
  79. color: #fffdfd;
  80. background-color: #333;
  81. }
  82. .topBar.shop a{
  83. /* 购物车按钮是的鼠标悬停范围和图标一致 */
  84. width: 120px;
  85. height: 40px;
  86. display: inline-block;
  87. }
  88. .container .shop a:hover{
  89. background-color: #e0e0e0;
  90. color: #0e0e0e;
  91. }
  92. .container .shop .span{
  93. text-align: center;
  94. }
  95. /* 二级购物车显示 */
  96. .container .shop .pop{
  97. width: 360px;
  98. top: 40px;
  99. position: absolute;
  100. right: 0;
  101. background-color: #fff;
  102. box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px;
  103. display: none;
  104. z-index: 1000;
  105. }
  106. .container .shop:hover .pop{
  107. display: block;
  108. }
  109. /* 二级菜单download设置 */
  110. /* .topBar .topBar-list .download{
  111. position: relative;
  112. } */
  113. /* .topBar .topBar-list .download .down-box{
  114. display: flex;
  115. justify-content: center;
  116. align-content: center;
  117. } */
  118. .topBar .topBar-list .download .down-box img{
  119. width: 88px;
  120. height: 88px;
  121. /* display: block; */
  122. }
  123. .topBar .topBar-list .download .down-box{
  124. width: 126px;
  125. background-color: #fff;
  126. position: absolute;
  127. left: 50%;
  128. top: 29px;
  129. margin-left: -63px;
  130. margin-top: 20px;
  131. padding-top: 20px;
  132. box-shadow: rgb(170, 170, 170) 0px 1px 5px;
  133. text-align: center;
  134. /* z-index: 1000; */
  135. font-style: normal;
  136. color: #323232;
  137. font-size: 13px;
  138. display: none;
  139. }
  140. .topBar .topBar-list .download:hover .down-box{
  141. background-color: #fff;
  142. display: block;
  143. }
  144. /* ——————————————————————————————————导航栏区域—————————————————————————————————— */
  145. .header{
  146. height: 100px;
  147. position: relative;
  148. }
  149. /* 设置logo大小 */
  150. .header .site-logo{
  151. width:62px;
  152. margin-top: 15px;
  153. margin-left: 5px;
  154. }
  155. /* 让logo的超链接大小与logo大小一致 */
  156. .header .site-logo a{
  157. display: block;
  158. width: 62px;
  159. height: 62px;
  160. }
  161. .header .site-logo a:hover{
  162. background-color: #fff;
  163. }
  164. /* 设置ul的位置 */
  165. .header .site-list ul{
  166. display: flex;
  167. width: 820px;
  168. height: 66px;
  169. padding: 12px 0 0 8.53px;
  170. font-size: 16px;
  171. list-style-type: none;
  172. justify-content: space-around;
  173. }
  174. /* 设置a标签属性 */
  175. .header .site-list ul li a{
  176. display: block;
  177. padding: 11px 10px 38px;
  178. color: #333;
  179. text-decoration: none;
  180. }
  181. /* 设置a标签鼠标悬浮时属性 */
  182. .header .site-list ul li a:hover{
  183. color: #e6652e;
  184. background-color: #fff;
  185. }
  186. /* 设置搜索栏属性 */
  187. .header .site-search{
  188. display: flex;
  189. width: 250px;
  190. margin-top: 15px;
  191. justify-content:center;
  192. }
  193. .header .site-search form{
  194. display: flex;
  195. width: 250px;
  196. height: 50px;
  197. justify-content:space-around;
  198. }
  199. /* 设置两个表单元素 */
  200. .header .site-search form .search-text{
  201. height: 48px;
  202. border:1px solid #0e0e0e;
  203. font-size: 1.32px;
  204. padding: 1px;
  205. }
  206. .header .site-search form .search-btn{
  207. margin-left: -1px;
  208. width: 50px;
  209. height: 50pxrem;
  210. border: 1px solid #0e0e0e;
  211. background-image: url("");
  212. }
  213. /* 二级菜单栏 */
  214. .header .site-list .pop-two{
  215. position: absolute;
  216. width: 100%;
  217. height: 200px;
  218. background-color: #fff;
  219. z-index: 1000;
  220. left: 0;
  221. display: none;
  222. }
  223. .header .site-list .pop-two .down-li{
  224. width: 200px;
  225. /* padding-top: 15px; */
  226. text-align: center;
  227. }
  228. .header .site-list:hover .pop-two{
  229. display: block;
  230. }
  231. /* ——————————————————————————————————侧边栏————————————————————————————————— */
  232. .site-category a {
  233. display: block;
  234. text-decoration: none;
  235. width: 250px;
  236. height: 42px;
  237. background-color: rgb(133, 128, 128);
  238. color: rgb(253, 247, 247);
  239. line-height: 42px;
  240. text-indent: 2em;
  241. }
  242. a:hover {
  243. background-color: rgb(223, 115, 27);
  244. }
  245. .nav::after {
  246. /* 使用箭头符号编码 */
  247. content: '\276F';
  248. font-size: 20px;
  249. /* 让箭头对齐 */
  250. float: right;
  251. padding-right: 40px;
  252. }
  253. /* ——————————————————————————————————轮播图————————————————————————————————— */
  254. #banner{
  255. width:980px;
  256. height: 378px;
  257. position:relative;
  258. }
  259. ul{
  260. list-style-type: none;
  261. padding: 0;
  262. margin: 0;
  263. }
  264. #banner .item{
  265. display: none;
  266. /* 绝对定位 */
  267. position: absolute;
  268. top: 0;
  269. left: 0;
  270. }
  271. #banner .item img{
  272. width:980px;
  273. height: 378px;
  274. }
  275. .lr-tab img{
  276. position: absolute;
  277. top: 160px;
  278. opacity:0.5;
  279. }
  280. .lr-tab .zuo-btn{
  281. left: 0;
  282. width: 50px;
  283. height: 50px;
  284. }
  285. .lr-tab .you-btn{
  286. right: 0;
  287. width: 50px;
  288. height: 50px;
  289. }
  290. .lr-tab img:hover{
  291. opacity:1;
  292. cursor: pointer;
  293. }
  294. .tab-btn {
  295. bottom: 6px;
  296. right: 450px;
  297. position: absolute;
  298. width: 120px;
  299. height: 20px;
  300. }
  301. .tab-btn .btn{
  302. float: left;/*左浮动*/
  303. width: 6px;
  304. height: 6px;
  305. background: #868686;
  306. border-radius: 50%;/*边框圆角*/
  307. border: 2px solid #c3c3c3;/*边框*/
  308. margin-left: 11px;
  309. }
  310. .tab-btn .btn:hover{
  311. border-color: #7f7f7f;/*单独设置边框颜色*/
  312. background: #e4e4e4;
  313. cursor: pointer;
  314. }
  315. .tab-btn .active{
  316. border-color: #7f7f7f;
  317. background: #e4e4e4;
  318. }
  319. /* ——————————————————————————————————向导————————————————————————————————— */
  320. .content-sub{
  321. margin-top: 18px;
  322. overflow: hidden;
  323. }
  324. .content-sub .content-channel{
  325. background-color: #5f5750;
  326. float: left;
  327. width: 248px;
  328. }
  329. .content-sub .content-channel ul{
  330. font-size: 12px;
  331. text-align: center;
  332. }
  333. .content-sub .content-channel ul li{
  334. float: left;
  335. width: 33.33%;
  336. height: 85px;
  337. text-align: center;
  338. }
  339. .content-sub .content-channel ul li a{
  340. margin-top: 15px;
  341. display: block;
  342. color: rgba(255,255,255,0.6);
  343. }
  344. .content-sub .content-channel ul li a img{
  345. width: 24px;
  346. height: 24px;
  347. }
  348. .content-sub .content-channel ul li a:hover{
  349. background-color:#5f5750;
  350. margin: 0.25px;
  351. }
  352. .content-sub .content-channel ul li p{
  353. color: #ffffff;
  354. }
  355. .content-sub .content-list{
  356. float: left;
  357. width: 970px;
  358. margin-left :8px;
  359. }
  360. .content-sub .content-list ul li{
  361. display: flex;
  362. justify-content: space-around;
  363. align-content: center;
  364. }
  365. .content-sub .content-list ul li a{
  366. background-color: #fff;
  367. }
  368. .content-sub .content-list ul li a:hover{
  369. box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)
  370. }
  371. .content-sub .content-list ul li a img{
  372. width: 316px;
  373. height: 170px;
  374. }
  375. /* ——————————————————————————————————home图————————————————————————————————— */
  376. .home-main .container a{
  377. margin-top: 20px;
  378. margin-left: 98.5px;
  379. background-color: #fff;
  380. }
  381. .home-main .container a img{
  382. width: 1226px;
  383. height: 120px;
  384. }
  385. /* ——————————————————————————————————内容部分————————————————————————————————— */
  386. .box-main{
  387. display: flex;
  388. justify-content: center;
  389. align-items: center;
  390. }
  391. .box-main .container h2{
  392. font-size: 22px;
  393. font-weight: 200;
  394. line-height: 28px;
  395. color: #333;
  396. }
  397. .box-main .container .more a{
  398. font-size: 22px;
  399. line-height: 58px;
  400. color: #424242;
  401. text-decoration: none;
  402. }
  403. .box-main .container .more a:hover{
  404. color: #e6652e;
  405. background-color: #fff;
  406. text-decoration: underline;
  407. }
  408. /* 表格 */
  409. .con{
  410. background-color: #ffffff;
  411. display: flex;
  412. justify-content: center;
  413. align-content: center;
  414. }
  415. .con-table{
  416. width: 1226px;
  417. }
  418. .con-table table{
  419. width: 1226px;
  420. height: 628px;
  421. background-color: #fff;
  422. /* border-style: solid; */
  423. }
  424. #rem1{
  425. width: 234px;
  426. height:614px ;
  427. }
  428. .con .con-table table tr td{
  429. padding: 0;
  430. box-shadow: 0px 0px 30px 0px rgba(-20,-20,0,0.1);
  431. }
  432. .con .con-table table tr td:hover{
  433. box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25);
  434. }
  435. .con .con-table table tr td img{
  436. width: 160px;
  437. height: 160px;
  438. }
  439. .con .con-table table tr td .figure-img{
  440. text-align: center;
  441. }
  442. .con .con-table table tr td .title{
  443. text-align: center;
  444. overflow: hidden;
  445. }
  446. .con .con-table table tr td .desc{
  447. text-align: center;
  448. overflow: hidden;
  449. }
  450. .con .con-table table tr td .price{
  451. text-align: center;
  452. overflow: hidden;
  453. }
  454. /* 重复 */
  455. #exp-table{
  456. padding: 0;
  457. }
  458. .con .con-table table tr td{
  459. padding: 0;
  460. width: 217px;
  461. }
  462. .con .con-table table tr td .tab .table-two{
  463. width: 219px;
  464. height: 300px;
  465. /* border-collapse: collapse;
  466. border-spacing: 0; */
  467. }
  468. .con .con-table table tr td .tab .table-two tr td{
  469. width: 219px;
  470. }
  471. .con .con-table table tr td .tab .table-two img{
  472. width: 80px;
  473. height: 80px;
  474. }
  475. /* ——————————————————————————————————尾部区域————————————————————————————————— */
  476. .foot {
  477. background-color: #fff;
  478. }
  479. /* 尾部区域模块 */
  480. .foot .serve {
  481. display: flex;
  482. height: 80px;
  483. line-height: 80px;
  484. border-bottom: 1px solid #ddd;
  485. justify-content: space-around;
  486. align-items: center;
  487. }
  488. .foot .serve ul li {
  489. float: left;
  490. text-align:center;
  491. width: 245px;
  492. }
  493. .foot .serve ul li a {
  494. display: inline-block;
  495. color: #ff6709;
  496. text-decoration: none;
  497. }
  498. .foot .serve ul li .serve_5::before {
  499. margin-left: 50px;
  500. }
  501. .foot .serve ul li a:hover {
  502. color: #ff6709;
  503. background: none;
  504. }
  505. .guild {
  506. display: flex;
  507. margin-top: 30px;
  508. height: 250px;
  509. justify-content: space-around;
  510. align-content: center;
  511. }
  512. /* 尾部区域指南左侧模块 */
  513. .guild_le {
  514. float: left;
  515. text-align: right;
  516. }
  517. .guild_le dl {
  518. float: left;
  519. width: 160px;
  520. }
  521. .guild_le dl dt {
  522. margin-bottom: 10px;
  523. font-size: 14px;
  524. }
  525. .guild_le dl dd {
  526. margin: 5px 0;
  527. }
  528. .guild_le dl dd a {
  529. font-size: 12px;
  530. color: #757575;
  531. text-decoration: none;
  532. }
  533. .guild_le dl dd a:hover {
  534. color:#ff6709 ;
  535. background-color: #fff;
  536. }
  537. /* 尾部区域指南右侧模块 */
  538. .guild_ri {
  539. float: left;
  540. width: 266px;
  541. text-align: center;
  542. border-left: 1px solid #ddd;
  543. }
  544. .guild_ri h2 {
  545. color: #ff6709;
  546. }
  547. .guild_ri .time {
  548. font-size: 12px;
  549. color: #757575;
  550. }
  551. .guild_ri .customer {
  552. display: inline-block;
  553. width: 120px;
  554. height: 30px;
  555. line-height: 30px;
  556. text-align: center;
  557. font-size: 12px;
  558. color: #ff6709;
  559. background-color: #ddd;
  560. border: 1px solid #ff6709;
  561. transition: background-color .6s;
  562. text-decoration: none;
  563. }
  564. .guild_ri .customer::before {
  565. margin-right: 5px;
  566. }
  567. .guild_ri .customer:hover {
  568. background-color: #ff6709;
  569. color: #fff;
  570. text-decoration: none;
  571. }
  572. .guild_ri .view {
  573. margin-top: 10px;
  574. font-size: 14px;
  575. color: #757575;
  576. }
  577. .guild_ri .view a {
  578. color: #5f5750;
  579. text-decoration: none;
  580. }
  581. .guild_ri .view a:hover {
  582. color: #ff6709;
  583. text-decoration: none;
  584. }
  585. /* ——————————————————————————————————底部栏————————————————————————————————— */
  586. .footer{
  587. display: flex;
  588. height: 210px;/* 204px */
  589. padding: 30px 0;
  590. font-size: 12px;
  591. background: #fafafa;
  592. justify-content: center;
  593. align-items: center;
  594. flex-wrap: wrap;
  595. }
  596. .footer .container{
  597. display: flex;
  598. width: 1226px; ;
  599. position: relative;
  600. /* height: 157px; */
  601. color: #b0b0b0;
  602. padding-left: 77px;
  603. font-size: 12px;
  604. flex-wrap: wrap;
  605. }
  606. .bottom-logo{
  607. width: 56px;
  608. height: 56px;
  609. margin-right: 20px;
  610. background: url(/images/logo.png) no-repeat;
  611. background-size: 56px;
  612. position: absolute;
  613. top: 0;
  614. left: 0;
  615. }
  616. .bottom-font{
  617. width: 1170px;
  618. color: #b0b0b0;
  619. padding-left: 4px;
  620. font-size: 12px;
  621. }
  622. .bottom-img{
  623. height: 28px;
  624. margin: 4px 0 15px;
  625. padding-left: 5px;
  626. background-color: #fff;
  627. }
  628. .bottom-img img{
  629. width: auto;
  630. height: 28px;
  631. margin-left: 0;
  632. }
  633. .bottom-change{
  634. color: #757575;
  635. transition: all .2s;
  636. }
  637. .bottom-change:hover{
  638. color: #ff6700;
  639. background-color: #e4e4e4;
  640. }

js部分:

  1. var index = 0;//初始化一个变量 指向下标
  2. $(".tab-btn .btn").click(function () {
  3. index = $(this).index();//获取点击元素的下标
  4. $(this).addClass("active").siblings().removeClass("active");
  5. $(".item").eq(index).fadeIn().siblings().fadeOut();
  6. //eq(参数)方法 找到第某下标的图片,让它淡入
  7. //siblings()返回所有被选元素的同级元素
  8. //addClass()动态添加classname
  9. //同时为了避免每张图片只能点击一次,所以找到其他图片,让他们淡出
  10. });//通过点击事件 点击到小按钮
  11. //siblings(). 当我们点击给他添加样式的时候,
  12. //找到除了点击以外的其他的兄弟元素,删除他的class名字
  13. //点击右边按钮
  14. $(".lr-tab .you-btn").click(function () {
  15. index++;//下标变大
  16. if (index > 4) {
  17. index = 0;
  18. }
  19. $(".item").eq(index).fadeIn().siblings().fadeOut();
  20. //找到图片,找到现在index指向的那张图片,让他淡入,并将其他的图片淡出
  21. $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
  22. //这里和之前类似,找到当前下标的按钮,给他添加显示样式,给其他兄弟移除样式。
  23. });//通过点击事件 点击到小按钮
  24. //点击左边按钮
  25. $(".lr-tab .zuo-btn").click(function () {
  26. index--;
  27. if (index < 0) {
  28. index = 4;
  29. }
  30. $(".item").eq(index).fadeIn().siblings().fadeOut();
  31. //找到图片,找到现在index指向的那张图片,让他淡入,并将其他的图片淡出
  32. $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
  33. //这里和之前类似,找到当前下标的按钮,给他添加显示样式,给其他兄弟移除样式。
  34. });//通过点击事件 点击到小按钮
  35. //siblings(). 当我们点击给他添加样式的时候,
  36. //找到除了点击以外的其他的兄弟元素,删除他的class名字
  37. var timer = setInterval(function () {
  38. index++;//正常按照下标变大顺序播放
  39. if (index > 4) {
  40. index = 0;
  41. }
  42. $(".item").eq(index).fadeIn().siblings().fadeOut();
  43. //找到图片,找到现在index指向的那张图片,让他淡入,并将其他的图片淡出
  44. $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
  45. //这里和之前类似,找到当前下标的按钮,给他添加显示样式,给其他兄弟移除样式。
  46. //通过点击事件 点击到小按钮
  47. //siblings(). 当我们点击给他添加样式的时候,
  48. //找到除了点击以外的其他的兄弟元素,删除他的class名字
  49. }, 3000);//定时器,定义翻页速度

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/353588
推荐阅读
相关标签
  

闽ICP备14008679号