lefex commented 5 years ago

Bootstrap 是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。它提供了非常多的 CSS 样式，可以直接拿来使用。

lefex commented 5 years ago

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/

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

单行文字

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;
        }

lefex commented 5 years ago

SCSS、SASS 的作用

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

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

lefex commented 5 years ago

webpack

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

lefex commented 5 years ago

React

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

lefex commented 5 years ago

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

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

lefex commented 5 years ago

盒模型

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

lefex commented 5 years ago

电子书集合

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

lefex commented 5 years ago

博客

https://www.zhangxinxu.com/

http://www.welefen.com/about

http://caibaojian.com/

https://yanhaijing.com/

lefex commented 5 years ago

viewport

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

lefex commented 5 years ago

布局 demo

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

lefex commented 5 years ago

980px或1024px

devicePixelRatio dpi

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

官网

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

lefex commented 5 years ago

好玩的网站

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

lefex commented 5 years ago

<!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>

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

https://github.com/fouber/blog

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

https://demo.cssworld.cn/

lefex commented 5 years ago

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

lefex commented 5 years ago

lefex commented 5 years ago

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

lefex commented 5 years ago

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

lefex commented 5 years ago

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=FF5722 色彩