第一個仿的網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>freecodecamp</title>
<style>
ul,li,div,a,span,img {
padding: 0;
margin: 0;
border: 0;
}
html, body, div, span, a, li, td, th {
font-family: "微軟雅黑","Lato",sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body {
width:100%;
margin:0;
padding:0;
}
.clear:after {
content: '';
visibility: hidden;
clear: both;
}
.nav .nav-header {
float:left;
}
.nav .nav-header a {
color: green;
}
.nav {
width:100%;
overflow: hidden;
position: fixed;
background-color: #FFFAFA;
height:2.7em;
padding:0 20px;
left: 0;
top: 0;
}
.nav .nav-main {
margin-top:10px;
}
.nav .nav-container {
width:400px;
float: right;
font-weight: bold;
margin-left:-100%;
}
.nav .nav-container ul {
overflow: hidden;
}
.nav .nav-container ul li {
float:left;
margin-right:20px;
}
.nav .nav-container ul li a {
color: #777;
}
.nav .nav-header {
font-weight:bold;
font-size:1.2em;
color:darkgreen;
margin-left:20px;
}
.nav .nav-container ul li:last-child a {
color:orange;
}
.cover-text {
margin-top: 40px;
background: url(images/cov-background.png) repeat-x;
padding: 20px;
text-align: center;
height:500px;
color:#FFF;
}
.cover-text h1 {
font-size:4em;
}
.cover-text p {
font-size:2em;
}
.cover-text a {
display: block;
margin:0 auto;
color: #FFF;
width:50%;
height:2em;
font-size:1.5em;
line-height:2em;
text-align: center;
background-color:orange;
border-radius:.3em;
}
.cover-text a:last-child {
background-color: transparent;
border:1px solid #FFF;
margin-top:20px;
}
.cover-text a:hover,.students-show a:hover {
background: darkorange;
}
.cover-text a:last-child:hover {
background-color:rgba(255,255,255,0.3)
}
.howitworks {
width: 90%;
margin: 0 auto;
text-align: center;
}
.howitworks p {
font-size:2.5em;
color:inherit;
}
.howitworks ul {
overflow: hidden;
display: inline-block;
}
.howitworks li {
float: left;
display: inline-block;
margin-right:50px;
}
.howitworks li p {
font-size:1.2em;
}
.course {
background: #f5faf7;
text-align: center;
overflow: hidden;
}
.course h3 {
font-weight:normal;
font-size:2em;
}
.course .course-tips {
margin-left:20px;
float: left;
}
.course .course-tips p {
text-align: right;
font-size:2em;
}
.course .course-cover {
width:50%;
overflow: hidden;
margin:0 auto;
}
.course .course-how {
width:40%;
font-size:1.2em;
float: right;
text-align:left;
}
.course .course-how span {
font-weight: bold;
}
.outclass-cover {
width:100%;
background: -o-linear-gradient(top, #FFF 20%, #F0FFF0 100%);
background: -ms-linear-gradient(top, #FFF 20%, #F0FFF0 100%);
background: linear-gradient(to bottom, #FFF 20%, #F0FFF0 100%);
}
.outclass-dev {
width:60%;
margin:0 auto;
overflow: hidden;
}
.outclass-dev h3 {
font-weight:normal;
font-size:1.5em;
text-align: center;
}
.outclass-dev .list-more {
float: left;
}
.outclass-dev .list-less {
float: right;
}
.outclass-dev li {
margin:1em 0;
}
.outclass-dev li a {
color: #4caf50;
font-size: 1.2em;;
font-weight:bold;
line-height:1.2em;
}
.skills {
height:400px;
background:url(images/skiis.png) no-repeat center 40px;
}
.skills h2 {
font-weight:normal;
text-align: center;
}
.infobox {
background-color: darkgreen;
padding:10px 0;
}
.infobox p {
margin:0 auto;
width:70%;
font-size:1.5em;
font-weight:bold;
color: #FFF;
}
.students-show {
width:100%;
margin:0 auto;
padding:20px 0;
}
.students-show h2 {
text-align: center;
font-size:1.2em;
}
.students-show ul li {
display: inline-block;
text-align: center;
width:33%;
}
.students-show ul li span {
display: block;
color: #777;
font-size:1em;
text-align: center;
}
.students-show h4 {
font-size:1.4em;
}
.students-show a {
display: block;
margin:0 auto;
text-align: center;
font-size: 1.4em;
color:#FFF;
line-height:2em;
height:2em;
width:40%;
background: orange;
border-radius:.2em;
}
.students-show a:last-child {
background-color:transparent ;
color: limegreen;
border:1px solid limegreen;
margin-top:20px;
}
.students-show a:last-child:hover{
background-color:rgba(255,255,240,0.3) ;
}
.footer {
background-color:#b6a57d;
}
.footer .cover-row {
overflow: hidden;
width:80%;
margin:0 auto;
}
.footer .row {
float: left;
margin-right:150px;
}
.footer span {
display: block;
font-size:1.2em;
font-weight:bold;
line-height:1em;
margin:20px 0;
color: #7b6c45;
}
</style>
</head>
<body>
<div class="nav clear">
<div class="nav-main">
<div class="nav-header">
<a>freecodecamp</a>
</div>
<div class="nav-container">
<ul class="nav-ul">
<li ><a href="#">首頁</a></li>
<li ><a href="#">課程</a></li>
<li ><a href="#">周邊</a></li>
<li ><a href="#">聊天室</a></li>
<li ><a href="#">關於</a></li>
<li ><a href="#">登陸註冊</a></li>
</ul>
</div>
</div>
</div>
<div class="cover-text">
<h1>開啓你的軟件工程師生涯</h1>
<p>Learn to code and help nonprofits</p>
<a href="#">開始闖關</a>
<a href="#">免費註冊登陸</a>
</div>
<div class="howitworks">
<p>
玩轉FreeCodeCamp
</p>
<ul>
<li><img src="images/how-together.png" width='200'><p>加入全球四十萬開發者社區</p></li>
<li><img src="images/how-book.png" width='195'><p>一塊兒編程闖關、完成挑戰</p></li>
<li><img src="images/how-bag.png" width='200'><p>構建解決現實問題的做品集</p></li>
<li><img src="images/how-hand.png" width='180'><p>幫助非盈利組織開發項目</p></li>
</ul>
</div>
<div class="course">
<h3>課程大綱</h3>
<div class="course-cover">
<div class="course-tips">
<p>前端開發(400小時)</p>
<p>數據可視化(400小時)</p>
<p>後端開發(400小時)</p>
<p>非盈利項目(800小時)</p>
<p>面試攻略(80小時)</p>
</div>
<div class="course-how">
<p>學完全部的課程能夠得到4個證書。 你的僱主能夠隨時在FCC上查詢到這些證書。<span>FCC上全部的東西都是免費的</span>，證書也不例外。咱們推薦按照順序來闖關，可是你也能夠自由跳躍。 前面三個證書每一個須要400小時， 最後一個證書須要800小時，來爲非盈利組織構建真實的項目。</p>
</div>
</div>
</div>
<div class="outclass-cover">
<div class="outclass-dev">
<div class="dev-container">
<h3>課外提高</h3>
<div class="list-more">
<ul>
<li><a href="#">Python向來以慢著稱，爲啥Instagram卻惟獨鍾愛它？</a></li>
<li><a href="#">Laravel締造者：我是如何高效工做的</a></li>
<li><a href="#">如何使用ValveResourceFormat提取Dota2遊戲內資源</a></li>
<li><a href="#">咱們如何使用HAProxy實現單機200萬SSL鏈接</a></li>
<li><a href="#">Mysql 高可用 InnoDB Cluster 多節點搭建過程</a></li>
<li><a href="#">Java 微服務框架新選擇：Spring 5</a></li>
<li><a href="#">Laravel源碼分析——看一次Http請求到響應</a></li>
</ul>
</div>
<div class="list-less">
<ul>
<li><a>Slack的TypeScript之路</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="skills">
<h2>技術棧</h2>
</div>
<div class="infobox">
<p><i>Free Code Camp 已經被證實是獲取編程工做的最有效路徑，事實上，沒人完成了全部課程，由於他們都在完成以前就找到了工做。</i></p>
</div>
<div class="students-show">
<div class="row">
<h2>學員案例</h2>
<div>
<ul>
<li><img src="images/woman.jpg" width="200px"><span>我是一個家庭婦女</span><span>經過FreeCodeCamp</span><span>我設計了不少簡潔優雅的界面</span><span>這讓我得到了一份網頁設計師的工做</span><h4>-- Meta Hirschl</h4></li>
<li><img src="images/black.jpg" width="200px"><span>我是一個退伍傷殘老兵</span><span>經過FreeCodeCamp</span><span>我製做了不少複雜交互的UI</span><span>這讓我得到了一份Web前端工程師的工做</span><h4>--Brian Grant</h4></li>
<li><img src="images/white.jpg" width="200px"><span>我是一個大叔</span><span>經過FreeCodeCamp</span><span>我開發了不少功能複雜並且穩定的API</span><span>這讓我得到了一份Web後端工程師工做</span><h4>-- Maxim Orlov</h4></li>
</ul>
</div>
<a href="#">開始闖關</a>
<a href="#">傾聽更多學員的心聲</a>
</div>
</div>
<div class="footer">
<div class="cover-row">
<div class="row"><span>freeCodeCamp</span><span>蘇州猿生態信息科技有限公司</span><span>蘇ICP備16029531號</span></div>
<div class="row"><span><a>關於咱們</a></span><span><a>常見問題(FAQs)</a></span><span><a>學術誠信守則</a></span></div>
<div class="row"><span><a>聯繫咱們</a></span><span><a>隱私策略</a></span><span><a>行爲準則</a></span><span><a>服務條款</a></span></div>
<div class="row"><span>社交媒體</span><span></span><span></span><span></span><span></span></div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
花了我一個上午的時間，終於仿完了。有些items太難找了，有的直接沒找，有的截圖。
相關文章
- 1. 第一個網頁
- 2. 我的第一個網頁
- 3. 個人第一個網頁
- 4. 第一個HTML網頁
- 5. 第一個ASP.net網頁（1）
- 6. 第一個ASP.net網頁（2）
- 7. 我的第一個完整的網頁
- 8. 自己的第一個網頁
- 9. 本身的第一個網頁
- 10. HTML5——我的第一個網頁
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 第一個網頁
- 2. 我的第一個網頁
- 3. 個人第一個網頁
- 4. 第一個HTML網頁
- 5. 第一個ASP.net網頁（1）
- 6. 第一個ASP.net網頁（2）
- 7. 我的第一個完整的網頁
- 8. 自己的第一個網頁
- 9. 本身的第一個網頁
- 10. HTML5——我的第一個網頁