本案例依靠HTML和CSS完成设计
设计学校官网网页需要考虑以下几个方面：
设计风格：根据学校的形象和品牌，确定网站的设计风格，包括色彩搭配、字体选择、图标设计等。
页面布局：根据网站的内容和功能，设计网站的页面布局，包括导航栏、页眉页脚、页面内容等。
交互设计：添加适当的交互元素，如表单、按钮、弹窗等，提高用户体验和交互性。
准备工作
-
HTML与CSS相分离
为了提高代码的可读性和可维护性，将HTML文件和CSS文件分别存储在不同的文件中，并通过链接的方式进行引用 -
设置版心
网页设计中用于控制页面布局的区域，通常包括页面头部、主体内容和页脚等部分。在后续部分中，运用多类名将各个部分框在版心里 -
建立框架
header头部导航栏
banner主体大屏
goods小导航栏
bd1校园新闻栏
taolun话题讨论栏
huod近期活动栏
footer页脚栏
* {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin: auto;
}
/*CSS部分*/
/* 设置背景色 */
body {
background-color: #f3f6f8;
}
/* 取消li标签前的小圆点，便于后续使用 */
li {
list-style: none;
}
头部导航栏
头部导航栏含学校LOGO、导航栏、搜索区、用户区（登录、注册）
<div class="header w">
<div class="logo">
</div>
<div class="nav">
<ul>
<li><a href="#">了解学校</a></li>
<li><a href="#">报名登记</a></li>
<li><a href="#">查询系统</a></li>
<li><a href="#">动态</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="输入关键词">
<button>
</button>
</div>
<div class="user">
<a href="登录.html" target="_blank">登录</a>
<a href="注册页面.html" target="_blank">注册</a>
</div>
</div>
/*CSS部分*/
.header {
height: 42px;
margin: 30px auto;
}
.header .logo {
background-color: pink;
background: url(images/LOGO3.png);
float: left;
width: 80px;
height: 65px;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: black;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 70px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border-right: 0;
color: gray;
font-size: 14px;
padding-left: 15px;
border: #00a4ff;
}
.search button {
float: left;
width: 50px;
height: 42px;
border: 0;
background: url(images/btn.png);
}
.user a {
display: block;
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: black;
text-decoration: none;
}
.user a:hover {
color: #00a4ff;
}
由于登录、注册页面做的比较粗糙，在此仅作成果展示
以下两点需要注意：
- 当鼠标悬停时，元素变色，增加交互性
- 考虑后期可能增加导航栏（nav）元素的数量，这里不给该处的ul设置width
以下为头部导航栏效果
主体大屏
主体大屏包括背景大屏、subnav分导航栏、course板块
此处的特别点是透明度的设置：rgba(0, 0, 0, .3)表示使用黑色（RGB值为0,0,0），同时设置透明度为0.3。这样设置后，背景色将会是半透明的黑色。
CSS部分
.subnav {
float: left;
width: 190px;
height: 421px;
background: rgba(0, 0, 0, .3);
}
.subnav ul li a {
font-size: 14px;
color: #fff;
text-decoration: none;
}
.subnav ul li {
line-height: 45px;
height: 45px;
padding: 0 20px;
}
.subnav ul li a span {
float: right;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.course {
float: right;
width: 230px;
height: 360px;
background-color: #fff;
margin-top: 50px;
}
.course h2 {
height: 48px;
background-color: #9acfea;
text-align: center;
font-size: 18px;
line-height: 48px;
color: #fff;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li .bd h4 {
font-size: 16px;
color: #c3c3c3;
}
.bd ul li .bd p {
font-size: 12px;
color: #f3f6f8;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-align: center;
color: #00a4ff;
font-size: 16px;
font-weight: 700;
line-height: 38px;
text-decoration: none;
}
HTML部分
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">学校简介 <span>></span></a></li>
<li><a href="#">课程介绍<span>></span></a></li>
<li><a href="#">教师团队<span>></span></a></li>
<li><a href="#">学生服务<span>></span></a></li>
<li><a href="#">联系方式<span>></span></a></li>
<li><a href="#">图书馆<span>></span></a></li>
<li><a href="#">体育场馆<span>></span></a></li>
<li><a href="#">心理咨询<span>></span></a></li>
<li><a href="#">学生活动<span>></span></a></li>
</ul>
</div>
<div class="course">
<h2>今日大事</h2>
<div class="bd">
<ul>
<li>
<h4>多彩学科放光彩 五育并举向未来</h4>
<p>学科游园活动</p>
</li>
<li>
<h4>“研”于行走时 “学”中悟秋声</h4>
<p>秋季户外实践活动</p>
</li>
<li>
<h4>为感恩，也是念想</h4>
<p>2023届毕业纪念物已建好</p>
</li>
</ul>
<a href="#" class="more">查看更多</a>
</div>
</div>
</div>
</div>
效果如下
常见布局
以下四个部分都是运用常见的网页布局方法及简单延申，详细可见[CSS学习——完成指定布局]，在此不做详细展示(https://blog.csdn.net/2301_79729136/article/details/134608281?spm=1001.2014.3001.5502)
goods小导航栏、bd1校园新闻栏
- 盒子阴影
通过box-shadow属性为盒子添加阴影。通过添加阴影，可以使页面元素更加突出，从而增加视觉层次感。阴影可以使页面元素呈现出三维效果，增强页面的立体感 - 图片缩放
a标签默认会按照图片的原始尺寸显示。当图片尺寸大于其容器时，它不会自动缩放来适应容器，这会导致图片被截取。为了解决这个问题，可以使用自动缩放（Automatic Scaling）来控制图片的缩放<img src="image.jpg" style="width:100%; height:100%;">
taolun话题讨论栏、huod近期活动栏
此处想做一个实时投票讨论的板块，将在后续学习中完善，当前能力不足……
页脚设计
页脚的设置应该注重信息组织、可读性、样式设计等方面。
在设置页脚时，有以下几点需要注意：
- 版权信息：页脚通常用于显示版权信息、联系方式和网站地图等重要信息
- 导航链接：在页脚中添加导航链接，确保它们易于访问并且排列有序。通常，可以将它们放在一个简单的横条或菜单栏中
- 可读性：页脚应该易于阅读，避免使用过于密集或复杂的字体和排版。保持信息清晰明了，以便访问者能够轻松地理解它们
- 避免过度装饰：页脚应该保持简洁和干净，避免添加过多的装饰元素
总结
- Web标准和设计原则：了解Web标准的概念和设计原则，如分离内容与表现、保持一致性、提高可访问性等
- 深入学习HTML和CSS：HTML和CSS是网页设计的基础，通过更深入的学习，掌握如何使用语义化的标签来构建网页结构，如何运用CSS来控制页面的布局和样式
- 学习交互设计和用户体验：提高网页的互动性和用户体验，该方面有待完善
声明：该网页设计所用图片素材及文字素材皆来自网络公众号，如有侵权，请联系笔者
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
