静态页面练习-02

最新推荐文章于 2021-08-21 23:34:20 发布

七彩猫猫虫

最新推荐文章于 2021-08-21 23:34:20 发布

阅读量1.2k

点赞数

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104183992

版权

自己动手丰衣足食专栏收录该内容

14 篇文章 0 订阅

订阅专栏

成品图

在这里插入图片描述

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
    <header class="w">
      <div class="div1">

      <h2>J O J O<br>ALLTHETIME</h2>
      </div>

      <div class="div2">
        <div><h2>October 01-07th-Nanjing,Ch</h2></div>
        <p>
          <a href="#">HOME</a>
          <a href="#">SPEAKERS</a>
          <a href="#">SCHEDULE</a>
          <a href="#">VENUE</a>
          <a href="#">REGISTER</a>
        </p>
      </div>

    </header>
    <nav class="w">
      <p><span>Dedicated to the Craft of Building Websites</span><br>
        Every year the brightest web designers and front- end developers descend on<br>
        Chicago to discuss the latest technologies. Join us this August!</p>
      <button type="button">REGISTER NOW</button>
    </nav>

    <main class="w">
    <article class="left">
      <h2>SPEAKERS</h2>
      <img src="src/tou.png">
      <p>World-Class Speakers</p>
      <p>Joining us from all around theworld are
        over twenty fantastic speakers, here to
        share their stories.</p>
    </article>
      <div class="center">
        <h2>SPEAKERS</h2>
        <img src="src/shen.png">
        <p>World-Class Speakers</p>
        <p>Joining us from all around theworld are
          over twenty fantastic speakers, here to
          share their stories.</p>
      </div>
      <aside class="right">
        <h2>SPEAKERS</h2>
        <img src="src/jio.png">
        <p>World-Class Speakers</p>
        <p>Joining us from all around theworld are
          over twenty fantastic speakers, here to
          share their stories.</p>
      </aside>
    </main>
    <footer class="w">
<a href="https://blog.csdn.net/SDAW_1">G Styles Conference modifed by He</a>
      <ul class="f">
        <li><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
        <li><a href="#">相册</a></li>
        <li><a href="#">活动</a></li>
        <li><a href="#">爱好</a></li>
        <li><a href="#">留言</a></li>
      </ul>
    </footer>
</body>
</html>

CSS文件

*{
  margin:0;
  padding: 0;
  list-style: none;
}
.w {
  width: 799px;
  margin: 0 auto;
}
header{
      height: 151px;
      background-image: url("bg1.png");
      display: flex;
      justify-content: flex-start;
      padding-bottom: 20px;
}
header .div1{
        flex:1;
        position: relative;

}
header .div1 h2{
  position: absolute;
      font-size:30px;
      color:white;
      left:80px;
    top:50px;


}
header .div2{
       flex:1;
      display: flex;
     flex-flow: wrap column;
}
header .div2 div{
      flex:2;
  font-size: 20px;
 position: relative;
}
header .div2 div h2{
  font-size:20px;
 position:absolute;
  color: #66cc00;
left:100px;
  top:55px;
}
header .div2 p{
       flex:1;
  font-size:20px
}
header .div2 a{
  font-size: 15px;
  color:white;
  text-decoration:none;
  margin-right: 10px;
}

nav{
  height: 208px;
  background-image: url("bg1.png");
  text-align: center;
  color:white;
  font-size:20px;
}
nav span{
  font-size:30px;
  color: #66cc00;
}
nav button{
  font-size: 30px;
  color:white;
  background-color:transparent;
  border: solid 1px white;
  padding:10px;
  margin-top: 10px;
  cursor:pointer
}

main{
  height: 376px;

}

article,.center,aside{
  width:211px;
  height: 275px;

  float: left;
  margin: 54px 15px 52px;

}
article {
  margin-left: 51px;
}

footer{
  background-image: url("bg1.png");
  height:180px;
  border:1px;
  position:relative;
  display: flex;
  justify-content: flex-start;
}
    footer a{
       flex:1;
      margin-top: 25px;
      margin-left: 30px;
    }
  .f ul{
    flex:2;
}
.f li{
  font-size: 10px;
  float: left;
  width: 60px;
  margin-top: 28px;
  padding-left: 3px;
  border-left: black dashed 1px;
}