资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css+html 扁平化博客

css+html 扁平化博客

CoderBear / 1600人阅读

摘要：效果图代码页头的小窝首页哈哈呵呵呼呼的小窝了解我更多去漠河看星星吧狗子将来要养狗子带它疯跑肥猫希望我的猫咪稍微安静一会大吉大利今晚吃鸡

效果图

代码

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

            
将来要养狗子 带它疯跑

            
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;
}
云服务器 GPU云服务器 扁平化 html个性博客 博客静态html 博客模板html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112865.html

相关文章

  • 优秀文章收藏（慢慢消化）持续更新~

    摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0

  • 浅谈CDN、SEO、XSS、CSRF

    摘要：要钱的简单理解百度的广告就是不用钱的自己配置提高搜索引擎的权重是一种技术，主要是用于提高网站浏览量而做的优化手段为什么需要我们搜一下微信公众号发现排名是有先后的，博客园都是靠前的。 CDN 什么是CDN 初学Web开发的时候，多多少少都会听过这个名词->CDN。 CDN在我没接触之前，它给我的印象是用来优化网络请求的，我第一次用到CDN的时候是在找JS文件时。当时找不到相对应的JS文件...

    asoren 评论0 收藏0

  • 浅谈CDN、SEO、XSS、CSRF

    摘要：要钱的简单理解百度的广告就是不用钱的自己配置提高搜索引擎的权重是一种技术，主要是用于提高网站浏览量而做的优化手段为什么需要我们搜一下微信公众号发现排名是有先后的，博客园都是靠前的。 CDN 什么是CDN 初学Web开发的时候，多多少少都会听过这个名词->CDN。 CDN在我没接触之前，它给我的印象是用来优化网络请求的，我第一次用到CDN的时候是在找JS文件时。当时找不到相对应的JS文件...

    番茄西红柿 评论0 收藏0

  • 腾讯新闻中心首页改版啦

    摘要：本人博客正式地址腾讯新闻中心的首页改版啦，欢迎访问。这次新闻首页的改版，是从零开始写的一个新页面。除要闻页卡外，其他页卡的新闻均是通过的方式获取的。总结新页面上线后，还会有很多后续的功能需要添加。 本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

    MadPecker 评论0 收藏0

  • 腾讯新闻中心首页改版啦

    摘要：本人博客正式地址腾讯新闻中心的首页改版啦，欢迎访问。这次新闻首页的改版，是从零开始写的一个新页面。除要闻页卡外，其他页卡的新闻均是通过的方式获取的。总结新页面上线后，还会有很多后续的功能需要添加。 本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

    SillyMonkey 评论0 收藏0

发表评论

登陆后可评论

0条评论

CoderBear

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<