目录
只用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> <span class="pulser">one opeice</span> </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