文章目录
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤
一、网站题目
校园班级网页设计 、我的班级网页、我的学校、校园社团、校园运动会、等网站的设计与制作。
二、✍️网站描述
️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到二三级页面，有多页面组成。页面样式风格统一布局显示正常，不错乱，使用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
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的学校title>
head>
<body>
<div class="ff">
<h1 class="fl">我的学校h1>
<p class="clear">p>
div>
<div class="menu">
<ul class="center">
<li class="se1"><a href="index.htm">首页a>li>
<li class="se2"><a href="shuoming.htm">网站说明a>li>
<li class="se3"><a href="zhounian.htm">周年校庆a>li>
<li class="se5"><a href="jianjie.htm">学校简介a>li>
<li class="se4">
<a href="https://mail.shnu.edu.cn/">联系我们a>
<ul>
<li><a href="">xxxa>li>
ul>
li>
ul>
div>
<div class="banner">div>
<div class="content">
<div class="bar2">
<h3>云天化中学h3>
div>
<div class="pad"> 云南省云天化中学是由云南省云天化中学教育管理有限公司独资举办的一所十二年一贯制全日制学校。学校坐落于云南省水富县城。现有学生近6200名，其中高中部在校生近3200名。学校1976年10月建校，
1994年被认定为云南省首批一级完全中学，2011年1月被认定为云南省一级二等完全中学，2016年7月被认定为云南省一级一等完全中学。堪称云南省顶尖中学学府。云天化中学是云南省的一所省级重点中学。长期以来，云天化中学坚持公平教育的办学理念，注重学生的全面发展。学校历来以“大面积、出尖子、重素质、创名校、追求一流的教育教学质量”为目标；以“对家长负责，为学生着想”为宗旨；以对学生“严格管理、耐心负责、服务周到”的工作态度，成为云南省的一流名校。
div>
<div class="bar2">
<h3>校园风光h3>
div>
<div class="scrollleft">
<ul>
<li> <img src="images/0.jpg" width="230" height="160" />
<p>校园风光p>
li>
<li> <img src="images/1.jpg" width="230" height="160" />
<p>校园风光p>
li>
<li> <img src="images/2.jpg" width="230" height="160" />
<p>校园风光p>
li>
<li> <img src="images/3.jpg" width="230" height="160" />
<p>校园风光p>
li>
ul>
div>
<div class="clear">div>
div>
<div class="end">
<p>xxx版权所有 p>
div>
body>
html>
CSS样式代码
六、 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。没积累足够知识和经验前，你是开发不出一个完整项目的。把最新技术挂在嘴边，还不如把过时技术牢记心中。活到老学到老，只有一招半式是闯不了江湖的。看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。书读百遍其义自见，别指望读一遍就能掌握。请把教程里的例子亲手实践下，即使案例中有完整源码。把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。做好保存源文件的习惯，这些都是你的知识积累。遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。 七、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题欢迎一起交流学习
网页字体单位px、em、%、rem、pt、vm、vh介绍
px是pixel缩写，是基于像素的单位（屏幕上显示数据的最基本的点）。用像素定义的的文字、图片等会随屏幕的分辨率变化而变化。如果在定义字体大小时，使用px作为单位，分辨率调高，实际看到的文字就变“小”。
em是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em，1.2em，2em等。通常1em=16px（一般浏览器默认的字体大小为16px）。
注：当用于指定字体大小时，em单位是指父元素的字体大小
百分与“em”类似，1em=100%。当前的字体大小等于100%,字体大小也是受父类影响。
rem是CSS3新增的一个相对长度单位，只相对根目录即HTML元素。所以可以在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照。
如：
兼容性： IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。
PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸（96dpi）。如果在web上使用pt做单位的文字，字体的大小在不同屏幕下一样（DPI精度一样），但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了。
注： 用在屏幕浏览（屏幕效果）时，pt和px都会随屏幕分辨率的变化而变化。用在打印（打印效果）时，使用pt在不同的屏幕分辨率或不同的DPI精度时显示大小一样，只是DPI精度越高的越清晰。
vw 相对于视区的宽度：视区宽度是100vw。
vh 相对于视区的高度：视区宽度是100vh。
注： 视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。部分浏览器可能不支持该度量单位。
1．in:英寸；
2．cm:厘米；
3．mm:毫米；
4．pc:pica，大约12pt，1/6英寸；
5．ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算（部分浏览器支持，用的较少就不详述了）；
6．ch:以节点所使用字体中的“0”（零）字符为基准，找不到时为0.5em（部分浏览器支持，用的较少就不详述了）；
1．在网页开发时建议使用px、rem、em字体单位，一般浏览器默认字体大小是16px，可以先让根元素html为10px，如：html{font-size:62.5%;}，然后使用em,或rem来设置个标签元素的字体大小；
2．如果是需要打印的文档就需要使用pt来作为字体单位，实际的打印字体清晰度会根据DPI/PPI（打印精度）变化。
屏幕分辨率是指屏幕显示的分辨率。显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
DPI即每英寸点数，是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一，一般来说，DPI值越高，表明打印机的打印精度越高。
如果一台打印机的分辨率是4800×1200dpi，那么意味着在X方向（横向）上，两个墨点最近的距离可以达到1/4800英寸；在Y方向（纵向）上，两个墨点的距离可以达到1/1200英寸。
注： PPI类同DPI。
