仿写学校官网 HTML静态网页设计

简介: 这篇文章展示了如何设计一个仿学校官网的HTML静态网页,包括实现效果、所需知识点、项目结构和部分核心源码。

文章目录

  • 1、实现的效果
  • 2、用到的知识点
  • 3、项目结构
  • 4、部分核心源码
  • 5、后语

1、实现的效果

在这里插入图片描述

2、用到的知识点

  • html
  • css
  • js

3、项目结构

在这里插入图片描述

4、部分核心源码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="content-type" content="no-cache, must-revalidate" />
        <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
        <title>首页</title>
        <link href="css/my.css" rel="stylesheet">
        <link href="css/nav.css" rel="stylesheet">
        <link rel="stylesheet" href="css/nav.css">

    </head>

    <body style="background-color: white">

        <div id="wrapper">

            <!-- 头部开始 -->
            <div style="width: 100%; height: 33px; line-height: 33px; background-color: #4682B4">
                <div class="container">
                    <div class="col-md-6" style="text-align: left">
                    </div>
                    <div class="col-md-6" style="color: yellow; text-align: right">

                        <a href="" class="top-a" target="_blank">教工</a>
                        <a href="" class="top-a" target="_blank">学生</a>
                        <a href="" class="top-a" target="_blank">校友</a>
                        <a href="" class="top-a" target="_blank">访客</a>
                        <a href="" class="top-a" target="_blank">门户</a>
                        <a href="" class="top-a" target="_blank">常用链接</a>
                        <a href="" class="top-a" target="_blank">书记</a>
                        <a href="" class="top-a" target="_blank">校长</a>
                        <a href="" class="top-a" target="_blank">ENG</a>

                    </div>
                </div>
                <hr>
            </div>
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
222 1
|
6月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
6月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
6月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
9月前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
9月前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
100 5
|
9月前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
144 2
|
9月前
|
数据安全/隐私保护
樱花飘落官网引导页HTML源码
直接修改主文件即可,无加密无授权,测试非常好看,有樱花特效
100 1
|
9月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——工字型布局
【基于HTML5的网页设计及应用】——工字型布局

热门文章

最新文章