前端
关注
分享
扫一扫
罗彬桦
君子以自强不息
展开
-
Lodash（纯函数的代表）
const _ = require('lodash')const array = ['jack', 'tom', 'lucy', 'kate']console.log(_.first(array))console.log(_.last(array))console.log(_.toUpper(_.first(array)))console.log(_.toUpper(_.first(array)))console.log(_.reverse(array))const r = ...原创 2021-12-02 19:46:47 · 847 阅读 · 0 评论 -
纯函数概念
纯函数概念纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用 纯函数就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)lodash是一种纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法 数组的 slice 和 splice 分别是：纯函数和不纯的函数 slice 返回数组中的指定部分，不会改变原数组 splica 对数组进行操作返回该数组，会改变原数组// 纯函数和不纯函数// slice / splicelet ar.原创 2021-12-02 18:13:31 · 262 阅读 · 0 评论 -
闭包Javascript
闭包闭包（Closure）：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。 可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员// 函数作为返回值function makeFn () { let msg = 'Hello function' return function () { console.log(msg) }}const fn = makeFn()fn()// oncefunction once (fn) { l原创 2021-12-02 17:24:59 · 768 阅读 · 0 评论 -
页码的制作
页码的制作注意点：inline（行内元素）block（块级元素）inline-block（融合行内于块级） <h2>新闻中心</h2> <div class="news_list"> <ul> <li> <span class="date">2014-06-01</span原创 2021-01-21 03:50:57 · 213 阅读 · 0 评论 -
新闻详细页的制作
新闻详细页的制作 <div class="list_box"> <h2>新闻中心</h2> <h1>[有奖活动]给父亲的三行书信</h1> <p class="list_box_newInfo">发布人:Admin 发布时间:2014-06-01 浏览:3246次</p> <div cla原创 2021-01-21 04:11:45 · 284 阅读 · 0 评论 -
企业网站焦点图制作
企业网站焦点图制作用的是myfocus这个插件。注意点：焦点图初始化的ID，与图片列表最外层的ID一致。图片列表外面，包裹一个class为pic的div。具体思路做轮播图的时候，记住，外面一个大盒子 <div class="ad" id="picBox">里面一个盒子 <div class="pic">最里面还有一个ul 设置轮播图是哪个盒子。 <script type="text/javascript"> myFocus.set({原创 2021-01-20 16:23:11 · 290 阅读 · 0 评论 -
企业网站制作之头部制作（一）
慕课企业网站综合布局实战思路： 利用了两个盒子嵌套，一个ul嵌套3个li即可。具体思路：先创建外层次top盒子<div class="top">再创建内层top_content盒子 <div class="top_content">后面创建ul，ul里面嵌套3个li标签。3-1企业网站制作之头部制作（一）@charset "utf-8";/* CSS Document */* { padding: 0; margin: 0; font-size: 12p原创 2021-01-20 12:54:56 · 627 阅读 · 0 评论 -
企业网站制作之新闻中心制作
企业网站制作之新闻中心制作新闻中心制作效果图：思路： 很简单，不说了。<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Co原创 2021-01-20 20:31:09 · 812 阅读 · 1 评论 -
新闻列表的制作
新闻列表的制作注意点：行内样式的优先级高于外部样式行内样式适合于写少量样式的地方<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-eq原创 2021-01-21 01:16:22 · 981 阅读 · 0 评论 -
左侧列表制作
左侧列表制作思路： 分为两大块，标题一块，信息一块即可。注意点：a标签是内联元素，像做这种鼠标移动li变色的，就把a标签+display:block; 变为块级元素就会铺满li。 <div class="list_main"> <div class="news_type"> <h2>新闻中心</h2> <div class="news_type_conten原创 2021-01-21 02:25:42 · 316 阅读 · 1 评论 -
内容展示区制作
内容展示区制作.copyright{width:100%;height:200px;background-color:#E8E8E8;margin-top:10px;clear:both; //要给最下方清除浮动！}兼容IE6-IE8的做法。min-height：是最低高度，可以伸缩。 <div class="list_main"> <div class="news_type"></div> <原创 2021-01-21 02:01:00 · 117 阅读 · 0 评论 -
企业网站侧边栏制作
企业网站侧边栏制作思路： 分为两大块，一块是上面的视频，和下面的图片。具体思路：先创建 <div class="sidebar">装侧边栏侧边栏上面<div class="video"> 下面 <div class="sidebar_ad">然后上面又分为两块，一块是<div class="title"> 放标题，另外一块是 <div class="video_content"> 放视频<div class="sidebar_原创 2021-01-20 23:56:42 · 185 阅读 · 0 评论 -
新闻列表页的制作
新闻列表页的制作思路：简单的思路即可。<div class="list_box"> <h2>新闻中心</h2> <div class="news_list"> <ul> <li> <span class="date">2014-06-01</span> &l原创 2021-01-21 03:33:25 · 1290 阅读 · 0 评论 -
导航部分制作部分（一）
导航部分制作制作过程：制作思路：因为是导航栏，所以创建一个 <div class="nav">盒子在里面又分为左中右<div class="nav_left"></div> <div class="nav_mid"></div> <div class="nav_right"></div> 三个盒子。中间又分为 左<div class="nav_mid_left"> 右 <原创 2021-01-20 13:47:45 · 180 阅读 · 0 评论 -
导航部分制作部分（二）
导航部分制作部分（二）思路： 导航部分制作部分（一）做的是整体的布局，导航部分制作部分（二）做的是 <div class="nav_mid_left"> 和 <div class="nav_mid_right"> 的整体实现。具体思路：将li浮动到左边 float：left给每个li设置宽度100px，设置水平居中text-align:center; 设置高度居中 line-height:40px;右边搜索栏，给input加一个search_text，设置背景搜索框，原创 2021-01-20 15:50:21 · 139 阅读 · 0 评论 -
底部版权区的制作
底部版权区的制作思路： 其实外部就是一个 <div class="copyright"> ，里面是<div class="copyright_content"> 盒子，再里面就是5个li，每个li里面又嵌套着。注意点：.copyright_content li 指的是它的下一层的li。就是关于、课程、关注、留言、微信关注那一层。记得要在wrap结束后插入 <div class="copyright"> <div class="copy原创 2021-01-21 00:33:47 · 1603 阅读 · 2 评论 -
企业展示区制作
企业展示区制作思路： 一个大盒子，里面包裹着3个小盒子。 <div class="main"> <div class="news"></div><!--news结束--> <div class="course"></div><!--course结束--> <div class="sidebar"></div><!--原创 2021-01-20 18:06:18 · 213 阅读 · 0 评论 -
前端打包好后运行
可以在打包好的dist下面运行如下命令：下载http-servernpm install http-server -g开启 http-server服务终端进入目标文件夹，然后在终端输入：$ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新）Starting up http-server, serving ./Available on: http://127.0.0.1:8080 http://192....原创 2021-08-20 17:15:55 · 1297 阅读 · 0 评论 -
前端分页组件的使用
前端分页组件的使用引入分页组件调用的同时，并把list传进去了。组件pagination.vue<template> <div class="pagination" role="group" aria-label="分页"> <button type="button" class="btn btn-default btn-white btn-round" v-bind:disabled="page === 1"转载 2021-03-07 05:19:38 · 254 阅读 · 0 评论 -
flex布局体验
flex布局1.1 传统布局于flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局集为简单，移动端应用很广泛PC端浏览器支持情况较差IE 11或更低版本，不支持或仅部分支持建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.2 初体验<!DOCTYPE html><html lang="en"><head>原创 2021-02-27 02:19:43 · 812 阅读 · 0 评论 -
jQuery按钮点击控制展开收起+动画效果
jQuery:toggle()方法可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用。语法：toggle(fn,fn2,[fn3,fn4…]),其中fn、fn2、fn3、fn4等函数依次调用。效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2021-02-02 23:21:34 · 1586 阅读 · 0 评论 -
定时展开与定时收起
效果图：作用: 广告自动上下拉开setTimeout(code,millisec)方法用于在指定的毫秒数后调用函数或计算表达式addH() | subH()onload()事件在页面或图象加载完成后立即发生<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2021-02-02 21:47:05 · 128 阅读 · 0 评论 -
使用JavaScript实现动态效果
使用JavaScript实现动态效果效果图：就是把<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2021-02-02 21:42:54 · 1998 阅读 · 0 评论 -
首页布局
三、首页的制作自顶自下的布局方法！然后再分为：原创 2021-01-20 02:04:02 · 132 阅读 · 0 评论 -
浮动float简单理解
浮动Float浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样。@charset "utf-8";.box1{ width:100px; height:120px; border:1px solid #F00; background-color:#CF9;}.box2{ width:100px; height:150px; bor原创 2021-01-20 00:46:13 · 260 阅读 · 0 评论 -
盒子模型简单理解
盒子模型盒子模型的概念盒子模型：用这种思想来 “盛放” 网页中的各种元素。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小、线型和颜色之分，外面又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其他盒子要保留多大距离。在css中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边框不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每原创 2021-01-20 00:09:42 · 1858 阅读 · 0 评论