1
https://codepen.io/anon/pen/QgaRpz?editors=1000HTML CSS代碼從代碼筆給
我複製這個codepen 的HTML CSS代碼複製，但它是不是給相同的輸出.the師灰色背景沒有快到我很困惑2相同的代碼怎麼能給出不同的輸出。
我的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 © none.</p>
</div>
</div>
</html>
請理解我剛開始學習HTML和取悅任何查詢，如果您和要問明白我question.See代碼筆鏈接，你會發現我的代碼輸出與代碼筆 –