[关闭]
@Tyhj 2017-09-19T12:15:05.000000Z 字数 28041 阅读 923

网页开发初体验

Html


原文:https://www.zybuluo.com/Tyhj/note/847469
一直想学一下网页的,都没机会也不知道从何下手。平时常上的网页都很好看,觉得很有意思,最近就想模仿一下 慕课网的首页,做一个像样子的网页。
其实之前也写过两次网页,都是为了交作业,虽然感觉还是挺有意思的,但是也没有深入了解,时间久了就忘的差不多了。

花了三天时间,总算是做完了,效果图(打开网页):

我感觉还好,想不到这么快就完成了,其实很简单,就是html+javaScript+css而已,都是边做边学。

自己觉得要注意的地方:

  1. /*垂直居中*/
  2. position: relative;
  3. top: 50%;
  4. transform: translateY(-50%);
  5. /*列表横排*/
  6. display: inline;
  7. /*鼠标移动变小手*/
  8. cursor: pointer;
  9. /*input设置无边框*/
  10. color: grey;
  11. border-top-width: 0px;
  12. border-right-width: 0px;
  13. border-bottom-width: 1.2px;
  14. border-left-width: 0px;
  15. border-top-style: none;
  16. border-right-style: none;
  17. border-bottom-style: solid;
  18. border-left-style: none;
  19. border-bottom-color: gainsboro;
  20. outline: medium;
  21. height: 30px;
  22. /*实现阴影*/
  23. box-shadow: 0px 5px 10px gainsboro;
  24. /*全屏无边距*/
  25. html, body {
  26. margin: 0px;
  27. height: 100%;
  28. width: 100%;
  29. font-family: "Microsoft YaHei";
  30. }
  31. /*设置div宽度为100%,但是最小宽度为1300px,防止小窗口下div长度仅仅为窗口的长度,导致显示背景不完整或者布局混乱*/
  32. #container {
  33. width:100%; min-width:1300px;
  34. background: white;
  35. }
  36. /*子布局在父布局里面的对其方式*/
  37. text-align: center;
  38. /*align 属性规定 div 元素中的内容的水平对齐方式*/
  39. <div align="center">
  40. /*vertical-align 属性设置元素的垂直对齐方式*/
  41. vertical-align:text-top;

