步骤

• Github创建仓库，仓库名字为****.github.io，许可证选择MIT
• 创建index.html
• 地址栏输入****.github.io即可访问博客主页

基础知识总结

首先规划好网页的布局结构，采用div包含不同的模块

网页的主要模块：header、main、footer

  header中常用部分：nav导航栏
  main中常用部分：section划分不同的大模块
  footer中常用的部分：微信、微博等图标的引用
  1、打开http://www.fontawesome.com.cn/
  2、点击开始使用，输入自己的邮箱便会收到一封邮件，将邮件中的内容
  <script src="https://use.fontawesome.com/4d7f5aa60e.js"></script>复制到index.html的head中
  3、在fontawesome的图标库中搜索weixin、weibo等便可找到对应的图标对应的源码，然后复制源码到对应位置即可

html中主要包含的是网页的主要内容和元素

css中则包含网页的样式

让一个div元素中的内容水平垂直居中等可利用flex布局

.header-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 53px); //calc用于计算，注意此处的减号左右两边需要有空格，否则可能会导致样式无效
}

margin:0 auto;也常用来左右居中

display:grid;grid栅格布局

.home-blog-content{
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; //三个部分各占三分之一，fr表示弹性系数的单位
    margin: 0 auto;
    grid-column-gap: 30px;

}

图片保留原始比例object-fit属性

object-fit:cover;

颜色的渐变

#home-content-email{
    background-color: #f5f7f4;
    transition: background-color 0.5s linear;
}

px em rem vw 100%等

菜鸟教程讲解

自适应之媒体查询

@media(orientation:portrait){//识别横竖屏
    #home-content-email{
        width: 80vw;
    }
    .home-blog-content{
        grid-template-columns: 1fr;
        grid-row-gap: 35px;
    }
  }

利用js添加html中的元素

document.addEventListener('DOMContentLoaded',init)

function init(){
    addListeners()
    createBlogCard()
}

function addListeners(){
    document.querySelectorAll('nav a').forEach(item => {
        item.addEventListener('click',onNavigation)
    })
    document.getElementById('home-content-submit').addEventListener('click',onSubmit)
    // document.getElementById('home-content-email').addEventListener('keypress',(event) => {
    //     console.log(event)
    //     if(event.key == "Enter"){
    //         onSubmit()
    //     }
    // })
}

function onNavigation(event){
    document.querySelectorAll('nav a').forEach(item => {
        item.classList.remove('active')
    })
    event.target.classList.add('active')
}

function createBlogCard(){
    let contentDiv=document.querySelector('.home-blog-content')
    contentDiv.innerHTML=""
    for(let i = 0 ; i < 3 ; i++){
        let cardContent = blog[i]

        let card = document.createElement('div')
        card.className ="home-blog-card"

        card.addEventListener('click',() =>  window.open(cardContent.href))

        let img = document.createElement('img')
        img.className = "home-blog-image"
        img.src = cardContent.image

        let cardTitle = document.createElement('div')
        cardTitle.className = "home-blog-card-title"

        let line = document.createElement('div')
        let title = document.createElement('p')
        title.textContent = cardContent.title

        cardTitle.appendChild(line)
        cardTitle.appendChild(title)

        card.appendChild(img)
        card.appendChild(cardTitle)

        contentDiv.appendChild(card)
    }
}
function onSubmit(event){
    event.preventDefault()//form表单中的button默认点击会刷新网页，此处阻止刷新


    let input = document.getElementById('home-content-email')
    let value = input.value

    console.log('email:',value)
    if(!value){
        alert("请输入联系方式")
        input.focus()
    }
    else{
        //处理数据

    }

}

使用append方法时为从里到外逐步添加。