基于HTML5+CSS3的网页布局-Linux大棚

admin 管理员组

文章数量: 1184232

2024年5月14日发(作者：javascript培讲义下载)

应用研究

数字技术

与应用

基于HTML5+CSS3的网页布局

葛蓝

(广州市公用事业技师学院,广东广州 510100)

摘要:随着互联网产业的高速发展,如今HTML5和CSS3已成为主流的Web前端开发技术,与以往版本相比,HTML5新元素及其特性

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面

显得非常简单。本文以一个简单的鲜花网站首页为例,介绍基于Html5+CSS布局的网页。

关键词:HTML5；CSS；网页布局

中图分类号:TP273文献标识码:A文章编号:1007-9416(2017)10-0092-02

随着互联网产业的高速发展,HTML超文本标记语言作为构建

web世界的基础语言,也经历了数次发展。2014年10月29日,万维网

联盟宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完

成。如今HTML5和CSS3已成为主流的Web前端开发技术,与以往版

本相比它具有许多新特性,例如,HTML5引入非常多的描述性标签

来创建更好的页面结构,例如用于定义头部的header标签、定义尾部

的footer标签、定义导航的nav标签、定义侧边栏aside标签等,

HTML5新元素及其特性HTML5的语义化标签以及属性,可以让开

发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,

快速建立丰富灵活的web页面显得非常简单。

本文以一个简单的鲜花网站首页为例,介绍基于Html5+CSS

布局的网页。

/*article的内容*/

1.5 侧边栏实现

1.6 尾部标签的实现

1 Html5布局页面

1.1 HTML5的文档声明,新建文件,生成如下的

HTML5模板

(1);(2);(3)

