这次给大家讲解一个菜鸟教程网站的制作过程,该网站是一个关于编程知识教学的相关网站,大家也可以进这个网站进行相关编程的学习,里面有各方面的全套教程.
先给大家展示一下最后网站实现的效果以及全部源代码:
<html>
<head>
<title>菜鸟教程-学的不仅是技术</title>
<style>
.div_head{
height:59px;
width:100%;
margin-top:17px;
margin-bottom:15px;
padding-left:10px;
padding-right:10px;
}
.div_row{
width:100%;
margin-left:16%;
margin-right:101px;
overflow:hidden;
max-width: 1260px;
min-width: 755px;
height:59px;
}
.div_logo{
height:59px;
width:61.6%;
float:left;
padding-right:1%;
}
input#sreach{
width:35.5%;
height:37px;
background-color:#fff;
line-height:34px;
margin-top:11px;;
border:1px;
border-radius:3px;
font-size:1.2em;
padding-left:10px;
padding-right:10px;
}
.div_title{
height:34px;
width:100%;
padding-left:10px;
padding-right:10px;
background-color:#96b97d;
font-size:1.2em;
}
.div_titlein{
height:34px;
width:65%;
margin-left:15%;
padding-left:20px;
margin-bottom:0%;
}
.div_menu1{
height:35px;
width:26.3906px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_menu2{
height:35px;
width:52.7969px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_menu3{
height:35px;
width:60px;
float:left;
line-height:15px;
font-size:13px;
margin:0px;
padding: 10px 0 0 20px;
color:#fff;
}
.div_body{
height:5196px;
width:100%;
margin-top:10px;
float:left;
}
.div_tab{
height:451px;
width:9%;
margin-left:16%;
float:left;
border:1px solid;
}
.div_home{
height:2000px;
width:53%;
margin-left:15px;
padding:12px 20px;
border:1px #eaeaea;
float:left;
background-color:#fff;
}
.div_meau4{
height:32px;
width:93%;
padding:4px;
border:1px;
font-size:1.1em;
line-height:1.9em;
border-bottom: 1px solid;
background-color:#f6f6f6;
}
.div_hometitle{
height:21px;
width:100%;
margin:12px 0;
font-size:21px;
font-weight:700;
border-bottom: 1px solid #eaeaea;
}
.div_codelist1{
height:352px;
width:100%;
}
.div_codelist2{
height:556px;
width:100%;
}
.div_codeblock{
height:80px;
width:274.078px;
float:left;
padding:6px 16px;
margin-bottom:10px;
margin-right:8px;
color: #bbb;
background-color: #f6f6f6;
}
.h_fontstyle1{
color:#64854c;
font-size: 14px;
text-align: left;
overflow: hidden;
margin-bottom:10px;
margin-top:10px;
line-height: 1.1;
white-space: nowrap;
}
.h_fontstyle2{
text-align: left;
font-size: 12px;
color: #666;
width:230px;
height:48px;
}
</style>
</head>
<body bgcolor="#f6f6f6" >
<div class="div_head">
<div class="div_row">
<div class="div_logo">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtkAAAA7CAIAAAAhPAFpAAAS6klEQVR4Ae2dXahWVRrH86PM5hxLtCmbImUmNdCo0Zg+iOwmGspkJqIyiIJs7K7PqyCpq6CgLgYqE6absoac8CMamguVwGzKCnQYTzVk9HFiyKyOaH42v+PjPC7WWnu9+33Pfjue0/9FNs9+1rOetfZvC/t/1lp77TF79uz58ccfTzjhBI5jx441g+OYMWMOHTo0fvz4w4cPY3PEOW7cOI5m4ySeGI7uoVQ/ERABERABERABEahPYFB88ENYcESO8MNAc+BBiAyWHSlFcOA5ePAg4gPDwjiafCHGjSM1dBABERABERABERCBWgQGFQY/G/xAT5jIsHEOO5LGJIgpDxsa4WilFGF4xVptKkgEREAEREAEREAE/k9gcHrF5lnwICwYC0FzoE6w8VCKfeKJJ5oEwUOpqRBTLZRaKjfsVEcREAEREAEREAERqENgzN69e9EihCImGN7ANtmB1MC2aRoXHxTh91EQ/NjUtQDJkTrEFSMCIiACIiACIhASGBwXMT3BEduECAaaA21hMsX8FkBlivhZDKcY5gzzyhYBERABERABERCBOgSOrl1FgiA7UBW2/gMDIcIPzeGG6ZIjOmRwaAQ/DVgkThMxdZpUjAiIgAiIgAiIgAg4gWNrV3EhL2wWhiO2CQ6TIz5fY35O3WNyxDPKEAEREAEREAEREIH6BAZXqhKN7OCIvEBYYOD0oRGXGiZKbKbGxIp5LJijJanftiJFQAREQAREQAREYFCCMNRhegIxwc9sVq3aGIkxQpHwo4hTjvyohQf5YrrENyMRUxEQAREQAREQARGoT+DoehG0BXVMXnA0A6nh79GgUQjgeODAAfz2xi+nFskRUVK/VUWKgAiIgAiIgAiIgBFAThzdx93ObZCDI9oChYGTI6f8sFEhHBEo/Ex84B9McUSpWAYdRUAEREAEREAERKA+gaOjHVQwPWEDJBw55cj4B0f7oT/QIogPVAgGTm8Gj+SI05AhAiIgAiIgAiJQn8AYvo1XP1qRIiACIiACIiACItAsgaPrRZpNqmwiIAIiIAIiIAIiUJOAtEhNUAoTAREQAREQARHoCoHx3ci6ffv23bt3V2U+68jv3XfftQDOenp6Jk2aVBWP//vvv//www8LARRZWo/J9iGMaZlz/vz5ng3jyyO/0INNz2fPnh057ZTwF154oa+vr7+//5FHHpk5c+aSJUsomjVr1vXXXx8lz2YInUPJlkXhyY1JGMNF4SzfEa/errHj6+0ffvXBwN5dvRMnXz3n5i07NmDPPPPCsybPsFSbPnr90519vz33ylnTLsomH/jh262fvbVz91e793135axFU3rOXPfB80RihHnSuvsO7KVW6ncPGSacONFPzfh6oH//wR8ip59yFb0nn+anMkRABERABDog0LwWeeaZZ3gGF7py1VVX8TC+9957wxgefubHCP1mX3vttakz9Tz33HOmDB5//PE1a9akAXjefPNNjuvXr3/44YezAe5cunTprbfeaqcIl5tuusmLQuPRRx+l56GH4GXLlrnYoojOcMnoCWyOtM5lPvnkk9mLDVNhDzFbnduxePFi00lh02gmLj+6tDCgXRsBgfLwWkgKxAG6hCMCBf/0qbNPGn8yHmzkSKpFiNzYt/rLXZ94EoLRH6TCw5E8KIOr596S1QdIFov06pEx95xL501fEDpp0YRO6IzsWy65J1UwUYxORUAEREAECgSGYY6mt7c37ZD93c/zHhmRltb0FAZjogyhUIiK/JSnODrATusPEnAhKKcof3rJhHGxq1ev9uayRrPZsk3Qtyw3RnSQa1dccQXKKVuxvpMn+qp3ng6FSLauDZlY0UnjJkQxyIiVm58KhQgBaJc0jLb6+t+P/NngKMZkUOTUqQiIgAiIQLcJjHvooYeabYPJCLYk2bp1a1VaBgMWLly4bt26ffv2pTE8Anfs2BH9OX7NNdfg5MGcxpsHrfDYY4/5xMfll1++f//+qA+0u2LFCpMFc+fOLXfS0jK94j257LLLNm7cGPWZsRMGPLxXzHTcdtttfmoGAQ8++CCtT5kyZdOmTWEppxMmTLjgggtCp9uNZKt5O5AjkPemQwMtwrVPnTo1dNa30RB//eef02mO6y68fdLEydNOPZeib/d8HSU87ZSp008/351MlKx+b4WfmsGIyGXn/Z5Zkokn9Xz+zcdhKafjxo4/49RzQidTMNm2PObQ4YO/PmPuhEDf4Nn2+WYPiIzBMZg5N3MVkV+nIiACIiACbRFoXovwcEUToAOqpMOMGTPQFoz/V8UgO3g8h/MXCAgehy+++GLVtaGo0B9hKX0In/2IlVdffdXHJ6yTdOOVV14Ja0U2PfHHMA9j+rxq1SqXI0yykMGrcL2pEKEUAWQxzB8hPnbu3OlVMBhBoZ/popOmstW8HdDjvlQNgWzZsuXGG28Mu13TZkQEIZIG33Dx3ZN/cTr+Uyb0ojl+Oens//x3WxgWahHUTCpECF540R1WZWrvtM+++Xjv/t1hhv5vd6BRKHKntZUKFw/AQHycM+U895S1yA3zl0qIOCsZIiACItAxgW7N0fhTv9CzcEQhCiuvOImCq04XLVrkcysPPPBAGobc8RUhaal5WPkRFnketA6/sChdckGpd8AiWYQRVjH7iSee8MkgL202W53bwQhQ1FvvDMIomnXyorLxxraXsgHReg4Wri44/w/ZSJzZFRvREg3GPNLqb338d8RQ5E+XoYQBrFPx07SuF8kQAREQARFokEC3tMgQu9jyrZma+ZmhsMh58+ZlqzDJkvW7k8dwdrQgUhWs/Ej1hCdxY2BgwO3QQI6Ep81mCzOXbceVhlX1PI10D2s7su+tRDLC4lm46q/SeAYMVn7U0QTpHJAlQY6E2cymrdRpHtpiPsjsv215tipMfhEQAREQgQYJHKdapKkrbDkegIDgRZhyc9k3biItsnz58nKScilyJ5QyzWYrNx2WtsQVBre0szqgUOvS3xyb8PKw9z7d6HYHButhUynDQpNCKlsggpBKKxZqqUgEREAERKBjAqNci7TkwhQMIiASFmkt3qlJne5h/iJUEu5vy/DVMM1ma6sPDQazyIN/bSVk4iaau2lEEGz74u2oG9kBGI+xF4zt6E4ZIiACIiAC3SPwc9cijAQwP+KrQKpAs36loDaykzhVqar8viCj2WxVzWX9TEhl/ThbyrWoYmfvx0YjFo0Igug1YOtnYZqGAKqwcCQ7lxRdpk5FQAREQASGTuA41SJVyzuGfsHZDBs2bCgspLUq0SLWMI/LiNDZru2v1Dabra1u8A5zNp5FvvyyRVXOrAKoCna/a5H9h/bh5F0YL+rYSNesrH3/L3POvqSQMLvotRCvIhEQAREQgaEQOE61SMuBiqFcc1p37dq1bAGS+kMPEqFq2CC7V1hYt6ZtQy/NZqvZNGFcXdXYD28v189jkWzQ3m4V4hmKYNUIgxbsAc+pKZIO8kRVopUfpk4Kwx7tzi5FzelUBERABESgLQLDqUWqJiNYTFr1cmlb19ZucMt3ati3ftq0Y/tVWH6e31WP8HY7QHyz2ep3gAUx2U3uGQ55+eWX2x0U4dkfPf7r94R3bnm/l31BhpKk3BwqhCmkc6dk3q8uV1SpCIiACIhANwgMjxbhicuTL9Ui9uTzrU67ccGFnOw1UtZAjBwwixGtnKBKuVahxaiIEZFms0X5q04Z8kk3dOEy+b5PB0KkqpV2/SiGwtBFW9nS8RX7kE05CXvCNtWBckMqFQEREIGfOYHh0SJsH5LOdyAFhvHJZ/8P+KBu+T8E7/dG7wA3O5LRbLbytZRLUV282kN/ymHZ0kZkRPfGRazPbElSlhosXul4dCeLRU4REAEREIEsgeHRItmu8Kc5X2IbyrfxsmnbcrKVajTskVZnOIeRm84e0mm20NPT0xOeDtGun42rjgQWTXOBXCnf+Su/z5ztZLdlRLbRgjP90h7BvKTjS2Wzdcuv/maryCkCIiACItABgeHRIjz8qhZnrFmz5s477+zgSpqqkj6Vo8w8m+m8TyQ1OKtCQ81mi3peOOVyGJTKBqARh0UgNjK4kr0iczIuUtAi2U3lC9lUJAIiIAIi0DGB4dEidJcZGX7ZfvN2K5ugZ4t+AidrVlq+38uzuak1Ij/BFdVsgguvuigEYjqnVkjbbRlRaLqtIrZWq5qmKciUtppQsAiIgAiIQEsCw6ZF6FlhNoQNP1p2vXsBdd7v3b59u3egkd1QfESk2WzeyTpG4Xs0yJE6GTwmOy3ipTUNVo/WjCyElYVR1ds05c3QCs2pSAREQAREoF0Cw6lFCn1t6tt4hSbKRS03OAm3BWtEPXgSN8o9LJd2lqTwPZq2xkXo27TTppd7WFXK3h6s5LBFox0nCZOXBU12/KMwXhJmli0CIiACItAIgeNUizRybSRp9wnq7S5atKhqwsJj3PC1I+7pwPCJoWazddCTmlUQDZs+en3Dv1/ln3/b1ut2PK6w6p2nSbixb3CSruMk3g2MrNrwADYySadppp9+vgfIEAEREAER6DaBEaNFfAqjLSK2sXqh7sDAQFXClu/3ekXysxrXTzswwgyh3UEqqgw9Q8t2+/rfRzSwSwdjGPxb98Hz6JKwVmcvoZAqTIJK6CyPJ6mTIZ2mKcsXTy5DBERABESgEQLHqRbhfVTeKWUFa/jqbP2XVA1NnQ+72GRQ2IpjRV7UVxgtl5h42qxx1113hf5ms4WZy3bNYSRGRPhiS5TKdEnonHvOpeFpHdvT+nITtoSvU7EqxvaSD0v9feP+7z41f6Q8kC/R54LD6rJFQAREQAQaJ9AtLVJYeeDXkO6n7kU8FNnZgi/o8nOnz2K4xw3/sJx7kBds2W6nCxcudH9oEMPPPOFaVI+pPzTCSygdz60wjMGUkDeK0Ww2Eta5HYSFi2DC/mCHC1CQHVGpnUb+Ob/6XTasysnIiu8t5rMkyIKOZ2pQFewoHzXn35rxtqJpmvL6kiibTkVABERABIZOoFtapDAm4X9888Rt6wKqJAVJ2APD03KKsEDKePLFixe7HRr33Xefn95///2uS9yJSigIIA8zI/sZnShnuu09ddlqPUrFabPZCrfDm6ZvUW+9CCNUSwN7d4VFbvdMONVtDKTA1XNuDj1mIwKi9SV4+HauSxnmZUL9wedpSBXlcSVh/mhyx5zXXXh7VIvTf/zr2DYqb2x7yQLCaZpwmMTHTtI8eNKt5bNhcoqACIiACJQJNK9FTAeEyiDqAWMYtr8qT3p+UWl0Gv45TnDhg7F84MYUCcaSJUs8D/uSpa3w0CUsHE3Bg3xJ9zVpa7pk5cqVaVs0BBPyZ/dwQ4hUabJGsrW8HQaKvrG9vUOLjGgbtKp9wNJv86IqspMsvr4EDYEKWbn5Kft2Lu0yEJIqmD/O+1MqR1iwgqYxHRN1mFOESDTVwogIVUIR8+WuT2gafzidZFdHka2iTTO7h4BolYwXyRABERABEahPoHkt8uyzzxb+vPae2X4V5UkQZj3CP8epywKOwr6oaAs0UCiDECLZHdWWLVsWhnmvli9f7rYbLd/v9UiEyGuvvRbtm0JDfNiFhSmh9KGKBc+ePdurR0Yj2ercDkZNor55T7iW9CNB4ciBR2KkizNw2nd3wzCzGQVBFmz5ZL2rEPxolxsuvjsNRojccsk9kQZCQ2z7fDPVwwzUtWBmXqI8tOgTNF5kfUC1mNahCTMYEUmDvZYbdhV+KkMEREAERKADAs1rkZrrPS2MY9VQBzIiKzsQKDzvURjpCER4/ZSSOStECFuwYEEY7HZ2sy/0UNXQhVcMjRUrViBfyt2jY1xFOcZyDjFby9uRXUqCBKGHqBBaT6+dpzXzJuElYzP+kT7+LYYJF5REVsH4NIflTEdEwlYWXnQHrZhWCP2hzQgHbWVjfD1sGI9tEse6552M5puiKn7qIsY9MkRABERABNolMGbPnj3t1ulGPIsVfE0DggDBUec5zZADf9Dzs1dzee7yEGWmhuotn8HduIooJ/MjbCBLJ+kPHeNDNjzX6VhnfWs2W9TVDk4ZUdj2xdscefDzCI8mRKoSMqviIxnzpi8gA5EsF23r3V2SfLqzj2UrLHFFSTC40jtxcrtJqnoovwiIgAiIwE9M4HjRIj/xZas5ERABERABERCB44RA83M0x8mFqRsiIAIiIAIiIAIjgoC0yIi4TeqkCIiACIiACIxaAtIio/bW6sJEQAREQAREYEQQkBYZEbdJnRQBERABERCBUUtAWmTU3lpdmAiIgAiIgAiMCALSIiPiNqmTIiACIiACIjBqCUiLjNpbqwsTAREQAREQgRFBQFpkRNwmdVIEREAEREAERi0BaZFRe2t1YSIgAiIgAiIwIghIi4yI26ROioAIiIAIiMCoJSAtMmpvrS5MBERABERABEYEAWmREXGb1EkREAEREAERGLUEpEVG7a3VhYmACIiACIjAiCDwP+5AWlKqKSmOAAAAAElFTkSuQmCC"/>
</div>
<input id="sreach" type="text" name="sreach" placeholder="搜索......"/>
</div>
</div>
<div class="div_title">
<div class="div_titlein">
<div class="div_menu1">首页</div>
<div class="div_menu2">菜鸟笔记</div>
<div class="div_menu2">菜鸟工具</div>
<div class="div_menu2">参考手册</div>
<div class="div_menu2">用户笔记</div>
<div class="div_menu3">测验/考试</div>
<div class="div_menu2">设计神器</div>
<div class="div_menu2">本地书签</div>
<div class="div_menu1">登录</div>
</div>
</div>
<div class="div_body">
<div class="div_tab">
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAzUlEQVQ4EcVSyw6EIAzcEg5Ev0j+X/waNVzQk27JbCq7PjB4WA9NmenQToW896/ST5UKo+5/Yr2ua/Hkj8aOnYmI4zRNbdvO83wxiDHGWlvXNVQKSsQLmVBpPY3jKIRSeRfLski9loyTlEjxs3wThxCcc3c8V1WF6/JznrVlnIZhkB3EM9FFNVN4F9i2FiXObPsHAX4YPy+MOfbcdV3Wc9M07JnreYrNc3Zg2EnLqO97QVMC4D5yT7RlavtVKbrXHCIK15TFr7d9f8+ofAM/e7w0CqlGTQAAAABJRU5ErkJggg==" />全部教程</div>
<div class="div_meau4"style="background-color:#fff"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>HTML/CSS</div>
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>JavaScript</div>
<div class="div_meau4"style="background-color:#fff"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>服务端</div>
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>数据库</div>
<div class="div_meau4"style="background-color:#fff"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>移动端</div>
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>XML教程</div>
<div class="div_meau4"style="background-color:#fff"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>ASP.NET</div>
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>Web Service</div>
<div class="div_meau4"style="background-color:#fff"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC"/>开发工具</div>
<div class="div_meau4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABJklEQVQ4EWP8//8/A7mAiVyNIH0Dp5mFCGdfXuCQOOULTCFb/PxjubpgHpLmZwcaSqq23PoFUwWhI+efKU5YVn82pPE4ROYXQgFc87O1VQsUKnee0eVF1QzmSRn7WAofP/gWTQoeYG8fXNE1xqqTAeik3OqDb+Xt3XTYULTDbUYRReKAdJZseSjv0zO5wUHqmWVu1AOELDCRgMGlHuOeSzAOjH66vz7I2Ng4qH7/U5gQMg13NsI4GAvVTpgoMo1T87PNjQjXMlzuNem9jKwPzMbpZynf1pkMtyR9raQw9MAFcGpmYBAx9hWBq8PKgDtbWEHn2K6zn7Eq+nx21zEdBWEMOUZg6EEFsacwkCSbmk9bDzCi0HUjaUaXIsyHO5uwUkwVA6cZABJtkIinwm/qAAAAAElFTkSuQmCC" style="height:14px;width:14px;"/>网站建设</div>
</div>
<div class="div_home">
<div class="div_codelist1">
<div class="div_hometitle"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAA+UlEQVQ4EWP8//8/A2WAiTLtIN1UMIIF7Iqfnz//YmBg4+VlZ4AwiXAbWDVIHSMwLN5szvVoPM7AEDn/TDFDr0niciIMYGCwrN8x2VcEqJQKHgG54uezy1eeAz0irGaswAZlE3YIm6SOrhQ71CMw/5MWFpCggxoxOMKCQo+A0sXPtw9uwYMTyiYhOEFGfD47Kx2eLpYnphOfLsAxQqV0AfQKJQkcHBY3DyzYdYuBQTc414Ht7OblZ98SDgkGBjW3NHd1UNICh8WtLQsXHgfmEYdcB4bjfQuJDAuFSIgR4LBgQ7KVDZmDJI7JhCkE5RFMWZJEqBAjg8MIALYKgZKoLbilAAAAAElFTkSuQmCC" style="height:18px;width:18px;margin-right:2px;"/>HTML/CSS</div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 HTML】</h4><img src="data:image/png;base64,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"style="float:left;"/><strong class="h_fontstyle2">HTML,即超文本标记语言（Hyper Text Markup Language）</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 HTML5】</h4><img src="data:image/png;base64,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"style="float:left;"/><strong class="h_fontstyle2">HTML5 是下一代 HTML 标准</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 CSS】</h4><img src="data:image/png;base64,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"style="float:left;"/><strong class="h_fontstyle2">层叠样式表（Cascading StyleSheet）</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 CSS3】</h4><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAFn0lEQVRYCe1YS28bVRSe9/U8EjuxY7s0pG0goSLlXdgg2HSD2CCx5D8WsUBiVRawqFAQIBUaEqDvtI4TJ7bn4Zk7L77rCWliu/bcJpGClCvLmsedc775znfOPXNF27aFszSkswSGYTkHNCkiZ44hZQziLS/+/oG72gjcMB0zjfeWqUrX6+TGZaNmyMPPii/Ksl+2gq83nI6fhEl6knAEQRQEVRKnifTlsvVBnQxgGh0ycAM0LS+mJ40G7vF6MLvbYy7gKBcgRArcJANzT/QUxrtBcuuBO2B1tIagG0RqYOrhUxC7UtPnpzSbJg0npFG6Ui1gwt1tX1PEuqlamvS4S/9o9sZYiZL050bw1ZuHDQujAU1UsSiK79fN18pkrdnzowSy+Gyp2AsZuCkif7xglQryDw9tADri7egJSBp2NBrQ0QdHnxFVtIP4fpvuuJFFpDRNoTdgAiXIgihOvfEkj7Z6jErtBLGpya+XSdVSZElEBhiqPGsohip1aazKYtVQwRzv4GMIDv7zkf740Lmz7UNrHT+O0/SbjTZ8N7q0Dy7SVKntRQfzGW35oHEAkkRWPIpEhoBgXBIFL4jhxtAkeMMxLlqE1TrEKgoYSQslVmYQzbYf2wHSdjIqDkAFRXzvgvH5UlEBFp6BbPp2vbP61PVyVHwOQP13FSqGqsl8gCgimuYgp/+Soyv1yPdHeFB1clt+bgOP2DTOWWc5GEqSFJmV+ekE8aM2hTKy02GUEEvFUBZLRFeZwroUT08WEKzxAGJ2wT7DgAr006azvhMcAXTU47WafsHSdJUFywlQmLK5E/65AKUeTTK7RJE0WYKWMjVFqQjyEJfMKXSgqzKgQ/64EiWCSyGjXIg4AMEe0pxGia5IMwX5kwVrZa6ADPdouudHa9u9jRZbQwqqNE3kKyXyTs0wVREwUL6jnHC4QgaugQlqmCIpXn2hqKEu39sNfm25vzU8h8aSIM6ZyvWLxkfz1sUplowoXch53MpFTj+YHAyx+SnUECeWisPVTffWffveXhDGbBUDmiszZLlCCoqENfXvln+pRK5WChAdSiJ7lXyDExDkjARmahAbbvjMoVjqM0dItCdd2nTDfhkXELVPLwkAhDpxoK08kPgAQQm2n8R9DDVTXZkzXDrY8qEWNN0oYEAZLZgMQKwByDc4AYGhEAwx2wsl5JmIeJmahHX+wN2dLe/2Ewf5R2RWdYEEIcsLh1vUmYb6r44u8ZlNUSmvVfXl8vNe/alNVYlVBIgJgKAhyC43QTyFkb0u01CaLQIIze9Nf9tljFV0uagzktq9uGGHvTCe1RWisCIFcpCYp8YQ68xRc5l9EIBOBI06cgrL//y0houPOqyPxsXalJgBAlw7QBnCzVyDT0NQhIO2pi9qSKdiKlZXgoS/+6uT9av44IKyTE2cMxRLY5whDxy6L/A8iPgAsZCFMXIGpl8tal9cnXm7avzZ8td3fEgHNLwyrS2VyRtlsjhTmO0HEUl4mmkP6z4ixgBBICUiv1vX36rryDWX0SCANkUWwQxqdFaQ+iE7NQ3BJULjRyjNrIWFS7hFLiFS6CdxFzjwfzCABpM5cow37eEJ5Ny8u7c4S7CWQchlXckayMNQsHbteBEK9+MO/Wd3v0U5QDn+gE9Dma21bX+zS4sFBV+DEErVVOuWWmMLXNpwoi0nxA+f7u0g7vgRMm48goG7owFhx2TMZx6W120Pvwi2UI6LBRk5hcKD01Yv3HFj9JOYM+Bp+BTRHf50Gw0I+ze3N/089QyOmy5+4bC/iVegvA9zbsdgNwmfYKzyn9qA8SKRblw2BzyMdoq9LewmQR+axJLoZAciBbNlnbmoDm2ivXAHDSCwm4T9G+yYDO9RHAci+lpECtwMo4HZcYCO4/Wlnz3xgLw0kv0HzwFNYvCcof8dQ/8CwXMBzOtO1egAAAAASUVORK5CYII="style="float:left;"/><strong class="h_fontstyle2">Bootstrap4 目前是 Bootstrap 的最新版本</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Bootstrap3】</h4><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAFuklEQVRYCe2YW3NTVRTHc+65N/SSXtIGG5rWFi3ggDqI6AAy4ozOMI6++OCMH8CP5KMvzsjog6CMCqgIChZESovQNk1vaZo0l5Nzv/gPKacxOWnDSTvDQzOZZu21117rd9Ze+9JDCILgep4+5PMEU2bZA9puRvYytF2G6EYGN69OX7v098z0iqbqjWwc6GmGio30nHx3/LW3RmyHE7bL/qsvrv1w4S/bATulPHv+lY8+O1nvzaaGkJvdpgEHQiBQU0CYqXq73dDYBrLJEOpmN8LX+7QNZAO0s1Vcz2FpbAM1XGXWMAgURbIcY7pMWVRN06zuIggXQRCGsaEkSMIFu//bVNtvKzcF5A964gf7FVmdfbhiILhhappBUSAhSJIIhLzZdJFhaVXRQu1+WVJhicCgwpPIsspxtK6bEAzd2BmgyP7OTz8/uzS/dvXiXbebVRV9bTXvb/MiEkkQx8+89O2X12MjvYnHqbfPHVqaz6wsZsGKGQl1+KfvJeNjkWJBnJxI5NdLOwMEL7qql4pSb39HMORtDwcVSVtOZkpFsbtvn6ZoXh8XjYUL+RKy0t4Z4AsihO6+EFJL0xRSeOjVA6nF9R0DymX5W78+FErS3T9mXoh3LyYymXTB7WEBOj+b3n8grOvGykJ2dTE3zSUxoUvJTPkZDINlKElSh8Yik3cS+ez26cGopmpoLVW4/M1tVE8hJ2TTBQxTZA2HAOYFFYNUYRIX5tJIYWp5HUWNcoHN8kIWFcayNCoM053P7RwQijS1tI4Y+IAgGusaiHX5Ax4XUdFt/KBowLSQSAvLMswEXsYapGhqPcMDEZmrWG/9t6kM1bjoj3UePzXWHWl/ot+ggaxrhijISNjEjX/vTyRKRRmVBErb/abGp9V0AoQS7uwO9UQ6+KKQSecrvjB9Hg8X7u0eHO5ta/eKooyCIwnKitSk4ATIcj0/u/LzpT8rTZIkQ/v8R48fjA72xMf6EzPLEzenXCZDks8W4tmsLZSKkJxLfff1b9VKnpfeO/9GJBoOtHkIWpNExc36nuRpc2ar7evlloAqO7XraW1jTaH8UTHYkSFIqGRVMwzdywVJEnPXFFNLQFho0Vhv+TRDEkiiLxo+de5Y30DX4vzqo6lk5QBRdaUk5jzuIEUyeID6lNRoWgI6fGxkMB7ZCEIQDEMFgr58jr9y+fb1q9alytRMTZQLHOtnKBbsNQQ1zZaAvD43vjUeA22+oZHoVGwuly0+PfZNzVBNhTcZD0O7t156LQFN30/88uNEBYikyst+eHT/0OjA2KHBbCa/upJdSqYtXN1QsTuapsHQHqrx0msJaCGRunihvMrKtyKScHPs5NDMh5+cHj86PDwaHXpxoBoIZrqhyRrOXZMFE8VYrNVCS0CapkuibLkTeKlYEE6cOoyQPr+nMxyyuiwBi04xJRwiXPneZ8PUEhDLMm37/JVg5RxRZGe4LdQexCUJCx6bkMVRLRimrmiiyzQ4wletr8gtAfX0dZw4fQSOsNCwU3Nu9uUjQ/GxqGGaa6s5bNb18SoaVJKiS4Zsc4F0DFQ+ukfHB/HdjIrbNB7cMNZW1/+583jq3txmV52EaVX1zem2+p0AlZcKvsbm8+FURxOnfYkXHk0vXPn+1u0bD3Tdyf/gToB+/+nBreuTJqmBynoyCGVQw8QGzfOiJNg8fbVxI9kJEG5eeh43aVHRJFRoI9fO9E6AUMRYsTgFcA4AC7uLs9i2o2xOFlyWbU1rlNhtsb+xjBenZk1Xk02GsUmHDRDe3zTpEZcKMHGMl8ap2dztotpzfHSgulmRbYDwNqnerpGGJEiW8bhZvwOmdz54vd6tDRDebeFtUr1pIw1yw1CchwvQFLft7cJy8v7HJ988fdhqWoL9GzR0O3ilh50I9x5sd+UNssEHdYOZQm5saTCoIVADh7uutpmyXY+5ZYA9oC3Tg869DG2Xof8AyImjo1waHfwAAAAASUVORK5CYII="style="float:left;"/><strong class="h_fontstyle2">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Bootstrap4】</h4><img src="data:image/png;base64,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"style="float:left;"/><strong class="h_fontstyle2">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Font Awesome】</h4><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAETklEQVRYCe1YyyutURR3jssJeSuUJBl4TjzSpTwyEhOSKHMzfwImxoYylISSMBLpCHkMDAw8MxB5M/Ao5HV/56x71/3a39rfOc6jqLO7uWvv77d+67fX3t+31z62x8fHsO/U7N9JjEtLSJCnFQll6Mdl6JdO8cLCwszMzO7u7uvrqw7jw3hERER+fn5TU1N1dbXobhO/Q4ODg6Ojo3Cw2Wyimz+Dn5+fcG9vb+/s7DTzCJva6XSOjY0BGgw1TIsQa2trXgmanp424wI7QlMdHx830wp7CPsGOPKh9LJbAHMG5u3tbWZmQxBEu5ikZGVlNTc3JyQkzM3NbW5uPj09BVCT+LoIglhsfHx8X19fdna23W6vqqrq7u5eX183sij5g6P3cnUvi7CpKQyoi4qKUlJSoAZ2dHR0YWEhJCIqANQwHhkZicG4uDi8z+jSOE9JMf75uf6HePc/BRKmzRB8jo6Onp+fSQH+Hh8f4xvh5grLyMiorKysqKjIzc0llXd3d/v7+0tLSysrKxcXFxyHVFIXdmxsrMPhuL6+ZoBiCN+h2tpagChwfX19V1dXUlLSxMTE0NAQiEpLS/FZKysrQ1YQQKGD1+Xl5fz8/NTU1MnJCT9FIrEdGxoa6urqsBd7e3sRAE+di4uMIUObIQq2t7f38vIC+/DwEKQ9PT01NTVYPoWFu0CmpaV1dHQ0NjbCFzl+f39PTU3NycnJzMwMDw8HG/4C75IjNUEQSCk9Ch7ZKikpsVDDeDAkJib+djeRCkhgGG80BEE6Ciwcll8n10hK8YhHF1gXRXjLFGqlqyPyDaZ4oStkiEAILE5OGfRSnzmwwsMAQRCgOjUYR2PnYBiCICVMsERo5iXsIcpBsDOhTJu72gzxGsMw2uzptyGnSMgQhec8WSwZC/VBHOSIijxkyDqkcVkZaRy0EMp4BaMVpODMXQTGgXp2dnZ7e4unqAvS09Nx0OoiEcPb29vp6Sl8dTBBkPUU8fT+/n5jYwMl29bWFmzCIwCO2+LiYpxiOICjoqKMcyAMaofV1dWRkRE80kURBBmJYCMSGoyHhwdMbnJyEtej8/NzhRFdJAwXBJQfuOi0tLSgPomJiYEjsoKCBOOzs7M4cYEkQiUQdQVBQBuDwabu8PDwwMAA2eQs8qKkRObQUPqgbEJ9d3Nzc3V1xY7kxV1FliBIQXD34+ODWEQdDON4yCjdF/AIgzT+H+aqGIWmFYTYRMFELkpNzWAm9gIpvvXS4aqkQZdbs4gvjchyPJ72qFlRJicnJx8cHKDY+1JIa7C8YKIgVGEcG1V9f38/qGkFvVgIaxmGpzYbLiqG/l9TODoKCgoY59o17kaXIR4PiIGvg5lHENTa2mrGBWMEP4CYaQVB5eXlBA3SdiYRbW1tCGQWJNzLCLS8vIy72M7ODr6zZjefR7Bv8vLy8HvB136w8jme/47CkvlP6g9DSJCn7IUy9OMy9AfQEf9tj7wPDwAAAABJRU5ErkJggg=="style="float:left;"/><strong class="h_fontstyle2">Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong/></div>
<div class="div_codeblock"><h4 class="h_fontstyle1">【学习 Foundation】</h4><img src="data:image/png;base64,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"style="float:left;"/><strong class="h_fontstyle2">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong/></div>
</div>
<div class="div_codelist2">
</div>
</div>
</div>
</body>
</html>
- 接下来我们对代码为大家进行讲解:
<style...>
<style.../>中设置下面各个div板块所用的CSS属性,用class="****"将他们链接在一起.
接下来我们对
<body...>
<body.../> 中各个div板块所完成的功能进行讲解
首先是"div_head"这个板块确定的是如下图所示这一部分:
在"div_head"中包含"div_row"和"div_logo"中两部分,分别是该网页首页的图片,和搜索框,前者定义了img一个元素,用src链接一个base64资源,搜索框用form表单的imput元素来确定,如果对这方面不了解的可以参考我之前的博客有关于对form表单的详细介绍.
紧接着我们定义一个大div板块"div_title"在该div中包含首页,菜鸟笔记.....这些各个div;
最后我们再定义一个内容的板块"div_body"中包含"div_tab"和"div_home"两个div板块,他们的效果图如下:
其中"div_tab"部分定义了旁边的菜单栏,"div_home"定义了主要内容部分.
转载自原文链接, 如需删除请联系管理员。
原文链接：前端---HTML关于简易菜鸟教程网站首页制作，转载请注明来源！