用html来编写一个简单的菜鸟教程网站
这个界面做起来很简单，首先先把布局做好，然后记住一个最重要的原则，所有的标签中div最听话，然后弄明白相对位置还有绝对位置；通过调节div的属性来改变div块内容的属性，然后再给个别div块加上圆角属性，然后可以用上；来减少代码的字符数。代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程</title>
</head>
<body>
<style>
.title{
width:6%;height:30px;float:left;font-size:14px;color:#fff;text-align:center;line-height:30px;
}
.title1{
margin-left:5%;
}
.yuanjiao{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 25%;height: 110px;background-color: #f6f6f6;float:left;margin-left: 30px;margin-top: 10px
}
</style>
<!--头部-->
<div style="width:100%;height:100px;background-color:#f6f6f6;">
<div style="width:30%;height:90px;float:left;text-align:center;line-height:90px;color:black;font-size: 40px;
text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green;
}">RUNOOB.COM</div>
<div style="width:30%;height:90px;float:left"></div>
<div style="width:40%;height:90px;float:left"><div style="width:80%;height:33px;background-color:#dfdfdf;margin-top:28.5px;">
<input type="text" style="height:24px;width:97.4%;margin-left:0.8%;margin-top:1.5px;" placeholder="搜索……"autocomplete="off"/>
</div>
</div>
</div>
<div style="width:100%;height:30px;background-color:#96b97d;">
<div class="title title1">首页
<div style=" width:0;
height:0;
margin-left: 47%;
margin-top: -4px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #fff;"></div>
</div>
<div class="title">菜鸟笔记</div>
<div class="title">菜鸟工具</div>
<div class="title">参考手记</div>
<div class="title">用户笔记</div>
<div class="title">测验/考试</div>
<div class="title">云服务器</div>
<div class="title">本地书签</div>
</div>
<div style="width: 100%;height: 20px;background-color: #f6f6f6"></div>
<div style="width: 100%;height: 1000px;background-color: #f6f6f6">
<div style="float:left;width: 5%;height: 900px;background-color: #f6f6f6;"></div>
<!--侧边-->
<div style="float:left;width: 10%;height: 900px;background-color: #f6f6f6;">
<div style="width: 100%;height: 30px;background-color: #ededed;text-align:left;line-height:30px;color:#a4a4a4">
☒ 全部教程
</div>
<div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:left;line-height:40px">☒ HTML / CSS</div>
<div style="width: 100%;height: 40px;background-color: #ffffff;text-align:left;line-height:40px"> ☒JavaScript</div>
<div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:left;line-height:40px"> ☒服务端</div>
<div style="width: 100%;height: 40px;background-color: #ffffff;text-align:left;line-height:40px">☒ 数据库</div>
<div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:left;line-height:40px"> ☒移动端</div>
<div style="width: 100%;height: 40px;background-color: #ffffff;text-align:left;line-height:40px">☒ XML 教程</div>
<div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:left;line-height:40px"> ☒ASP.NET</div>
<div style="width: 100%;height: 40px;background-color: #ffffff;text-align:left;line-height:40px">☒ Web Service</div>
<div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:left;line-height:40px"> ☒开发工具</div>
<div style="width: 100%;height: 40px;background-color: #ffffff;text-align:left;line-height:40px">☒ 网站建设</div>
</div>
<!--主体-->
<!--HTML-->
<div style="float:left;width: 80%;height: 450px;background-color: #fff ;margin-left: 14px; border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;">
<div style="width:97.5%;height: 50px;background-color:#fff;margin-left:30px;line-height:75px;font-size: 19px;font-weight:bold" >
⇛ HTML/CSS
</div>
<div style="width: 90%;height: 2px;margin-left: 30px">
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习HTML】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\1.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">HTML，即超文本标记语言（Hyper Text Markup Language）</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习HTML5】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\2.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">HTML5是下一代HTML的标准</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 CSS】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\3.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">层叠样式表（Cascading StyleSheet）</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 CSS3】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\4.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">CSS3是CSS技术的升级版本</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 Bootstrap3】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\5.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 Bootstrap4】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\6.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">Bootstrap4 目前是 Bootstrap 的最新版本</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 Foundation】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\7.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 Font Awesome】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\8.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong>
</div>
</div>
</div>
<!--js-->
<div style="float:left;width: 80%;height: 450px;background-color: #fff;margin-left: 14px; border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;">`
<div style="width:97.5%;height: 50px;background-color:#fff;margin-left:30px;line-height:75px;font-size: 19px;font-weight:bold" >
⇛ JavaScript
</div>
<div style="width: 90%;height: 2px;margin-left: 30px">
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 JavaScript】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\9.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">JavaScript 是 Web 的编程语言</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 HTML DOM】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\10.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">HTML DOM 定义了访问和操作 HTML 文档的标准方法</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 jQuery】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\11.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">jQuery 是一个 JavaScript 库</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 AngularJS】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\12.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">AngularJS 通过新的属性和表达式扩展了 HTML</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 AngularJS2】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\13.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">AngularJS2 是一款开源JavaScript库，由Google维护。</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 Vue.js】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\14.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">Vue.js 是一套构建用户界面的渐进式框架。</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 React】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\15.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">React 是一个用于构建用户界面的 JAVASCRIPT 库</strong>
</div>
</div>
<div class="yuanjiao">
<h4 style="margin-left: 8px;color: #64854c"> 【学习 TypeScript】</h4>
<div style="float: left">
<img src="C:\Users\甄聪\Desktop\cainiao\16.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">
</div>
<div style="float:left;width:200px;margin-left: 13px;margin-top:-10px;">
<strong style="font-size: 11px;color: #666666">TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准</strong>
</div>
</div>
</div>
<div>
</body>
</html>
页面访问链接
更多推荐
html编写菜鸟教程首页页面
发布评论