完整代碼有嗎
發現老師視頻，前一分鐘和后一分鐘的? css 代碼寫的不一樣，? 難道是剪了嗎？
這樣對學者，體驗不好，不知不覺就把樣式代碼改了，視頻當中也沒有說明
有沒有完整的代碼？
火柴鍋
2018-03-15
1 回答
舉報
0/150
提交
取消
2018-03-18
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>博客</title>
? ?<script src="jquery-3.3.1.min.js"></script>
? ?<script src="js01.js"></script>
? ?<link rel="stylesheet" href="css1.css">
</head>
<body>
<div class="main_wrapper">
? ?<header >
? ? ? ?<nav>
? ? ? ? ? ?<div class="logo"><a href="#">我的博客</a></div>
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li><a href="#" class="active">鏈接1</a></li>
? ? ? ? ? ? ? ?<li><a href="#">鏈接2</a></li>
? ? ? ? ? ? ? ?<li><a href="#">鏈接3</a></li>
? ? ? ? ? ? ? ?<li><a href="#">鏈接4</a></li>
? ? ? ? ? ?</ul>
? ? ? ?</nav>
? ? ? ?<div id="banner">
? ? ? ? ? ?<div class="inner">
? ? ? ? ? ? ? ? <h1>我的博客</h1>
? ? ? ? ? ? ? ? <p>你可以沒有房，
? ? ? ? ? ? ? ? ? ? 你可以沒有車，但是你騷啊</p>
? ? ? ? ? ? ? ?<button>了解我</button>
? ? ? ? ? ? ? ?<div class="more">
更多
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</header>
? ?<div class="content">
? ? ? ?<section class="green-section">
? ? ? ? ? ?<div class="wrapper">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<h2>一個標題</h2>
? ? ? ? ? ? ? ? ? ?<div class="hr"></div>
? ? ? ? ? ? ? ? ? ?<p class="sub-heading">我愛學習，學習使我快樂</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="icon-group">
? ? ? ? ? ? ? ? ? ?<span class="icon">item1</span>
? ? ? ? ? ? ? ? ? ?<span class="icon">item2</span>
? ? ? ? ? ? ? ? ? ?<span class="icon">item3</span>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</section>
? ? ? ?<section class="grey-section">
? ? ? ? ? ?<div class="article-preview">
? ? ? ? ? ? ? ?<div class="img-section">
? ? ? ? ? ? ? ? ? ?<img src="1.jpg" alt="">
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="text-section">
? ? ? ? ? ? ? ? ? ?<h2>又來一個標題</h2>
? ? ? ? ? ? ? ? ? ?<div class="sub-heading">附標題</div>
? ? ? ? ? ? ? ? ? ?<p>
科比，凌晨四點半的洛杉磯，黑曼巴精神！
? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="article-preview">
? ? ? ? ? ? ? ?<div class="text-section">
? ? ? ? ? ? ? ? ? ?<h2>又來一個標題</h2>
? ? ? ? ? ? ? ? ? ?<div class="sub-heading">附標題</div>
? ? ? ? ? ? ? ? ? ?<p>
科比，凌晨四點半的洛杉磯，黑曼巴精神！
? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="img-section">
? ? ? ? ? ? ? ? ? ?<img src="1.jpg" alt="">
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</section>
? ? ? ?<section class="purple-section">
? ? ? ? ? ?<div class="heading_wrapper">
? ? ? ? ? ? ? ?<h3>簡介</h3>
? ? ? ? ? ? ? ?<div class="hr"></div>
? ? ? ? ? ? ? ?<div class="card_group clearfix">
? ? ? ? ? ? ? ? ? ? <div class="card">
? ? ? ? ? ? ? ? ? ? ? ? <h3>自我介紹</h3>
? ? ? ? ? ? ? ? ? ? ? ? <p> ?本人綜合素質佳，能夠吃苦耐勞，忠誠穩重堅守誠信正直原則，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?勇于挑戰自我開發自身潛力；做一個主動的人，工作積極熱情，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?為了自己的目標為了完成自己想要的事情拼命投入力量；
? ? ? ? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<div class="card">
? ? ? ? ? ? ? ? ? ? ? ?<h3>自我介紹</h3>
? ? ? ? ? ? ? ? ? ? ? ?<p> ?本人綜合素質佳，能夠吃苦耐勞，忠誠穩重堅守誠信正直原則，
? ? ? ? ? ? ? ? ? ? ? ? ? ?勇于挑戰自我開發自身潛力；做一個主動的人，工作積極熱情，
? ? ? ? ? ? ? ? ? ? ? ? ? ?為了自己的目標為了完成自己想要的事情拼命投入力量；
? ? ? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<div class="card">
? ? ? ? ? ? ? ? ? ? ? ?<h3>自我介紹</h3>
? ? ? ? ? ? ? ? ? ? ? ?<p> ?本人綜合素質佳，能夠吃苦耐勞，忠誠穩重堅守誠信正直原則，
? ? ? ? ? ? ? ? ? ? ? ? ? ?勇于挑戰自我開發自身潛力；做一個主動的人，工作積極熱情，
? ? ? ? ? ? ? ? ? ? ? ? ? ?為了自己的目標為了完成自己想要的事情拼命投入力量；
? ? ? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<div class="card">
? ? ? ? ? ? ? ? ? ? ? ?<h3>自我介紹</h3>
? ? ? ? ? ? ? ? ? ? ? ?<p> ?本人綜合素質佳，能夠吃苦耐勞，忠誠穩重堅守誠信正直原則，
? ? ? ? ? ? ? ? ? ? ? ? ? ?勇于挑戰自我開發自身潛力；做一個主動的人，工作積極熱情，
? ? ? ? ? ? ? ? ? ? ? ? ? ?為了自己的目標為了完成自己想要的事情拼命投入力量；
? ? ? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</section>
? ?</div>
? ?<footer>
? ? ? ?<ul class="share-group">
? ? ? ? ? ?<li>item1</li>
? ? ? ? ? ?<li>item2</li>
? ? ? ? ? ?<li>item3</li>
? ? ? ? ? ?<li>item4</li>
? ? ? ?</ul>
? ? ? ?<div class="copy">
© 胡浩
? ? ? ?</div>
? ?</footer>
</div>
</body>
</html>
/********************************************************************************************/
nav{
? ?background:transparent;
? ?height:50px;
}
.clearfix:after{
? ?content: '';
? ?display: block;
? ?clear: both;
}
p{
? ?font-size: 18px;
? ?letter-spacing: 1px;
}
#banner{
? ?background:transparent;
? ?height:700px;
? ?color: #fff;
}
nav ul{
? ?list-style: none;
? ?margin: 0;
? ?float: right;
}
nav ul li,nav .logo{
? ?display: inline-block;
? ?line-height:50px;
? ?height:50px;
? ?margin-right:20px;
? ?color: #fff;
}
nav ul li a{
? ?line-height:inherit;
? ?text-decoration: none;
? ?display:inline-block;
? ?height:inherit;
? ?color:#fff;
}
nav ul li.logo{
? ?float: left;
? ?padding:10px;
}
#banner .inner{
? ?max-width: 300px;
? ?text-align: center;
? ?margin: 0 auto;
? ?position: relative;
? ?top:160px;
}
#banner .inner h1{
? ?margin: 0;
}
button{
? ?border:none;
? ?background-color: #333;
? ?color:#eee;
? ?padding:14px 40px;
}
#banner .inner .more{
? ?margin-top:320px;
}
.logo{
? ?font-size: 20px;
? ?font-weight:700;
? ?letter-spacing: 2px;
}
.logo a{
? ?color:#fff;
? ?text-decoration: none;
}
h2{
? ?font-size:30px;
}
h3{
? ?font-size: 24px;
}
#main-btn{
? ?padding: 14px 28px;
? ?font-size:20px;
? ?letter-spacing: 4px;
? ?border-radius: 6px;
? ?background:#18a;
}
.green-section{
? ?text-align: center;
? ?background: #089db0;
? ?color: #fff;
? ?padding:100px 0;
}
.wrapper{
? ?max-width:1080px;
? ?margin:0 auto;
}
.hr{
? ?width:100%;
? ?height:2px;
? ?margin:20px auto;
}
.green-section .hr{
? ?background: #078494;
? ?width:60%;
}
.green-section .icon-group .icon{
? ?display: inline-block;
? ?width:80px;
? ?height:80px;
? ?border:1px solid #0d6f7c;
? ?-webkit-transform: rotate(40deg);
? ?-moz-transform: rotate(40deg);
? ?-ms-transform: rotate(40deg);
? ?-o-transform: rotate(40deg);
? ?transform: rotate(40deg);
? ?margin:20px;
}
.grey-section{
? ?background: #252f34;
? ?color:#fff;
}
.grey-section .img-section{
? ?width: 45%;
}
.img-section img{
? ?width: 100%;
}
.grey-section .text-section{
? ?width:55%;
}
.icon-group{
? ?margin-top: 60px;
}
.article-preview >div{
? ?float: left;
}
.article-preview:after{
? ?content: '';
? ?display: block;
? ?clear: both;
}
.text-section{
? ?position:relative;
? ?top:70px;
? ?left: 70px;
}
.text-section h2{
? ?margin-top: 20px;
}
.text-section .sub-heading{
? ?font-size:22px;
? ?margin-top:0;
}
.text-section p{
? ?font-size: 18px;
? ?letter-spacing: 2px;
}
.text-section > *{
? ?max-width: 90%;
}
.sub-heading{
? ?line-height: 30px;
? ?margin:30px 0;
}
.purple-section{
? ?padding: 80px;
? ?background-color:#078494;
? ?color:#fff;
}
.purple-section .heading_wrapper{
? ?text-align: center;
}
.purple-section .hr{
? ?background: #373259;
? ?width:60%;
}
.card{
? ?float: left;
? ?width: 50%;
? ?min-height: 300px;
? ?padding:50px;
? ?-webkit-box-sizing: border-box;
? ?-moz-box-sizing: border-box;
? ?box-sizing: border-box;
? ?/*border: 1px solid white;*/
}
.card:first-child{
? ?background: rgba(0,0,0,0.04);
}
.card:nth-child(2){
? ?background: rgba(0,0,0,0.08);
}
.card:nth-child(3){
? ?background: rgba(0,0,0,0.12);
}
.card:nth-child(4){
? ?background: rgba(0,0,0,0.16);
}
footer{
? ?background: #333;
? ?color:#fff;
? ?min-height: 200px;
? ?text-align: center;
}
ul{
? ?margin: 0;
}
ul.share-group{
? ?margin: 0 auto;
? ?display: block;
? ?width: 1080px;
? ?padding: 50px;
}
.share-group li{
? ?display: inline-block;
? ?padding: 10px;
}
.copy{
? ?padding-bottom: 20px
}
.main_wrapper{
? ?background: #444 url("4.jpg");
? ?background-attachment:fixed;
? ?background-repeat: no-repeat;
? ?-webkit-background-size: cover;
? ?background-size: cover;
}