66. Web前端网页案例——【海贼王漫画主题精品网页（ 1页）】大学生期末大作业 html+css

码农的码

于 2024-12-06 07:53:19 发布

阅读量989

点赞数 7

分类专栏：动漫文章标签： javascript 课程设计前端 html5 html css css3

本文链接：https://blog.csdn.net/2301_82212046/article/details/144280347

版权

动漫专栏收录该内容

21 篇文章

订阅专栏

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

一、网页概述

本实例应用html5+css3，div+css布局，代码简单，👉温馨提示：这里所有的网页案例主要应用HTML、CSS、JS等关键技术知识，有静态网页，更有动态网页，所有网页案例都支持如DW、HBuilder、Vscode、Text 等任意HTML主流编辑软件进行编辑修改，亦支持包括IE、Chrome、Firefox、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">

</head>

<body>

<div class="shortcut">
<div class="cut">
<ul class="left">
<li>新世界欢迎您！ </li>
<li><a href="#">请登录  </a><a href="#" class="red">免费注册</a></li>
</ul>
<ul class="right">
<li>我的关注</li>
<li>|</li>
<li class="add">我的新世界</li>
<li>|</li>
<li>新世界会员</li>
<li>|</li>
<li>历史记录</li>
<li>|</li>
<li class="add">关注新世界</li>
<li>|</li>
<li class="add">售后服务</li>
<li>|</li>
<li class="add">网站导航</li>
</ul>
</div>
</div>

<div class="header">
<div class="logo">
<img src="./img/onepiece.png" alt="" width="286px" height="106px">
</div>
<p>欢迎来到新世界,一起航海吧!</p>
</div>

<div class="nav">
<div class="both">
<div class="dropdown">
<div class="dt">
<dt>导航</dt>
</div>
<div class="dd">
<dd><a href="#">原创服装</a></dd>
<dd><a href="#">海报、壁纸</a></dd>
<dd><a href="#">美妆、洗护</a></dd>
<dd><a href="#">订制、家具、家装</a></dd>
<dd><a href="#">男装、女装、童装</a></dd>
<dd><a href="#">化妆、宠物</a></dd>
<dd><a href="#">饰品、手表</a></dd>
<dd><a href="#">户外运动</a></dd>
<dd><a href="#">手办、玩具</a></dd>
<dd><a href="#">鞋靴、T恤</a></dd>
<dd><a href="#">医疗保健</a></dd>
<dd><a href="#">明信片、通缉令</a></dd>
<dd><a href="#">会员、漫画</a></dd>
<dd><a href="#">充值、票务</a></dd>
<dd><a href="#">众筹、应援</a></dd>
</div>
</div>
<div class="navitems">
<li><a href="#">简介</a></li>
<li><a href="#">服饰美妆</a></li>
<li><a href="#">海报壁纸</a></li>
<li><a href="#">手办</a></li>
<li><a href="#">应援物</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">漫画</a></li>
</div>
</div>
</div>

<div class="w">
<div class="main">
<div class="focus">
<ul>
<li><img src="./img/大图.png" alt=""></li>
</ul>
<div class="dotted">
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<div class="newsflash">
<li>
<h3>今日致敬</h3>
</li>
<p>再见了，</p>
<p>火拳艾斯。</p>
<img src="./img/艾斯致敬.png" alt="">
</div>
</div>
</div>

<div class="suggest">
<div class="left">
<img src="./img/时钟.png" alt="">
<h5>今日推荐</h5>
</div>
<div class=" right">
<div class="text">
<h5>品质好货</h5>
<div class="blue">满300减100</div>
<p>满500减200</p>
</div>

...

2.CSS

代码如下（节选示例）：

/* 初始化代码 */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

em,
i {
font-style: normal
}

li {
list-style: none
}

.w {
width: 1200px;
margin: auto;
}

img {
border: 0;
vertical-align: middle
}

button {
cursor: pointer
}

a {
color: #666;
text-decoration: none
}

a:hover {
color: #c81623
}

button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
outline: none;
}

body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}

.hide,
.none {
display: none
}

.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}

.clearfix {
*zoom: 1
}

...