CSS3_综合案例

综合案例

• 设置元素的 width，还可以利用 left 和 right

• 为了防止图片太小，background-size: 100% 100%;

• 

• <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8" />
          <title></title>
  
          <link rel="stylesheet" type="text/css" href="./css/index.css" />
  
          <script type="text/javascript" src="./js/kjfFunctions.js"></script>
          <script type="text/javascript" src="./js/index.js"></script>
  
          <style type="text/css">
              * {
                  margin: 0;
                  padding: 0;
              }
  
              html,body{
                  height: 100%;
              }
  
              header {
                  position: absolute;
                  top: 0px;
                  left: 0px;
  
                  right: 0px;
                  height: 130px;
                  padding: 8px 15px;
  
                  background-color: rgba(0, 0, 0, 0.7);
  
                  display: flex;
                  justify-content: space-between;
              }
  
              #we_are {
                  display: flex;
                  align-items: center;
                  transform: skewY(20deg) translate(40px, 10px);
  
                  font-size: 48px;
                  color: #a798f5;
              }
  
              #we_are::after {
                  content:"Venom";
                  transform-origin: left top;
                  transform: skewX(-20deg) translateX(40px) rotateZ(-20deg);
  
                  color: #7375b9;
                  font-size: 96px;
                  text-shadow: 0 0 30px #82def3;
              }
  
              header ul {
                  list-style: none;
  
                  display: flex;
                  flex-flow: 0;
                  align-grow: 1;
  
                  align-items: center;
              }
  
              a {
                  color: #7375b9;
              }
  
              a:hover {
                  font-size: 24px;
                  text-shadow: 0 0 4px #82def3;
              }
  
              a:active {
                  font-size: 18px;
                  text-shadow: 0 0 2px #82def3;
              }
  
              header ul li {
                  width: 85px;
                  height: 35px;
                  margin-right: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
  
                  font-size: 16px;
                  border: 1px solid #fff;
                  border-radius: 10px;
              }
  
              header ul li:last-child {
                  margin-right: 0px;
              }
  
              article ul li a img {
                  width: 120px;
                  height: 80px;
              }
  
              article {
                  width: 100%;
                  height: 100%;
                  background: url(./img/venomBg.jpg) no-repeat;
                  background-size: 100% 100%;
  
                  display: flex;
                  justify-content: flex-start;
              }
  
              article ul {
                  list-style: none;
                  padding-top: 146px;
                  padding-left: 292px;
  
                  display: flex;
                  flex-direction: column;
              }
  
              article ul li{
                  width: 200px;
                  height: 200px;
  
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
  
              article ul li a{
                  color: #000;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
              }
          </style>
      </head>
  
      <body>
  
          <header>
              <div id="we_are">
                  We are
              </div>
              <ul>
                  <li><a href="javascript:;">毒液</a></li>
                  <li><a href="javascript:;">屠杀</a></li>
                  <li><a href="javascript:;">嚎叫</a></li>
              </ul>
          </header>
  
          <article>
              <ul>
                  <li><a href="javascript:;">
                      <img src="./img/venom1.jpg"/>
                      毒液的味道
                  </a></li>
  
                  <li><a href="javascript:;">
                      <img src="./img/venom2.png"/>
                      暴虐
                  </a></li>
  
                  <li><a href="javascript:;">
                      <img src="./img/venom3.png"/>
                      Spider
                  </a></li>
  
                  <li><a href="javascript:;">
                      <img src="./img/venom6.png"/>
                     埃迪·布洛克
                  </a></li>
              </ul>
          </article>
      </body>
  </html>