用html和css构建简单的静态网页

最新推荐文章于 2024-04-29 16:27:27 发布

qq_47067103

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量2.6k

点赞数 10

文章标签：大数据 html css

本文链接：https://blog.csdn.net/qq_47067103/article/details/125701332

版权

只用html和css构建了静态网站，选择动漫海贼王为主题构建5个简单页面

一、效果展示

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.经典语录

二、具体实现

1.首页

导航条设置

在首页最上方设置导航条，并设置超链接跳转到其他页面，且其他页面在右上方设置了一个固定在页面的超链接跳转到首页。

html文件如下：

<div id="navLinks">
           
            <a href="#">首页</a>
            <a href="JuQing.html">剧情简介</a>
            <a href="person.html">主要人物</a>
            <a href="4.html">悬赏金海报</a>        
            <a href="5.html">经典语录</a>
            
          </div>

背景图片和文字设置

给整个首页添加一个背景图片，设置文字把文字设置在屏幕中间

html文件


        </nav>  
        <div class="text">
          <h1>海贼王</h1>
          <h1>&nbsp;<span class="pulser">one opeice</span>&nbsp;</h1>
          <h3>是真实存在的</h3>
        </div>

首页的部分scss文件如下

 .header 
  {
    height: 100vh;
    background-image: url(images/3.webp);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    // 导航
    nav {
      display: flex;
      justify-content: space-between;
      
      align-items: center;
      // 相对父元素的宽度
      margin: 1.5% 8%;
  
        // 小屏幕居中
        @media(max-width:$medium) {
          margin: auto;
        }
        @media(min-wid