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

admin 管理员组

文章数量: 1086019

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/1740071764a2128896.html" class="post-item-title" title="Mindjump可以完美解决微信中打开链接,自动打开外部浏览器打开指定URL页面的问题"> <h3>Mindjump可以完美解决微信中打开链接,自动打开外部浏览器打开指定URL页面的问题</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">2月前</div> </div> <p class="post-item-summary">现如今微信对下载链接的拦截是越来越严格了，下载链接在微信中分享转发经常会被拦截，一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问，如此给用户带来的体验台差&#x</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740072583a2129039.html" class="post-item-title" title="在Chrome浏览器中点击链接，打开IE浏览器，跳转到指定页面并传递参数"> <h3>在Chrome浏览器中点击链接，打开IE浏览器，跳转到指定页面并传递参数</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">2月前</div> </div> <p class="post-item-summary">求：在Chrome浏览器中点击链接，打开IE浏览器，跳转到指定页面并传递参数过程：一些应用软件可以通过点击URL链接启动并执行操作（例如迅雷），这是如何做到的呢？主要是通过修改注册表，注册URL Protocol。可以增</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073212a2129154.html" class="post-item-title" title="同一个页面显示多个html界面,浏览器怎么设置在同一个界面窗口打开多个网页..."> <h3>同一个页面显示多个html界面,浏览器怎么设置在同一个界面窗口打开多个网页...</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">2月前</div> </div> <p class="post-item-summary">有很多用户在使用浏览器的时候会使用浏览器打开多个页面进行使用，然后就会发现有很多个窗口，这样用户使用起来就会很不方便，很多电脑位置都会被占据，也容易关错</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740118773a2137239.html" class="post-item-title" title="win10笔记本Alt+Tab键切换页面失灵怎么办？"> <h3>win10笔记本Alt+Tab键切换页面失灵怎么办？</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">2月前</div> </div> <p class="post-item-summary">win10笔记本AltTab键切换页面失灵！！！ 大家都知道，AltTab是一个非常实用的组合，可以上班划水&#xff0</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740918395a2223445.html" class="post-item-title" title="win7+ubuntu16.04双系统开机时卡进入系统页面的问题解决办法"> <h3>win7+ubuntu16.04双系统开机时卡进入系统页面的问题解决办法</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">2月前</div> </div> <p class="post-item-summary">一问题描述： 图一，为开机后电脑页面（此处no error） 图二，无论选择windows还是ubuntu启动都会出现这个页面</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741054422a2247484.html" class="post-item-title" title="Vue IOS端跳转后返回页面不刷新问题解决"> <h3>Vue IOS端跳转后返回页面不刷新问题解决</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">方法一： we码用了，生效 mounted () {this.$nextTick(()>{首页跳转至门诊或者商城返回 IOS不兼容页面自动刷新问题var unavigator.us</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741133954a2261618.html" class="post-item-title" title="Python—selenium实现以一个浏览器多个标签页打开多个网页"> <h3>Python—selenium实现以一个浏览器多个标签页打开多个网页</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">如何用selenium打开新的标签页？网上都说是实现输入Ctrlt即可，但测试完全不可行。经过反复摸索，终于发现了打开新的标签页的可靠办法，由此实现以一</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134177a2261658.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">在我们使用微信营销的时候，很容易碰到推广连接在微信内无法打开或无法下载app的情况。首先说一下推广域名在微信内无法打开的问题，这是因为微信将您的域名拦截导致，所以在微信内打</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134220a2261666.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">if (browser.versions.mobile) {判断是否是移动设备打开。browser代码在下面var uanavigator.userAgent.toLowerCase();获取判断用的对象if (ua.match</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134527a2261716.html" class="post-item-title" title="Chrome浏览器中页面在新的标签页打开"> <h3>Chrome浏览器中页面在新的标签页打开</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">最近一直在使用谷歌浏览器（你还在百度？）发现Chrome默认是在本页面打开链接，这点我很不爽。在上网找了以下四种方法： 1.用鼠</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741135585a2261901.html" class="post-item-title" title="C++ Qt实现WPS、浏览器tab页面"> <h3>C++ Qt实现WPS、浏览器tab页面</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">作者：令狐掌门技术交流QQ群：675120140 csdn博客：https:mingshiqiang.blog.csdn 文章目录 Tab菜单栏WPS界面结构简述主界面布局自定义QTabWidgetQTabWidget基本属性设置Q</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741136061a2261981.html" class="post-item-title" title="Microsoft Edge 中的ie浏览器图标、右击新标签页打开功能的关闭方法"> <h3>Microsoft Edge 中的ie浏览器图标、右击新标签页打开功能的关闭方法</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">本篇文章主要讲解 Microsoft Edge 中的ie浏览器图标、新标签页打开功能的关闭方法日期：2022年1月20日作者：任聪聪主要现象说明：在edge浏览器</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742569330a2409832.html" class="post-item-title" title="phpstorm 配置点右上角浏览器图标时用浏览器打开当前页面"> <h3>phpstorm 配置点右上角浏览器图标时用浏览器打开当前页面</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">1、服务器安装在本地电脑上，我们项目的源文件位于服务器的根文件目录下。Files->Settings->Deployment->"In place" 文件》设置只要这一步就可以这</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742569346a2409836.html" class="post-item-title" title="微信pc端浏览器打开页面空白的问题"> <h3>微信pc端浏览器打开页面空白的问题</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">今天写了一个web项目，用chrome浏览器，手机端微信你打开都没问题，但是在pc端微信打开后是空白的，于是我重新做了一个空白的vue项目&#x</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742570786a2410024.html" class="post-item-title" title="IE11打开网站，F12仿真模式中文档模式默认为IE7(网站在谷歌浏览器正常访问，在其他浏览器布局出现混乱)"> <h3>IE11打开网站，F12仿真模式中文档模式默认为IE7(网站在谷歌浏览器正常访问，在其他浏览器布局出现混乱)</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">问题： 1、系统在谷歌的极速浏览器模式下，访问正常；但是在IE浏览器访问，出现布局混乱的现象。 2、IE11打开网站，F12仿</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742570953a2410047.html" class="post-item-title" title="静态HTML页面直接在浏览器打开，js操作出现跨域问题"> <h3>静态HTML页面直接在浏览器打开，js操作出现跨域问题</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">环境谷歌浏览器解决方式 Chrome快捷图标，右键 -> 目标，在末尾加上–disable-web-security重启浏览器。别忘了加空格可能会出现修改后第一次有效&</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742571204a2410080.html" class="post-item-title" title="IE11浏览器打开页面时css样式不加载的解决方法"> <h3>IE11浏览器打开页面时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">1.下载https:pan.baidus1c-iteFTjYONaLW3-_3ztFg 提取码:aees2.搜索css3.点击.css出现Edit File Type,更改MIME Type内容为textcss 4.重新打</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743812752a2483918.html" class="post-item-title" title="h5页面提示只能在微信浏览器中打开_Javascript限制网页只能在微信内置浏览器中访问..."> <h3>h5页面提示只能在微信浏览器中打开_Javascript限制网页只能在微信内置浏览器中访问...</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">27天前</div> </div> <p class="post-item-summary">那么问题就来了，这个网页首先涉及到了移动web前端开发，我优先选择了用HTML5bootstrap组合来实现页面的美观效果，前端其他的任务交给javascript解决(这里我</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743815546a2484394.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="/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">27天前</div> </div> <p class="post-item-summary">1、通过调用ShellExecute()来打开网页示例：CString strUrl_T(" http:www.google.hk"); HINSTANCE hIeResultSh</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743815867a2484451.html" class="post-item-title" title="通过js就可以判断当前页面是在什么浏览器打开的"> <h3>通过js就可以判断当前页面是在什么浏览器打开的</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">27天前</div> </div> <p class="post-item-summary"><!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title><title> <h</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=QNboi5K5pSUBv4j_2FroK1MiaAcLBUCWXhqizjv6hlov6u0VMi7PWi5gU31SPxWE8wfu_2BHMNlZaFiRiRRDwLeztw_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/1743987541a2514128.html" title="nuxt.js - Nuxt SSR not working properly with PM2 in Ubuntu - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> nuxt.js - Nuxt SSR not working properly with PM2 in Ubuntu - Stack Overflow </h3> </div> </a> <a href="/p/1744006322a2517352.html" title="javascript - Overlaying an HTML5 video element over another video element. - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - Overlaying an HTML5 video element over another video element. - Stack Overflow </h3> </div> </a> <a href="/p/1744027663a2520922.html" title="javascript - Replace character at specific position in textarea - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - Replace character at specific position in textarea - Stack Overflow </h3> </div> </a> <a href="/p/1744043032a2523608.html" title="javascript - @onmouseup not firing at vuejs 2 - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - @onmouseup not firing at vuejs 2 - Stack Overflow </h3> </div> </a> <a href="/p/1744092672a2532325.html" title="Android SoundPool setRate Not Working on Specific WAV Files - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> Android SoundPool setRate Not Working on Specific WAV Files - Stack Overflow </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="javascript - Parsing JSON under Array object - Stack Overflow" target="_blank" href="/p/1743988264a2514250.html"> <h3>javascript - Parsing JSON under Array object - Stack Overflow</h3> </a> <span class="post-date">25天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="asp.net mvc - Iterating through IEnumerable Model in JavaScript - Stack Overflow" target="_blank" href="/p/1743997201a2515797.html"> <h3>asp.net mvc - Iterating through IEnumerable Model in JavaScript - Stack Overflow</h3> </a> <span class="post-date">25天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="rust - Huffman classical and canonical version - Stack Overflow" target="_blank" href="/p/1744002729a2516743.html"> <h3>rust - Huffman classical and canonical version - Stack Overflow</h3> </a> <span class="post-date">25天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - How to call function on change event in Angular - Stack Overflow" target="_blank" href="/p/1744031161a2521524.html"> <h3>javascript - How to call function on change event in Angular - Stack Overflow</h3> </a> <span class="post-date">25天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="reactjs - How to Compile a React Web App into a Binary Executable? - Stack Overflow" target="_blank" href="/p/1744052465a2525266.html"> <h3>reactjs - How to Compile a React Web App into a Binary Executable? - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Get Elapsed Weekdays Between Two Dates Using MomentJS - Stack Overflow" target="_blank" href="/p/1744055251a2525733.html"> <h3>javascript - Get Elapsed Weekdays Between Two Dates Using MomentJS - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - React.lazy error Object(...) is not a function - Stack Overflow" target="_blank" href="/p/1744057953a2526193.html"> <h3>javascript - React.lazy error Object(...) is not a function - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Checking if an array is a subset of another array (but checking against a property) - Stack Overflow" target="_blank" href="/p/1744060533a2526646.html"> <h3>javascript - Checking if an array is a subset of another array (but checking against a property) - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - How to render a pdf from bytestream in ajax response - Stack Overflow" target="_blank" href="/p/1744086261a2531185.html"> <h3>javascript - How to render a pdf from bytestream in ajax response - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - How to enable and disable HTML's disabled property - Stack Overflow" target="_blank" href="/p/1744098989a2533409.html"> <h3>javascript - How to enable and disable HTML's disabled property - Stack Overflow</h3> </a> <span class="post-date">24天前</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="javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow" target="_blank" href="/p/1744100356a2533471.html"> <h3>javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow" target="_blank" href="/p/1744100331a2533470.html"> <h3>javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="c++ - Is dereferencing std::span::end always undefined? - Stack Overflow" target="_blank" href="/p/1744100330a2533469.html"> <h3>c++ - Is dereferencing std::span::end always undefined? - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Delay function execution if it has been called recently - Stack Overflow" target="_blank" href="/p/1744100302a2533468.html"> <h3>javascript - Delay function execution if it has been called recently - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Google Maps Autocomplete List - Stack Overflow" target="_blank" href="/p/1744100275a2533467.html"> <h3>javascript - Google Maps Autocomplete List - Stack Overflow</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="windows设置断电重启开机后自动输入锁屏密码登录" target="_blank" href="/b/1744098521a2533348.html"> <h3>windows设置断电重启开机后自动输入锁屏密码登录</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows系统设置开机默认开启数字小键盘" target="_blank" href="/b/1744098338a2533314.html"> <h3>Windows系统设置开机默认开启数字小键盘</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows11 开机自动同步时间（开机时间不更新问题）" target="_blank" href="/b/1744098057a2533264.html"> <h3>Windows11 开机自动同步时间（开机时间不更新问题）</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="windows配置开机自启动软件或脚本" target="_blank" href="/b/1744097709a2533205.html"> <h3>windows配置开机自启动软件或脚本</h3> </a> <span class="post-date">24天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="【Redis】Windows设置Redis为开机自启动" target="_blank" href="/b/1744097548a2533178.html"> <h3>【Redis】Windows设置Redis为开机自启动</h3> </a> <span class="post-date">24天前</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">3月前</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">3月前</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">3月前</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">3月前</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">3月前</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 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>