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

网页开发初体验

Html

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

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

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

自己觉得要注意的地方：

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

其他的都忘了，附上源码：

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

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

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