其他的都忘了,附上源码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <script>
  5. window.onload = onclickList;
  6. function inputHintFocus() {
  7. var hint = document.getElementById("input_search");
  8. if (hint.value == "输入关键字查找") hint.value = "";
  9. }
  10. function inputHintOnblur() {
  11. var hint = document.getElementById("input_search");
  12. if (hint.value == "") hint.value = "输入关键字查找"
  13. }
  14. function shopcartMouseMove() {
  15. var img_shopcart = document.getElementById("img_shopcart");
  16. img_shopcart.src = "drawable/btn_shopcart_select.png";
  17. }
  18. function shopcartMouseOut() {
  19. var img_shopcart = document.getElementById("img_shopcart");
  20. img_shopcart.src = "drawable/btn_shopcart.png";
  21. }
  22. function msgMouseMove() {
  23. var img_msg = document.getElementById("img_msg");
  24. img_msg.src = "drawable/btn_msg_select.svg";
  25. }
  26. function msgMouseOut() {
  27. var img_msg = document.getElementById("img_msg");
  28. img_msg.src = "drawable/btn_msg.svg";
  29. }
  30. function headMouseMove() {
  31. var img_head = document.getElementById("img_head");
  32. img_head.style.border = "2px solid #D50000"
  33. img_head.style.borderRadius = "50%"
  34. img_head.style.height = "31px"
  35. }
  36. function headMouseOut() {
  37. var img_head = document.getElementById("img_head");
  38. img_head.style.border = "0px solid #D50000"
  39. img_head.style.height = "35px"
  40. }
  41. function search() {
  42. var msg = document.getElementById("input_search").value;
  43. if (msg != "" && msg != "输入关键字查找")
  44. window.location.href = "http://www.imooc.com/search/?words=" + msg;
  45. }
  46. function btn_searchMouseOut() {
  47. var btn_search = document.getElementById("btn_search");
  48. btn_search.src = "drawable/ic_search.svg";
  49. }
  50. function btn_searchMouseMove() {
  51. var btn_search = document.getElementById("btn_search");
  52. btn_search.src = "drawable/ic_search_select.svg";
  53. }
  54. function tabMouseMove() {
  55. var oUl = document.getElementById("ul_tab");
  56. var oLis = oUl.getElementsByTagName("li");
  57. var oUl2 = document.getElementById("ul_tab_name");
  58. var oLis2 = oUl2.getElementsByTagName("li");
  59. /*隐藏的选项卡*/
  60. var tab = document.getElementById("div_tab_hide");
  61. var tab_position;
  62. var tabBg = new Array();
  63. tabBg[0] = "url(drawable/bg_tab1.png)";
  64. tabBg[1] = "url(drawable/bg_tab2.png)";
  65. tabBg[2] = "url(drawable/bg_tab3.png)";
  66. tabBg[3] = "url(drawable/bg_tab4.png)";
  67. tabBg[4] = "url(drawable/bg_tab5.png)";
  68. tabBg[5] = "url(drawable/bg_tab6.png)";
  69. tabBg[6] = "url(drawable/bg_tab7.png)";
  70. for (var i = 0; i < oLis.length; i++) {
  71. oLis[i].onmousemove = (function (i) {
  72. return function () {
  73. tab_position = i;
  74. oLis[i].style.background = "#6c7177";
  75. oLis[i].getElementsByTagName("div")[0].style.color = "#ffffff";
  76. oLis2[i].style.background = "#6c7177";
  77. oLis2[i].getElementsByTagName("div")[0].style.color = "#ffffff";
  78. tab.style.backgroundImage = tabBg[i];
  79. tab.style.backgroundRepeat = "round";
  80. tab.style.visibility = "visible";
  81. }
  82. }(i))
  83. oLis[i].onmouseout = (function (i) {
  84. return function () {
  85. oLis[i].style.background = "#263238";
  86. oLis[i].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  87. oLis2[i].style.background = "#263238";
  88. oLis2[i].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  89. tab.style.visibility = "hidden";
  90. }
  91. }(i))
  92. }
  93. for (var i = 0; i < oLis2.length; i++) {
  94. oLis2[i].onmousemove = (function (i) {
  95. return function () {
  96. tab_position = i;
  97. oLis[i].style.background = "#6c7177";
  98. oLis[i].getElementsByTagName("div")[0].style.color = "#ffffff";
  99. oLis2[i].style.background = "#6c7177";
  100. oLis2[i].getElementsByTagName("div")[0].style.color = "#ffffff";
  101. tab.style.backgroundImage = tabBg[i];
  102. tab.style.backgroundRepeat = "round";
  103. tab.style.visibility = "visible";
  104. }
  105. }(i))
  106. oLis2[i].onmouseout = (function (i) {
  107. return function () {
  108. oLis[i].style.background = "#263238";
  109. oLis[i].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  110. oLis2[i].style.background = "#263238";
  111. oLis2[i].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  112. tab.style.visibility = "hidden";
  113. }
  114. }(i))
  115. }
  116. tab.onmousemove = function () {
  117. oLis[tab_position].style.background = "#6c7177";
  118. oLis[tab_position].getElementsByTagName("div")[0].style.color = "#ffffff";
  119. oLis2[tab_position].style.background = "#6c7177";
  120. oLis2[tab_position].getElementsByTagName("div")[0].style.color = "#ffffff";
  121. tab.style.backgroundImage = tabBg[tab_position];
  122. tab.style.backgroundRepeat = "round";
  123. tab.style.visibility = "visible";
  124. }
  125. tab.onmouseout = function () {
  126. oLis[tab_position].style.background = "#263238";
  127. oLis[tab_position].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  128. oLis2[tab_position].style.background = "#263238";
  129. oLis2[tab_position].getElementsByTagName("div")[0].style.color = "#d0d0d0";
  130. tab.style.visibility = "hidden";
  131. }
  132. }
  133. function img_sgt1Move() {
  134. var img_sgt1 = document.getElementById("img_sgt1");
  135. img_sgt1.src = "drawable/img_sgt1_select.png"
  136. }
  137. function img_sgt1Out() {
  138. var img_sgt1 = document.getElementById("img_sgt1");
  139. img_sgt1.src = "drawable/img_sgt1.png"
  140. }
  141. function img_sgt2Move() {
  142. var img_sgt2 = document.getElementById("img_sgt2");
  143. img_sgt2.src = "drawable/img_sgt2_select.png"
  144. }
  145. function img_sgt2Out() {
  146. var img_sgt2 = document.getElementById("img_sgt2");
  147. img_sgt2.src = "drawable/img_sgt2.png"
  148. }
  149. function img_sgt3Move() {
  150. var img_sgt3 = document.getElementById("img_sgt3");
  151. img_sgt3.src = "drawable/img_sgt3_select.png"
  152. }
  153. function img_sgt3Out() {
  154. var img_sgt3 = document.getElementById("img_sgt3");
  155. img_sgt3.src = "drawable/img_sgt3.png"
  156. }
  157. function img_sgt4Move() {
  158. var img_sgt4 = document.getElementById("img_sgt4");
  159. img_sgt4.src = "drawable/img_sgt4_select.png"
  160. }
  161. function img_sgt4Out() {
  162. var img_sgt4 = document.getElementById("img_sgt4");
  163. img_sgt4.src = "drawable/img_sgt4.png"
  164. }
  165. function img_sgt5Move() {
  166. var img_sgt5 = document.getElementById("img_sgt5");
  167. img_sgt5.src = "drawable/img_sgt5_select.png"
  168. }
  169. function img_sgt5Out() {
  170. var img_sgt5 = document.getElementById("img_sgt5");
  171. img_sgt5.src = "drawable/img_sgt5.png"
  172. }
  173. function img_new1Move() {
  174. var img_new = document.getElementById("img_new1");
  175. img_new.src = "drawable/img_new1_select.png"
  176. }
  177. function img_new1Out() {
  178. var img_new = document.getElementById("img_new1");
  179. img_new.src = "drawable/img_new1.png"
  180. }
  181. function img_new2Move() {
  182. var img_new = document.getElementById("img_new2");
  183. img_new.src = "drawable/img_new2_select.png"
  184. }
  185. function img_new2Out() {
  186. var img_new = document.getElementById("img_new2");
  187. img_new.src = "drawable/img_new2.png"
  188. }
  189. function img_new3Move() {
  190. var img_new = document.getElementById("img_new3");
  191. img_new.src = "drawable/img_new3_select.png"
  192. }
  193. function img_new3Out() {
  194. var img_new = document.getElementById("img_new3");
  195. img_new.src = "drawable/img_new3.png"
  196. }
  197. function img_new4Move() {
  198. var img_new = document.getElementById("img_new4");
  199. img_new.src = "drawable/img_new4_select.png"
  200. }
  201. function img_new4Out() {
  202. var img_new = document.getElementById("img_new4");
  203. img_new.src = "drawable/img_new4.png"
  204. }
  205. function img_new5Move() {
  206. var img_new = document.getElementById("img_new5");
  207. img_new.src = "drawable/img_new5_select.png"
  208. }
  209. function img_new5Out() {
  210. var img_new = document.getElementById("img_new5");
  211. img_new.src = "drawable/img_new5.png"
  212. }
  213. function img_new6Move() {
  214. var img_new = document.getElementById("img_new6");
  215. img_new.src = "drawable/img_new6_select.png"
  216. }
  217. function img_new6Out() {
  218. var img_new = document.getElementById("img_new6");
  219. img_new.src = "drawable/img_new6.png"
  220. }
  221. function img_new7Move() {
  222. var img_new = document.getElementById("img_new7");
  223. img_new.src = "drawable/img_new7_select.png"
  224. }
  225. function img_new7Out() {
  226. var img_new = document.getElementById("img_new7");
  227. img_new.src = "drawable/img_new7.png"
  228. }
  229. function img_new8Move() {
  230. var img_new = document.getElementById("img_new8");
  231. img_new.src = "drawable/img_new8_select.png"
  232. }
  233. function img_new8Out() {
  234. var img_new = document.getElementById("img_new8");
  235. img_new.src = "drawable/img_new8.png"
  236. }
  237. function img_new9Move() {
  238. var img_new = document.getElementById("img_new9");
  239. img_new.src = "drawable/img_new9_select.png"
  240. }
  241. function img_new9Out() {
  242. var img_new = document.getElementById("img_new9");
  243. img_new.src = "drawable/img_new9.png"
  244. }
  245. function img_new10Move() {
  246. var img_new = document.getElementById("img_new10");
  247. img_new.src = "drawable/img_new10_select.png"
  248. }
  249. function img_new10Out() {
  250. var img_new = document.getElementById("img_new10");
  251. img_new.src = "drawable/img_new10.png"
  252. }
  253. function sgtClick1() {
  254. window.location.href = "http://class.imooc.com/sc/2?mc_marking=82c3cedd638e1d3fb98cd63709db4448&mc_channel=syb21";
  255. }
  256. function sgtClick2() {
  257. window.location.href = "http://www.imooc.com/learn/862?mc_marking=897df86a0080aa93abc958e588b5f544&mc_channel=syb22";
  258. }
  259. function sgtClick3() {
  260. window.location.href = "http://coding.imooc.com/class/109.html?mc_marking=a9aac085bc5bc146078d6095101af2a0&mc_channel=syb15";
  261. }
  262. function sgtClick4() {
  263. window.location.href = "http://class.imooc.com/sc/18?mc_marking=7926d4e364260fadf99bc6683bf7488a&mc_channel=syb23";
  264. }
  265. function sgtClick5() {
  266. window.location.href = "http://class.imooc.com/sc/29?mc_marking=e0b7020c55162407944b7ca0fa1373f8&mc_channel=syb13";
  267. }
  268. function newClick1() {
  269. window.location.href = "http://coding.imooc.com/class/107.html";
  270. }
  271. function newClick2() {
  272. window.location.href = "http://coding.imooc.com/class/94.html";
  273. }
  274. function newClick3() {
  275. window.location.href = "http://coding.imooc.com/class/122.html";
  276. }
  277. function newClick4() {
  278. window.location.href = "http://www.imooc.com/learn/592";
  279. }
  280. function newClick5() {
  281. window.location.href = "http://coding.imooc.com/class/74.html";
  282. }
  283. function newClick6() {
  284. window.location.href = "http://coding.imooc.com/class/119.html";
  285. }
  286. function newClick7() {
  287. window.location.href = "http://coding.imooc.com/class/82.html";
  288. }
  289. function newClick8() {
  290. window.location.href = "http://www.imooc.com/learn/824";
  291. }
  292. function newClick9() {
  293. window.location.href = "http://www.imooc.com/learn/787";
  294. }
  295. function newClick10() {
  296. window.location.href = "http://coding.imooc.com/class/116.html";
  297. }
  298. </script>
  299. <style>
  300. /*全屏无边距*/
  301. html, body {
  302. margin: 0px;
  303. height: 100%;
  304. width: auto;
  305. font-family: "Microsoft YaHei";
  306. /*子布局在父布局里面的对其方式*/
  307. text-align: center;
  308. }
  309. a:link {
  310. text-decoration: none;
  311. color: #000000
  312. }
  313. a:visited {
  314. text-decoration: none;
  315. color: #000000
  316. }
  317. a:hover {
  318. text-decoration: none;
  319. color: #000000
  320. }
  321. a:active {
  322. text-decoration: none;
  323. color: #000000
  324. }
  325. /*设置宽度为100%,但是最小宽度为1300,防止小窗口下div长度仅仅为窗口的长度,导致显示背景不完整或者布局混乱*/
  326. #container {
  327. width:100%; min-width:1300px;
  328. background: white;
  329. }
  330. #toorbar {
  331. background: white;
  332. width: 100%;
  333. height: 74px;
  334. elevation: higher;
  335. /*实现阴影*/
  336. box-shadow: 0px 5px 10px gainsboro;
  337. }
  338. #logo {
  339. float: left;
  340. margin-left: 25px;
  341. /*垂直居中*/
  342. position: relative;
  343. top: 50%;
  344. transform: translateY(-50%);
  345. }
  346. #ul_menu {
  347. float: left;
  348. list-style: none;
  349. margin: 0px;
  350. /*垂直居中*/
  351. position: relative;
  352. top: 50%;
  353. transform: translateY(-50%);
  354. }
  355. #div_search {
  356. float: left;
  357. margin-left: 40px;
  358. /*垂直居中*/
  359. position: relative;
  360. top: 50%;
  361. transform: translateY(-50%);
  362. }
  363. #div_search_img {
  364. float: left;
  365. margin-left: -15px;
  366. /*垂直居中*/
  367. position: relative;
  368. top: 50%;
  369. transform: translateY(-50%);
  370. }
  371. #input_search {
  372. /*无边框*/
  373. color: grey;
  374. border-top-width: 0px;
  375. border-right-width: 0px;
  376. border-bottom-width: 1.2px;
  377. border-left-width: 0px;
  378. border-top-style: none;
  379. border-right-style: none;
  380. border-bottom-style: solid;
  381. border-left-style: none;
  382. border-bottom-color: gainsboro;
  383. outline: medium;
  384. height: 30px;
  385. }
  386. /*鼠标移动变小手*/
  387. #btn_search {
  388. cursor: pointer;
  389. }
  390. #ul_menu_right {
  391. float: right;
  392. list-style: none;
  393. margin: 0px;
  394. /*垂直居中*/
  395. position: relative;
  396. top: 50%;
  397. transform: translateY(-50%);
  398. }
  399. .li_horizontal li {
  400. /*列表横排*/
  401. display: inline;
  402. margin-right: 20px;
  403. }
  404. .li_horizontal_margin li {
  405. /*列表横排*/
  406. margin-left: 10px;
  407. display: inline;
  408. margin-right: 20px;
  409. }
  410. .center_vertical {
  411. /*垂直居中*/
  412. position: relative;
  413. top: 50%;
  414. transform: translateY(-50%);
  415. vertical-align: middle;
  416. color: #d0d0d0;
  417. }
  418. #img_msg {
  419. margin-bottom: 10px;
  420. }
  421. #img_head {
  422. margin-bottom: 1.5px;
  423. }
  424. .circular {
  425. border-radius: 50%;
  426. }
  427. #div_category {
  428. margin: 0 auto;
  429. border-radius: 8px;
  430. margin-top: 30px;
  431. background: white;
  432. width: 1155px;
  433. height: 445px;
  434. elevation: higher;
  435. /*实现阴影*/
  436. box-shadow: 0px 10px 30px #E0E0E0;
  437. }
  438. #div_tab {
  439. border-bottom-left-radius: 8px;
  440. border-top-left-radius: 8px;
  441. float: left;
  442. background: #263238;
  443. height: 100%;
  444. width: 18.9%;
  445. }
  446. #div_tab_right {
  447. background: beige;
  448. border-bottom-right-radius: 8px;
  449. border-top-right-radius: 8px;
  450. height: 100%;
  451. width: 81.1%;
  452. float: left;
  453. position: relative;
  454. overflow: hidden;
  455. }
  456. #div_banner {
  457. border-top-right-radius: 8px;
  458. margin: 0 auto;
  459. position: relative;
  460. background: pink;
  461. overflow: hidden;
  462. width: 100%;
  463. height: 71%;
  464. }
  465. #div_tab_direction {
  466. background: white;
  467. border-bottom-right-radius: 8px;
  468. width: 100%;
  469. height: 29%;
  470. }
  471. #ul_tab {
  472. padding: 0px;
  473. padding-left: 15px;
  474. margin-top: 15px;
  475. margin-bottom: 15px;
  476. list-style: none;
  477. margin: 0px;
  478. /*垂直居中*/
  479. position: relative;
  480. top: 50%;
  481. transform: translateY(-50%);
  482. }
  483. .ulTab li {
  484. cursor: pointer;
  485. border-bottom-left-radius: 4px;
  486. border-top-left-radius: 4px;
  487. padding-left: 15px;
  488. height: 59.28px;
  489. color: whitesmoke;
  490. font-weight: 200
  491. }
  492. .ulTabNoradius li {
  493. cursor: pointer;
  494. padding-left: 15px;
  495. height: 59.28px;
  496. color: whitesmoke;
  497. font-weight: 200
  498. }
  499. .gravityRight {
  500. float: right;
  501. height: 100%;
  502. background: burlywood;
  503. }
  504. .li_arrow_right {
  505. margin-left: 80px;
  506. }
  507. #div_tab_name {
  508. float: left;
  509. width: 77.4%;
  510. height: 100%;
  511. }
  512. #div_tab_arrow {
  513. float: left;
  514. width: 22.6%;
  515. height: 100%;
  516. }
  517. .ulStyleHorizontal {
  518. list-style: none;
  519. margin: 0px;
  520. padding: 0px;
  521. /*垂直居中*/
  522. position: relative;
  523. top: 50%;
  524. transform: translateY(-50%);
  525. }
  526. .tab_arrow_right {
  527. width: 12px;
  528. cursor: hand;
  529. }
  530. .tab_direction {
  531. margin-left: 40px;
  532. cursor: pointer;
  533. }
  534. #mydiv {
  535. width: 50px;
  536. height: 50px;
  537. background-color: green;
  538. position: absolute;
  539. }
  540. .clear {
  541. *zoom: 1;
  542. }
  543. .clear:after {
  544. visibility: hidden;
  545. content: "";
  546. display: block;
  547. clear: both;
  548. height: 0;
  549. }
  550. #inner {
  551. width: 1000%;
  552. height: 100%;
  553. position: absolute;
  554. left: 0;
  555. top: 0;
  556. }
  557. #div_tab_hide {
  558. visibility: hidden;
  559. width: 78.35%;
  560. height: 100%;
  561. background: white;
  562. position: absolute;
  563. left: 0;
  564. top: 0;
  565. }
  566. #inner img {
  567. width: 10%;
  568. height: 100%;
  569. float: left;
  570. }
  571. .paganation {
  572. width: 100%;
  573. position: absolute;
  574. bottom: 10px;
  575. right: 10px;
  576. text-align: right;
  577. }
  578. .paganation span {
  579. background: #F2F2F2;
  580. color: grey;
  581. border-radius: 50%;
  582. cursor: pointer
  583. }
  584. .paganation .selected {
  585. background: white;
  586. color: wheat;
  587. }
  588. .arrow {
  589. position: absolute;
  590. top: 0;
  591. width: 30px;
  592. height: 60px;
  593. line-height: 60px;
  594. text-align: center;
  595. color: gainsboro;
  596. cursor: pointer;
  597. top: 40%;
  598. }
  599. #right {
  600. right: 0;
  601. }
  602. .arrow:hover {
  603. background: rgba(0, 0, 0, 0.5);
  604. color: white
  605. }
  606. #ul_foot li {
  607. /*列表横排*/
  608. display: inline;
  609. margin-left: 20px;
  610. }
  611. #ul_foot {
  612. margin: 0 auto;
  613. padding: 0px;
  614. padding-top: 10px;
  615. padding-left: 30px;
  616. }
  617. </style>
  618. <meta charset="UTF-8">
  619. <link rel="icon" href="drawable/icon.png">
  620. <title>慕课网</title>
  621. </head>
  622. <body>
  623. <div id="container">
  624. <div id="toorbar">
  625. <div id="logo">'
  626. <a href="first.html"><img src="drawable/muke.png" width="125" height="60" align="center"></a>
  627. </div>
  628. <ul id="ul_menu" class="li_horizontal_margin">
  629. <li><a href="http://www.imooc.com/course/list" style="color: black;font-family: 'Microsoft YaHei'">课程</a>
  630. </li>
  631. <li><a href="http://class.imooc.com/" style="color: black;font-family: 'Microsoft YaHei'">职业路径</a></li>
  632. <li><a href="http://coding.imooc.com/" style="color: black;font-family: 'Microsoft YaHei'">实战</a></li>
  633. <li><a href="http://www.imooc.com/wenda" style="color: black;font-family: 'Microsoft YaHei'">猿问</a></li>
  634. <li><a href="http://www.imooc.com/article" style="color: black;font-family: 'Microsoft YaHei'">手记</a></li>
  635. </ul>
  636. <div id="div_search">
  637. <!--监听回车键-->
  638. <input id="input_search" type="text" name="firstname" value="输入关键字查找"
  639. onkeypress="if(event.keyCode == 13){search()}" onfocus="inputHintFocus()" onblur="inputHintOnblur()">
  640. </div>
  641. <div id="div_search_img" align="center">
  642. <img id="btn_search" src="drawable/ic_search.svg" width="15px" onclick="search()"
  643. onmousemove="btn_searchMouseMove()" onmouseout="btn_searchMouseOut()">
  644. </div>
  645. <ul id="ul_menu_right" class="li_horizontal">
  646. <li><a href="http://order.imooc.com/pay/cart"><img id="img_shopcart" src="drawable/btn_shopcart.png"
  647. height="38px" onmousemove="shopcartMouseMove()"
  648. onmouseout="shopcartMouseOut()"></a></li>
  649. <li><a href="http://www.imooc.com/u/2125589/notices"><img id="img_msg" src="drawable/btn_msg.svg"
  650. height="18px" onmousemove="msgMouseMove()"
  651. onmouseout="msgMouseOut()"></a></li>
  652. <li><a href="http://www.imooc.com/u/2125589"><img id="img_head" class="circular" src="drawable/ic_head.jpg"
  653. height="35px" onmousemove="headMouseMove()"
  654. onmouseout="headMouseOut()"></a></li>
  655. </ul>
  656. </div>
  657. <div id="div_category">
  658. <!--tab选项卡-->
  659. <div id="div_tab">
  660. <div id="div_tab_name">
  661. <ul id="ul_tab" class="ulTab">
  662. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=fe'">
  663. <div class="center_vertical">前端开发</div>
  664. </li>
  665. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=be'">
  666. <div class="center_vertical">后端开发</div>
  667. </li>
  668. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=mobile'">
  669. <div class="center_vertical">移动开发</div>
  670. </li>
  671. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=data'">
  672. <div class="center_vertical">数据库</div>
  673. </li>
  674. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=cb'">
  675. <div class="center_vertical">云计算&大数据</div>
  676. </li>
  677. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=op'">
  678. <div class="center_vertical">运维&测试</div>
  679. </li>
  680. <li onclick="window.location.href ='http://www.imooc.com/course/list?c=photo'">
  681. <div class="center_vertical">UI设计</div>
  682. </li>
  683. </ul>
  684. </div>
  685. <div id="div_tab_arrow">
  686. <ul id="ul_tab_name" class="ulTabNoradius ulStyleHorizontal">
  687. <li>
  688. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  689. </div>
  690. </li>
  691. <li>
  692. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  693. </div>
  694. </li>
  695. <li>
  696. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  697. </div>
  698. </li>
  699. <li>
  700. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  701. </div>
  702. </li>
  703. <li>
  704. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  705. </div>
  706. </li>
  707. <li>
  708. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  709. </div>
  710. </li>
  711. <li>
  712. <div class="center_vertical"><img src="drawable/ic_arrow_right.svg" class="tab_arrow_right">
  713. </div>
  714. </li>
  715. </ul>
  716. </div>
  717. </div>
  718. <div id="div_tab_right">
  719. <!--轮播-->
  720. <div id="div_banner">
  721. <div id="inner" class="clear"><!-- 所有图片并排的块 -->
  722. <img style="background:white;" src="drawable/bg_banner1.jpg" alt="">
  723. <img style="background:white;" src="drawable/bg_banner2.jpg" alt="">
  724. <img style="background:white;" src="drawable/bg_banner3.jpg" alt="">
  725. <img style="background:white;" src="drawable/bg_banner4.jpg" alt="">
  726. <img style="background:white;" src="drawable/bg_banner5.jpg" alt="">
  727. <img style="background:white;" src="drawable/bg_banner6.jpg" alt="">
  728. </div>
  729. <div class="paganation" id="paganation"><!-- 页面按钮区域 -->
  730. <span class="selected"></span>
  731. <span></span>
  732. <span></span>
  733. <span></span>
  734. <span></span>
  735. <span></span>
  736. </div>
  737. <div id="left" class="arrow"><</div><!-- 向左切换按钮 -->
  738. <div id="right" class="arrow">></div><!-- 向右切换按钮 -->
  739. </div>
  740. <!--学习方向-->
  741. <div id="div_tab_direction">
  742. <div id="div_web_img" style="float: left;margin-left: -5px;position: relative"><img id="img_web"
  743. src="drawable/img_web.png"
  744. width="140.5px"
  745. onclick="window.location.href='http://class.imooc.com/?c=fe'"
  746. class="tab_direction"
  747. onmousemove="webImgMove()">
  748. </div>
  749. <div id="div_php_img" style="float: left;position: relative"><img src="drawable/img_php.png"
  750. width="140.5px"
  751. onclick="window.location.href='http://class.imooc.com/?c=php'"
  752. class="tab_direction"></div>
  753. <div id="div_java_img" style="float: left;position: relative"><img src="drawable/img_java.png"
  754. width="140.5px"
  755. onclick="window.location.href='http://class.imooc.com/?c=java'"
  756. class="tab_direction"></div>
  757. <div id="div_android_img" style="float: left;position: relative"><img src="drawable/img_android.png"
  758. width="140.5px"
  759. onclick="window.location.href='http://class.imooc.com/?c=android'"
  760. class="tab_direction"></div>
  761. <div id="div_ios_img" style="float: left;position: relative"><img src="drawable/img_ios.png"
  762. width="140.5px"
  763. onclick="window.location.href='http://class.imooc.com/?c=ios'"
  764. class="tab_direction"></div>
  765. </div>
  766. <!--选项卡内容区域-->
  767. <div id="div_tab_hide">
  768. </div>
  769. </div>
  770. </div>
  771. <div id="div_sgs_title" style="width: 100%;height: 52px;text-align: center;margin-top: 30px;margin-bottom: 10px" ;>
  772. <img src="drawable/img_title_suggest.png" width="335" height="52">
  773. </div>
  774. <div id="div_sgs_detail" style="text-align: center;padding-bottom: 50px; box-shadow: 0px 5px 10px #eeeeee; margin: 0 auto">
  775. <div style="width: 1255px;margin: 0 auto">
  776. <img id="img_sgt1" src="drawable/img_sgt1.png" width="220" height="235" style="margin: 5px;cursor: pointer;"
  777. onmousemove="img_sgt1Move()" onmouseout="img_sgt1Out()" onclick="sgtClick1()">
  778. <img id="img_sgt2" src="drawable/img_sgt2.png" width="220" height="235" style="margin: 5px;cursor: pointer;"
  779. onmousemove="img_sgt2Move()" onmouseout="img_sgt2Out()" onclick="sgtClick2()">
  780. <img id="img_sgt3" src="drawable/img_sgt3.png" width="220" height="235" style="margin: 5px;cursor: pointer;"
  781. onmousemove="img_sgt3Move()" onmouseout="img_sgt3Out()" onclick="sgtClick3()">
  782. <img id="img_sgt4" src="drawable/img_sgt4.png" width="220" height="235" style="margin: 5px;cursor: pointer;"
  783. onmousemove="img_sgt4Move()" onmouseout="img_sgt4Out()" onclick="sgtClick4()">
  784. <img id="img_sgt5" src="drawable/img_sgt5.png" width="220" height="235" style="margin: 5px;cursor: pointer;"
  785. onmousemove="img_sgt5Move()" onmouseout="img_sgt5Out()" onclick="sgtClick5()">
  786. </div>
  787. </div>
  788. <div id="div_sgs_title2"
  789. style="width: 100%;height: 52px;text-align: center;padding-top: 50px;padding-bottom: 10px;margin-top: 8px;background: #f8fafc"
  790. ;>
  791. <img src="drawable/img_title2.png" width="339" height="53">
  792. </div>
  793. <div id="div_sgs2_detail"
  794. style="text-align: center;margin-bottom: 20px;padding-bottom: 50px; box-shadow: 0px 10px 10px #efefef;background: #f8fafc">
  795. <div style="margin: 0 auto;width: 1255px" >
  796. <img id="img_new1" src="drawable/img_new1.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  797. onmousemove="img_new1Move()" onmouseout="img_new1Out()" onclick="newClick1()">
  798. <img id="img_new2" src="drawable/img_new2.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  799. onmousemove="img_new2Move()" onmouseout="img_new2Out()" onclick="newClick2()">
  800. <img id="img_new3" src="drawable/img_new3.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  801. onmousemove="img_new3Move()" onmouseout="img_new3Out()" onclick="newClick3()">
  802. <img id="img_new4" src="drawable/img_new4.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  803. onmousemove="img_new4Move()" onmouseout="img_new4Out()" onclick="newClick4()">
  804. <img id="img_new5" src="drawable/img_new5.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  805. onmousemove="img_new5Move()" onmouseout="img_new5Out()" onclick="newClick5()">
  806. <img id="img_new6" src="drawable/img_new6.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  807. onmousemove="img_new6Move()" onmouseout="img_new6Out()" onclick="newClick6()">
  808. <img id="img_new7" src="drawable/img_new7.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  809. onmousemove="img_new7Move()" onmouseout="img_new7Out()" onclick="newClick7()">
  810. <img id="img_new8" src="drawable/img_new8.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  811. onmousemove="img_new8Move()" onmouseout="img_new8Out()" onclick="newClick8()">
  812. <img id="img_new9" src="drawable/img_new9.png" width="227" height="240" style="margin: 5px;cursor: pointer;"
  813. onmousemove="img_new9Move()" onmouseout="img_new9Out()" onclick="newClick9()">
  814. <img id="img_new10" src="drawable/img_new10.png" width="227" height="240"
  815. style="margin: 5px;cursor: pointer;"
  816. onmousemove="img_new10Move()" onmouseout="img_new10Out()" onclick="sgtClick10()">
  817. </div>
  818. </div>
  819. <div style=" width: 100%; background-repeat: round; margin-bottom:10px;height: 457px;box-shadow: 0px 10px 10px #f5f5f5;text-align: center">
  820. <img src="drawable/bg_star.png" style="height: 457px;text-align: center">
  821. </div>
  822. <div style="height: 100px;width: auto;background: #f8fafc;padding-top: 20px;">
  823. <ul id="ul_foot">
  824. <li><a href="http://www.imooc.com/about/cooperate" style="color: grey;font-size: 14px">企业合作</a></li>
  825. <li><a href="http://www.imooc.com/about/job" style="color: grey;font-size: 14px">人才招聘</a></li>
  826. <li><a href="http://www.imooc.com/about/contact" style="color: grey;font-size: 14px">联系我们</a></li>
  827. <li><a href="http://www.imooc.com/about/recruit" style="color: grey;font-size: 14px">讲师招募</a></li>
  828. <li><a href="http://www.imooc.com/about/faq" style="color: grey;font-size: 14px">常见问题</a></li>
  829. <li><a href="http://www.imooc.com/user/feedback" style="color: grey;font-size: 14px">意见反馈</a></li>
  830. <li><a href="http://daxue.imooc.com/" style="color: grey;font-size: 14px">慕课大学</a></li>
  831. <li><a href="http://www.imooc.com/about/friendly" style="color: grey;font-size: 14px">友情链接</a></li>
  832. </ul>
  833. <div style=" width: 100%;padding-top: 5px;"><p style="color: darkgrey;font-size: 12px;">© 2017 imooc.com 京ICP备
  834. 13046642号-2</p></div>
  835. </div>
  836. </div>
  837. </div>
  838. <script type="text/javascript">
  839. window.onload = function () {
  840. var div_web_img = document.getElementById("div_web_img");
  841. var div_php_img = document.getElementById("div_php_img");
  842. var div_java_img = document.getElementById("div_java_img");
  843. var div_android_img = document.getElementById("div_android_img");
  844. var div_ios_img = document.getElementById("div_ios_img");
  845. var x = 0, x1 = 0, x2 = 0, x3 = 0, x4 = 0;
  846. var flag, flag1, flag2, flag3, flag4;
  847. function move_up() {
  848. if (x > 6)
  849. return;
  850. x = x + 1;
  851. div_web_img.style.bottom = x + "px";
  852. }
  853. function move_up1() {
  854. if (x1 > 6)
  855. return;
  856. x1 = x1 + 1;
  857. div_php_img.style.bottom = x1 + "px";
  858. }
  859. function move_up2() {
  860. if (x2 > 6)
  861. return;
  862. x2 = x2 + 1;
  863. div_java_img.style.bottom = x2 + "px";
  864. }
  865. function move_up3() {
  866. if (x3 > 6)
  867. return;
  868. x3 = x3 + 1;
  869. div_android_img.style.bottom = x3 + "px";
  870. }
  871. function move_up4() {
  872. if (x4 > 6)
  873. return;
  874. x4 = x4 + 1;
  875. div_ios_img.style.bottom = x4 + "px";
  876. }
  877. function move_down() {
  878. if (x == 0)
  879. return;
  880. x = x - 1;
  881. div_web_img.style.bottom = x + "px";
  882. }
  883. function move_down1() {
  884. if (x1 == 0)
  885. return;
  886. x1 = x1 - 1;
  887. div_php_img.style.bottom = x1 + "px";
  888. }
  889. function move_down2() {
  890. if (x2 == 0)
  891. return;
  892. x2 = x2 - 1;
  893. div_java_img.style.bottom = x2 + "px";
  894. }
  895. function move_down3() {
  896. if (x3 == 0)
  897. return;
  898. x3 = x3 - 1;
  899. div_android_img.style.bottom = x3 + "px";
  900. }
  901. function move_down4() {
  902. if (x4 == 0)
  903. return;
  904. x4 = x4 - 1;
  905. div_ios_img.style.bottom = x4 + "px";
  906. }
  907. div_web_img.onmousemove = function () {
  908. if (x == 0) {
  909. clearInterval(flag);
  910. flag = setInterval(move_up, 20);
  911. }
  912. }
  913. div_web_img.onmouseout = function () {
  914. clearInterval(flag);
  915. flag = setInterval(move_down, 20);
  916. }
  917. div_php_img.onmousemove = function () {
  918. if (x1 == 0) {
  919. clearInterval(flag1);
  920. flag1 = setInterval(move_up1, 20);
  921. }
  922. }
  923. div_php_img.onmouseout = function () {
  924. clearInterval(flag1);
  925. flag1 = setInterval(move_down1, 20);
  926. }
  927. div_java_img.onmousemove = function () {
  928. if (x2 == 0) {
  929. clearInterval(flag2);
  930. flag2 = setInterval(move_up2, 20);
  931. }
  932. }
  933. div_java_img.onmouseout = function () {
  934. clearInterval(flag2);
  935. flag2 = setInterval(move_down2, 20);
  936. }
  937. div_android_img.onmousemove = function () {
  938. if (x3 == 0) {
  939. clearInterval(flag3);
  940. flag3 = setInterval(move_up3, 20);
  941. }
  942. }
  943. div_android_img.onmouseout = function () {
  944. clearInterval(flag3);
  945. flag3 = setInterval(move_down3, 20);
  946. }
  947. div_ios_img.onmousemove = function () {
  948. if (x4 == 0) {
  949. clearInterval(flag4);
  950. flag4 = setInterval(move_up4, 20);
  951. }
  952. }
  953. div_ios_img.onmouseout = function () {
  954. clearInterval(flag4);
  955. flag4 = setInterval(move_down4, 20);
  956. }
  957. }
  958. </script>
  959. <script type="text/javascript"> var wrap = document.getElementById("div_banner");
  960. var inner = document.getElementById("inner");
  961. var spanList = document.getElementById("paganation").getElementsByTagName("span");
  962. var left = document.getElementById("left");
  963. var right = document.getElementById("right");
  964. var clickFlag = true;//设置左右切换标记位防止连续按
  965. var time// 主要用来设置自动滑动的计时器
  966. var index = 0;//记录每次滑动图片的下标
  967. var Distance = wrap.offsetWidth;//获取展示区的宽度,即每张图片的宽度 //定义图片滑动的函数
  968. function AutoGo() {
  969. var start = inner.offsetLeft;//获取移动块当前的left的开始坐标
  970. var end = index * Distance * (-1);//获取移动块移动结束的坐标。 //计算公式即当移动到第三张图片时,图片下标为2乘以图片的宽度就是块的left值。
  971. var change = end - start;//偏移量
  972. var timer;//用计时器为图片添加动画效果
  973. var t = 0;
  974. var maxT = 30;
  975. clear();//先把按钮状态清除,再让对应按钮改变状态
  976. if (index == spanList.length) {
  977. spanList[0].className = "selected";
  978. } else {
  979. spanList[index].className = "selected";
  980. }
  981. clearInterval(timer);//开启计时器前先把之前的清
  982. timer = setInterval(function () {
  983. t++;
  984. if (t >= maxT) {//当图片到达终点停止计时器
  985. clearInterval(timer);
  986. clickFlag = true;//当图片到达终点才能切换
  987. }
  988. inner.style.left = change / maxT * t + start + "px";//每个17毫秒让块移动
  989. if (index == spanList.length && t >= maxT) {
  990. inner.style.left = 0;
  991. index = 0; //当图片到最后一张时把它瞬间切换回第一张,由于都同一张图片不会影响效果
  992. }
  993. }, 17);
  994. } //编写图片向右滑动的函数
  995. function forward() {
  996. index++; //当图片下标到最后一张把小标换0
  997. if (index > spanList.length) {
  998. index = 0;
  999. }
  1000. AutoGo();
  1001. } //编写图片向左滑动函数
  1002. function backward() {
  1003. index--; //当图片下标到第一张让它返回到倒数第二张, //left值要变到最后一张才不影响过渡效果
  1004. if (index < 0) {
  1005. index = spanList.length - 1;
  1006. inner.style.left = (index + 1) * Distance * (-1) + "px";
  1007. }
  1008. AutoGo();
  1009. } //开启图片自动向右滑动的计时器
  1010. time = setInterval(forward, 4000); //设置鼠标悬停动画停止
  1011. wrap.onmouseover = function () {
  1012. clearInterval(time);
  1013. }
  1014. wrap.onmouseout = function () {
  1015. time = setInterval(forward, 4000);
  1016. } //遍历每个按钮让其切换到对应图片
  1017. for (var i = 0; i < spanList.length; i++) {
  1018. spanList[i].onclick = function () {
  1019. index = this.innerText - 1;
  1020. AutoGo();
  1021. }
  1022. } //左切换事件
  1023. left.onclick = function () {
  1024. if (clickFlag) {
  1025. backward();
  1026. }
  1027. clickFlag = false;
  1028. } //右切换事件
  1029. right.onclick = function () {
  1030. if (clickFlag) {
  1031. forward();
  1032. }
  1033. clickFlag = false;
  1034. } //清除页面所有按钮状态颜色
  1035. function clear() {
  1036. for (var i = 0; i < spanList.length; i++) {
  1037. spanList[i].className = "";
  1038. }
  1039. } </script>
  1040. <script>tabMouseMove()</script>
  1041. </body>
  1042. </html>

其实并没写完,也没用完全一样,但是真的有意思。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注