从代码笔复制的HTML css代码_Html_Css

从代码笔复制的HTML css代码

html css

从代码笔复制的HTML css代码,html,css,Html,Css,我复制了这个代码笔的HTML CSS代码但是它并没有给出相同的输出。分割灰色背景什么都没有。我很困惑为什么两个相同的代码可以给出不同的输出我的HTML代码： <html> <style> h1 { color: #DC2827; font-size: 40px; font-weight: 700; } h3 { font-size: 30px; } h1, h2, h3 { font-family: 'Roboto Condensed', s

我复制了这个代码笔的HTML CSS代码但是它并没有给出相同的输出。分割灰色背景什么都没有。我很困惑为什么两个相同的代码可以给出不同的输出

我的HTML代码：

<html>

<style>
h1 {
  color: #DC2827;
  font-size: 40px;
  font-weight: 700;
}

h3 {
  font-size: 30px;
}

h1, h2, h3 {
  font-family: 'Roboto Condensed', sans-serif;
}

.title {
  margin-top: 20px;
}

.main-img {
  width: 100%;
}

ul {
  list-style: none;
}
.time {
  color: #DC2827;
  font-size: 20px;
}

li, p {
  font-size: 18px;
  margin: 10px;
}

.nav-tabs {
   text-align:center;
   float:none;
   display:inline-block;
   margin-bottom: 30px;
}


</style>
<div class="container">
  <div class="well title text-center">
    <h1 class="heading">Ruby On Rails</h1>
    <h2>A  Web Aplication Framework</h2>
    <p>Ruby on Rails, or simply Rails, is a web application framework written in Ruby under MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates
  the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention
  over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.</p>
  </div>

   <div class="well">
    <img src="https://udemy-images.udemy.com/course/750x422/531360_06c4.jpg" alt="Ruby on Rails Image" class="responsive main-img" />
  </div>


  <div class="well text-center">
    <h3>History</h3>
    <hr />

    <ul class="list-group">
      <li class="list-group-item"><span class="time">July 2004 - </span>David Heinemeier Hansson first released Rails as open source.</li>

      <li class="list-group-item"><span class="time">February 2005 - </span>Commit rights to the project has been shared.</li>
      <li class="list-group-item"><span class="time">August 2006 - </span>Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard".</li>
      <li class="list-group-item"><span class="time">March 2009 - </span>Rails version 2.3 was released.</li>
      <li class="list-group-item"><span class="time">December 2008 - </span>Ruby on Rails announced it would work with the Merb project to bring "the best ideas of Merb" into Rails 3, ending the "unnecessary duplication" across both communities. Merb was merged with Rails as part
        of the Rails 3.0 release.</li>
      <li class="list-group-item"><span class="time">August 2011 - </span>Rails 3.1 was released featuring Reversible Database Migrations, Asset Pipeline, Streaming, jQuery as default JavaScript library and newly introduced CoffeeScript and Sass into the stack.</li>
      <li class="list-group-item"><span class="time">January 2012 - </span>Rails 3.2 was released with a faster development mode and routing engine (also known as Journey engine), Automatic Query Explain and Tagged Logging. Rails 3.2.x is the last version that supports Ruby 1.8.7.
        Rails 3.2.12 supports Ruby 2.0</li>
      <li class="list-group-item"><span class="time">June 2013 - </span>Rails 4.0 was released introducing Russian Doll Caching, Turbolinks, Live Streaming as well as making Active Resource, Active Record Observer and other components optional by splitting them as gems.</li>
      <li class="list-group-item"><span class="time">April 2014 - </span>Rails 4.1 was released introducing Spring, Variants, Enums, Mailer previews, and secrets.yml.</li>
      <li class="list-group-item"><span class="time">December 2014 - </span>Rails 4.2 was released introducing Active Job, asynchronous emails, Adequate Record, Web Console, and foreign keys.</li>
      <li class="list-group-item"><span class="time">Early 2016 - </span>Rails 5.0 is set to release. Notable additions in Rails 5.0 include an option for an API-only application suitable for use as a backend to JavaScript or mobile applications. Also Action Cable for live features such as chat and notifications. </li>
    </ul>

    </div>

    <div class="well">
    <h3 class="text-center">Links</h3>
    <hr />
    <div class="text-center">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#wiki" aria-controls="wiki" role="tab" data-toggle="tab">Wiki</a></li>
        <li role="presentation"><a href="#web" aria-controls="web" role="tab" data-toggle="tab">Web</a></li>
        <li role="presentation"><a href="#api" aria-controls="api" role="tab" data-toggle="tab">API</a></li>
        <li role="presentation"><a href="#github" aria-controls="github" role="tab" data-toggle="tab">Github</a></li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="wiki"><a href="https://en.wikipedia.org/wiki/Ruby_on_Rails" target="_blank">https://en.wikipedia.org/wiki/Ruby_on_Rails</a></div>
        <div role="tabpanel" class="tab-pane" id="web"><a href="http://rubyonrails.org/" target="_blank">http://rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="api"><a href="http://api.rubyonrails.org/" target="_blank">http://api.rubyonrails.org/</a></div>
        <div role="tabpanel" class="tab-pane" id="github"><a href="https://github.com/rails/rails" target="_blank">https://github.com/rails/rails</a></div>
      </div>

    </div>
  </div>

  <div class="well text-center">
    <p> Copyrights &copy; none.</p>
  </div>
</div>
</html>


h1{
颜色：#DC2827；
字体大小：40px；
字号：700；
}
h3{
字体大小：30px；
}
h1，h2，h3{
字体系列：“Roboto Condensed”，无衬线；
}
.头衔{
边缘顶部：20px；
}
.主img{
宽度：100%；
}
保险商实验室{
列表样式：无；
}
.时间{
颜色：#DC2827；
字体大小：20px；
}
李，p{
字号：18px；
利润率：10px；
}
.导航标签{
文本对齐：居中；
浮动：无；
显示：内联块；
边缘底部：30px；
}
RubyonRails
Web应用框架
RubyonRails，简称Rails，是一个在MIT许可下用Ruby编写的web应用程序框架。Rails是一个模型-视图-控制器（MVC）框架，为数据库、web服务和网页提供默认结构。它鼓励和促进
使用JSON或XML等web标准进行数据传输，使用HTML、CSS和JavaScript进行显示和用户界面设计。除了MVC之外，Rails还强调使用其他著名的软件工程模式和范例，包括约定
过度配置（CoC），不要重复自己（干）和活动记录模式
历史


2004年7月-David Heinemeier Hansson首次将Rails作为开源发布
2005年2月-已共享项目的提交权限
2006年8月-苹果公司宣布将推出搭载Mac OS X v10.5“Leopard”的Ruby on Rails
2009年3月-Rails版本2.3发布
2008年12月-Ruby on Rails宣布将与Merb项目合作，将“Merb的最佳想法”引入Rails 3，结束两个社区之间的“不必要的重复”。Merb作为Rails的一部分被合并
Rails 3.0版本的一部分
2011年8月-Rails 3.1发布，其特点是可逆数据库迁移、资产管道、流媒体、jQuery作为默认JavaScript库，以及在堆栈中新引入的CoffeeScript和Sass
2012年1月-Rails 3.2发布时采用了更快的开发模式和路由引擎（也称为旅程引擎）、自动查询解释和标记日志。Rails 3.2.x是支持Ruby 1.8.7的最新版本。
Rails 3.2.12支持Ruby 2.0
2013年6月-Rails 4.0发布，引入了俄罗斯玩偶缓存、TurboLink、实时流媒体，并将活动资源、活动记录观察者和其他组件拆分为gem，使之成为可选组件
2014年4月-Rails 4.1发布，引入了Spring、变体、枚举、Mailer预览和secrets.yml
2014年12月-Rails 4.2发布，引入了活动作业、异步电子邮件、充分记录、Web控制台和外键
2016年初-Rails 5.0即将发布。Rails 5.0中值得注意的新增内容包括一个仅适用于API的应用程序选项，该应用程序适合用作JavaScript或移动应用程序的后端。此外，还可通过Action Cable提供聊天和通知等实时功能

链接







版权与复制；没有

您需要将引导外部库注入到代码中

将此链接添加到您的

您需要将引导外部库注入到代码中

将此链接添加到您的

实际上，您需要从代码笔中包含css和js。

您需要将引导外部库注入到代码中

将此链接添加到您的

   <link rel="stylesheet" 





href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

这是给你的

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

使用引导：

没有引导：

并添加jquery

您需要将引导外部库注入到代码中

将此链接添加到您的

   <link rel="stylesheet" 





href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

这是给你的

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

使用引导：

没有引导：

以及添加jquery

请理解我刚刚开始学习HTML，如果您有任何疑问，请询问以理解我的问题。请查看代码笔链接，您将注意到我的代码输出和代码笔上的输出之间的差异请理解我刚开始学习HTML，如果您有任何疑问，请询问想要了解我的问题，请看代码笔链接，你会注意到我的代码输出和代码笔上的输出之间的差异这里没有JS，我是说，当我将这些html css代码复制到本地记事本并在浏览器上运行时，它会给出不同的输出。这里没有JS，我是说，当我将这些html css代码复制到我的本地记事本并在浏览器上运行它会提供不同的输出，但是先生，在那支笔中，他没有添加任何引导，它仍然可以工作？在你的代码笔中，单击“设置”，然后单击“css”选项卡，你会看到在“添加外部CSSThnak”下添加的引导。你知道它完成了吗？但是最后一个问题仍然存在，你看到有4个浮动按钮当我点击其他按钮时，文本不会改变，你只需要将jquery脚本添加到你的身体中，这将解决问题，但是先生，在那支笔里，他会

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>