css+html 扁平化博客

效果图

图片描述

代码

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="reset.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
  <link href="bootstrap.css" rel="stylesheet">
  <link href="Font-Awesome-master/css/font-awesome.min.css" rel="stylesheet">

  <title>Document</title>
</head>

<body>
  <div class="main-wraper">
    <div class="header">
      <!--页头-->
      <nav>
        <div class="logo"><a href="">Sea的小窝</a></div>
        <ul>
          <li><a href="" class="active">首页</a></li>
          <li><a href="">哈哈</a></li>
          <li><a href="">呵呵</a></li>
          <li><a href="">呼呼</a></li>
        </ul>
      </nav>
      <div class="banner">
        <div class="wraper">
          <h1>Sea的小窝</h1>
          <p class="sub-header">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <button>了解我</button>
          <div class="more">
            更多</br>
            <i class="fa fa-angle-double-down"></i>
            </-->
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <section class="green-section">
        <div class="wraper">
          <h2>Do it yourself</h2>
          <div class="hr"></div>
          <p class="sub-header">Lorem ipsum dolor sit amet, co et dolore ex ea commolla parm.</p>
          <div class="icon-group">
            <span class="icon"><i class="fa fa-diamond fa-2x"></i></span>
            <span class="icon"><i class="fa fa-heart fa-2x"></i></span>
            <span class="icon"><i class="fa fa-cube fa-2x"></i></span>
          </div>
        </div>
      </section>
      <section class="gray-section">
        <div class="pre-view">
          <div class="img-section"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-535632.jpg"></div>
          <div class="text-section">
            <h2>Stars Stars Stars !</h2>
            <div class="sub-header">去漠河看星星吧</div>
            <p>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.</p>
          </div>
        </div>

        <div class="pre-view">
          <div class="text-section">
            <h2>I love 狗子</h2>
            <div class="sub-header">将来要养狗子 带它疯跑</div>
            <p>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.</p>
          </div>
          <div class="img-section"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-590314.jpg"></div>
        </div>

        <div class="pre-view">
          <div class="img-section"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-597311.jpg"></div>
          <div class="text-section">
            <h2>I love 肥猫</h2>
            <div class="sub-header">希望我的猫咪稍微安静一会</div>
            <p>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.</p>
          </div>
        </div>
      </section>
      <section class="purple-section">
        <div class="wraper">
          <div class="head-wraper">
            <h2>welcome</h2>
            <div class="hr"></div>
            <p>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.</p>
          </div>
          <div class="card-group clear">
            <div class="card">
              <h2>大吉</h2>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 </div>
            <div class="card">
              <h2>大利</h2>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 </div>
            <div class="card">
              <h2>今晚</h2>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 </div>
            <div class="card">
              <h2>吃鸡</h2>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 </div>
          </div>
        </div>
      </section>
    </div>

    <div class="footer">
      <ul class="icon-group">
        <li><i class="fa fa-facebook-square fa-1x"></i></li>
        <li><i class="fa fa-twitter-square"></i></li>
        <li><i class="fa fa-google"></i></li>
        <li><i class="fa fa-github"></i></li>
      </ul>
      <div class="copy"><i class="fa fa-copyright"></i>不扶老太太就服你 - 2017</div>
    </div>
  </div>
</body>

</html>

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

css+html 扁平化博客

orangecat00

引用和评论

整理

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式