利用Html与css从零开始制作基础静态网页(web课设）

首先打好单个网页的基础结构

本次我们制作网页主要使用的是外部样式表

本次静态网页的主题是合金装备（由个人喜好而定，你可以根据其自己修改）

先定义外部样式表

<link rel="stylesheet" href="metal gear.css">

然后开始规划网页布局

首先是网页头图我选用小岛工作室的logo

开始定义头图

.header{
    position: relative;
    width:100%;
    height: 120px;
    background-color: black;
}
.kojima{
    position: absolute;
    margin-left: 550px; 
}

然后调用并插入图片，并在图片上加入到小岛工作室的连接

<div class="header">
        <div class="kojima">
        <a href="http://www.kojimaproductions.jp/en/" target="_blank">
          <img src="66.png" alt="kojima productions">
        </a>
        </div>
      </div>

接下来是定义导航栏，并且利用无序列表来描述导航栏

.banner{
    width: 100%;
    height: 1057px;
    
}
.leader{
    width: 100%;
    height: 70px;
    background-color:rgb(7, 7, 7);
}
.leader-wrap{
    width:1200px ;
    height:70px;
    background-color:black;
    margin: 0 auto;
    position: relative;
}
.leader-wrap li{
    float: left;
    list-style-type: none;
    margin: 0;
    padding-left: 50px;
    line-height: 70px;
    width: 150px;
    font-size: 14px;
    color:aliceblue
}
.leader-wrap ul{
    margin: 0;
    padding: 0;

再为导航栏添加一下悬浮效果

.leader-wrap li:hover{
    font-size: small;
    display: block;
}

为了表现下拉效果，再定义"leader-list"类，并为其添加悬浮效果，利用dispaly来实现。

.leader-list{
     width:200px;
     height:300px;
     background-color: rgb(9, 9, 9);
     position: absolute;
     left: 180px;
     display:none;
     color:rgb(250, 250, 250);
     line-height:1.7;
}
.leader-wrap li:hover>.leader-list{
    display:block
}

再下来定义网页的主体

.banner-box{
    width: 100%;
    height: 1057px;
    margin-left: -200px;
}

为了填充网页的内容来插入一张snake的大图

<div class="banner-box">
   <img src="back.jpg" alt="false">
</div>

最后是网页的底部部分，只需要插进一些简单的文本说明

.footer{
    width:100%;
    height: 171px;
    background-color: black;
    text-align: center;
    color: aliceblue;
    font-size: xx-large;
}
.footer-text{
    font-size:medium;
    line-height:0.9em;
}

进行调用

<div class="footer">
   <p> The Man who Sold the World</p>
    <div class="footer-text"> 
          <p>love and peace</p>
          <p>by mikon</p>
      </div>
 </div>

最后这是源码的下载地址：