仿写学校官网 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>
相关文章
|
5月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——工字型布局
【基于HTML5的网页设计及应用】——工字型布局
|
5月前
|
移动开发 HTML5 容器
【基于HTML5的网页设计及应用】——固定宽度布局
【基于HTML5的网页设计及应用】——固定宽度布局
|
5月前
|
移动开发 前端开发 数据安全/隐私保护
【基于HTML5的网页设计及应用】——用户注册
【基于HTML5的网页设计及应用】——用户注册
|
5月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
|
2月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
2月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
5月前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
2月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
10月前
|
前端开发
HTML+CSS实现小米官网首页(一)
HTML+CSS实现小米官网首页
|
5月前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
77 5