成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

css+html 扁平化博客

CoderBear / 1613人閱讀

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

效果圖

代碼

html





  
  
  
  
  
  
  

  Document



  

    

      
      
      
    

    

      

        

          
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 狗子

            
將來(lái)要養(yǎng)狗子 帶它瘋跑

            
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 肥貓

            
希望我的貓咪稍微安靜一會(huì)

            
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

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;
  /* 如果不設(shè)置inline-block,a元素的height無(wú)法設(shè)置*/
  height: 40px;
  /* 設(shè)置此屬性是為了鏈接可點(diǎn)擊的地方不局限于文字*/
  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;
  /*刪除默認(rèn)border邊框*/
  background: #1b89d2;
  border-radius: 6px;
  padding: 14px 40px;
}

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

/*header部分結(jié)束*/

/*green部分*/

.green-section {
  height: 450px;
  /*高度可以不設(shè)置 由子內(nèi)容撐開(kāi)高度*/
  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部分結(jié)束   gray部分開(kāi)始*/

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

.pre-view>div {
  /*pre-view下第一層子元素左浮動(dòng)*/
  float: left;
  font-size: 0;
  /*設(shè)置為0 是為了解決出現(xiàn)空隙問(wèn)題*/
}

.pre-view:after {
  /*清除浮動(dòng)*/
  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%;
  /*可以讓圖片自適應(yīng)寬度*/
}

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

/*gary section結(jié)束， purple section 開(kāi)始*/

.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結(jié)束， footer開(kāi)始*/

.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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112865.html

相關(guān)文章

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類(lèi)面試問(wèn)題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評(píng)論0 收藏0

  • 淺談CDN、SEO、XSS、CSRF

    摘要：要錢(qián)的簡(jiǎn)單理解百度的廣告就是不用錢(qián)的自己配置提高搜索引擎的權(quán)重是一種技術(shù)，主要是用于提高網(wǎng)站瀏覽量而做的優(yōu)化手段為什么需要我們搜一下微信公眾號(hào)發(fā)現(xiàn)排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學(xué)Web開(kāi)發(fā)的時(shí)候，多多少少都會(huì)聽(tīng)過(guò)這個(gè)名詞->CDN。 CDN在我沒(méi)接觸之前，它給我的印象是用來(lái)優(yōu)化網(wǎng)絡(luò)請(qǐng)求的，我第一次用到CDN的時(shí)候是在找JS文件時(shí)。當(dāng)時(shí)找不到相對(duì)應(yīng)的JS文件...

    asoren 評(píng)論0 收藏0

  • 淺談CDN、SEO、XSS、CSRF

    摘要：要錢(qián)的簡(jiǎn)單理解百度的廣告就是不用錢(qián)的自己配置提高搜索引擎的權(quán)重是一種技術(shù)，主要是用于提高網(wǎng)站瀏覽量而做的優(yōu)化手段為什么需要我們搜一下微信公眾號(hào)發(fā)現(xiàn)排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學(xué)Web開(kāi)發(fā)的時(shí)候，多多少少都會(huì)聽(tīng)過(guò)這個(gè)名詞->CDN。 CDN在我沒(méi)接觸之前，它給我的印象是用來(lái)優(yōu)化網(wǎng)絡(luò)請(qǐng)求的，我第一次用到CDN的時(shí)候是在找JS文件時(shí)。當(dāng)時(shí)找不到相對(duì)應(yīng)的JS文件...

    番茄西紅柿 評(píng)論0 收藏0

  • 騰訊新聞中心首頁(yè)改版啦

    摘要：本人博客正式地址騰訊新聞中心的首頁(yè)改版啦，歡迎訪(fǎng)問(wèn)。這次新聞首頁(yè)的改版，是從零開(kāi)始寫(xiě)的一個(gè)新頁(yè)面。除要聞頁(yè)卡外，其他頁(yè)卡的新聞均是通過(guò)的方式獲取的?？偨Y(jié)新頁(yè)面上線(xiàn)后，還會(huì)有很多后續(xù)的功能需要添加。 本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

    MadPecker 評(píng)論0 收藏0

  • 騰訊新聞中心首頁(yè)改版啦

    摘要：本人博客正式地址騰訊新聞中心的首頁(yè)改版啦，歡迎訪(fǎng)問(wèn)。這次新聞首頁(yè)的改版，是從零開(kāi)始寫(xiě)的一個(gè)新頁(yè)面。除要聞頁(yè)卡外，其他頁(yè)卡的新聞均是通過(guò)的方式獲取的?？偨Y(jié)新頁(yè)面上線(xiàn)后，還會(huì)有很多后續(xù)的功能需要添加。 本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

    SillyMonkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

CoderBear

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<