HTML基础与CSS样式分享｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天。作为一名野生前端玩家,第一次这种企业的培训营,很有新鲜感,也很有收获。

一、本节课内容重点：

今天的培训课复习了HTML中的常用标签和样式的基础知识，为后期的课程打下了扎实的基础。对于前端开发人员,熟悉各类标签十分重要,下完课之后,我尝试基于css3和styled.js写了几个小样式,也算是完成了工作室的作业。

二、课堂知识点纪要： HTML的基础标签比较多，常见的文本标签有如:

<p> </p> 文段标签
<li> </li> <ul> </ul> 列表
<table> </table> 表格标签有单标签和双标签之分,也有行内元素和块级元素之分:
单标签有:<img />、 <input />、 <area />等,
双标签有:<span> </span>、<div> </div>等,
行内元素有<img />、<strong>、<cite>等,
块级元素有:<div>、<table>、<form>等.

基础概念对后续学习也很有帮助,更多标签可以查阅HTML标签文档: HTML 标签参考手册 (w3school.com.cn)

三、实践练习例子：

第一个样式是一个用react封装的小卡片,调用方便,这个小案例中,可以学习如何封装组件:

import React from "react";
import { CardWrapper,CardTop,CardMessage} from "./CardPart"
interface MyCard {
    title?: string | React.ReactNode;
    subtitle?: string | React.ReactNode;
    paragraph?: string | React.ReactNode;
    border?: boolean;
    imageSrc?:string ;
    borderColorDeep?:string;
    borderColorLight?:string;
}
const Card:React.FC<MyCard> =(props)=> {
    const Shadow = typeof props.border === "undefined"?true:props.border
    const DpColor = props.borderColorDeep || '#0560f0'
    const LtColor = props.borderColorLight || '#0560f0'
    let imgName = props.imageSrc
    return (
        <CardWrapper>
            <CardTop border={Shadow} borderColorDeep={DpColor} borderColorLight={LtColor}>
                    <div className={"main"} >
                        <img className = {"imgStyle"}
                             src={require('../../../assets/img/'+imgName)} alt={""}/>
                    </div>
                    <div className={"subMain"}>
                        <div className = {"mainTitle"}>  { props.title }</div>
                        <hr className =  {"shortLine"} color={"#c2d7fe"} />
                        <div className = {"subTitle"}>   { props.subtitle }</div>
                    </div>
            </CardTop>
            <CardMessage>
                <div  className ={"message"}>
                    { props.paragraph}
                </div>
            </CardMessage>
        </CardWrapper>
    )
}
export default Card

//问就是手敲样式
//Authorized by iiru
import styled from "styled-components";
export const CardWrapper = styled.div`
    width: 388px;
    height: 388px;
    background: #ffffff;
    border-radius:12px 12px 12px 12px;
    box-shadow:-2px 1px 8px 2px grey;
 `
export const CardTop = styled.div<{
border: boolean, borderColorDeep: string, borderColorLight: string
}>`
  align="center"
  width: 100px;
  height: 200px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background-image: linear-gradient(${(props) => props.borderColorDeep},${(props) => props.borderColorLight});
  border-bottom: 1px solid ${(props) => props.border ?"#F0F0F0": "transparent"};
  border-radius: 12px 12px 0 0 ;
  
 .main{
  margin:8px 2px -30% -24px;
  height:200px;
  width:192px;
  float:left;
 }
 .imgStyle{
  color:"#F2F2F2";
  margin:0px 0% -30% 2%;
  height:216px;
  width:216px;
  }
  .subMain{
     height:200px;
     width:120px;
     margin:92px -15% -30% 10%;
     float:left;
  }
  .mainTitle {
    color:#fdfdfd;
    font-size: 28px;
    font-weight: 408;
  }
  .subTitle {
      margin:0px 20px 1% 12%;
      // color-image:linear-gradient(#6facfd,#4493fd);
      color:#6facfd;
      font-size: 16px;
      font-weight: 496;
  }
  .shortLine{
  border:0px;
  border-bottom:0.1px;
  padding:0.4px 144px 0 25px;
  height:5px;
  width:125px;
  }
`

export const CardMessage = styled.div`
padding:'10px'
border-radius: 0 0 12px 12px;
.message {
    margin: 10px 15% 0 15%;
    color:#d2cac6;
    font-size: 18px;
    font-weight: 240;
  }
};
`

实现效果: 2. 第二个样式是一个基础的网格布局,复习边距、盒子模型和flex布局:

//问就是手动化战士
//Authorized by iiru
import styled from "styled-components";
export const MainContain =styled.div`
    background:#1a1a1a;
    border: 1px solid #1b1b1b;
    border-radius :18px ;
    width:1150px;
    height:1150px;
    .ContentA{
        margin:2% 0 0 0;
        width:100%;
        height:49%;
    }
    .ContentB{
        margin: 0 0 2% 0;
        width:100%;
        height:49%;
    }
    .SubContentB{
         margin:0 1% 1% 1%;
         float:left;
         width:23%;
         height:46%;
    }
    .SubContentA{
         margin:0 1% 1% 1%;
         float:left;
         width:46%;
         height:94%;
    }
     
`
//大方块
export const SubMainContain =styled.div`
    background:#2a2a2a;
    border: 1px solid #252525;
    width:100%;
    height:100%;
    margin:0 0 0 1%;
    .pixTxt{
        border:30% 30% 30% 30%;
        color:#FEFEFE;
        font-size:48px;
    }
    .mainTxt{ 
        padding:5% 10% 5% 10%;
        .slogan{
            color:#838383;
            font-size:48px;
            font-weight:344;
        }
         .slogan-strong{
            color:#d95d5d;
            font-size:48px;
            font-weight:344;
        }
    }
    
`
//橘色小方块
export const SubContainOrg =styled.div`
    background:#ff6666;
    border: 1px solid #d95d5d;
    width:100%;
    height:100%;
    margin:0 2% 4% 2%;
    .pixTxt{
        padding:25% 25% 25% 25%;
        color:#FEFEFE;
        font-size:48px;
    }
    .iconStyle{
        margin:10%
    }
    
`
// 灰色小方块
export const SubContainCommon =styled.div`
    background:#2a2a2a;
    border: 1px solid #252525;
    width:100%;
    height:100%;
    margin:0 2% 4% 2%;
    .imgStyle{
       width:100%;
       height:100%;
    }
    .titleTxt{
        padding:8% 10% 0% 10%;
        color:#FEFEFE;
        font-size:20px;
        font-weight:512;
    } 
    .mainText{
         padding:2% 10% 0% 10%;
        .mainTxt{
            color:#838383;
            font-size:20px;
            font-weight:364;
    }
        .mainTxt-strong{
            color:#d95d5d;
            font-size:20px;
            font-weight:364;
    } 
    }
    
`

四、参考文献：

HTML标签文档:HTML 标签参考手册 (w3school.com.cn)
Card组件封装:React 封装 Card 组件 - 爱放屁的菜鸟 - 博客园 (cnblogs.com)
Style-Component中文文档styled.js文档_百度搜索 (github.com)

五、心得体会：

css样式在前端中是基础中基础,必须扎实地打好地基才能平地起高楼,学习前端切记浮躁,前端技术栈需要由浅入深,由易到难。

HTML基础与CSS样式分享｜ 青训营笔记

HTML基础与CSS样式分享｜ 青训营笔记

HTML基础与CSS样式分享｜青训营笔记

HTML基础与CSS样式分享｜青训营笔记