Bootstrap 是美国Twitter公司的设计师M

CSS CSS 学习网站 <a href="https://css.doyoe.com/" re

单行文字 <div class="snippet-clipboard-content notranslate position-relative overflo

webpack 解决模块组件化问题 <a href="https://www.webpackjs.com/" rel="no

React React 知乎专栏 <a href="https://zhuanlan.zhihu.com/leanreact" re

block，inline和inline-block概念和区别 <a href="https://www.cnblogs.com/Keit

盒模型 <a href="https://www.cnblogs.com/ztfjs/p/qdcss.html" rel="nofo

电子书集合 <a href="https://github.com/threerocks/studyFiles/tree/maste

lefex commented on May 24, 2024

CSS

CSS 学习网站

https://css.doyoe.com/

颜色搭配

https://htmlcolorcodes.com/

HTML

https://www.quackit.com/

JavaScript

https://www.javatpoint.com/javascript-tutorial

移动端Wap https://github.com/doyoe/trip

电子书 http://blog.codingplayboy.com/read/

http://blog.codingplayboy.com/aboutme/

https://www.yinchengli.com/category/code/%E5%89%8D%E7%AB%AF/

from dsa.

lefex commented on May 24, 2024

https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html float 布局的理解

from dsa.

lefex commented on May 24, 2024

https://juejin.im/post/5cdd6947518825693f1ebfcb 左右布局的实现

from dsa.

lefex commented on May 24, 2024

单行文字

overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis;

2行文字

-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

超链接

.btn {
           color: black;
           text-decoration: none;
        }

        .btn:hover {
            color: #0055cc;
        }

        .btn:active {
            color: #004ab3;
        }

        .btn:focus {
            outline: thin dotted #333;
        }

from dsa.

lefex commented on May 24, 2024

SCSS、SASS 的作用

CSS的升级版，可以在 CSS 中使用变量，函数等，需要编译器支持，把 SCSS 转换成 CSS。

https://www.sasscss.com/docs/

from dsa.

lefex commented on May 24, 2024

webpack

解决模块组件化问题
https://www.webpackjs.com/

from dsa.

lefex commented on May 24, 2024

React

React 知乎专栏 https://zhuanlan.zhihu.com/leanreact

from dsa.

lefex commented on May 24, 2024

block，inline和inline-block概念和区别

https://www.cnblogs.com/KeithWang/p/3139517.html

from dsa.

lefex commented on May 24, 2024

盒模型

https://www.cnblogs.com/ztfjs/p/qdcss.html

from dsa.

lefex commented on May 24, 2024

电子书集合

https://github.com/threerocks/studyFiles/tree/master/%E5%89%8D%E7%AB%AF

from dsa.

lefex commented on May 24, 2024

博客

https://www.zhangxinxu.com/

http://www.welefen.com/about

http://caibaojian.com/

https://yanhaijing.com/

from dsa.

lefex commented on May 24, 2024

viewport

https://www.cnblogs.com/2050/p/3877280.html
解读 viewport—网页自适应移动 app 神器
https://juejin.im/entry/58e750a02f301e0062367ded

from dsa.

lefex commented on May 24, 2024

布局 demo

https://github.com/Sweet-KK/css-layout

from dsa.

lefex commented on May 24, 2024

980px或1024px

devicePixelRatio dpi

from dsa.

lefex commented on May 24, 2024

Grid 布局

https://www.html.cn/archives/8510
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
http://cssgridgarden.com/
https://github.com/sylvainpolletvillard/postcss-grid-kiss
https://qishaoxuan.github.io/css_tricks/grid/#column-row-gap

from dsa.

lefex commented on May 24, 2024

FlexBox

https://www.w3.org/TR/css-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://zellwk.com/blog/simple-form-with-flexbox/
https://codepen.io/airen/full/YREoPq/
https://codepen.io/dwatow/pen/Nwmojy
https://segmentfault.com/a/1190000017115802

from dsa.

lefex commented on May 24, 2024

官网

Web 开发技术 MDN https://developer.mozilla.org/zh-CN/docs/Web
W3C https://www.w3.org/2002/03/tutorials.html#webdesign_htmlcss

from dsa.

lefex commented on May 24, 2024

好玩的网站

https://codepen.io/thebabydino/full/qgoBL

from dsa.

lefex commented on May 24, 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 500px;
            /* 下面这句话竟然能居中 */
            margin: 0 auto;
            background-color: gainsboro;
        }
div {
    color: red;
}
    </style>
</head>
<body>
    <div>
        <p>|__div->p1</p>
        <p>|__div->p2</p>
        <section>
            <p>|_____div->section->p</p>
            <p>|_____div->section->p</p>
            <div>|_____div->section->div</div>
        </section>
    </div>
    <p>|__p1</p>
    <p>|__p2</p>
</body>
</html>

from dsa.

lefex commented on May 24, 2024

DOM

http://css-tricks.com/dom/

It also links to these informative documents:

W3C: What is the Document Object Model? https://www.w3.org/TR/DOM-Level-2-Core/introduction.html
MDN: Introduction - Document Object Model https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Wikipedia: Document Object Model

from dsa.

lefex commented on May 24, 2024

san https://efe.baidu.com/blog/san-a-traditional-mvvm-component-framework/

from dsa.

lefex commented on May 24, 2024

https://github.com/fouber/blog

from dsa.

lefex commented on May 24, 2024

https://tc39.es/ecma262/ ECMA 标准

from dsa.

lefex commented on May 24, 2024

http://v1.iviewui.com/docs/guide/start 一套基于 Vue.js 的高质量 UI 组件库

from dsa.

lefex commented on May 24, 2024

https://developer.mozilla.org/en-US/docs/Web/Events DOM 事件
https://learn.jquery.com/events/introduction-to-events/ jQuery事件

from dsa.

lefex commented on May 24, 2024

元素的 Frame
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
HTMLElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

from dsa.

lefex commented on May 24, 2024

https://w3c.github.io/mini-app-white-paper/#introduction

from dsa.

lefex commented on May 24, 2024

https://demo.cssworld.cn/

from dsa.

lefex commented on May 24, 2024

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

from dsa.

lefex commented on May 24, 2024

from dsa.

lefex commented on May 24, 2024

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

from dsa.

lefex commented on May 24, 2024

function logFrame(target) {
let pros = ['offsetTop', 'offsetLeft', 'offsetWidth', 'offsetHeight',
'scrollTop', 'scrollLeft', 'scrollWidth', 'scrollHeight',
'clientTop', 'clientLeft', 'clientWidth', 'clientHeight'
];
logProperties(pros, target);
}