html编写菜鸟教程首页页面

发布时间：2025-12-09 19:08:17 浏览次数：4

用html来编写一个简单的菜鸟教程网站
这个界面做起来很简单，首先先把布局做好，然后记住一个最重要的原则，所有的标签中p最听话，然后弄明白相对位置还有绝对位置；通过调节p的属性来改变p块内容的属性，然后再给个别p块加上圆角属性，然后可以用上；来减少代码的字符数。代码奉上：

<!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>RUNOOB.COM<input type="text" style="height:24px;width:97.4%;margin-left:0.8%;margin-top:1.5px;" placeholder="搜索……"autocomplete="off"/>首页菜鸟笔记菜鸟工具参考手记用户笔记测验/考试云服务器本地书签☒ 全部教程☒ HTML / CSS ☒JavaScript ☒服务端☒ 数据库 ☒移动端☒ XML 教程 ☒ASP.NET☒ Web Service ☒开发工具☒ 网站建设<p 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;">⇛ HTML/CSS<hr style="height:1px;border:none;border-top:1px solid #555555;" /><h4 style="margin-left: 8px;color: #64854c"> 【学习HTML】</h4><img src="C:\Users\甄聪\Desktop\cainiao\1.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">HTML，即超文本标记语言（Hyper Text Markup Language）<h4 style="margin-left: 8px;color: #64854c"> 【学习HTML5】</h4><img src="C:\Users\甄聪\Desktop\cainiao\2.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">HTML5是下一代HTML的标准<h4 style="margin-left: 8px;color: #64854c"> 【学习 CSS】</h4><img src="C:\Users\甄聪\Desktop\cainiao\3.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">层叠样式表（Cascading StyleSheet）<h4 style="margin-left: 8px;color: #64854c"> 【学习 CSS3】</h4><img src="C:\Users\甄聪\Desktop\cainiao\4.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">CSS3是CSS技术的升级版本<h4 style="margin-left: 8px;color: #64854c"> 【学习 Bootstrap3】</h4><img src="C:\Users\甄聪\Desktop\cainiao\5.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架<h4 style="margin-left: 8px;color: #64854c"> 【学习 Bootstrap4】</h4><img src="C:\Users\甄聪\Desktop\cainiao\6.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">Bootstrap4 目前是 Bootstrap 的最新版本<h4 style="margin-left: 8px;color: #64854c"> 【学习 Foundation】</h4><img src="C:\Users\甄聪\Desktop\cainiao\7.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架<h4 style="margin-left: 8px;color: #64854c"> 【学习 Font Awesome】</h4><img src="C:\Users\甄聪\Desktop\cainiao\8.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">Font Awesome 是一套绝佳的图标字体库和CSS框架。<p 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;">`⇛ JavaScript<hr style="height:1px;border:none;border-top:1px solid #555555;" /><h4 style="margin-left: 8px;color: #64854c"> 【学习 JavaScript】</h4><img src="C:\Users\甄聪\Desktop\cainiao\9.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">JavaScript 是 Web 的编程语言<h4 style="margin-left: 8px;color: #64854c"> 【学习 HTML DOM】</h4><img src="C:\Users\甄聪\Desktop\cainiao\10.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">HTML DOM 定义了访问和操作 HTML 文档的标准方法<h4 style="margin-left: 8px;color: #64854c"> 【学习 jQuery】</h4><img src="C:\Users\甄聪\Desktop\cainiao\11.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">jQuery 是一个 JavaScript 库<h4 style="margin-left: 8px;color: #64854c"> 【学习 AngularJS】</h4><img src="C:\Users\甄聪\Desktop\cainiao\12.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">AngularJS 通过新的属性和表达式扩展了 HTML<h4 style="margin-left: 8px;color: #64854c"> 【学习 AngularJS2】</h4><img src="C:\Users\甄聪\Desktop\cainiao\13.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">AngularJS2 是一款开源JavaScript库，由Google维护。<h4 style="margin-left: 8px;color: #64854c"> 【学习 Vue.js】</h4><img src="C:\Users\甄聪\Desktop\cainiao\14.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">Vue.js 是一套构建用户界面的渐进式框架。<h4 style="margin-left: 8px;color: #64854c"> 【学习 React】</h4><img src="C:\Users\甄聪\Desktop\cainiao\15.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">React 是一个用于构建用户界面的 JAVASCRIPT 库<h4 style="margin-left: 8px;color: #64854c"> 【学习 TypeScript】</h4><img src="C:\Users\甄聪\Desktop\cainiao\16.png"style="width: 36px;height: 36px;margin-left: 16px;margin-top: -7px"style="float: left">TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准</body></html>

页面访问链接

上一篇：魔兽连连看2(魔兽争霸2什么时候上映？) 下一篇：微型面包车哪个好什么微面省油质量好又有面子？

知识问答

html编写菜鸟教程首页页面

综合百科

网站导航