DIV教程.pdf
资源来源:本地上传资源
文件类型:PDF
大小:267.71KB
评分:
5.0
上传者:glseda
更新日期:2025-03-12

DIV教程

资源内容介绍

### DIV教程知识点总结#### 第1天:选择什么样的DOCTYPE- **知识点介绍**:文档类型声明(DOCTYPE)是HTML或XHTML文档的第一行,用于指定文档遵循的标准版本。- **重要性**:正确的DOCTYPE声明是确保文档能被浏览器正确解析的基础。- **XHTML 1.0提供的三种DTD**: - **过渡型 (Transitional)**:适用于包含HTML 4.01兼容标签的文档。允许使用表现层标签和属性。 - **DTD声明**: ```html ``` - **严格型 (Strict)**:不允许使用任何表现层标签或属性,强调内容与样式完全分离。 - **DTD声明**: ```html ``` - **框架型 (Frameset)**:专门用于包含框架集的页面。 - **DTD声明**: ```html ```#### 第2天:什么是名字空间 (Namespace)- **知识点介绍**:命名空间是一种避免标识符冲突的技术,在XHTML中尤为重要,因为它基于XML,而XML允许用户定义自己的标签。- **命名空间的作用**: - 避免不同来源的标签冲突。 - 通过URL进行唯一标识。- **命名空间声明**: - 在XHTML文档头部添加`xmlns`属性。 - 示例: ```html ```#### 第3天:定义语言编码- **知识点介绍**:定义文档的语言编码非常重要,确保文本能够被正确显示。- **如何定义**: - 使用``标签。 - 示例: ```html ```#### 第4天:调用样式表- **知识点介绍**:通过链接外部CSS文件或内联样式来定义页面的视觉样式。- **链接外部CSS文件**: - 使用``标签。 - 示例: ```html ```#### 第5天:head区的其他设置- **知识点介绍**:``部分除了包含基本的文档元数据外,还可以加入其他设置,如图标、脚本等。- **可能的设置项**: - ``:文档标题。 - `<meta>`:额外的元信息。 - `<script>`:JavaScript脚本。#### 第6天:XHTML代码规范- **知识点介绍**:遵循XHTML的规范,确保文档结构清晰且易于维护。- **关键点**: - 自闭合标签应使用斜杠。 - 所有属性都应加上引号。 - 所有标签必须关闭。#### 第7天:CSS入门- **知识点介绍**:了解CSS的基本概念,学习如何选择元素并为其应用样式。- **CSS选择器**: - 类选择器(`.classname`) - ID选择器(`#idname`) - 标签选择器(`element`)#### 第8天:CSS布局入门- **知识点介绍**:掌握CSS布局的基础技巧,包括盒子模型、定位等。- **CSS布局技术**: - 浮动(`float`) - 定位(`position`) - 盒子模型(`margin`, `padding`, `border`)#### 第9天:第一个CSS布局实例- **知识点介绍**:通过实际示例演示如何使用CSS布局技巧创建简单的页面布局。- **实例要点**: - 使用`div`元素作为容器。 - 应用合适的CSS规则来实现所需的布局效果。#### 第10天:自适应高度- **知识点介绍**:使元素的高度根据其内容自动调整。- **实现方法**: - 使用`min-height`设置最小高度。 - 结合`overflow:auto`处理溢出内容。#### 第11天:不用表格的菜单- **知识点介绍**:传统的菜单常使用表格布局,但现在更推荐使用`div`和CSS来创建响应式菜单。- **替代方案**: - 使用`ul`和`li`创建列表结构。 - 通过CSS设置样式和布局。#### 第12天:校验及常见错误- **知识点介绍**:使用工具验证XHTML和CSS代码,识别并修正错误。- **校验工具**: - W3C XHTML校验器 - W3C CSS校验器- **常见错误**: - 未关闭的标签。 - 错误的属性值。 - 不符合语法的CSS规则。以上知识点为DIV教程的核心内容,通过系统学习这些内容,可以帮助开发者深入了解并熟练掌握HTML和CSS的基础知识及应用技巧。 <div class="mt-6 grid grid-cols-3"><div><h6>预览图1</h6><img src="https://file.myshengong.com/uploads/2025/03/12/ae26c1e2bd2480bd991718676830d3f7.jpeg" alt="DIV教程_预览图1" title="DIV教程_预览图1"></div></div></div></div><script> let download_need = '38'; let downapi ="/api/frontend.download/down"; document.querySelector("#download_btn").addEventListener("click", function (e) { let message ="此资源免费,无需登录即可下载确定要下载吗?"; let free_time ="7"; if (download_need > 0) { message = `下载需要${download_need}金币(1金币=1元)(自己上传的资源不扣金币) <p style="color:blue">VIP可免费下载,建议开通VIP下载</p><p style="color:blue;font-weight:bold"><a href="/index/user.vip/list" target="_blank" style="text-decoration:underline">点我开通VIP</a></p><p style="color:green">成功下载后${free_time}天内免费下载(无需金币)请自行保存好下载资源</p>`; } layer.confirm(` <h6 style="color:red">${message}</h6><div class="download-notice__main"><p style="color: #374151; font-size: 14px; line-height: 1.8; margin-bottom: 16px;">本站下载资源仅作为文件交换和学习交流平台,提供的下载内容由会员上传、分享与交流使用。本站不对上传的内容负责,内容的完整性、准确性及使用风险由用户自行承担。</p><div style="background: #f9fafb; padding: 16px; border-radius: 8px; margin-bottom: 16px;"><ol><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">学习与研究</strong><span style="color: #4b5563; font-size: 14px;">平台内容仅供用户个人学习、研究和教育使用,不得用于任何商业目的。确保合法使用。</span></li><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">版权与合法性</strong><span style="color: #4b5563; font-size: 14px;">所有上传与下载的内容,用户应确保不侵犯第三方知识产权。本站不承担用户上传内容的版权责任,亦无法保证内容的真实性、准确性。</span></li><li style="margin-bottom: 12px;list-style:auto"><strong style="color: #3688fc; font-size: 15px;">责任声明</strong><span style="color: #4b5563; font-size: 14px;">本站内容仅供参考,用户应自行判断并承担使用风险。</span></li></ol></div></div>`, { title:"免责声明", btn: ["同意并下载", '关闭'], btn1: function () { $.ajax({ url: downapi, type:"POST", data:"id=" +"10922", success: function (e) { if (e.code === 1) { layer.msg(e.msg); window.open(downapi +"?url=" + e.data.down_link, '_self'); } else { layer.msg(e.msg); } }, error: function () { layer.msg("请求出错,请联系网站客服"); } }) } }); });</script></div></div><div class="bg-primary-800 rounded p-6 mt-6 mb-6" id="comment-area"><h2 class="text-xl font-bold text-primary-text mb-4">用户评论 (0)</h2><div class="border-t pt-6 border-primary-700" id="comment-list-area"></div><div><input type="hidden" name="pid" value="0" id="pid" /><input type="hidden" name="aid" value="10922" id="aid" /><div class="p-0 rounded mb-6"><h3 class="text-lg font-semibold text-primary-text mb-3">发表评论</h3><div class="flex flex-col md:flex-col mb-4 gap-2"><div class="w-full md:w-2/3 mb-3 md:mb-0 md:pr-4"><label class="block text-sm font-medium text-primary-text mb-1">您的昵称:</label><input type="text" id="nickname" class="w-full bg-primary-900/70 rounded p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700" placeholder="请输入昵称" min="1" maxlength="20" value="坚强的过客"></div><div class="w-full md:w-full"><label class="block text-sm font-medium text-primary-text mb-1">评分</label><div class="flex text-amber-400 text-xl"><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="1"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="2"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="3"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="4"></i><i class="far fa-star cursor-pointer hover:scale-110 transition-transform fas" data-rating="5"></i></div></div></div><div class="mb-4"><label class="block text-sm font-medium text-primary-text mb-1">评论内容:</label><textarea class="w-full bg-primary-900/70 rounded p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700" rows="3" placeholder="写下您的评论..." id="comment-content"></textarea></div><div class="mb-4"><label class="block text-sm font-medium text-primary-text mb-1">验证码:</label><input type="text" id="verifycode" class="bg-primary-900/70 rounded p-4 focus:outline-none focus:ring-2 focus:ring-primary-accent text-primary-text border border-primary-700 mb-2" placeholder="请输入验证码" min="1" value=""><img src="/captcha" alt="captcha" onclick="this.src = '/captcha?r=' + Math.random();" id="imgverify" class="cursor-pointer"/></div><div class="flex justify-end"><button id="submit-comment" class="bg-primary-accent hover:bg-primary-accent2 text-white font-medium py-2 px-6 rounded transition-colors duration-300 cursor-pointer text-primary-text">提交评论</button></div></div></div></div><script> const stars = document.querySelectorAll('[data-rating]'); let currentRating = 5; stars.forEach(star => { star.addEventListener('click', function () { const rating = parseInt(this.getAttribute('data-rating')); currentRating = rating; stars.forEach(s => { const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= rating) { s.classList.remove('far'); s.classList.add('fas'); } else { s.classList.remove('fas'); s.classList.add('far'); } }); }); star.addEventListener('mouseover', function () { const rating = parseInt(this.getAttribute('data-rating')); stars.forEach(s => { const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= rating) { s.classList.add('text-amber-500'); } else { s.classList.remove('text-amber-500'); } }); }); star.addEventListener('mouseout', function () { stars.forEach(s => { s.classList.remove('text-amber-500'); const starRating = parseInt(s.getAttribute('data-rating')); if (starRating <= currentRating) { s.classList.remove('far'); s.classList.add('fas'); } else { s.classList.remove('fas'); s.classList.add('far'); } }); }); }); document.getElementById("submit-comment").addEventListener('click', function () { console.log("开始评论"); let comment_data = {}; comment_data['nickname'] = document.getElementById('nickname') ? document.getElementById('nickname').value : ''; comment_data["content"] = document.getElementById('comment-content').value; comment_data["verifycode"] = document.getElementById('verifycode').value; comment_data['type'] = 'download'; comment_data['aid'] = '10922'; console.log(comment_data); const params = new URLSearchParams(); for (const key in comment_data) { params.append(key, comment_data[key]); } const formData = params.toString(); fetch("/api/comment/add", { method:"POST", headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: formData }).then((response) => response.json()) .then((data) => { console.log("Success:", data); if (data.code == 1) { layer.msg(data.msg); window.location.hash = 'comment-area'; window.location.reload(); } else { layer.msg(data.msg); $("#imgverify").click(); } }) });</script><h2 class="text-xl font-bold mb-4">相关资源</h2><div class="grid 2xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3 mb-4"><a href="/download/10928" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">jpg转bmp</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">jpeglib.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">5.11MB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">huhuhu1980</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-12</span></div></div></a><a href="/download/10942" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2"> SQL Server 2005 安装教程(详细) </div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">SQL Server 2005安装.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">2.17MB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">foxmails</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-12</span></div></div></a><a href="/download/10944" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">网页制作作品</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">网页制作参赛.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">6.2MB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">fulongjin001</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-12</span></div></div></a><a href="/download/10951" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">SQL实用简明教程PPT</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">SQL实用简明教程PPT.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">2.01MB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">zhushouwen</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/10985" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">EXT代码-登陆窗口</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">EXT代码-登陆窗口.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">672.18KB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">zhangguoli1997</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/10990" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">动网图形验证码识别源码</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">ocr.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">823.4KB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">netdust</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/11000" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">web软件测试论文.rar</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">web软件测试论文.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">23.27KB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">ssc_1213</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/11003" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><div class="text-primary-textLight p-2">一个画流程图的简单工具</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">DiagramDesigner流程图软件.rar</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">RAR</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">2.24MB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">willamwangwwj</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/11008" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><img src="https://file.myshengong.com/uploads/2025/03/13/7773e7b21c31877160780c09c5d4ab87.jpeg" class="rounded-tl rounded-tr object-fill h-full w-full"><div class="text-primary-textLight p-2">Ajax技术在WebGIS中的应用.pdf</div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">Ajax技术在WebGIS中的应用.pdf</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">PDF</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">279.83KB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">litaocheng2007</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a><a href="/download/11014" target="_blank" class="block bg-primary-800 rounded hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between pb-2"><img src="https://file.myshengong.com/uploads/2025/03/13/93d0f2fdda1a6412b4a9f3a02878fafa.jpeg" class="rounded-tl rounded-tr object-fill h-full w-full"><div class="text-primary-textLight p-2"> 各种JSF HTML标签总结.doc </div><div class="space-y-3 text-primary-textLight w-full p-2 text-xs"><div class="flex justify-between"><span>文件名:</span><span class="font-medium">JSF HTML标签总结.doc</span></div><div class="flex justify-between"><span>文件类型:</span><span class="font-medium">DOC</span></div><div class="flex justify-between"><span>大小:</span><span class="font-medium">137KB</span></div><div class="flex justify-between"><span>上传者:</span><span class="font-medium text-primary-accent2">sunman_1</span></div><div class="flex justify-between"><span>更新日期:</span><span class="font-medium">2025-03-13</span></div></div></a></div></main></div></div><footer class="py-4 text-center text-primary-textLight mt-8 text-xs"> ©2025 观道 </footer><script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src ="https://hm.baidu.com/hm.js?7da503169c1e0d1a13b32a9ef6afd847"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script>(function(){var el = document.createElement("script");el.src ="https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?ac61a0577e667db29eb6a33b9ed19e1439b6f628f1c1e924c51fd69debe7f7cb45f9b46c8c41e6235de98982cdddb9785e566c8c06b0b36aec55fccc04fff972a6c09517809143b97aad1198018b8352";el.id ="ttzz";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(el, s);})(window)</script><script>(function () {var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bp, s);})();</script><script type="text/javascript"> var require = { config: JSON.parse('{"site":{"name":"\u89c2\u9053","cdnurl":"","version":"1.6.1.20250922_1757","timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"},"gonggao_enable":"0","gonggao_tite":"\u597d\u6d88\u606f!!!","gonggao_content":"\u7f51\u7ad9\u5df2\u5f00\u542f\u7b7e\u5230\u514d\u8d39\u9886\u79ef\u5206\u3002\u7528\u6237\u767b\u5f55\u540e\u5728\u4e2a\u4eba\u4e2d\u5fc3\u2014\u2014\u6bcf\u65e5\u7b7e\u5230\u5904\u53ef\u514d\u8d39\u9886\u53d6\u79ef\u5206!\u6bcf\u5929\u90fd\u53ef\u4ee5\u9886\u53d6!\u6bcf\u6b21\u90fd\u53ef\u4ee5\u53e0\u52a0!\u8fde\u7eed\u7b7e\u5230\u5929\u6570\u8d8a\u591a,\u9886\u53d6\u7684\u79ef\u5206\u8d8a\u591a!"},"modulename":"index","controllername":"download","actionname":"detail","jsname":"frontend\/download","moduleurl":"\/index","language":"zh-cn","__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":"","lantuzhifu":{"default_amount":"30"},"summernote":{"classname":".editor","height":"250","minHeight":"250","placeholder":"","followingToolbar":"0","airMode":"0","toolbar":[["style",["style","undo","redo"]],["font",["bold","underline","strikethrough","clear"]],["fontname",["color","fontname","fontsize"]],["para",["ul","ol","paragraph","height"]],["table",["table","hr"]],["insert",["link","picture","video"]],["select",["image"]],["view",["fullscreen","codeview","help"]],["code",["code"]]]},"upload_cdnurl":"https:\/\/file.guandaospace.com"}'), comment: { 'module_name': 'download' }, 'data_id': '11014' }; </script><script src="/template/js/system.js?v=1.6.1.20250922_1757"></script><script src="/template/js/main.js?v=1.6.1.20250922_1757"></script></body></html>