HTML & CSS – Practice 1

前言

学完了 w3school 就要练练手了. 这篇是记入我学习的过程, 和知识点.

参考:

One Page Full Website Project For Practice | HTML & CSS Responsive Website | Web Cifar 2021

这篇的内容会依据上面这个 step by step video 走.

Section 的运用

大部分网站首页的设计都会用多个 section 来表示. 是一个 summary 快速预览的概念, 用户对某个 section 感兴趣才导航到细节页面.

大部分人会把第一屏称它为 Hero Section

Hero Section HTML

第一屏长这样

先不管最上方的 logo 和 hamburger menu.

中间是一个 title 和一个 call to action (CTA)

  <body>
    
    <section id="hero">
      <div class="here container">
        <h1>Hello, My Name is Arfanh1>
        <a href="#" class="cta">Portfolioa>
      div>
    section>
    
  body>

1. 通过注释来划分 section, 这个是一个 best practice 来的, 看注释理解结构会很舒服.

2. CSS 排版通常使用 flex, 所以元素都会被 container 抱起来, 类似 Figma 的 Frame.

3. title 一般上用 h1 来表示, CTA 一般用 anchor / button, 这里用的是 anchor 因为它是 link.

Anchor type

视频里面, 作者用了 type 这个属性来表示 anchor 是一个 button, 这个应该是错误的.

Type 属性是用来表达 MIME type 的.

Reset CSS

最简单的 Reset CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

Font-family

它用的是 Google Fonts 

到 fonts.google.com search "montserrat", 点击搜索结果

选择需要的 weight (Light 300, Regular 400, Bold 700)

 然后使用 import 的方式放入 style.css

sans-serif 是 fallback 字体.  

Remove Anchor Underline

auchor 默认都有下划线, 很破坏 design 的, 拿掉.

a {
  text-decoration: none;
}

居中

Title 和 CTA 要居中, 用 flex.

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

高度 100vh 是占满 1 屏.

   
(新)CSS(新)HTML5

相关

标签