HTML+css项目

　　　　首先我们先要下载一些图片11:30:4511:30:47在pexels中下载，然后创建项目新建页面，现创建一个header然后创建nav取id名为navbar，添加一个div盒子,盒子里面添加一个h1标签，里面添加超链接，然后添加样式

/* reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* main styling */
html,body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7em;
}
a {
  color: #333;
  text-decoration: none;
}
h1,h2,h3 {
  padding-bottom: 20px;
}
p{
  margin: 10px 0;
}
/* utility classes */
.container {
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  padding: 0 20px;
}
 
/* navbar */
#navbar{
  background: #333;
  color: #fff;
  overflow: auto;
}
#navbar a{
  color: #fff;
}
#navbar ul{
  float: right;
  list-style: none;
}
#navbar ul li{
  float: left;
}
#navbar ul li a{
  display: block;
  padding: 20px;
  text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.cueernt{
  background: #444;
  color: #f7c08a; 
}

　　然后添加基本的一些内容，插入一些图片　　

<header>
    <nav id="navbar">
      <div class="container">
        <h1><a href="/html/index.html">米修在线</a></h1>
        <ul>
          <li><a class=" cueernt" href="/html/index.html">首页</a></li>
          <li><a href="/html/about.html">关于我们</a></li>
          <li><a href="/html/contaot.html">联系我们</a></li>
        </ul>
      </div>
    </nav>
    <div id="showcase">
      <div class="container">
        <div class="showcase-content">
          <h1>欢迎来到<span class="text-primary">米修在线</span></h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore exercitationem laborum a neque, ut explicabo ullam iure fuga reprehenderit suscipit.</p>
          <a class="btn" href="/html/about.html">关于我们</a>
        </div>
      </div>
    </div>
  </header>

　　什么是响应式布局：

　　　　响应式布局就是根据移动端和pc端根据屏幕大小来展示样式。

　　　　响应式布局最重要的应该就是媒体查询他是在看如果屏幕小于多少px那么网站就会变成什么样子根据屏幕大小来决定位置

　　什么是弹性布局：

　　　　弹性布局就是根据屏幕尺寸来改变位置

　　　　弹性布局最重要的就是display: flex;没有他就不能用

　　div空格p指的是div中所有的p标签都使用此样式

　　div>p指的是div的子元素p标签使用此样式

　　div+p指的是div的兄弟元素p标签使用此样式

　　【】可以根据属性的不同来设置哪一个标签使用此样式

/* direct child */
    div>p {
      background: #ddd;
    }
 
    /* directly after */
    div+p {
      background: #333;
      color: #fff;
    }
 
    /* by attribute */
    a[target] {
      background: #ff0000;
      color: #fff;
    }
 
    input[type="text"],
    input[type="email"] {
      width: 100%;
      margin-bottom: 5px;
    }

　　first-child选择器选择的是子元素的第一个

　　last-child选择器选择的是子元素的最后一个

　　nth-child()选择器()里面是几选择的就是第几个（）里面数后加个n就是选择几和几的倍数还可以在()里面加几就是加的那个数和加的那个数一直加原来的数都变

　　nth-child(odd)选择器就是选择所有的奇数

　　nth-child(even)选择器选择的是所有的偶数

　　:after是伪元素不是真正的元素但是可以设置样式可以再文档中添加文本他是在后面添加文本

　　:before是伪元素不是真正的元素但是可以设置样式可以再文档中添加文本他是在前面添加文本

　　box-shadow是为可以调阴影可以调试模糊阴影还可以调圆润程度

/* first-child */
   li:first-child {
     background: red;
   }
 
   /* last-child */
   li:last-child {
     background: red;
   }
 
   /* 选择第三个li */
   li:nth-child(3) {
     background: red;
   }
 
   /* 选择三的倍数 */
   li:nth-child(3n) {
     background: red;
   }
 
   /* 从第七个开始按3的倍数 */
   li:nth-child(3n+7) {
     background: red;
   }
 
   /* 奇数 */
   li:nth-child(odd) {
     background: red;
   }
 
   /* 偶数 */
   li:nth-child(even) {
     background: red;
   }
