Web Design 1 : Layout Overview

导言

我是一个前端新手，想从头写前端。follwing TOP-DOWN design idea:

0. 字体(标题，正文)，主题色，
1. 水平竖直 的大功能区layout 划分
2. 模块内设计

And i always confused by the chaotic class naming used for css style. And i hate to use xxx.min.css , 为什么要使用一堆没用上的css集合。我暂时真难以理解。

Excellent Video Resource

We’re still on the lookout for an exceptional blog or overview paper to complement our understanding of this topic. Stay tuned for updates!

Outstanding Blog or Overview Paper

The key words are “rethink”, “perspective”

导航栏

悬浮

position: fixed; /* 固定导航栏位置 */
top: 0; /* 将导航栏固定在页面顶部 */
z-index: 1001; /* 设置导航栏的层级，确保它在其他元素之上 */

图片靠左，link靠右

.navbar-column {
    display: flex;
    justify-content: flex-end; /*末尾（右对齐）*/
    align-items: center; /* 垂直居中对齐 */
}

/* 图片容器div样式，将 margin-right 设置为 auto 以推到左边 */
.navbar-logo{
    margin-right: auto;
}

搜索框

ToDo

first page

底层固定大图

• 图片的中心锚定在页面的中心
• 并且无论页面长宽如何变化，图片会自动填充满全部页面

body {
    margin: 0; /* 重置 body 的默认外边距 */
    padding: 0; /* 重置 body 的默认内边距 */
    height: 100vh; /* 设置 body 的高度为视口高度，确保背景图片充满整个页面 */
    background-image: url('/images/first.png'); /* 替换 'your-background-image.jpg' 为你的背景图片路径 */
    background-position: center center; /* 将背景图片的中心锚定在页面的中心 */
    background-repeat: no-repeat; /* 禁止背景图片重复显示 */
    background-size: cover; /* 使背景图片尽可能地覆盖整个容器 */
    background-attachment: fixed; /* 使背景图片固定在视口中 */
}

slogan

• 设置位置(上下左右中)text-align:+padding
• colorful selected alphabet <span class="red-bold">A</span>rchitecture

.red-bold {
    color: red; /* 设置红色 */
    font-weight: bold; /* 设置加粗 */
}

‘Explore ACSA’ button

1. 向下箭头<i data-feather="chevron-down"></i>
2. 内部内容跳转<a href="#main-content">Explore Stanford</a> will jump to <div id="main-content">
   1. 丝滑平滑移动动画[^1]. 监控id="clicksource"

安装所需的jquery.js

1. Download the compressed, production jQuery 3.7.1

交织内容块

内容参考

参考 斯坦福官网和 HAI lab

• A Societal Mission
  • 感觉这点大部分组织，都没有想清楚。
• Campus News：Stories about people, research, and innovation across the Farm
  • 主要是论文以及获奖。还有举办活动ASC，校内超算
• Academics/Education：Preparing students to make meaningful contributions to society as engaged citizens and leaders in a complex world
  • 主要是学生的教育。可以讲acsa的本科教育和鸿雁队的培养
• Research：Driving discoveries vital to our world, our health, and our intellectual life
  • 直接就是论文列表吧
• Upcoming Events：
• Campus Life：Building a vibrant community of creative and accomplished people from around the world
  • 关注学生 out of work 的一面
• Admission：Offering extraordinary freedom to explore, to collaborate, and to challenge yourself

内容选择(对于小组织和个人)

• Admission：slogan 的拓展和解释
• People：主页不展示，但是导航栏有，师资的庞大
• Work/Research: 主要的工作和研究内容，项目Projects和论文Publications
• (self-)Education：(对外展示和吸引人)表明对组织内下一代人的培养的重视和完整的体系
  • (个人)强调 自我教育的完善机制, Thinking
• Lab Life: (对外展示和吸引人)表明对组织内下一代人的生活的重视
  • 从实验室的组织者的机制设计/初衷，和员工的自发发声/感谢两个方面展示 美好 实验室生活。
  • (个人) 精彩的工作外生活，游后感。
• News：需要实验室人员/其余人知晓好结果的事情。主要是论文以及获奖。还有举办大型活动ASC，校内超算的结果和圆满完成。
  • (个人) 成就和会议
• Events: 需要通知实验室人员/其余人参加的事情。（先以Past Events 为主）
  • Key Events: 大型报告，和大型活动的组织动员会
  • 组会，教授分享，出国会议，春秋游，毕业和年终聚餐，青岛超算行。
  • (个人) 汇报和分享，旅游，休假
  • 内容：不止是什么地点时间，发生了什么事。还有出发点(why)和内容核心思想介绍(kernel idea)

技术实现

easy

底栏

easy

Grid

six-grids

three-columns

参考文献

[^1]: jQuery - 页面锚点的平滑跳转