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

从零开始：使用HTML+CSS创建静态合金装备主题网页

最新推荐文章于 2025-03-02 18:33:31 发布

原创

最新推荐文章于 2025-03-02 18:33:31 发布 · 1.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css3 #css

这篇博客介绍了如何利用HTML和CSS从零开始制作一个以合金装备为主题的静态网页。首先建立网页基础结构，采用外部样式表，接着规划布局，包括设置头图（小岛工作室Logo）、导航栏、悬浮效果、下拉菜单和主体内容。最后，添加网页底部文本，并提供了源码下载链接。

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

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

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

先定义外部样式表

<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>
        <