body {
     font-family: Arial, Helvetica, sans-serif;
     background: #333;
     color: #fff;
     margin: 0;
   }
 
   header {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     height: 100vh;
   }
 
   header::before {
     background: url('https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg') no-repeat center center/cover;
     opacity: 0.4;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
   }
 
   header>h1 {
     font-size: 4rem;
     margin: 1rem;
   }
 
   .is-required:before {
     content: '*';
     color: red;
     padding-left: 2px;
   }
/* offset-x/offset-y/color */
     box-shadow: 10px 10px teal;
     /* offset-x/offset-y/blur-radius/color */
     box-shadow: 5px 5px 20px teal;
     /* negative values */
     box-shadow: -5px -5px 20px teal;
     /* offset-x/offset-y/blur-radius/spread-redius/color */

　　网格式布局：

　　　　　跟弹性布局区别很大弹性布局是在一个轴上就是相当于是个一维布局，而网格布局相当于是两维布局

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid</title>
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 70% 30%;
      /* grid-column-gap: 1rem;
         grid-row-gap: 1rem; */
      grid-gap: 1rem;
    }
 
    .wrapper>div {
      background: #eee;
      padding: 1rem;
    }
 
    .wrapper>div:nth-child(odd) {
      background: #ddd;
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quo quidem cum illo corrupti eaque inventore,
      blanditiis cupiditate quasi ea exercitationem at impedit iste modi aspernatur esse labore numquam qui rerum
      aliquam reiciendis necessitatibus nulla! Repellat fugiat blanditiis voluptatem deleniti asperiores ad dolorem sint
      non doloremque ducimus facilis minus, aut amet, cupiditate quis vel dignissimos eos rem. Consequuntur dolor, iure
      alias, vero autem qui deleniti voluptates eum voluptatem quod obcaecati accusamus ducimus nam? Voluptates eligendi
      accusantium recusandae vel, consequatur dolorem!</div>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, id perspiciatis! Ipsum voluptatibus vitae,
      eum architecto dolor, dignissimos magni quia voluptatem quisquam doloribus similique a nisi sint officiis! Ad
      excepturi magni sit eos, sapiente fugiat recusandae et praesentium explicabo corporis?</div>
  </div>
  <div class="wrapper">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quo quidem cum illo corrupti eaque inventore,
      blanditiis cupiditate quasi ea exercitationem at impedit iste modi aspernatur esse labore numquam qui rerum
      aliquam reiciendis necessitatibus nulla! Repellat fugiat blanditiis voluptatem deleniti asperiores ad dolorem sint
      non doloremque ducimus facilis minus, aut amet, cupiditate quis vel dignissimos eos rem. Consequuntur dolor, iure
      alias, vero autem qui deleniti voluptates eum voluptatem quod obcaecati accusamus ducimus nam? Voluptates eligendi
      accusantium recusandae vel, consequatur dolorem!</div>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, id perspiciatis! Ipsum voluptatibus vitae,
      eum architecto dolor, dignissimos magni quia voluptatem quisquam doloribus similique a nisi sint officiis! Ad
      excepturi magni sit eos, sapiente fugiat recusandae et praesentium explicabo corporis?</div>
  </div>
  <div class="wrapper">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quo quidem cum illo corrupti eaque inventore,
      blanditiis cupiditate quasi ea exercitationem at impedit iste modi aspernatur esse labore numquam qui rerum
      aliquam reiciendis necessitatibus nulla! Repellat fugiat blanditiis voluptatem deleniti asperiores ad dolorem sint
      non doloremque ducimus facilis minus, aut amet, cupiditate quis vel dignissimos eos rem. Consequuntur dolor, iure
      alias, vero autem qui deleniti voluptates eum voluptatem quod obcaecati accusamus ducimus nam? Voluptates eligendi
      accusantium recusandae vel, consequatur dolorem!</div>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, id perspiciatis! Ipsum voluptatibus vitae,
      eum architecto dolor, dignissimos magni quia voluptatem quisquam doloribus similique a nisi sint officiis! Ad
      excepturi magni sit eos, sapiente fugiat recusandae et praesentium explicabo corporis?</div>
  </div>
</body>
 
</html>