如何使用HTML和CSS创建大学网站?

本文来自:IT宝库(https://www.itbaoku.cn)

推荐答案1

使用HTML和CSS创建大学网站涉及多个步骤:

  1. 基本HTML结构 :从创建创建开始使用HTML网站的基本结构.定义元素,例如标题,段落和列表,以组织内容
  2. CSS样式 :使用CSS来设置您的网站.为字体,颜色,布局和其他元素定义样式,以使您的网站在视觉上吸引人. CSS控制HTML Elements的设计和布局
  3. 网页设计 :设计网页布局.您可以使用HTML和CSS创建一个简单的Web结构,定义标题,导航菜单,内容区域和页脚等元素
  4. 类和IDS :利用类和ID将特定样式应用于单个元素或元素组.这有助于创建一个一致且精心设计的网站
  5. 交互式功能(可选) :如果您想要交互式功能,则可以合并JavaScript.这使您可以在网站上添加动态内容,动画和用户交互性

记住要验证您的HTML和CSS代码,以确保其无错误并关注并遵循网络标准.

推荐答案2

使用HTML和CSS创建大学网站涉及设计和编码网页的结构,布局和样式.这是一个分步指南,可帮助您入门:

1.计划和设计:

  • 定义大学网站的目的和目标.
  • 确定您想要的页面包括(例如,家庭,关于程序,录取,联系人等).
  • 绘制每个页面的粗略布局或线框,以计划内容和结构.<<<<<<<

2.设置工作空间:

  • 在计算机上创建一个项目文件夹以组织您的HTML,CSS,图像和其他资产.

3.创建HTML结构:

  • 开始为每个页面创建一个HTML文件(例如, index.html 使用列表添加导航菜单( <ul> <li> )或其他合适的HTML元素.
  • 4.应用CSS样式:

    • 在您的项目文件夹中创建一个CSS文件(例如, styles.css ). li>
    • 使用 <link> 元素 <head> extifter中的 <link> element. >
    • 使用CSS为您的网站设置样式,包括字体,颜色,布局和间距.
    • 使用特定元素的类和ID应用样式.

    5.构建页面:

    • 从主页( index.html )开始,并逐渐创建其他页面.
    • 使用您学会的HTML和CSS来构建和样式的每页.

    6.添加图像和媒体:

    • 在项目文件夹中创建 images 文件夹以存储图像.
    • 使用 <img> 标签将图像添加到您的网页中.
    • 嵌入视频或其他媒体使用适当的HTML标签.

    7.响应能力:

    • 使用CSS媒体查询使您的网站响应迅速,适应不同的屏幕大小.
    • 考虑考虑使用Bootstrap(例如响应式设计组件)的框架.

    8.测试您的网站:

    • 在不同的网络浏览器中测试您的网站以确保兼容性.
    • 验证您的网站在不同的设备上是用户友好且可访问的.

    9.验证:

    • 使用在线验证工具检查您的HTML和CSS是否错误.

10.托管:

  • 一旦您的网站准备就绪,就可以在Web服务器上托管.提供许多Web托管服务.

11.域名:

12.启动和维护:

  • 将您的网站上传到所选的Web托管服务器.
  • 定期更新并维护您的具有新内容和改进的网站.

请记住,创建大学网站不仅涉及HTML和CSS,还涉及诸如用户体验,可访问性和内容之类的考虑.随着您获得经验,您可以探索更高级的功能和技术,以进一步增强您的网站.

推荐答案3

最佳起点的地方实际上取决于您要去的地方.其他人则提供了良好的资源来立即开始,如果您只需要快速了解网络开发即可进行调整或获得足够的知识来构建基本网站.

如果您想成为一个认真的专业网络开发人员,我总是建议您从哈佛的 CS50, 开始计算机科学介绍 . 这是一个免费的类,您全年都可以完成和对于任何决心学习编码和编码良好的人来说都是出色的入门.

如果您是大卫·马兰(David Malan)的教学风格的粉丝,则至少应该去看讲座对于 CS75 ,构建动态网站.我也建议您也要进行作业,但是只要您吸收这些概念,这并不是真正的必要.这堂课有点过时,但它仍然是弄湿脚的好方法.

从这里开始,您需要专注于HTML,CSS和JavaScript. Codecademy和Treehouse都将为您提供很好的介绍.但是,我发现的JavaScript的最佳资源实际上是书籍.我的一些最爱实际上已经在线放置.

当您更新到JavaScript时,我认为阅读和通过Marijn Haverbeke的 Eloquent Javascript 是提高技能的好方法.一段时间后,Addi Osmani的 Learning JavaScript Design Patterns 将帮助您组织代码这样您就可以在不失去理智的情况下进行更大,更复杂的项目.

祝你好运!

推荐答案4

作为一个学会了HTML和CSS的人,我可以说,一般没有任何"最好的方法".它每天在放学后每天花费4到6个小时,写下从笔记本上的W3Schools中写下所有内容,以了解如何在HTML中编写代码,然后自行构建网站.

<对我来说,这有效,但对其他人来说可能是可怕的.不要花时间思考如何编写代码,或者应该学习哪种编程语言以及为什么.

想一想.您为什么要在HTML和CSS之后学习JavaScript?您为什么还要学习HTML和CSS?您想成为网络开发人员吗?您想花时间构建网站的外观,还是要花时间在后端工作? t知道要学习什么,以及如何学习,W3SCHOOLS和CODECADEMY可能是学习如何编码的好开始假设您在互联网上搜索了一个不错的网站,您会发现一个不错的设计.在学习HTML和CSS的同时,请尝试使用所学知识来复制该设计.查看您是否喜欢使用HTML和CSS.

也许您想设计网站,只使用Photoshop,而您还不知道,因此请开始使用Photoshop开始设计该网站甚至从HTML和CSS开始之前.

如果您不知道要学习什么以及如何做,那么最好的开始方法是通过工作学习时的项目.拍摄您要构建的网站的几张图片,或下载设计,然后开始逐步构建.

当您进入HTML页面的基本限制时W3School或Codecademy,为您的网站编写该代码,从标签开始,然后使用标签,然后使用,带有<body>等> <span>在学习时构建一些网站,您将学习如何真正快速构建任何内容.同样的事情也适用于JavaScript.不要只是学习JavaScript,如果您在编码方面的经验为零,可能会很恐怖.</span> </p> <p> <span>一开始,这很容易.可变,简单的功能,如果和其他语句等,但是您会变得更加困难,如果您没有目的,您可能会失望并非常快. <p> <span>在使用HTML和CSS之后,请考虑要构建的应用程序,并开始学习JavaScript,同时也慢慢构建该应用程序.</span> </span> </p> <p> <span >祝你好运!</span> </p><h2 style="font-weight: bold;font-size: 18px;margin-bottom: 6px;">推荐答案5</h2><p> <span>我认为,如果您选择一个感兴趣的主题,然后建立一个网站,我会更感兴趣.这是我在HTML和CSS培训他们时用来给同事提供的任务.您可以尝试一下.</span> </p> <p> <span> 1)选择您喜欢的动物. (您可以将其更改为爱好或其他东西.)</span> </p> <p> <span> 2)创建一个带有5页有关动物内容的网站.您的网站应包括:</span> </p> <ul> <li> <span>标题大的标题.</span> </li> <li> <span>水平菜单(提示:使用:一个无序的列表)</span> </li> <li> <span>每页1张照片. (请务必选择您可以合法使用的照片,例如在创意共享或您拍摄的图片下许可的照片.)确保将网站上的2张照片与文本的右边保持一致. (CSS提示:使用Floats)</span> </li> <li> <span>制作至少一个使用2列布局的页面(提示:Inline-Block)</span> </li> </li> <li> <span>包括一个具有版权通知的页脚,并链接到3个社交媒体配置文件.</span> </li> <li> <span>嵌入了一个YouTube视频,其中包含您的动物在其中一个页面上. </span> </li> <li> <span>在您的网站中使用2个字体. 1可以是衬线,而其他无衬线. </span> </li> <li> <span>用</span> <span> <a class="q-box Link___StyledBox-t2xg9c-0 dFkjrQ puppeteer_test_link qu-cursor--pointer qu-hover--textDecoration--underline" title="validator.w3.org" href="https://validator.w3.org/" target="_blank" rel="noopener nofollow" style="box-sizing: border-box; position: relative; border-radius: inherit; font-weight: normal; font-style: normal; background: none;">Markup Validation Service</a> <span> <span> <span> <span> </span> </span> </span> </span> </span> <span验证您的HTML和CSS > and </span> <span> <a class="q-box Link___StyledBox-t2xg9c-0 dFkjrQ puppeteer_test_link qu-cursor--pointer qu-hover--textDecoration--underline" title="jigsaw.w3.org" href="https://jigsaw.w3.org/css-validator/#validate_by_uri%2Bwith_options" target="_blank" rel="noopener nofollow" style="box-sizing: border-box; position: relative; border-radius: inherit; font-weight: normal; font-style: normal; background: none;">CSS Validation Service</a> <span> <span> <span> </span> </span> </span> </span> <span> </span> </span> </li> <li> <span>查看您的网站要确保它符合可访问性指南</span> <span> <a class="q-box Link___StyledBox-t2xg9c-0 dFkjrQ puppeteer_test_link qu-cursor--pointer qu-hover--textDecoration--underline" title="webaim.org" href="http://webaim.org/intro/" target="_blank" rel="noopener nofollow" style="box-sizing: border-box; position: relative; border-radius: inherit; font-weight: normal; font-style: normal; background: none;">Introduction to Web Accessibility</a> <span> <span> <span> </span> </span> </span> </span> <span> <span> </span> </span> </li> </ul> </ul> <p> <span> 3)当您对结果感到满意时,您可以选择使用更多内容和功能扩展网站,或者启动一个新项目. </span> </p> <div class="text-center"> <a target="_blank" style="color:red;font-size:16px;lien-height:35px;" title="点击这里让编程助手帮你吧!" href="/search/5aaC5L2V5L2$55SoSFRNTOWSjENTU+WIm+W7uuWkp+Wtpue9keerme+8nw==">👉不是你要找的答案?问题还没解决?点击这里让编程助手帮你吧!👈</a> </div> </div> <!--wwads bottom--> <div class="wwads-cn wwads-horizontal" data-id="228" style="background-color: #ffffff;"></div> </article> </div> <div class="container-fluid"> <div class="col-md-6 col-sm-12 col-xs-12" style="white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;line-height:35px;"> <a style="color: #0075de;" href="/post/2842748.html" title="如何在PHP中销毁对象?">上一篇:如何在PHP中销毁对象?</a> </div> <div class="col-md-6 col-sm-12 col-xs-12" style="text-align:right;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;line-height:35px;"> <a style="color: #0075de;" href="/post/2842750.html" title="GPS中的C/A码和P码是什么?">下一篇:GPS中的C/A码和P码是什么?</a> </div> </div> <div class="container-fluid"> <!--page bottom--> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:20px;padding-bottom:10px;"><span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #333333;line-height: 25px;">相关文章</span></div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="我如何创建我们的大学网站" href="/post/1261122.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  我如何创建我们的大学网站</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="我需要帮助创建在线大学网站" href="/post/1462556.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  我需要帮助创建在线大学网站</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用HTML、CSS、PHP和JavaScript创建个人网站?" href="/post/2562532.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用HTML、CSS、PHP和JavaScript创建个人网站?</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="广州大学网络编程实验一" href="/post/3126917.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  广州大学网络编程实验一</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用HTML和CSS代码创建个人投资组合网站?" href="/post/2558036.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用HTML和CSS代码创建个人投资组合网站?</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何仅使用HTML和CSS在网站上创建会员专区?" href="/post/2472098.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何仅使用HTML和CSS在网站上创建会员专区?</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用只有HTML、CSS和JavaScript的网站?" href="/post/2469127.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用只有HTML、CSS和JavaScript的网站?</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用html或css创建论坛" href="/post/1063899.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用html或css创建论坛</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用Html/Css创建博客" href="/post/1175592.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用Html/Css创建博客</a> <a style="line-height:30px;font-size: 14px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 400;text-align: left;color: #2c3e50;display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="如何使用html5和css3创建网站" href="/post/1219732.html"><div style="width: 10px;height: 10px;opacity: 1;background: #d8d8d8;border: 1px solid #979797;border-radius: 6px;display:inline-block;"></div>  如何使用html5和css3创建网站</a> </div> <div class="col-lg-12col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom:20px;"> <a href="/search/5aaC5L2V5L2$55SoSFRNTOWSjENTU+WIm+W7uuWkp+Wtpue9keerme+8nw==" style="font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #7f1103;line-height: 20px;"><img src="https://s.itbaoku.cn/Content/img/路径.png" />  更多相关文章</a> </div> </div> <div class="container-fluid"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:20px;padding-bottom:10px;"><span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #333333;line-height: 25px;">相关标签/搜索</span></div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="post_tag_search_div"> <a class="post_tag_search_link highlight-text" title="数字逻辑与EDA设计》书评" href="/search/5pWw5a2X6YC76L6R5LiORURB6K6+6K6h44CL5Lmm6K+E">数字逻辑与EDA设计》书评</a> <a class="post_tag_search_link highlight-text" title="webdriver识别验证码" href="/search/d2ViZHJpdmVy6K+G5Yir6aqM6K+B56CB">webdriver识别验证码</a> <a class="post_tag_search_link highlight-text" title="pycharm activation code激活码" href="/search/cHljaGFybSBhY3RpdmF0aW9uIGNvZGXmv4DmtLvnoIE=">pycharm activation code激活码</a> <a class="post_tag_search_link highlight-text" title="electrons窗口注册事件" href="/search/ZWxlY3Ryb25z56qX5Y+j5rOo5YaM5LqL5Lu2">electrons窗口注册事件</a> <a class="post_tag_search_link highlight-text" title="vue input添加可点击按钮" href="/search/dnVlIGlucHV05re75Yqg5Y+v54K55Ye75oyJ6ZKu">vue input添加可点击按钮</a> <a class="post_tag_search_link highlight-text" title="python输出从1到10的所有数以空格隔开for" href="/search/cHl0aG9u6L6T5Ye65LuOMeWIsDEw55qE5omA5pyJ5pWw5Lul56m65qC86ZqU5byAZm9y">python输出从1到10的所有数以空格隔开for</a> <a class="post_tag_search_link highlight-text" title="LR mac不能新建目录" href="/search/TFIgbWFj5LiN6IO95paw5bu655uu5b2V">LR mac不能新建目录</a> <a class="post_tag_search_link highlight-text" title="请描述 dom元素定位的几种方式以及它们的区别" href="/search/6K+35o+P6L+wIGRvbeWFg+e0oOWumuS9jeeahOWHoOenjeaWueW8j+S7peWPiuWug+S7rOeahOWMuuWIqw==">请描述 dom元素定位的几种方式以及它们的区别</a> <a class="post_tag_search_link highlight-text" title="SVN 上传authorization failed" href="/search/U1ZOIOS4iuS8oGF1dGhvcml6YXRpb24gZmFpbGVk">SVN 上传authorization failed</a> <a class="post_tag_search_link highlight-text" title="sorttable 序号" href="/search/c29ydHRhYmxlIOW6j+WPtw==">sorttable 序号</a> <a class="post_tag_search_link highlight-text" title="SYN Flood攻击工具" href="/search/U1lOIEZsb29k5pS75Ye75bel5YW3">SYN Flood攻击工具</a> <a class="post_tag_search_link highlight-text" title="eclipse运行maven web项目" href="/search/ZWNsaXBzZei$kOihjG1hdmVuIHdlYumhueebrg==">eclipse运行maven web项目</a> <a class="post_tag_search_link" title="Windows" href="/tag/Windows">Windows</a> <a class="post_tag_search_link" title="PHP" href="/tag/PHP">PHP</a> <a class="post_tag_search_link" title="C#" href="/tag/C#">C#</a> <a class="post_tag_search_link" title="ASP.NET" href="/tag/ASP.NET">ASP.NET</a> <a class="post_tag_search_link" title="菜鸟问答" href="/tag/菜鸟问答">菜鸟问答</a> <a class="post_tag_search_link" title="专题问答" href="/tag/专题问答">专题问答</a> <a class="post_tag_search_link" title="JavaScript编程语言" href="/tag/JavaScript编程语言">JavaScript编程语言</a> <a class="post_tag_search_link" title="JavaScript-programming-language" href="/tag/JavaScript-programming-language">JavaScript-programming-language</a> <a class="post_tag_search_link" title="编程日记" href="/tag/编程日记">编程日记</a> <a class="post_tag_search_link" title="博客专题系列" href="/tag/博客专题系列">博客专题系列</a> </div> </div> </div> <div class="col-lg-3 col-md-3 hidden-xs hidden-sm " style="margin-bottom:30px;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-white" style="padding:0;width:255px;" id="div_related_post"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #f2e6e5;border-left:4px solid #7f1103;height: 50px;padding:0;line-height:50px;"> <span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #7f1103;line-height: 20px;opacity:1;padding-left:15px;">热门教程</span> <a style="float:right;padding-right:10px;" href="/tutorial/index"><img alt="更多内容" src="https://s.itbaoku.cn/Content/img/路径.png" /></a> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;padding-bottom:20px;"> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="Java教程" href="/tutorial/java-index.html">Java教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="Tcl/Tk教程" href="/tutorial/tcl_tk-index.html">Tcl/Tk教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="Kali Linux教程" href="/tutorial/kali_linux-index.html">Kali Linux教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="COBOL教程" href="/tutorial/cobol-index.html">COBOL教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="JavaFx教程" href="/tutorial/javafx-index.html">JavaFx教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="Android教程" href="/tutorial/android-index.html">Android教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="MFC 教程" href="/tutorial/mfc-index.html">MFC 教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="D3JS教程" href="/tutorial/d3js-index.html">D3JS教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="SAP SD教程" href="/tutorial/sap_sd-index.html">SAP SD教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="WPF教程" href="/tutorial/wpf-index.html">WPF教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="SAP FICO教程" href="/tutorial/sap_fico-index.html">SAP FICO教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="SAP HANA教程" href="/tutorial/sap_hana-index.html">SAP HANA教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="BabylonJS教程" href="/tutorial/babylonjs-index.html">BabylonJS教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="SAS教程" href="/tutorial/sas-index.html">SAS教程</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="CPanel教程" href="/tutorial/cpanel-index.html">CPanel教程</a> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0;margin-top:10px;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-white" style="padding:0;width:255px;" id="div_related_post"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #f2e6e5;border-left:4px solid #7f1103;height: 50px;padding:0;line-height:50px;"> <span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #7f1103;line-height: 20px;opacity:1;padding-left:15px;">热门工具</span> <a style="float:right;padding-right:10px;" href="/tools/index"><img alt="更多内容" src="https://s.itbaoku.cn/Content/img/路径.png" /></a> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;padding-bottom:20px;"> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 Java 代码" href="/tools/c-4">Java 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 C(GCC) 代码" href="/tools/c-6">C(GCC) 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 C# 代码" href="/tools/c-1">C# 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 PHP 代码" href="/tools/c-8">PHP 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 Python 代码" href="/tools/c-5">Python 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 Lua 语言代码" href="/tools/c-14">Lua 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线编译、运行 VB.NET 代码" href="/tools/c-2">VB.NET 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线执行 MySQL 脚本" href="/tools/d-33">MySQL 在线工具</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在线执行 Oracle 脚本" href="/tools/d-35">Oracle 在线工具</a> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0;margin-top:10px;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-white" style="padding:0;width:255px;" id="div_related_post"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #f2e6e5;border-left:4px solid #7f1103;height: 50px;padding:0;line-height:50px;"> <span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #7f1103;line-height: 20px;opacity:1;padding-left:15px;">最近实例</span> <a style="float:right;padding-right:10px;" href="/example/index"><img alt="更多内容" src="https://s.itbaoku.cn/Content/img/路径.png" /></a> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;padding-bottom:20px;"> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="PLC 第三章讲稿初学者可以看看" href="/example/53a3384a81b844ddbf369882cd500d7c.html">PLC 第三章讲稿初学者可以看看</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="打小狗游戏源代码,采用flash8开发" href="/example/ecef18d3f36a44458277e81a1be1b532.html">打小狗游戏源代码,采用flash8开发</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="PLC 第二章讲稿" href="/example/1242b03a057f4471a5fae69a8d896050.html">PLC 第二章讲稿</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="嵌入式计算机及接口技术" href="/example/793cfee8711446d28f5a469e7d087f5d.html">嵌入式计算机及接口技术</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="flash视频聊天源代码,采用fms和flash8开发" href="/example/bf3bd8ed1f6b4dd6b406508961f858b9.html">flash视频聊天源代码,采用fms和flash8开发</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="1RIP路由协议 &mdash;&mdash;RIP协议最初是为Xerox网络系统的Xeroxparc通用协议而设计的" href="/example/a905c2d9013d479da35b0dda1cad9584.html">1RIP路由协议 &mdash;&mdash;RIP协议最初是为Xerox网络系统的Xeroxparc通用协议而设计的</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="Windows CE NET下USB设备驱动开发" href="/example/5d7a54459f1b4bb191c379f4a68d5d62.html">Windows CE NET下USB设备驱动开发</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="C#矩阵运算类" href="/example/07721a32d01a4152af4d638ec196d9c9.html">C#矩阵运算类</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="/*** *****词法分析程序*** *****/ # include&amp;lt;iostream.h&amp;gt; # include&amp;lt;fstream.h&amp;gt; # include&amp;lt;math." href="/example/88f30545005043b2a06dcecc989dfbb0.html">/*** *****词法分析程序*** *****/ # include&amp;lt;iostream.h&amp;gt; # include&amp;lt;fstream.h&amp;gt; # include&amp;lt;math.</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="可对任意的1-20000的数做阶乘。简单方便" href="/example/de372d00fcce4168bb3f6ce2d01ae4fc.html">可对任意的1-20000的数做阶乘。简单方便</a> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0;margin-top:10px;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-white" style="padding:0;width:255px;" id="div_related_post"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #f2e6e5;border-left:4px solid #7f1103;height: 50px;padding:0;line-height:50px;"> <span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #7f1103;line-height: 20px;opacity:1;padding-left:15px;">最近示例</span> <a style="float:right;padding-right:10px;" href="/snippets/index"><img alt="更多内容" src="https://s.itbaoku.cn/Content/img/路径.png" /></a> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;padding-bottom:20px;"> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="下划线引导" href="/snippets/882480.html">下划线引导</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="如何使用 wscript 获取当前用户名" href="/snippets/882479.html">如何使用 wscript 获取当前用户名</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="nodejs 睡眠" href="/snippets/882478.html">nodejs 睡眠</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="node js while loop with settimeout" href="/snippets/882477.html">node js while loop with settimeout</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="获取跨源请求" href="/snippets/882476.html">获取跨源请求</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="用 python 压缩和解压字符串" href="/snippets/882475.html">用 python 压缩和解压字符串</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="用 python-regexp 查找电子邮件地址的部分内容" href="/snippets/882474.html">用 python-regexp 查找电子邮件地址的部分内容</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="python 导入 dta 文件" href="/snippets/882473.html">python 导入 dta 文件</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="php 扩展父类构造函数" href="/snippets/882472.html">php 扩展父类构造函数</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="在 SQL Server 中创建参数化 VIEW" href="/snippets/882471.html">在 SQL Server 中创建参数化 VIEW</a> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-white" style="padding:0;width:255px;margin-top:10px;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #f2e6e5;border-left:4px solid #7f1103;height: 50px;padding:0;line-height:50px;"> <span style="font-size: 18px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 600;text-align: left;color: #7f1103;line-height: 20px;opacity:1;padding-left:15px;">最新问答</span> <a style="float:right;padding-right:10px;" href="/post/other-dev"><img alt="更多内容" src="https://s.itbaoku.cn/Content/img/路径.png" /></a> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;padding-bottom:20px;"> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="对于非静态字段、方法或属性dataGridView1需要一个对象引用。" href="/post/607196.html">对于非静态字段、方法或属性dataGridView1需要一个对象引用。</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="使用foreach将一个数组的名称存储在另一个数组中的c#中" href="/post/2352683.html">使用foreach将一个数组的名称存储在另一个数组中的c#中</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="如何在窗口商店应用程序中限制画布内的图像转换" href="/post/2345579.html">如何在窗口商店应用程序中限制画布内的图像转换</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="用ListBox.Items绑定自定义控件属性" href="/post/333351.html">用ListBox.Items绑定自定义控件属性</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="C#-为PDF文件中的所有书签设置继承缩放动作" href="/post/951460.html">C#-为PDF文件中的所有书签设置继承缩放动作</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="反序列化的Xml对象循环抛出NullReferenceException" href="/post/2043800.html">反序列化的Xml对象循环抛出NullReferenceException</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="绑定的组合框中的NULL空项" href="/post/25823.html">绑定的组合框中的NULL空项</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="WPF从主线程停止BackgroundWorker" href="/post/2584242.html">WPF从主线程停止BackgroundWorker</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="RadioButton, Binding, Converters" href="/post/1970332.html">RadioButton, Binding, Converters</a> <a style="line-height: 28px;color: #0075de;font-size:15px" class="post_link highlight-text" title="饲养员应用的多线程架构" href="/post/437666.html">饲养员应用的多线程架构</a> </div> </div> </div> </div> <script> //setTimeout("setContentHeight()",2000 ); /*window.onload=function(){ setContentHeight(); } function setContentHeight() { var qc = document.getElementById("qa-content"); qc.style.height="1024px"; }*/ </script> </div> </div> </div> <footer class="site-footer"> <div class="container footer-sections"> <section class="copyright-section"> <p>本站提供 <a style="color:#fff;" href="https://www.itbaoku.cn" title="编程入门菜鸟教程">编程入门菜鸟教程</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/tools/index" title="在线实用工具">在线实用工具</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/example/index" title="编程实例源码下载">编程实例源码下载</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/snippets/index" title="源代码片段分享">源代码片段分享</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/post/other-dev" title="编程技术问答">编程技术问答</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/tutorial/index" title="菜鸟自学教程">菜鸟自学教程</a> | <a style="color:#fff;" href="https://www.itbaoku.cn/test/index" title="在线技能测验">在线技能测验</a> 等内容供大家免费学习和使用!</p> <a style="color:#fff;" href="http://localhost:28387" title="编程入门菜鸟教程">IT宝库</a> <span>版权所有</span> <a rel="nofollow" style="text-decoration:none;color:#fff;" href="https://beian.miit.gov.cn/" target="_blank">京ICP备14011762号</a> <span>·</span> <a href="/sitemap.html" style="color:#fff;text-decoration:none;" target="_blank" title="编程入门菜鸟教程-站点地图">站点地图</a> <span>·</span> <a href="/Home/Tags" style="color:#fff;text-decoration:none;" target="_blank" title="编程入门菜鸟教程-站点标签">站点标签</a> <span>·</span> <span>© 2016-2022</span> <span>·</span> <a rel="nofollow" target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=bl9ZX1xZXVdYXi4fH0ANAQM" style="color:#fff;text-decoration:none;"><i class="glyphicon glyphicon-envelope"></i>意见&反馈</a> <a style="color:#fff;text-decoration:none;" target="_blank" alt="sitemap" href="/sitemap/sitemapindex.xml">SiteMap</a> <a style="color:#fff;" href="/post/1155981.html" title="编程入门菜鸟教程-免责申明"><免责申明></a> <span>本站内容来源互联网,如果侵犯您的权益请联系我们删除.</span> </section> <!--百度统计代码--> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = ['ht', 't', 'ps', ':/', '/h', 'm', '.', 'ba', 'i', 'd', 'u.c', 'o', 'm/', 'h', 'm', '.j', 's?', 'be9321a9', 'cc8cbe8e', 'ac6cc4ee5001424c'].join(''); var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </footer> <!--移动端菜单 开始--> <div class="container"> <form id="mobile_search_form" method="get" onsubmit="location.href='/search/' + Base64.encode(this.s.value).replace(new RegExp('/','g'),'$'); return false;" action="/" class="navbar-fixed-top form-group hidden-md hidden-lg" role="search"> <div class="input-group"> <input id="mobile_search" type="text" name="s" value="" class="form-control" placeholder="请输入问题/教程/工具/视频等关键词" style="margin-top:1px;" /> <span class="input-group-addon" onclick="document.getElementById('mobile_search').value.length>0?location.href = '/search/' + Base64.encode(document.getElementById('mobile_search').value).replace(new RegExp('/','g'),'$'):alert('搜索关键词不能为空!') " style="border-top-right-radius:10px;border-bottom-right-radius:10px;border-left-width:0px;cursor:pointer;border-top-right-radius:0;border-bottom-right-radius:0;background-color:#7F1103;color:white;"><i class="glyphicon glyphicon-search"></i></span> </div> </form> </div> <nav class="navbar navbar-default navbar-fixed-bottom hidden-md hidden-lg" style="min-height:45px;vertical-align:middle;background-color:#7F1103;"> <div class="container"> <ul class="nav nav-tabs nav-tabs-justified" style="min-height:45px;vertical-align:middle;"> <div class="row"> <div class="collapse navbar-collapse" id="mobile-home-index-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="/OnLineCodeSnippets/Index">代码</a></li> <li><a rel="nofollow" href="/Login/Index">登录</a></li> <li><a rel="nofollow" href="/Register/Index">注册</a></li> </ul> </div> </div> <div class="row" align="center"> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" href="/"><i class="glyphicon glyphicon-home" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">首页</span></a></li></div> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" href="/tutorial/index"><i class="glyphicon glyphicon-list" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">教程</span></a></li></div> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" href="/tools/index"><i class="glyphicon glyphicon-cog" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">工具</span></a></li></div> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" href="/example/index"><i class="glyphicon glyphicon-save-file" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">资源</span></a></li></div> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" target="_blank" href="https://www.itbaoku.cn/reference/index.html"><i class="glyphicon glyphicon-book" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">速查</span></a></li></div> <div class="col-sm-2 col-xs-2" align="center"><li><a style="background-color:transparent;" target="_blank" href="https://ai.itbaoku.cn/"><i class="glyphicon glyphicon-fire" style="display:block;color:white;font-size:16px;padding-top:5px;"></i><span style="color:white;line-height:23px;">AI助手</span></a></li></div> </div> </ul> </div> </nav> <div class="side hidden-xs hidden-sm" style="display:none;right:30px;"> <ul> <!--<li><a href="/1159273.html"><div class="sidebox"><img src="~/Content/img/side_icon02.png">广告&合作</div></a></li>--> <li><a rel="nofollow" href="javascript:translatePage();" class="sidetop"><div class="sidebox"><img src="https://s.itbaoku.cn/Content/jianTofan.png"><span id="translateLink" style="padding-left:10px">繁 體</span></div></a></li> <li><a rel="nofollow" class="sidetop" href="http://wpa.qq.com/msgrd?V=3&uin=171273960&Site=IT宝库(www.itbaoku.cn)&Menu=yes"><div class="sidebox"><img src="https://s.itbaoku.cn/Content/img/side_icon04.png">联系站长</div></a></li> <li style="border:none;"><a rel="nofollow" href="javascript:goTop();" class="sidetop"><img src="/Content/img/right_top.png"></a></li> </ul> </div> <script src="https://s.itbaoku.cn/Scripts/jquery.min.js"></script> <script type="text/javascript" src="https://s.itbaoku.cn/Scripts/tw_cn.js"></script> <script type="text/javascript"> var defaultEncoding = 2; var translateDelay = 0; var cookieDomain = "https://www.itbaoku.cn"; var msgToTraditionalChinese = "繁 體"; var msgToSimplifiedChinese = "简 体"; var translateButtonId = "translateLink"; translateInitilization(); $(document).ready(function(){ if(getCookie(targetEncodingCookie) == null) { var baseLang; if (navigator.userLanguage) { baseLang = navigator.userLanguage.toLowerCase(); } else { baseLang = navigator.language.toLowerCase(); } switch(baseLang) { case "zh-tw": case "zh-hk": translatePage(); break; } } }); </script> <script src="https://s.itbaoku.cn/Scripts/jquery.highlighter-1.0.0.min.js"></script> <script src="https://s.itbaoku.cn/Scripts/bootstrap.min.js"></script> <script src="https://s.itbaoku.cn/Scripts/respond.js"></script> <script src="https://s.itbaoku.cn/Scripts/base.js"></script> <script src="https://s.itbaoku.cn/Scripts/layer/layer.js"></script> <script src="https://s.itbaoku.cn/Scripts/jquery-ui.min.js"></script> <script src="https://s.itbaoku.cn/Scripts/jQuery.autoIMG.js"></script> <link rel="stylesheet" href="https://s.itbaoku.cn/Content/jquery-ui.min.css"> <link href="https://s.itbaoku.cn/Content/css.css" rel="stylesheet"/> <script> $(function ($) { function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#search,#searchn,#mobile_search") .bind("keydown", function (event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { event.preventDefault(); } if (event.keyCode == 13 && this.value.length == 0) { alert("搜索关键词不能为空!"); return false; } }) .autocomplete({ delay: 200, source: function (request, response) { $.getJSON("/search/SearchAutoComplete", { key: extractLast(request.term) }, response); }, response: function (event, ui) { for (var i in ui.content) { var slist = ui.content[i].label.split("|||"); if (slist.length > 1) { ui.content[i].label = slist[1]; } else { ui.content[i].label =slist[0]; } } }, search: function () { // 自定义最小长度 var term = extractLast(this.value); if (term.length < 2) { return false; } }, focus: function () { // 防止在获得焦点时插入值 return false; }, select: function (event, ui) { var slist = ui.item.value.split("|||"); this.value = slist[0]; if (slist.length > 1) { this.value = slist[1]; window.open("//www.itbaoku.cn"+slist[0]); } return false; } }); $("#login_or_regist").bind('click', function (types, data, fn) { layer.open({ type: 2, title: false, shadeClose: false, shade: 0.8, area: ['385px', '435px'], content: '/Login/Index' }); }); $(".side ul li").hover(function () { $(this).find(".sidebox").stop().animate({ "width": "100px" }, 200).css({ "opacity": "1", "filter": "Alpha(opacity=100)", "background": "#ae1c1c" }) }, function () { $(this).find(".sidebox").stop().animate({ "width": "34px" }, 200).css({ "opacity": "0.8", "filter": "Alpha(opacity=80)", "background": "#7f1103" }) }); }); </script> <script> //高亮关键词 function HLKeyword(str, key) { key = key.replace(/\+/g,'\\+') var reg = new RegExp(key, "gi"); var newstr = str.replace(reg, "<font style='color:#f73131;'>$&</font>"); return newstr; } $(function () { $.each("如何,使用,html,css,创建,大学,网站,how,do,i,create,college,websites,using,html,css".split(','), function (index, tag) { $('a.highlight-text').each(function () { if (tag.length > 1) $(this).html(HLKeyword($(this).html(), tag)); }); }); //$(".sidebar").hide(); //$(".container").attr("style", "max-width:100%;margin:0 0 0 0;"); //$(".content").attr("style", "max-width:100%;margin-right:0px;margin-left:0px;margin-buttom:0px;margin-top:0px;") //children() $('#content_div1 img').each(function () { $(this).css("max-width", "402px"); }); $('#content_div2 img').each(function () { $(this).css("max-width", "402px"); }); //$('#content_views img').each(function () { // $(this).attr("referrerpolicy", "no-referrer");//博客图片引用 //}); if($("#content_div2").length>0) { if($("#content_div2").height()<700) { $(".qa-content-more").hide(); } } $(".article-content").autoIMG(); //$("#div_related_post").smartFloat();//相关文章浮动 // 当页面向下滑动 350px 出现"返回顶部" 按钮 $(window).scroll(function() { if($(window).scrollTop() > 350) { $('.side').css('display', 'block'); } else { $('.side').css('display', 'none'); } }); $("#viewall").click(function () { if(location.href.indexOf('?view=all')<0) { location.href = window.location.href+"?view=all"; } }); }); //DIV的智能浮动效果 </script> <!--底部--> <style type="text/css"> #hmtb-footer-bar { bottom: 0; } #hmtb-top-bar, #hmtb-footer-bar { width: 100%; margin: 0; padding: 0; text-align: center; position: fixed; z-index: 2147483647; overflow: none; opacity: 0.9; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; display: flex; float: left; align-items: center; justify-content: space-around; } #hmtb-top-bar, #hmtb-footer-bar { background: #1F334A; min-height: 50px; color: #FFF; } .txtType { color: #FFF; } .hmtb-btn-container a.hmtb-button { background: #00A9CE; border-color: #00A9CE #00A9CE #00A9CE; box-shadow: 0 1px 0 #00A9CE; text-shadow: 0 -1px 1px #00A9CE,1px 0 1px #00A9CE,0 1px 1px #00A9CE,-1px 0 1px #00A9CE; color: #FFF; font-weight: normal; } .txtType { margin: 0; padding: 0; vertical-align: middle; height: auto; color: #FFF; } .hmtb-btn-container a.hmtb-button { display: inline-block; text-decoration: none; font-size: 16px; line-height: 36px; height: 38px; margin: 0; padding: 0 15px 1px; cursor: pointer; border-width: 1px; border-style: solid; -webkit-appearance: none; border-radius: 3px; white-space: nowrap; box-sizing: border-box; } .hmtb-btn-container a.hmtb-button { background: #00A9CE; border-color: #00A9CE #00A9CE #00A9CE; box-shadow: 0 1px 0 #00A9CE; text-shadow: 0 -1px 1px #00A9CE, 1px 0 1px #00A9CE, 0 1px 1px #00A9CE, -1px 0 1px #00A9CE; color: #FFF; font-weight: normal; } .hmtb-btn-close{ cursor: pointer; display: inline-block; float:right; position: fixed; vertical-align:top; right:0px; } </style> <div id="hmtb-footer-bar" class="hidden-xs hidden-sm" style="left:0;"> <div class="hmtb-msg-container txtType" style="font-size:18px;">工作效率提升利器:撰写邮件、视频脚本、文案、翻译、写代码,写论文、绘画等轻松搞定,让你工作效率提升数倍。无需登录即可使用 <span style="color:red;">免费!免费!</span><a href="https://ai.itbaoku.cn" class="btn btn-link btn-sm" target="_blank" style="font-size: 18px;">👉去使用</a></div> <div id="hmtb-btn-close" class="hmtb-btn-close"><i title="关闭" style="font-size:20px;" class="glyphicon glyphicon-remove-circle"></i></div> </div> <script> $(function ($) { $("#hmtb-btn-close").bind('click', function (types, data, fn) { $("#hmtb-footer-bar").hide(); }); }); </script>   </body> </html>