2024年Web前端最新cNode------路由设置以及项目基本框架搭建，Web前端程序员春招三面蚂蚁金服

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

• 使用路由建立框架，实现页面的跳转

router/index.js

import React,{Component} from ‘react’;

import ReactDOM from ‘react-dom’

import {Switch,Route,Redirect} from ‘react-router-dom’;//使用选择，路由，重定向。

import Index from “…/view/index/index”;

import Book from “…/view/book/book”;

import User from “…/view/user/user”;

import Details from “…/view/details/details”;

import About from “…/view/about/about”;

class RouterIndex extends Component{

render(){

return (

<Route path = “/” exact render={()=>(

)}/>//严格匹配，当访问根目录下时跳转至index路由

)

};

}

export default RouterIndex;//导出模块

• index.js

import React, { Component } from ‘react’;

class Index extends Component {

render() {

return (

首页！

);

}

}

export default Index;

• 导航main-header.js

import React,{Component} from ‘react’;

import Nav from ‘./nav’;//自己写的模块

//使用Layout布局，Row表示行，Col表示列，图标，下拉菜单，按钮

import {Layout,Row,Col,Divider,Icon,Dropdown,Button} from ‘antd’;

export default class mainHeader extends Component{

render(){

return (

<Layout.Header>

//一行为24格

//md规格下占行的6格，xs规格下占24格

cNode

<Dropdown overlay={

}

placement = “bottomRight”

trigger = {[“click”,“touchend”]}

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-2Au9grZ3-1715419311733)]