##实训周项目##
一、声明
代码框架来自《Web前端开发 实训案例教程》,图片素材来源于网络,本人仅代码分享。
二、文件
主页面:index.html+index.css,附属跳转小页面:list1.html+list2.html,全局css:reset.css。
三、效果图
四、功能说明
顶部搜索框及按钮,装饰功能,没有js代码。
底部 [ 1 ] [ 2 ] 点击跳转,刷新附属子页面内容,四本书{图片,作者,书名,简介}。
导航栏覆盖变色。
五、源代码
[ index.html ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小说网</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header>
<div class="container headBar">
<div class="logo"></div>
<nav>
<a href="#" class="navItem active">首页</a>
<a href="#" class="navItem">分类</a>
<a href="#" class="navItem">排行榜</a>
<a href="#" class="navItem">个性小说</a>
</nav>
<form class="search-wrap">
<input type="search" spellcheck="true" />
<button type="submit">搜索</button>
</form>
</div>
</header>
<article class="container">
<div class="fiction-text">
<h1>网站介绍</h1>
<p>番茄小说是于2019年11月全新推出的面向网文热爱者的免费阅读产品,致力于为读者提供畅快不花钱的极致阅读体验,
每日活跃用户已超过一千万。番茄小说与各大内容商合作,拥有海量正版小说。同时持续扶持优质的原创内容,
涵盖青春、言情、玄幻、校园、仙侠、都市、悬疑等全部主流网文类型,以及大量热剧原著和经典出版物,并且支持用户免费看书、听书。</p>
</div>
<section class="iframeWrap">
<iframe name="Iframe" src="list1.html" border="0" frameborder="0"></iframe>
</section>
<section class="pageWrap">
<ul class="page">
<li><a href="list1.html" target="Iframe" class="pageItem">1</a></li>
<li><a href="list2.html" target="Iframe" class="pageItem">2</a></li>
</ul>
</section>
</article>
<footer>
<a href="#">关于小说</a> |
<a href="#">友情链接</a> |
<a href="#">联系我们</a> |
<a href="#">帮助中心</a>
</footer>
</body>
</html>
[ list1.html ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小说网</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="list.css" />
</head>
<body>
<section class="fictionBox">
<article>
<figure class="fictionImg">
<img src="凡骨.png" alt="凡骨"/>
</figure>
<div class="fictionInfo">
<h3>凡骨</h3>
<small class="fictionTip">
<mark>壹更大师</mark>
</small>
<p>
世间灵骨,共分四品。 一品,天灵骨。二品,金灵骨。三品,玄灵骨。四品,白灵骨。
余者,皆为凡骨,无缘修行。 一介凡骨许太平,誓要向这修行界证明,凡骨亦能斩妖,凡骨亦能除魔,凡骨亦能登仙!
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="仙武帝尊.jpg"/>
</figure>
<div class="fictionInfo">
<h3>仙武帝尊</h3>
<small class="fictionTip">
<mark>六道三界</mark>
</small>
<p>
九千年前,仙武帝尊率领百万神将打入太古洪荒,却无一人归来,只有一缕真火遗留世间。
九千年后,门派废徒叶辰,被赶出宗门,无以为家,机缘巧合之下偶得真火,再踏仙武之路。
这是一个神魔仙佛并立的世界,这是一个诸天万域混乱的年代,叶辰的逆天征途,由此开始。
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="逆天邪神.jpg"/>
</figure>
<div class="fictionInfo">
<h3>逆天邪神</h3>
<small class="fictionTip">
<mark>火星引力</mark>
</small>
<p>
掌天毒之珠,承邪神之血,修逆天之力,一代邪神,君临天下!
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="剑来.jpg"/>
</figure>
<div class="fictionInfo">
<h3>剑来</h3>
<small class="fictionTip">
<mark>烽火戏诸侯</mark>
</small>
<p>
大千世界,无奇不有。我陈平安,唯有一剑,可搬山,倒海,降妖,镇魔,敕神,摘星,断江,摧城,开天!
</p>
</div>
</article>
</section>
</body>
</html>
[ list2.html ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小说网</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="list.css" />
</head>
<body>
<section class="fictionBox">
<article>
<figure class="fictionImg">
<img src="十日终焉.jpg"/>
</figure>
<div class="fictionInfo">
<h3>十日终焉</h3>
<small class="fictionTip">
<mark>杀虫队队员</mark>
</small>
<p>
(不后宫,不套路,不无敌,不系统,不无脑,不爽文,介意者慎入。)
当我以为这只是寻常的一天时,却发现自己被捉到了终焉之地。 当我以为只需要不断的参加死亡游戏就可以逃脱时,
却发现众人开始觉醒超自然之力。 当我以为这里是「造神之地」时,一切却又奔着湮灭走去。
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="我不是戏神.jpg"/>
</figure>
<div class="fictionInfo">
<h3>我不是戏神</h3>
<small class="fictionTip">
<mark>三九音域</mark>
</small>
<p>
赤色流星划过天际后,人类文明陷入停滞。 从那天起,人们再也无法制造一枚火箭,一颗核弹,一架飞机,
一台汽车……近代科学堆砌而成的文明金字塔轰然坍塌,而灾难,远不止此。 灰色的世界随着赤色流星降临,
像是镜面后的鬼魅倒影,将文明世界一点点拖入无序的深渊。 在这个时代,人命渺如尘埃; 在这个时代,人类灿若星辰。
大厦将倾,有人见一戏子屹立文明废墟之上,红帔似血,时笑时哭, 时代的帘幕在他身后缓缓打开,他张开双臂,
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="天渊.jpg"/>
</figure>
<div class="fictionInfo">
<h3>天渊</h3>
<small class="fictionTip">
<mark>沐潇三生</mark>
</small>
<p>
百年前,陈青源进入了一个名为天渊的禁区,魂灯熄灭,世人皆认为他死了。
今日,陈青源虽然活着走出了禁区,但是修为尽废,灵根断裂。 面对红颜的悔婚,
各宗的欺压,陈青源该如何是好? “陈青源,我给你两个选择:一,娶我;二......”
天渊内生活着一个红裙姑娘,眸若星辰,声音轻柔。 “我选择二。” 没等红裙姑娘说完话,陈青源毅然决然的做出了选择。
</p>
</div>
</article>
<article>
<figure class="fictionImg">
<img src="开局地摊卖大力.jpg"/>
</figure>
<div class="fictionInfo">
<h3>开局地摊卖大力</h3>
<small class="fictionTip">
<mark>弈青锋</mark>
</small>
<p>
地球进入灵气复苏时代,人类开启异能觉醒!江南开局觉醒最强地摊系统,大力药水?解毒小黄豆?幸运樱桃?供不应求!
世界顶级神豪、首富、人气主播、巅峰强者纷纷前来求购。江南:“我对钱亿点都不感兴趣!我只想坑……额,我的愿望是世界和平!”
新书《别叫我恶魔》火热连载中,已肥可宰。
</p>
</div>
</article>
</section>
</body>
</html>
[ index.css ]
a {
color: #333333;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
height: 60px;
background: linear-gradient(to right, red, orange);
font-size: 1.2em;
}
.headBar {
display: flex;
align-items: center;
}
.logo {
width: 160px;
height: 30px;
background: url(logo.png) no-repeat center;
background-size: cover;
}
nav {
width: 600px;
}
.navItem {
display: inline-block;
line-height: 60px;
padding: 0 20px;
color: #ffffff;
}
.navItem .active {
background: #555555;
font-weight: 700;
}
.navItem:hover{
/* ####### */
background: #55557f;
}
.search-wrap input {
border: 0;
width: 15rem;
line-height: 1.75rem;
outline-style: none;
padding-left: 0.625rem;
border-radius: 5px;
}
.search-wrap button {
width: 3.125em;
height: 1.75rem;
border: 0;
background-color: #555555;
color: #FFFFFF;
border-radius: 5px;
}
.fiction-text {
column-count: 2;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 1px;
padding: 0 70px;
margin-top: 40px;
}
.fiction-text h1{
column-span: all;
text-align: center;
margin-bottom: 20px;
}
.iframeWrap {
width: 100%;
overflow: hidden;
}
iframe {
width: 103%;
height: 450px;
}
.pageWrap {
overflow: hidden;
}
ul.page {
margin: 20px 0;
float: right;
}
ul.page li {
display: inline;
}
ul.page li a {
padding: 8px 16px;
border: 1px solid #CCCCCC;
}
ul.page li a:link {
color: #333333;
}
ul.page li a:visited {
color: #333333;
}
ul.page li a:hover {
color: #FB6638;
}
ul.page li a:active {
color: #FB6638;
}
footer{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #E9E9E9;
}
footer a{
margin: 0 20px;
}
[ list.css ]
.fictionBox{
border: 1px solid #CCCCCC;
padding: 20px 20px 0;
margin: 40px;
display: flex;
justify-content: space-between;
align-content: center;
flex-wrap: wrap;
}
.fictionBox article{
width: 500px;
height: 130px;
display: flex;
margin-bottom: 20px;
}
.fictionImg{
width: 100px;
height: 130px;
box-shadow: 0 3px 4px rgba(0, 0, 0, .5);
}
.fictionImg img{
width: 100px;
height: 130px;
}
.fictionInfo{
height: 140px;
margin-left: 15px;
overflow: hidden;
}
.fictionInfo h3{
margin-top: 5px;
}
.fictionTip{
font-size: 13px;
color: #555555;
}
.fictionTip span{
margin: 0 8px;
line-height: 35px;
}
[ reset.css ]
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
[logo图片及书籍封面就不提供了]
六、心得体会
前端的学习间隔太长,贪玩导致基础不牢固。
iframe嵌套布局搭配a超链接及target可以实现局部跳转。#20240625