菜鸟教程首页制作经验总结

百科大全

更新时间：2025-10-06 02:07:3037

admin管理员组
文章数量:1794759

菜鸟教程首页制作经验总结

之前做了百度首页，比较简洁，逻辑清晰；虽然菜鸟教程首页的复杂度比百度首页高一些，但只要遵循先整体布局再动手敲代码的原则，依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下：

1.导航栏可通过部署div块完成，也可以通过ul-li列表完成，尤其利用后种方法时，要将ul的padding和margin设为0，否则导航栏内的首个元素不能靠向最左；

2.导航栏元素下方的三角可通过多种方式设置，如：border变换法，正方形旋转法，定位图片法，Canvas绘画法，svg法。具体方法可参考如下文章：CSS绘制小三角形/圆形等各种小图标的方法；

<html> <head> <title>菜鸟</title> <link href="images/鸟.ico" rel="shortcut icon" type="image/x-icon" > <style> .header{ width:100%; height:90px; background-color:#F6F6F6; } .top_menu{ width:100%; height:40px; background-color:#96BA7D; font-size:14px; color:white; } .top_menu_ul{ list-style-type:none; margin:0; padding:0; } .top_menu_ul_li{ float:left; padding:8px; padding-right:18px; } .body{ width:100%; height:2630px; background-color:#F6F6F6; } .left_menu{ width:15%; float:left; height:462px; margin-left:9.5%; margin-top:1%; } .left_menu_ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; } .left_menu_ul_li{ width:94.5%; height:30px; border:1px solid #E3E3E3; padding:5px; text-align:left; float:left; } .show{ border:1px solid #E3E3E3; border-radius:5px; width:60%; float:left; height:auto; background-color:white; margin-left:1%; margin-top:1%; } .footer1{ width:100%; height:260px; } .footer2{ width:100%; height:60px; background-color:#F6F6F6; text-align:center; color:gray; } </style> </head> <body style="margin:0" > <div class="header"> <div style="margin-left:9.5%;float:left;"> <img src="images/菜鸟首页图标.jpg" alt="菜鸟首页" style="margin-top:30px;" /> </div> <div style="margin-left:35%;margin-top:27px;height:40px;float:left;padding:4px; background-color: #EFEFEF" > <form action="www.baidu" method="get"> <input type="text" name="search" id="search" value="搜索......" style=" width:400px; height:40px;color:gray;border:1px solid #C9C9C9;border-radius:5px;"> </form> </div> </div> <div class="top_menu" > <div style=""> <ul class="top_menu_ul"> <li class="top_menu_ul_li" style="margin-left:7%;" >首页</li> <li class="top_menu_ul_li">菜鸟笔记</li> <li class="top_menu_ul_li">菜鸟工具</li> <li class="top_menu_ul_li">参考手册</li> <li class="top_menu_ul_li">用户笔记</li> <li class="top_menu_ul_li">测试/考试</li> <li class="top_menu_ul_li">设计神器</li> <li class="top_menu_ul_li">本地书签</li> <li class="top_menu_ul_li">登录</li> </ul> </div> <div style='clear:both;'></div> <div style=""> <canvas id="canTriangle" height="10" width="500" style="">Triangle</canvas> </div> </div> <div style='clear:both;'></div> <div class="body"> <div class="left_menu"> <ul class="left_menu_ul"> <li class="left_menu_ul_li" style="border-top-left-radius:5px;border-top-right-radius:5px;background-color:#F0F0F0;color:#AAAAAA"><img src="images/书签灰.jpg" alt="书签灰" />全部教程</li> <li class="left_menu_ul_li" style="background-color:white;"><img src="images/指针.jpg" alt="指针" />HTML / CSS</li> <li class="left_menu_ul_li" style="background-color:#FBFBFB;"><img src="images/指针.jpg" alt="指针" />JavaScript</li> <li class="left_menu_ul_li" style="background-color:white;"><img src="images/指针.jpg" alt="指针" />服务端</li> <li class="left_menu_ul_li" style="background-color:#FBFBFB;"><img src="images/指针.jpg" alt="指针" />数据库</li> <li class="left_menu_ul_li" style="background-color:white;"><img src="images/指针.jpg" alt="指针" />移动端</li> <li class="left_menu_ul_li" style="background-color:#FBFBFB;"><img src="images/指针.jpg" alt="指针" />XML 教程</li> <li class="left_menu_ul_li" style="background-color:white;"><img src="images/指针.jpg" alt="指针" />ASP.NET</li> <li class="left_menu_ul_li" style="background-color:#FBFBFB;"><img src="images/指针.jpg" alt="指针" />Web Service</li> <li class="left_menu_ul_li" style="background-color:white;"><img src="images/指针.jpg" alt="指针" />开发工具</li> <li class="left_menu_ul_li" style="border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color:#FBFBFB;"><img src="images/指针.jpg" alt="指针" />网站建设</li> </ul> </div> <div class="show"> <div style="font-weight:900;width:100%;"> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> <div style="width:100%;float:left"> <div style="margin-left:30px;margin-top:30px;"><img src="images/书签黑.jpg" alt="书签黑." />HTML / CSS</div> <div style="border-top:1px solid #E3E3E3;width:96%;margin-left:2%"> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML.png" alt="学习HTML" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML,即超文本标记语言（Hyper Text Markup Language）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习HTML5】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习HTML5.png" alt="学习HTML5" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">HTML5是下一代HTML标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS.png" alt="学习CSS" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">层叠式样表（Cascading StyleSheet）</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习CSS3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习CSS3.png" alt="学习CSS3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">CSS3 是最新的 CSS 标准</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap3】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap3.png" alt="学习Bootstrap3" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap3,来自 Twitter，是目前最受欢迎的前端框架。</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Bootstrap4】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Bootstrap4.png" alt="学习Bootstrap4" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Bootstrap4 目前是 Bootstrap 的最新版本</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Font Awesome】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Font Awesome.png" alt="学习Font Awesome" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Font Awesome 是一套绝佳的图标字体库和CSS框架</div> </div> <div style="background-color:#F4F4F4;width:30.5%;height:70px;margin:5px;padding:5px;float:left;"> <div style="height:25px;">【学习Foundation】</div> <div style="margin:2px;float:left;width:20%;"><img src="images/学习Foundation.png" alt="学习Foundation" /></div> <div style="float:left;font-size:12px;width:70%;margin-top:4px;color:#6C757C;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div> </div> </div> </div> </div> </div> </div> <div class="footer"style="padding:10px;color:#83838B;"> <div style="margin-left:18%;width:10%;border-left:1px solid #E3E3E3;font-size:12px;line-height:25px;float:left;"> <h3 style="margin-left:25px;font-weight:550;">在线实例</h3> <ul> <li>HTML 实例</li> <li>CSS 实例</li> <li>JavaScript 实例</li> <li>Ajax 实例</li> <li>jQuery 实例</li> <li>XML 实例</li> <li>Java 实例</li> </ul> </div> <div style="width:10%;border-left:1px solid #E3E3E3;font-size:12px;line-height:25px;float:left;margin-right:20px;"> <h3 style="margin-left:25px;font-weight:550;">字符集&工具</h3> <ul> <li>HTML 字符集设置</li> <li>HTML ASCII 字符集</li> <li>HTML ISO-8859-1</li> <li>HTML 实体符号</li> <li>HTML 拾色器</li> <li>JSON 格式化工具</li> </ul> </div> <div style="width:13%;border-left:1px solid #E3E3E3;font-size:12px;line-height:25px;float:left;"> <h3 style="margin-left:25px;font-weight:550;">最新更新</h3> <ul> <li>CSS 布局 Overflow</li> <li>div 添加滚动条</li> <li>ubuntu 修改 DNS...</li> <li>js 生成随机数</li> <li>Python3 open() ...</li> <li>2018 Web开发人...</li> <li>Bootstrap4 面包...</li> </ul> </div> <div style="width:13%;border-left:1px solid #E3E3E3;font-size:12px;line-height:25px;float:left;"> <h3 style="margin-left:25px;font-weight:550;">站点信</h3> <ul> <li>意见反馈</li> <li>免责声明</li> <li>关于我们</li> <li>文章归档</li> </ul> </div> <div style="width:13%;border-left:1px solid #E3E3E3;font-size:12px;line-height:25px;float:left;"> <h2 style="margin-left:25px;color:#6C6E61;">关注微信</h2> <div style="margin-left:25px;margin-top:25px;"><img src="images/菜鸟二维码.jpg" alt="菜鸟二维码" /></div> </div> </div> <div style='clear:both;'></div> <div class="footer2"> <div style="font-size:12px;padding:20px;"> Copyright © 2013-2018 <a href="#" style="color:gray;font-weight:900;text-decoration:none;"> 菜鸟教程</a> <a href="#" style="color:gray;font-weight:900;text-decoration:none;">runoob</a> All Rights Reserved. 备案号：闽ICP备15012807号-1 </div> </div> <script> var canvas = document.getElementById('canTriangle'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(128, 0); context.lineTo(123, 5); context.lineTo(133, 5); context.closePath(); context.fillStyle = "white"; context.fill(); </script> </body> </html>

效果图如下：

本文标签：菜鸟首页经验教程

版权声明：本文标题：菜鸟教程首页制作经验总结内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974009a124257.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。