目录
有谁是学校选修课误打误撞选了网页设计然后又要交期末作业的！没错我也是其中一员，于是我大概花了半个星期自己强学了CSS和HTML（JS太难了就放弃了）设计了这样一个网页。因为基础不是太好，又有一点完美主义，设计又大概花了整整四个白天。结果成品出来的时候发现还不错，所以发了这样一篇博客给同样可能处在这种困境的你一点帮助！制作不易，如果对你起到了帮助的话，还希望能给个赞或者评论或者关注支持一下！
网页设计
网页名
hyouka
制作软件
DreamsWeaver
代码编写及解析
html
代码（部分）
<body bgcolor="#00CCCC">
<div id="head">
<div id="pi" class="pii"> <img src="web material/pictures/1.png" width="200" height="200" alt="冰菓剧照" title="冰菓剧照" class="pii"></div>
<div id="pic" class="picc"><img src="web material/pictures/2.png" width="150" height="200" alt="冰菓剧照" title="冰菓剧照" class="picc"></div>
<div class="titl" "b0">
<h1 align="center" class="a1"><strong>冰菓</strong></h1><h2 align="center" class="hyouka" style="line-height: 1px; border-color: #6FC;">hyouka</h2>
</div>
</div>
<div id="bottom"><marquee scrollamount="10px" class="pointer">
<img src="web material/pictures/4.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/10.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/12.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/13.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/14.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/15.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/16.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/17.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/18.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/19.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷"> <img src="web material/pictures/20.png" class="f" width="200" height="200" alt="冰菓胶卷" title="冰菓胶卷">
</marquee></div>
<div id="center">
<div id="left"><span>
<p align="center" class="g">作品相关</p>
</span>
<p align="center"><span><span class="h">作品</span>
<select onChange="window.open(this.value);" class="pointer" style="width:200px">
<option>作品分类（超链接）</option>
<option value="https://baike.baidu.com/item/%E5%86%B0%E8%8F%93/27156?fromModule=lemma_sense-layer#viewPageContent" class="pointer">原作 古典部系列 推理小说</option>
<option value="https://baike.baidu.com/item/%E5%86%B0%E8%8F%93/5650507?fr=aladdin" class="pointer">改编 冰菓 动漫</option>
</select>
</span></p>
<p align="center"><span><span class="h">主要人物</span>
<select onChange="window.open(this.value);" class="pointer" style="width:200px">
<option>主要人物（超链接）</option>
<option value="https://baike.baidu.com/link?url=xLnoe4d-qjUxawikwHNAgst_sWq39bA9urXV1ci5FUFhEP4AdAAsHM5ZXaDN02RonVKCwizAaBUm7XcDDW6ZALnFMp6AgObYjsJKTaFkc-6xifYLJGHb0dtDgPhUT4AZwW3adDO-6RE5DT7_GhQIZK" class="pointer">折木奉太郎</option>
<option value="https://baike.baidu.com/item/%E7%A6%8F%E9%83%A8%E9%87%8C%E5%BF%97/3021836?fromModule=lemma_inlink" class="pointer">福部里志</option>
<option value="https://baike.baidu.com/item/%E5%8D%83%E5%8F%8D%E7%94%B0%E7%88%B1%E7%91%A0/6190422?fromModule=lemma_inlink" class="pointer">千反田爱瑠</option>
<option value="https://baike.baidu.com/item/%E4%BC%8A%E5%8E%9F%E6%91%A9%E8%80%B6%E8%8A%B1/3015074?fromModule=lemma_inlink">伊原摩耶花</option>
<option value="https://baike.baidu.com/item/%E5%85%A5%E9%A1%BB%E5%86%AC%E5%AE%9E/840887?fromModule=lemma_inlink" class="pointer">入须冬实</option>
<option value="https://baike.baidu.com/item/%E6%8A%98%E6%9C%A8%E4%BE%9B%E6%83%A0/285840?fromModule=lemma_inlink" class="pointer">折木供惠</option>
<option value="https://baike.baidu.com/item/%E8%BF%9C%E5%9E%A3%E5%86%85%E5%B0%86%E5%8F%B8?fromModule=lemma_inlink" class="pointer">远垣内将司</option>
<option value="https://baike.baidu.com/item/%E7%B3%B8%E9%B1%BC%E5%B7%9D%E5%85%BB%E5%AD%90/22262118?fromModule=lemma_inlink" class="pointer">糸鱼川养子</option>
<option value="https://baike.baidu.com/item/%E7%94%B0%E5%90%8D%E8%BE%B9%E6%B2%BB%E6%9C%97?fromModule=lemma_inlink" class="pointer">田名边治朗</option>
</select>
</span> </p>
<p align="center"><span><span class="h">制作公司</span>
<select onChange="window.open(this.value);" class="pointer" "W">
<option>制作公司（超链接）</option>
<option value="https://baike.baidu.com/item/%E4%BA%AC%E9%83%BD%E5%8A%A8%E7%94%BB/7920941?fromtitle=%E4%BA%AC%E9%98%BF%E5%B0%BC&fromid=4463007&fr=aladdin" class="pointer">京都动画制作公司（京阿尼）</option>
</select>
</span></p>
<p align="center"><span><span class="h">作者其他作品</span>
<select onChange="window.open(this.value);" class="pointer" "W">
<option>其他作品（小说）（超链接）</option>
<option value="https://baike.baidu.com/item/%E6%8A%98%E6%96%AD%E7%9A%84%E9%BE%99%E9%AA%A8/60896283?fr=aladdin" class="pointer">折断的龙骨</option>
<option value="https://baike.baidu.com/item/%E5%86%8D%E8%A7%81%EF%BC%8C%E5%A6%96%E7%B2%BE/12370051?fr=aladdin" class="pointer">再见，妖精</option>
<option value="https://baike.baidu.com/item/%E7%B1%B3%E6%B3%BD%E7%A9%97%E4%BF%A1%E4%B8%8E%E5%8F%A4%E5%85%B8%E9%83%A8/56001845?lemmaFrom=lemma_starMap&fromModule=lemma_starMap" class="pointer">米泽穗信与古典部</option>
<option value="https://baike.baidu.com/item/%E6%BB%A1%E6%84%BF/19413007?lemmaFrom=lemma_starMap&fromModule=lemma_starMap" class="pointer">满愿</option>
</select>
</span></p>
<table width="100%" border="1" cellpadding="1" cellspacing="1" class="上边距">
<tr>
<td align="center" bgcolor="#33FFCC" class="上边距 ww">日本京都人气动画排行 top8</td>
</tr>
<tr>
<td align="center" bgcolor="#33FFCC"><ol>
</ol></td>
</tr>
</table>
</div>
<div id="main">
<div id="oo">
<p align="center" class="ss" id="test">~·故事介绍·~</p><p> 以节能为座右铭的高中生折木奉太郎， 为一个小小的原因而加入了濒临废社的“古典文学部”。 古典文学部的社员，包括他在社里认识的好奇宝宝，也就是女主角千反田爱瑠，还有他从国中就认识的伊原摩耶花和福部里志。 这是他们四人以神山高中为舞台，对一桩桩事件展开推理的青春学园推理剧。 “我很好奇！”奉太郎平静的灰色高中生活，因为千反田的这一句话而为之一变！</p></div>
<div><p align="center" class="ss" id="test">~·剧集简介·~</p color="#006666">
<div id="leftt">
<div id="uu" align="center">
<p class="y" style="line-height:0px" >一-五</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 10px;" >一、深具传统的古籍社之重生</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 10px;" >二、值得夸耀的古籍社之活动</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 10px;" >三、另有隐情的古籍社之后裔</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 10px;" >四、绽放荣光的古籍社之过往</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 10px;" >五、走过历史的古籍社之真相</p>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">六、犯下大罪</span></p>
</div>
</div>
</div>
<div id="lefttt">
<div id="uu" align="center">
<p class="y" style="line-height:0px" >六-十一．五</p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">七、真相大白</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">八、去试映会吧!</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">九、古丘废村杀人事件</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">十、万人的死角</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">十一、愚者的终幕</span></p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 9px;" >十一．五、（特别篇）应有之物</p>
</div>
</div>
<div id="leftttt">
<div id="uu" align="center">
<p class="y" style="line-height:0px" >十二-十七</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 12px;" >十二、堆积如山的那东西</p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">十六、最后的目标</span></p>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 11px;" >十七、库特利亚芙卡的顺序</p>
</div>
</div> </div>
<div id="lefttttt">
<div id="uu" align="center">
<p class="y" style="line-height:0px" >六-十一话</p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">十八、群峰是否天晴</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">十九、心里有数的人</span></p>
</div>
<div id="uu" align="center">
<p class="z" style="line-height: 35px; font-size: 1px;" ><span class="z">二十、新年快乐</span></p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 12px;" >二十一、手工巧克力事件</p>
</div>
<div id="uu" align="center">
<p class="x" style="line-height: 35px; font-size: 12px;" >二十二、绕远路的雏人偶</p>
<div id="uu" align="center">
<a href="https://www.bilibili.com/video/BV1P3411w7XY/?spm_id_from=333.337.search-card.all.click" class="pointer" target="_blank"><p class="z" style="line-height: 1px; font-size: 18px;" >深度解析</p></a>
</div>
</div>
</div>
<div id="uu1"></div></div>
</div>
</div>
<div class="b2" id="bb">
<marquee>滚动字条内容可自行添加</marquee>
</div>
<audio autoplay="autoplay" loop>
<source src="web material/musics/abc.mp3" type="audio/mpeg"/>
Your browser dose not support the audio element.
</audio>
</body>
</html>
</div>
</div>
代码解释
HTML的核心思想也就是用div（俗称盒子）来进行整体的铺地板设置和在已经用固定了地板的基础上再进行对板块内容的固定并往用来布局的盒子中加上一些如标题文字，表格文字等基础的文字来对整体布局进行修饰和加上滚动字条滚动图片等动态内容和借用盒子加上bgm来对网页进行修饰。该网页的整体地板盒子布局大概如下图所示（一个方框代表一个盒子）：
地板盒子布局
该网页的整体板块盒子布局大概如图所示：
板块盒子布局
CSS
代码（部分）
<style type="text/css">
#head {
background-color: #3FC;
width: 1000px;
height: 200px;
margin-right: auto;
margin-left: auto;
}
#pi {
background-image: url(web%20material/pictures/1.png);
height: 197px;
width: 200px;
float: left;
}
.pii {
border-radius: 20px 0px 0px 0px;
}
#pic {
background-image: url(web%20material/pictures/1.png);
height: 197px;
width: 150px;
float: right;
}
.picc {
border-radius: 0px 20px 0px 0px;
}
#bb {
background-color: #3FC;
height: 40px;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.g {
font-family: "华文隶书";
color: #000;
font-size: 24px;
}
.h {
font-family: "华文行楷";
font-size: 24px;
color: #366;
}
.b2 {
font-family: "华文行楷";
font-size: 36px;
color: #0CF;
}
.titl {
height: 200px;
width: 850px;
color: #F9F9F9;
margin: auto;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-bottom-color: #3FC;
border-top-color: #3FC;
border-right-color: #3FC;
border-left-color: #3FC;
}
#zz {
margin-top: 0px;
margin-bottom: 5px;
}
#center {
background-color: #FFF;
height: 600px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#bottom {
height: 240px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #000;
}
#left {
background-color: #33FFCC;
height: 600px;
width: 200px;
float: left;
font-size: 16px;
color: #333;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
}
#main {
background-color: #3C9;
height: 600px;
width: 650px;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.上边距 {
margin-top: 15px;
}
.a1 {
font-family: "华文楷体";
font-size: 36pt;
color: #00CCFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-top: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #999;
border-left-color: #999;
}
#right {
float: left;
height: 600px;
width: 150px;
background-color: #3FC;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#W {
width:150;
height:200;
}
.k {
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
}
#logo{
width:100%;
height:100%;
float: left;
}
.b0 h1{
font-size: 36 pt;
margin-top: 100 px;
}
.b1 p {
font-size:xx-large;
letter-spacing:2px;
margin: 0 0 5px 0;
}
.aa {
border-radius:20px;
}
.aaa {
border-radius:20px;box-shadow:10px 10px 5px #CCCCCC;
}
.aaaa {
border-radius:20px;
border-radius:20px;box-shadow:10px 10px 5px #CCCCCC;
}
.f{
border-radius:20px;
margin: 20px 10px 20px 10px;
}
select{
text-align:center;
text-align-last:center;
}
select option{
direction:rtl;
}
.pointer{
cursor:pointer;
}
.ii {
font-family: "楷体";
font-size: 24px;
color: #063;
}
#under {
background-color: #CCC;
height: 50px;
width: 1000px;
margin-right: auto;
margin-left: auto;
line-height: 50px;
text-align-items: center;
justify-content: center;
font-family: "华文琥珀";
font-size: 24px;
}
#mainm {
float: left;
height: 200px;
width: 650px;
}
#mainm {
float: left;
height: 200px;
width: 650px;
}
#before {
background-color: #3FC;
height: 60px;
width: 1000px;
margin-right: auto;
margin-left: auto;
color: #000;
font-family: "楷体";
font-size: 36px;
border-top-width: 6px;
border-right-width: 6px;
border-bottom-width: 6px;
border-left-width: 6px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.ss {
font-family: "方正姚体";
font-size: 18px;
color: #066;
}
#test {
height: 0px;
width: 650px;
padding: 0px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
.x {
font-family: "楷体";
font-size: 1px;
margin-top: 5px;
margin-left: 5px;
}
#uu {
height: 40px;
width: 140px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-radius: 20px;
border-radius: 20px;
font-size: 14px;
float: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
margin: 10px;
}
.y {
font-family: "楷体";
font-size: 24px;
color: #066;
}
#uu1 {
float: left;
}
select { background-color:#3FF;
}
#all {
height: 870px;
width: 1000px;
}
.hyouka {
font-size: 36px;
color: #0C6;
}
#leftt {
float: left;
height: 405px;
width: 156px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}代码解释
CSS的主要作用就是对HTML主体框架中的文字样式和盒子的长宽高边框样式等进行修饰，主要可分为 . #两种形式，其中 . 的形式是主要对文字样式等不占空间的元素进行修饰和美化， # 主要是对盒子边框、长宽高等会占网页空间的元素进行修饰。可以这么说，HTML是一个网页的主要框架而CSS就是对其中的各种元素进行补充和细节的修饰。
效果展示
整体视图
局部细节
列表（列表内容可超链接）
各处的鼠标点击图像（这里截屏鼠标隐藏了）
图片信息显示
音乐显示功能
延伸
1.HTML初学者速成视频：为初学者准备的：HTML 速成_哔哩哔哩_bilibili
2.CSS初学者速成视频：为初学者准备的：CSS 速成_哔哩哔哩_bilibili
3.JS初学者速成视频：为初学者准备的：JavaScript 速成_哔哩哔哩_bilibili
结语
非网页设计专业生，实力有限，通过选修了解并学习了网页设计这项技能，如果有错误欢迎在评论指正！如果帮助到你的话，还希望点个赞关注博主一波哦~~
扫一扫
8755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
