之前做了百度首页,比较简洁,逻辑清晰;虽然菜鸟教程首页的复杂度比百度首页高一些,但只要遵循先整体布局再动手敲代码的原则,依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下:
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="http://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>
效果图如下:
更多推荐
菜鸟教程首页制作经验总结
发布评论