摘要：效果圖代碼頁頭的小窩首頁哈哈呵呵呼呼的小窩了解我更多去漠河看星星吧狗子將來要養狗子帶它瘋跑肥貓希望我的貓咪稍微安靜一會大吉大利今晚吃雞

效果圖

代碼

html

  
  
  
  
  
  
  

  



  

    

      
      
      

        

          
Sea的小窩
          
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          了解我
          

            更多

            
            
          
        
      
    
    

      

        

          
Do it yourself
          

          
Lorem ipsum dolor sit amet, co et dolore ex ea commolla parm.
          

            
            
            
          
        
      
      

        

          

          

            
Stars Stars Stars !
            
去漠河看星星吧
            
Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.
          
        

        

          

            
I love 狗子
            
將來要養狗子 帶它瘋跑
            
Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.
          
          

        

        

          

          

            
I love 肥貓
            
希望我的貓咪稍微安靜一會
            
Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.
          
        
      
      

        

          

            
welcome
            

            
Lorem ipsum ut labore et lore magna aliqua. Ut laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor deserunt mollit anim id est laborum.
          
          

            

              
大吉
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si 
            

              
大利
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si 
            

              
今晚
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si 
            

              
吃雞
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si 
          
        
      
    

    

      

        

        

        

        

      
      
不扶老太太就服你 - 2017
    
  

css

* {
  color: #fff;
  font-size: 14px;
}

p {
  font-size: 18px;
  letter-spacing: 1px;
}

.main-wraper {
  background: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-595281.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/*header部分*/

.header {
  background: rgba(0, 0, 0, 0.2); //添加不透明度，使背景暗一些
}

nav, .banner {
  background: transparent;
}

nav {
  height: 50px;
  line-height: 50px;
  /*height=line-height文字垂直居中*/
  background: inherit;
}

nav .logo {
  float: left;
  margin-left: 20px;
}

nav .logo a {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

nav ul {
  float: right;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav .logo a, nav ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  /* 如果不設置inline-block,a元素的height無法設置*/
  height: 40px;
  /* 設置此屬性是為了鏈接可點擊的地方不局限于文字*/
  line-height: 40px;
  /* 在高度為40px垂直居中*/
}

nav .logo a:hover, nav ul li a:hover {
  color: #fff;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}

.banner {
  height: 700px;
}

.banner .wraper {
  max-width: 280px;
  /*max-width,容器*/
  text-align: center;
  position: relative;
  top: 200px;
  margin: 0 auto;
}

.banner h1 {
  padding: 15px;
  margin-bottom: 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.sub-header {
  font-size: 18px;
  margin: 20px 0;
  letter-spacing: 1px;
}

.banner .sub-header {
  font-size: 16px;
  line-height: 30px;
  padding: 10px 0;
}

.banner button {
  border: none;
  /*刪除默認border邊框*/
  background: #1b89d2;
  border-radius: 6px;
  padding: 14px 40px;
}

.banner .more {
  margin-top: 200px;
}

/*header部分結束*/

/*green部分*/

.green-section {
  height: 450px;
  /*高度可以不設置 由子內容撐開高度*/
  background: #2e998f;
  padding: 100px 0;
}

.green-section .wraper {
  max-width: 1080px;
  /*max-width，容器*/
  margin: 0 auto;
  text-align: center;
}

.hr {
  background: #358460f0;
  height: 1px;
  width: 60%;
  margin: 10px auto;
}

.green-section .icon-group .icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  transform: rotate(45deg);
  border: 2px solid #05867a;
  margin: 20px;
  padding: 15px;
}

.green-section .icon-group .icon i {
  transform: rotate(-45deg);
}

/*green部分結束   gray部分開始*/

.gray-section {
  background: #252f34;
}

.pre-view>div {
  /*pre-view下第一層子元素左浮動*/
  float: left;
  font-size: 0;
  /*設置為0 是為了解決出現空隙問題*/
}

.pre-view:after {
  /*清除浮動*/
  clear: both;
  content: "";
  display: block;
}

.text-section {
  width: 70%;
  /*text+img section寬度=100%=gray-section*/
  padding-left: 40px;
  padding-top: 30px;
  box-sizing: border-box;
}

.text-section>* {
  max-width: 90%;
  /*防止文字溢出*/
}

.img-section {
  width: 30%;
}

.img-section img {
  width: 100%;
  /*可以讓圖片自適應寬度*/
}

.pre-view:nth-child(odd) {
  background-color: rgba(0, 255, 255, 0.01);
}

/*gary section結束， purple section 開始*/

.purple-section {
  padding: 80px;
  background: #3f3965;
}

.purple-section .wraper {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

.wraper .head-wraper .hr {
  background: #fff;
}

.head-wraper p {
  margin: 20px 0;
}

.purple-section .card-group .card {
  width: 50%;
  float: left;
  padding: 50px;
  box-sizing: border-box;
}

.card-group .card h2 {
  font-size: 20px;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.card:first-child {
  background-color: rgba(0, 0, 0, 0.04);
}

.card:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.08);
}

.card:nth-child(3) {
  background-color: rgba(0, 0, 0, 0.12);
}

.card:nth-child(4) {
  background-color: rgba(0, 0, 0, 0.16);
}

/*purple section結束， footer開始*/

.footer {
  background: #333;
  min-height: 200px;
  text-align: center;
}

.footer .icon-group {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px;
}

.footer .icon-group li {
  display: inline-block;
  padding: 10px;
}