HTML网页制作——设计系学生静态HTML网页设计作品

HTML网页制作------设计系学生静态HTML网页设计作品

网站主题为荷兰风格派，主要介绍荷兰风格设计的网站，由设计系学生亲自设计，独立开发网页，适用于学生自己的作品。

网站效果视频：

荷兰风格派（设计系学生网页设计成品）

网站效果图（共15页）其一如下所示：

参考代码（html）

 <header>
    <nav class="navBox">
      <div class="left">
        <img src="../img/logo/logo.jpg" alt="">
      </div>
      <div class="right">
        <ul>
          <li><a href="../index.html" style="color: #fff; ">起源</a></li>
          <li><a href="./people.html" style="color: #fff; ">人物</a></li>
          <li><a href="./work copy.html " style="color: #fff; ">作品精选</a></li>
          <li><a href="./chengjiu.html" style="color: #fff; ">成就</a></li>
          <li><a href="./chengjiu1.html" style="color: #fff; ">再设计</a></li>
          <li><a href="./news.html" style="color: #fff; ">新闻</a></li>
          <li><a href="./user.html" style="color: #fff; ">个人中心</a></li>
          <li>EN/CN</li>
          <li><a href="./login.html" style="color: #fff; ">登陆/注册</a></li>
        </ul>
      </div>
    </nav>
    
  </header>
  <div class="container">
      <!-- <img src="../img/02起源/1.jpg" alt=""> -->

  </div>
 
  <!-- 任务区域 -->
  <div class="people banner" >
    <div class="boxx">
      <div class="le">
        <img src="../img/03人物/何塞·佩德罗·科斯蒂廖洛.jpg" alt="">
      </div>
      <div class="re">
        <p><a style="font-size: 1.3em; font-weight: 700;">De Stijl</a>
          china
          </p>
          <p style="color: gray;">Peel away the essential shape, and you will get the style.
          </p>
          <hr>
      </div>
    </div>
    <div class="title">
      <div class="item" style="border-bottom:  3px solid yellow;">关于</div>
      <div class="item">收藏</div>
      <div class="item">评论和@</div>
    </div>
    <div class="boxxx">
      <div class="lef">
        about
      </div>
      <div class="rig">
        <p>+0880 89696328</p>
        <p>安徽省蜀山区史河路8号安徽大学江淮学院
        </p>
        <p>简介</p>
        <p><hr></p>
        <p>我认为蒙德里安，杜斯伯格，里特维尔德这些大师在过去，当人们的生活充满与自
        </p>
        <p>然的互动时，抽象性很容易达到;它在潜意识当中完成。然而当我们生活的与自然
        </p>
        <p>相去甚远之后，抽象就需要经过努力才能完成。
        </p>
      </div>
    </div>
    <div class="boxxxxx">
      <div class="leftt">
        <div class="leftttt">
          <div class="l">
            <img src="../img/03人物/何塞·佩德罗·科斯蒂廖洛.jpg" alt="">
          </div>
          <div class="r">风格派调研组</div>
        </div>
        <div class="leftttt">
          <div class="l">
            <img src="../img/03人物/乔治·范通格鲁.jpg" alt="">
          </div>
          <div class="r">风格派调研组</div>
        </div>
        <div class="leftttt">
          <div class="l">
            <img src="../img/03人物/塞萨尔·多梅拉.jpg" alt="">
          </div>
          <div class="r">风格派调研组</div>
        </div>
        <div class="leftttt">
          <div class="l">
            <img src="../img/03人物/巴特·范德莱克.jpg" alt="">
          </div>
          <div class="r">风格派调研组</div>
        </div>
        <div class="leftttt">
          <div class="l">
            <img src="../img/03人物/弗里茨·格拉纳.jpg" alt="">
          </div>
          <div class="r">风格派调研组</div>
        </div>

      </div>
      <div class="middlee">
        <p style="background-color: #EFEFEF;">取消关注</p>
        <p style="background-color: #F7F7F7;">+</p>
        <p style="background-color: #EFEFEF;">取消关注</p>
        <p style="background-color: #F7F7F7;">+</p>
        <p style="background-color: #EFEFEF;">取消关注</p>
        <p style="background-color: #F7F7F7;">+</p>
        <p>看看其他</p>
      </div>
      <div class="rightt">
        <img src="../img/15个人中心/2.jpg" alt="">
        <div class="boxxxxxx">
          <p>Activity</p>
          <p>荷兰风格派周年纪念活动组织会</p>
          <p>荷兰风格派再设计大赛</p>
          <p>风格派线上交流活动</p>
        </div>
      </div>
    </div>
  </div>

  </div>
  <footer>
    <div class="footer" style="height: 260px;">
      <p style="text-align: center; margin-bottom: 50px;"><div class="box">
        <img src="../img/logo/logo.jpg" alt="">
        <h3>荷兰风格派</h3>
      </div></p>
      <p>安徽省合肥市蜀山区史河路8号</p>
      <p>027-87157587 , 027-87462184</p>
      <p>邮箱:HLFGP@dist.com.cn</p>
      <p>线下活动,请提前预约</p>
      <p><img src="../img/二维码/https___baike.baidu.com_item_荷兰风格派_266638.png" alt="" style="width: 100px; height:100px"></p>
      <p>蒙德里安/杜斯伯格/里特维尔德</p>
    </div>
  </footer>

