共计 11533 个字符，预计需要花费 29 分钟才能阅读完成。
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站演示
- 五、⚙️ 网站代码
-
- 🧱HTML 结构代码
- 💒CSS 样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🏫 校园网页设计、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
❤【作者主页——🔥获取更多优质源码】
❤【学习资料 / 简历模板 / 面试资料 / 网站设计与制作】
❤【web 前端期末大作业——🔥🔥毕设项目精品实战案例】
二、✍️网站描述
🏷️HTML 静态网页设计作业使用 dreamweaver 制作，采用 DIV+CSS 布局，共有多个页面，首页使用 CSS 排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为 100% 宽度，主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有 5 -10 个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用 Div+Css 技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有 JS 特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如 gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言 HTML5+CSS3+JS 程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用 PS 做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html 网页结构文件、css 网页样式文件、js 网页特效文件、images 网页图片文件；
📙网页编辑方面 ：网页作品代码简单，可使用任意 HTML 编辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++ 等任意 html 编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html 文件包含：其中 index.html 是首页、其他 html 为二级页面；
（2）📑 css 文件包含：css 全部页面样式, 文字滚动, 图片放大等；
（3）📄 js 文件包含：js 实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到 js 代码）。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML 结构代码
DOCTYPE html>
html>
head>
meta charset="UTF-8">
meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
meta name="apple-mobile-web-app-capable" content="yes">
meta http-equiv="Pragma" content="no-cache">
meta name="apple-mobile-web-app-status-bar-style" content="black">
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
meta name="format-detection" content="telephone=no" />
meta name="apple-mobile-web-app-capable" content="yes" />
meta content="black" name="apple-mobile-web-app-status-bar-style">
link rel="stylesheet" href="css/bootstrap.min.css" />
link rel="stylesheet" href="css/bootstrap-theme.min.css" />
link rel="stylesheet" href="css/style.css" />
script type="text/javascript" src="js/ydui.flexible.js" >script>
script type="text/javascript" src="js/style.js" >script>
script type="text/javascript" src="js/jquery-1.10.1.min.js" >script>
script type="text/javascript" src="js/bootstrap.min.js" >script>
title>首页title>
head>
body>
header class="navbar navbar-static-top bs-docs-nav header-top-nav" id="header-top">
div class="integral-bgheader" id="integral-bgheader">div>
div class="container">
div class="navbar-header">
button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
span class="icon-bar">span>
span class="icon-bar">span>
span class="icon-bar">span>
button>
button class="navbar-toggle collapsed search-btn" type="button" data-toggle="collapse" data-target="#bs-search" aria-controls="bs-search" aria-expanded="false">
i class="glyphicon glyphicon-search">i>
button>
a href="../" class="navbar-brand">代码背包a>
div>
nav id="bs-navbar" class="collapse navbar-collapse navbar-left">
ul class="nav navbar-nav">
li>
a href="index.html" onclick="" target="_blank">首页a>
li>
li>
a href="list.html" onclick="" target="_blank">javaa>
li>
li>
a href="javascript:;" onclick="" target="_blank">html+cssa>
li>
li>
a href="bookshelf.html" onclick="" target="_blank">phpa>
li>
li>
a href="bookshelf.html" onclick="" target="_blank">javascripta>
li>
li>
a href="bookshelf.html" onclick="" target="_blank">iosa>
li>
li class="dropdown">
a href="javascript:;" onclick="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他span class="caret">span>a>
ul class="dropdown-menu">
li>a href="#">JAVAa>li>
ul>
li>
ul>
nav>
ul class="nav navbar-nav collapse navbar-collapse navbar-right search-style" id="bs-search">
form class="navbar-form navbar-left">
div class="form-group">
input type="text" class="form-control" placeholder="输入关键字" id="search-content">
div>
button type='button' onclick="submit_search()" class="btn btn-default glyphicon glyphicon-search">搜索button>
form>
ul>
div>
header>
div class="container bs-docs-container">
div class="clearfix">
div class="bs-example recommend-style col-sm-12 col-md-9 col-xs-12">
div class="Fiction-title">i class="icon-tushu Fiction-icon">i>推荐小说div>
div class="clearfix">
div class="col-sm-6 col-md-3 col-xs-6">
div class="thumbnail">
a href="list.html" class="clearfix">
div class="thumbnail-img">
img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
h5 class=" author-name">作者：风青阳h5>
div>
div class="caption">
div class="book-title clearfix">h4 class="navbar-left">万古第一神 h4>div>
p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！他的家鸡，是以太阳为食...p>
div>
span class="recommend-sheets">第 1053 章 恐怖的曦皇span>
div>
a>
div>
div class="col-sm-6 col-md-3 col-xs-6">
div class="thumbnail">
div class="thumbnail-img">
img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
h5 class=" author-name">作者：风青阳h5>
div>
div class="caption">
div class="book-title clearfix">h4 class="navbar-left">万古第一神 h4>div>
p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！他的家鸡，是以太阳为食...p>
div>
span class="recommend-sheets">第 1053 章 恐怖的曦皇span>
div>
div>
div class="col-sm-6 col-md-3 col-xs-6">
div class="thumbnail">
div class="thumbnail-img">
img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
h5 class=" author-name">作者：风青阳h5>
div>
div class="caption">
div class="book-title clearfix">h4 class="navbar-left">万古第一神 h4>div>
p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！他的家鸡，是以太阳为食...p>
div>
span class="recommend-sheets">第 1053 章 恐怖的曦皇span>
div>
div>
div class="col-sm-6 col-md-3 col-xs-6">
div class="thumbnail">
div class="thumbnail-img">
img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
h5 class=" author-name">作者：风青阳h5>
div>
div class="caption">
div class="book-title clearfix">h4 class="navbar-left">万古第一神 h4>div>
p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！他的家鸡，是以太阳为食...p>
div>
span class="recommend-sheets">第 1053 章 恐怖的曦皇span>
div>
div>
div>
div class="Fiction-kind">
div class="kind-title">小说种类div>
div class="clearfix pad10">
a href="#" class="btn btn-primary dropdown-toggle" >玄幻 span class="badge">142span>a>
a href="#" class="btn btn-danger dropdown-toggle" >科幻 span class="badge">1142span>a>
a href="#" class="btn btn-info dropdown-toggle" >都市言情 span class="badge">2342span>a>
a href="#" class="btn btn-primary dropdown-toggle" >穿越 span class="badge">1242span>a>
a href="#" class="btn btn-danger dropdown-toggle" >爱情 span class="badge">742span>a>
a href="#" class="btn btn-warning dropdown-toggle" >修仙 span class="badge">542span>a>
a href="#" class="btn btn-success dropdown-toggle" >魔幻 span class="badge">442span>a>
a href="#" class="btn btn-success dropdown-toggle" >恐怖 span class="badge">442span>a>
a href="#" class="btn btn-danger dropdown-toggle" >完结 span class="badge">442span>a>
div>
div>
div>
div class="col-sm-12 col-md-3 col-xs-12">
div class="Fiction-title">i class="icon-host Fiction-icon">i>热门小说div>
ul class="clearfix hostlist">
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
li>span class="Fiction-type label label-danger navbar-left">言情 span>a href="#" class="host-title navbar-left"> 重生之都市仙尊 a>span class="navbar-right host-name"> 家三少span>li>
ul>
div>
div>
div class="clearfix species-module">
div class="species-title">span class="title-name">小说种类span>div>
div class="species-list clearfix">
div class="col-sm-12 col-md-4 col-xs-12">
div class="species-info">
div class="Fiction-type-title btn-default">科幻小说div>
div class="Fiction-filter">
div class="Fiction-irst clearfix">
a href="#" class="clearfix">
div class="Fiction-left-img">
img src="images/126948s.jpg">
div>
div class="Fiction-right-content">
h4 >重生之都市仙尊h4>
p class="Fiction-Introduction">
伴随着魂导科技的进步，斗罗大陆上的人类征服了海洋，又发现了两块大陆。魂兽也随着人类魂师的猎杀无度走向灭亡，p>
div>
a>
div>
ul class="Fiction-list clearfix">
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">医武兵王a>/ 血徒li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">惊世医妃，腹黑九皇叔a>/ 绿依li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">元尊a>/ 天蚕土豆li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">伏天氏a>/ 净无痕li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">斗罗大陆 IV 终极斗罗a>/ 唐家三li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">少沧元图a>/ 我吃li>
li class="Fiction-name col-sm-12 col-md-6 col-xs-12">a href="#">西红柿a>/ 血徒li>
ul>
div>
div>
div>
div class