;(4)html; charset=utf-8">;(5)HTML5+CSS布局页面</</p><p style="text-indent: 2em;font-size:18px;">title>;(6)</head> ;(7)<body>;(8)</body>;(9) </html〉</p><p style="text-indent: 2em;font-size:18px;">2 CSS3美化页面</p><p style="text-indent: 2em;font-size:18px;">CSS即层叠样式表,在网页制作时采用层叠样式表技术,可以</p><p style="text-indent: 2em;font-size:18px;">有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的</p><p style="text-indent: 2em;font-size:18px;">控制。鉴于篇幅有限,此处仅对页面主要标签定义CSS样式。</p><p style="text-indent: 2em;font-size:18px;">2.1 页面整体属性</p><p style="text-indent: 2em;font-size:18px;">1.2 头部标签的实现</p><p style="text-indent: 2em;font-size:18px;"><header id="page_header"></p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">/*在网页头部放入Logo*/</p><p style="text-indent: 2em;font-size:18px;"></header></p><p style="text-indent: 2em;font-size:18px;">同一个页面中可以包含多个<header>元素。每个独立的区块</p><p style="text-indent: 2em;font-size:18px;">都可以包含自己的<header>标签,因此为<header>标签添加唯一</p><p style="text-indent: 2em;font-size:18px;">标示id="page_header"属性,便于CSS3中灵活的渲染。</p><p style="text-indent: 2em;font-size:18px;">1.3 导航的实现</p><p style="text-indent: 2em;font-size:18px;"><nav></p><p style="text-indent: 2em;font-size:18px;"><ul><li><a href="#">网站首页</a></li></p><p style="text-indent: 2em;font-size:18px;"><li><a href="#">产品介绍</a></li></p><p style="text-indent: 2em;font-size:18px;"><li><a href="#">关于花店</a></li></p><p style="text-indent: 2em;font-size:18px;"><li><a href="#">鲜花花语</a></li></p><p style="text-indent: 2em;font-size:18px;"></ul></nav></p><p style="text-indent: 2em;font-size:18px;">1.4 区块和文章</p><p style="text-indent: 2em;font-size:18px;"><section id="posts"> /*可以包含多个< article>*/</p><p style="text-indent: 2em;font-size:18px;"><article class="post"></article> /*article的内容*/</p><p style="text-indent: 2em;font-size:18px;">图1 页面布局</p><p style="text-indent: 2em;font-size:18px;">收稿日期:2017-09-21</p><p style="text-indent: 2em;font-size:18px;">作者简介:葛蓝(1981—),女,汉族,上海人,工程硕士,中技讲师,研究方向:计算机网络技术,网站建设与网页制作,网站动画设计。</p><p style="text-indent: 2em;font-size:18px;">92</p><p style="text-indent: 2em;font-size:18px;">Copyright©博看网 . All Rights Reserved.</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">数字技术</p><p style="text-indent: 2em;font-size:18px;">与应用</p><p style="text-indent: 2em;font-size:18px;">应用研究</p><p style="text-indent: 2em;font-size:18px;">2.2 头部标签属性</p><p style="text-indent: 2em;font-size:18px;">2.6 尾部属性</p><p style="text-indent: 2em;font-size:18px;">2.3 导航条的属性</p><p style="text-indent: 2em;font-size:18px;">2.4 区块属性</p><p style="text-indent: 2em;font-size:18px;">通过HTML5+CSS3布局并美化页面,完成简单页面布局,效果</p><p style="text-indent: 2em;font-size:18px;">如图1所示。</p><p style="text-indent: 2em;font-size:18px;">参考文献</p><p style="text-indent: 2em;font-size:18px;">[1]白蕾,郭清菊.HTML5与CSS3的设计模式[J].智能计算机与应用,</p><p style="text-indent: 2em;font-size:18px;">2016,(02).</p><p style="text-indent: 2em;font-size:18px;">[2]郑伟.对CSS3盒模型边框应用的研究[J].电脑知识与技术,2016,</p><p style="text-indent: 2em;font-size:18px;">(36).</p><p style="text-indent: 2em;font-size:18px;">[3]王艳.探析HTML5与CSS3在网页设计中的新特性和优势[J].电脑</p><p style="text-indent: 2em;font-size:18px;">编程技巧与维护,2016,(21).</p><p style="text-indent: 2em;font-size:18px;">2.5 侧边栏属性</p><p style="text-indent: 2em;font-size:18px;">Web Page layout Based on HTML5 + css3</p><p style="text-indent: 2em;font-size:18px;">Ge Lan</p><p style="text-indent: 2em;font-size:18px;">(Guangzhou institute of public utility technicians, Guangzhou Guangdong 510100)</p><p style="text-indent: 2em;font-size:18px;">Abstract:With the rapid development of the internet industry, HTML5 and css3 have become the mainstream web front-end development</p><p style="text-indent: 2em;font-size:18px;">technology. compared with previous versions, HTML5 new elements and their characteristics html 5 semantic tags and attributes, can make the</p><p style="text-indent: 2em;font-size:18px;">developers very convenient to achieve a clear web page layout, with the effect of CSS 3 rendering, quickly building a rich and flexible web page is very</p><p style="text-indent: 2em;font-size:18px;">simple. This paper takes a simple flower website home page as an example to introduce the web page based on html 5 + CSS layout.</p><p style="text-indent: 2em;font-size:18px;">Key Words:Html 5；Css；Page layout</p><p style="text-indent: 2em;font-size:18px;">······上接第91页</p><p style="text-indent: 2em;font-size:18px;">The Application of PLM System in Product Archive Management</p><p style="text-indent: 2em;font-size:18px;">Guo Liangjie</p><p style="text-indent: 2em;font-size:18px;">(China Electronics Technology Group Corporation No.22 Research Institute,Xinxiang Henan 453003)</p><p style="text-indent: 2em;font-size:18px;">Abstract:In order to meet the needs of different users precisely,this paper brings up specific requirements of the product archive management to the</p><p style="text-indent: 2em;font-size:18px;">PLM(Product Life-cycle Management)system based on the limitation of the existing product archive ed with the practical use,this</p><p style="text-indent: 2em;font-size:18px;">paper expatiates on the specific implementation method of using the PLM system to carry on the product archive management and summarized the</p><p style="text-indent: 2em;font-size:18px;">practical application effects of the PLM system,which solved the problems of the traditional product archive management.</p><p style="text-indent: 2em;font-size:18px;">Key Words:product archive；PLM；management</p><p style="text-indent: 2em;font-size:18px;">93</p><p style="text-indent: 2em;font-size:18px;">Copyright©博看网 . All Rights Reserved.</p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/266.html" target="_blank">页面</a> <a style="margin-right: 10px" href="/tag/428386.html" target="_blank">标签</a> <a style="margin-right: 10px" href="/tag/232.html" target="_blank">属性</a> <a style="margin-right: 10px" href="/tag/428383.html" target="_blank">布局</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：基于HTML5+CSS3的网页布局内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://www.roclinux.cn/p/1715698153a688321.html">http://www.roclinux.cn/p/1715698153a688321.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/b/1771887947a3549701.html" class="post-item-title" title="专业杀毒，直面RavMon.exe挑战，让安全常伴左右"> <h3>专业杀毒，直面RavMon.exe挑战，让安全常伴左右</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">RavMon.exe是一个强制不显示系统的隐藏文件的简单病毒，顽固且有备份，涉及到很多操作。网络安全课上的学习研究成果运行环境：Windows XP 病毒的特性：</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1771937730a3550272.html" class="post-item-title" title="彻底保护你的IE！一招防止恶意网址入侵"> <h3>彻底保护你的IE！一招防止恶意网址入侵</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">篡改IE默认主页是恶意网站和病毒惯用的手法，目的是为了增加其网站流量，并偷偷安装木马。下面告诉大家一个绝招，即使病毒修改了你的主页也没用，最后讲述清除恶意主页的办法。首先在我的电脑里定位到IE安装目录：C:Program</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772020358a3551215.html" class="post-item-title" title="不用复杂的设置，教你如何让笔记本的无线信号成为台式机的网线"> <h3>不用复杂的设置，教你如何让笔记本的无线信号成为台式机的网线</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">问题关键词： Windows 7 无线上网共享台式机设置问题大致描述：笔记本现在可以无线上网，怎么设置可以把网络通过网线对连共享给台式机解决方法：【Windows XP 设置方法】</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772044259a3551484.html" class="post-item-title" title="Vue开发者必学：一招搞定阻止A标签中键点击导致的新窗口开启问题。"> <h3>Vue开发者必学：一招搞定阻止A标签中键点击导致的新窗口开启问题。</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">当我们用鼠标中键点击一个带href属性的a标签时，我们会发现它会跳转到新的页面。此时即使添加preventDefault属性也没有用。因为对于a标签，当用中键点击时，会默认从新窗口打开链接要想阻止这一行为，我们可以将a标签转</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772233199a3553618.html" class="post-item-title" title="告别误触！轻松几步，让触摸板不再困扰"> <h3>告别误触！轻松几步，让触摸板不再困扰</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">很多笔记本的触摸板不好用，想要禁止，然后另外连接键盘鼠标使用，小编自己就是使用的笔记本禁用触摸板驱动，安装完重启电脑后，在电脑右下角任务栏上有个图标，点鼠标右键，选择设置--定点装置属性--禁用，就可以了，想用的时候就开启回来就行了。</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772285768a3554210.html" class="post-item-title" title="Django项目中的CSS样式为啥不见踪影？解析与应对策略"> <h3>Django项目中的CSS样式为啥不见踪影？解析与应对策略</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">django无法加载出css样式，不管是admin还是自己创建的html都无法加载如果你也是这个情况的话，可以确定不是项目配置问题，可以尝试使用如下方法：在浏览器中打开调试，发现浏览器中是</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772312048a3554502.html" class="post-item-title" title="校园内网的双面人生：登录QQ轻而易举，网页却成了难题！"> <h3>校园内网的双面人生：登录QQ轻而易举，网页却成了难题！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">今天下午本来是打算来机房多看几篇博客顺便评论的，结果来了之后发现新装的win10系统说是激活失败，于是上网查了一个激活工具，然后下载下来激活（这个不是什么好的行为，大家一定要支持正版啊~），结果激活软件运行之后不仅系统没有激活成功，</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772579659a3556957.html" class="post-item-title" title="HTML5视频教程：揭秘流畅播放背后的奥秘"> <h3>HTML5视频教程：揭秘流畅播放背后的奥秘</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">播放器细谈，从大众自带浏览器到 wechat和QQ以x5内核的浏览器，以及UC其他特殊的浏览器在此不再细谈：）当然也会分析iphone系统和手机系统的差别。【基本属性】video标签属性： src</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772614199a3557353.html" class="post-item-title" title="SWF、Flash玩家的电脑配置选择秘籍"> <h3>SWF、Flash玩家的电脑配置选择秘籍</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">我在生活中经常可以听到别人的困惑，就是想买电脑但是有怕买到不好的电脑哦，纠结死了，在这里我为了解决大家的买电脑问题，特地发表本篇文章来给大家参考如何去买到一个喜欢的电脑，一个配置适合自己的电脑，电脑分为：软件和硬件，在</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772641141a3557667.html" class="post-item-title" title="Windows隐藏文件指南：隐藏你的文件不被发现"> <h3>Windows隐藏文件指南：隐藏你的文件不被发现</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">简介收集到以下一些在Windows系统下的一些将文件隐藏的方法和让文件无法被删除的方法,渗透中可以隐藏一些木马文件。 attrib隐藏文件新建一个文件命令行中执行attrib +a +</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773204666a3559372.html" class="post-item-title" title="C#与文件属性：操作指南与实践指南"> <h3>C#与文件属性：操作指南与实践指南</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">简介：C#作为流行的编程语言，广泛应用于Windows应用、Web应用和游戏开发等领域。本文档“C# 文档操作FileProperties”深入探讨了如何在C#中处理文件属性，包括基本文件属性的读取、修改和创建，以及如何操作文件的元数</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773205432a3559382.html" class="post-item-title" title="掌握文件属性：让你的SWF文件更强大"> <h3>掌握文件属性：让你的SWF文件更强大</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">简介：本教程着重介绍如何查看和修改计算机操作系统中的文件属性，包括隐藏、只读、系统和存档等标志。文件属性对于控制文件可见性、可编辑性以及与其他系统组件的交互至关重要。通过本教程，用户可以学习如何有效地管理和保护自己的文件，例如设置文件</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773213819a3559479.html" class="post-item-title" title="救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！"> <h3>救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">显示隐藏文件的方法打开文件资源管理器，点击顶部菜单栏的“查看”选项。在“显示隐藏”区域勾选“隐藏的项目”。此时所有隐藏文件和文件夹会以半透明图标显示，可直接访问或操作。通过文件夹选项恢复在文件资源管理器</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773584479a3563614.html" class="post-item-title" title="安静！500错误，Adobe Flash Player在幕后悄悄闹别扭！"> <h3>安静！500错误，Adobe Flash Player在幕后悄悄闹别扭！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">19天前</div> </div> <p class="post-item-summary">网页无法显示您要访问的网页存在问题，因此无法显示。 ---------------------------------------------请尝试下列操作：打开</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773679707a3564721.html" class="post-item-title" title="从头到尾，全面深度清理电脑上的SWF文件和Adobe Flash Player痕迹"> <h3>从头到尾，全面深度清理电脑上的SWF文件和Adobe Flash Player痕迹</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">18天前</div> </div> <p class="post-item-summary">1、手动清理（1）打开资源管理器，右键-属性，点击“磁盘清理”，然后选中要清理的文件，点击确定即可；（2）对于一些软件的卸载残留，可以打开注册表，找到各目录下的software子目录，从里面找那些你已经卸载过的软件</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774292946a3570061.html" class="post-item-title" title="解决桌面图标异常方法"> <h3>解决桌面图标异常方法</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">11天前</div> </div> <p class="post-item-summary">简单介绍几种方法：1.在桌面上单击右键，看到排列图标-在桌面上锁定web项目。如果这个项目上有对勾的话，把它去掉。2.在我的电脑上查看属性：右键点“我的电脑”—“属性”—“高级”—“设置”—再点“性能”里的“设</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774358022a3570813.html" class="post-item-title" title="网站打不开怎么办，收藏以备不时之需_有的网站打不开怎么设置打开"> <h3>网站打不开怎么办，收藏以备不时之需_有的网站打不开怎么设置打开</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">DNS设置示范教程部分地区有使用移动网络的小伙伴们吐槽无法访问部分网站的情况，同样的网站，使用电信和联通的用户就能正常访问。这其实有很大几率是由于运营商的网络问题导致的，容易出现网站打不开的结果。 DNS</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774364247a3570886.html" class="post-item-title" title="导出excel，文件打不开_blob导出excel无法打开文件"> <h3>导出excel，文件打不开_blob导出excel无法打开文件</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">导出excel，文件打不开要注意responseType一定要设置returnaxios({url:'apiesbddidbexportexcel', url: 'test</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774399521a3571290.html" class="post-item-title" title="Java（页面的添加和删除）_java怎么实现删除和添加功能"> <h3>Java（页面的添加和删除）_java怎么实现删除和添加功能</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">9天前</div> </div> <p class="post-item-summary">添加的思路需求:从jsp页面添加一条记录到数据库,且显示到界面分析:1.创建jsp页面2.创建Servlet>addGoods方法1.设置请求编码2.获取</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774507449a3571957.html" class="post-item-title" title="如何利用192.168.1.1优化你的家庭网络体验"> <h3>如何利用192.168.1.1优化你的家庭网络体验</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">8天前</div> </div> <p class="post-item-summary">虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/688321.html?safe_token=yfBKGCNR8L_2BnMTqiNj1cB_2FvDwDWJ6Vz_2FUjupzsch5ZNkkFYq_2Fbc7P3vdEzokQM6YWUEPoemGaTMWF8g9Rk2cVA_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/p/1773639810a3564255.html" title="系统卷信息太乱？快速学会清理的正确姿势" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 系统卷信息太乱？快速学会清理的正确姿势 </h3> </div> </a> <a href="/p/1773960983a3567709.html" title="使用Splashtop手机远程控制电脑：一键轻松连接" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 使用Splashtop手机远程控制电脑：一键轻松连接 </h3> </div> </a> <a href="/b/1773989385a3568040.html" title="轻松查询电脑显存大小，两种方法任你选_电脑显存怎么看" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 轻松查询电脑显存大小，两种方法任你选_电脑显存怎么看 </h3> </div> </a> <a href="/p/1774227761a3569302.html" title="dwg格式文件用什么软件打开电脑如何打开dwg格式的文件_dwg csdn 软件" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> dwg格式文件用什么软件打开电脑如何打开dwg格式的文件_dwg csdn 软件 </h3> </div> </a> <a href="/b/1774510237a3571991.html" title="DISM++：你的Flash播放问题终结者，提升性能" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> DISM++：你的Flash播放问题终结者，提升性能 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="数据错误，循环冗余检查不认账？是时候深入探究Adobe Flash Player内部了！" target="_blank" href="/p/1773587001a3563644.html"> <h3>数据错误，循环冗余检查不认账？是时候深入探究Adobe Flash Player内部了！</h3> </a> <span class="post-date">19天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑开不动？试试这四个小技巧，立竿见影！" target="_blank" href="/b/1773635278a3564201.html"> <h3>电脑开不动？试试这四个小技巧，立竿见影！</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="应用程序控制（自动启动、登录、退出等）_自启动应用是自动登录吗" target="_blank" href="/b/1773750767a3565292.html"> <h3>应用程序控制（自动启动、登录、退出等）_自启动应用是自动登录吗</h3> </a> <span class="post-date">17天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="一键重装系统软件排行" target="_blank" href="/b/1773922345a3567261.html"> <h3>一键重装系统软件排行</h3> </a> <span class="post-date">15天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="苹果MAC电脑双系统教程——MAC安装Windows双系统教程_mac 双系统" target="_blank" href="/p/1773974472a3567866.html"> <h3>苹果MAC电脑双系统教程——MAC安装Windows双系统教程_mac 双系统</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="WiFi万能钥匙，真的过气了？" target="_blank" href="/p/1774356956a3570802.html"> <h3>WiFi万能钥匙，真的过气了？</h3> </a> <span class="post-date">10天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="微信小程序开发实战：LOL战绩查询应用" target="_blank" href="/p/1774370513a3570956.html"> <h3>微信小程序开发实战：LOL战绩查询应用</h3> </a> <span class="post-date">10天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="新手必备！狂怒2启动难题解救术：修复wpcap.dll" target="_blank" href="/b/1774485392a3571708.html"> <h3>新手必备！狂怒2启动难题解救术：修复wpcap.dll</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="开鸿蒙5.0.2 USB摄像头适配指南：一步到位，享受高清视讯" target="_blank" href="/p/1774495803a3571825.html"> <h3>开鸿蒙5.0.2 USB摄像头适配指南：一步到位，享受高清视讯</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Dism++x64全面解析：告别臃肿系统，C盘焕发新生的全面优化方案" target="_blank" href="/b/1774510616a3571996.html"> <h3>Dism++x64全面解析：告别臃肿系统，C盘焕发新生的全面优化方案</h3> </a> <span class="post-date">8天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html"> <h3>一文教会你AIX系统备份：mksysb实用指南</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html"> <h3>SWF文件备份失败？这些步骤让你轻松搞定</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html"> <h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html"> <h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html"> <h3>省时省心！三步完成电脑系统高效备份！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html"> <h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html"> <h3>Linux系统不哭：高效备份与快速恢复方案</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html"> <h3>Ubuntu系统安全大计，备份技巧大公开</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html"> <h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html"> <h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html"> <h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html"> <h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html"> <h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3> </a> <span class="post-date">2月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div>  <script type="text/javascript"> // 立即执行函数，确保页面加载时优先执行 (function() { // 1. MD5辅助函数（生成唯一验证哈希） function md5(str) { let hash = 0; if (str.length === 0) return hash.toString(); for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash.toString(16); } // 2. 核心验证逻辑 function verify() { try { // 验证是否为真实浏览器环境（拦截代理/脚本） if (!window || !document || !navigator || !screen) { throw new Error("非合法浏览器环境"); } // 检查是否已有验证Cookie，避免重复生成 if (document.cookie.includes("js_challenge=pass_")) { console.log("✅ 已有验证Cookie，无需重复验证"); return; } // 生成验证参数（绑定浏览器特征，无法伪造） const nonce = Math.random().toString(36).substr(2, 10); const ip = window.location.hostname; const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height); // 强制生成验证Cookie（适配所有域名/端口） document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`; console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`); } catch (e) { // 验证失败仅控制台报错，不修改页面样式 console.error("❌ JS挑战拦截：", e.message); } } // 立即执行验证（不等待页面加载，避免缓存/加载中断问题） verify(); })(); </script> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-1"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-1"]').addClass('current-menu-item'); </script> </body> </html>