参考代码：(css)

*{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
    }
    a{
      text-decoration: none;
      color: #000;
    }
    .banner{
      margin: 0 auto;
      width: 1200px;
    }
    /* 导航区域 */
    header{
      z-index: 9999;
      width: 100%;
      position: absolute;
      top: 30px;
      color: #fff;
    }
    .navBox{
      display: flex;
    }
    .left{
      flex: 30%;
      text-align: center;
    }
    .left img{
      width: 60px;
      height: 60px;
    }
    .right{
      flex: 70%;
    }
    .right ul{
      height: 60px;
      display: flex;
    }
    .right ul li{
      height: 60px;
      line-height: 60px;
      flex: 1;
    }
    .right ul li:hover{
      color: yellow;
    }
    /* 背景图区域 */
    .container{
      height: 120px;
      width: 100%;
      background-image: url("../img/02起源/1.jpg");

    }
    .people span{
      display: inline-block;
      font-weight: 700;
      font-size: 1.2em;
      margin: 80px 20px 30px 0;
    }
    .artical{
      width: 1000px;
      margin: 0 auto;
      text-align: center;
    }
    .human{
      display: flex;
      margin-top: 30px;
      margin-left: 80px;
    }
   
    /* 人物区域 */
     /* footer 区域 */
     .footer{
      top: 150px;
      position: relative;
      height: 200px;
      background-color: #000;
      color: #fff;
      text-align: center;
      padding: 50px 0 50px;
    }   
    .footer p{
      margin: 15px 0 ;
      font-size: 10px;
      color: rgb(197, 194, 194);
      text-align: center;
    }
    .footer .box{
      display: flex;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      
    }
    .footer  img{
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin: 0 5px;
    }
    .boxx{
      display: flex;
      padding: 20px;
    }
    .le{
      flex: 20%;
      text-align: center;
    }
    .le img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .re{
      flex: 80%;
      line-height: 45px;
    }
    .title{
      text-align: center;
      
    }
    .item{
      margin-right: 20px;
      display: inline-block;
      

    }
    .boxxx{
      display: flex;
      background-color: #E1E1E1;
      margin-top: 20px;

    }
    .lef{
      flex: 30%;
      text-align: center;
      box-sizing: border-box;
      padding-top: 100px;
    }
    .rig{
      flex: 70%;
      line-height: 36px;
    }
    .boxxxxx{
      display: flex;
    }
    .leftttt{
      display: flex;
    }
    .leftt{
      flex: 25%;
    }
   
    .l{
      flex: 20%;
      text-align: center;
    }
    .l img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .r{
      flex: 80%;
      line-height: 50px;
      padding-left:10px ;
      margin-bottom: 10px;
    }
    .middlee{
      flex: 25%;
    }
    .rightt{
      flex: 50%;
    }
    .rightt img{
      width: 100%;
      height: 200px;
    }
    .middlee p{
      height: 50px;
      line-height: 50px;
    }
    .boxxxxxx{
      background-color: #EFEFEF;
      width: 200px;
      height: 200px;
      margin-left: 260px;
      line-height: 30px;
    }

tips(小提示)：

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 "👍点赞" "✍️评论" "💙收藏" 一键三连哦！

如：获取详细代码私信我嗷！