css框架 | 易学教程

第01天HTML与CSS

阅读更多关于第01天HTML与CSS

一.HTML与css #day02_CSS 1.回顾: html:超文本标记语言超文本:文本…,超链接|音频|视频|图片标记:标签 <标签名></标签名> < 标签名/> 标记(标签): 1.标题标签 n:1-6 2.段落 —>块标签 3.文字属性 <标签名属性名 = 值属性名 = 值 > size,color 4.字体修饰标签 :加粗斜体 5.图片: width: alt: 6.超链接: 锚点: 1.设置锚点 2.找锚点 <a href=""#id属性值/name属性值> 7. 线条 8. 换行 9.列表 9.1:有序列表 9.2:无序列表 9.3:自定义列表 10.表格 table 行列表头行合并 rowspan 列合并 colspan 11.表单标签(重点) < form method = " " action = " " > </ form > 1.普通输入文本框 < input type = " text " name = " " value = " " > 2.密码框 password 3.单选 radio 默认值checked < input type = " radio " name = " " value = " " > checked 4.复选框 checkbox 5.上传文件 file 6. 按钮 button 提交 submit 重置

【转载】CSS Media媒体查询使用大全，完整媒体查询总结

阅读更多关于【转载】CSS Media媒体查询使用大全，完整媒体查询总结

【原文 https://www.cnblogs.com/lguow/p/9316598.html 】学习总结： 1.设置IE的渲染方式为最高：　　IE浏览器升级到IE9以上，但是有时候浏览器的文档模式却是IE8，为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新　　 <meta http-equiiv="X-UA-Compatible" content="IE=edge"> 还有一个更给力的写法： <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> 这段代码后面加了一个chrome=1, 这是由于GOOGLe Chrome Frame(谷歌内置浏览器框架GCF), 如果用户电脑焊装这个chrome插件，就可以让电脑内的IE浏览器贵宾版本因素，使用webkit引擎进行排版及运算。当然如果用户没有安装这个插件，这段代码就会让IE浏览器以最高的文档模式展现效果。 2.总体开发思路：使用css3中媒体查询的大致思路就是判断网页在不同设备中所处的宽度范围，这样的范围可能有三种（PC、平板、手机），也可能是四中（PC、平板、中大屏手机、小屏手机），当然也可能只需要两种（平板、手机，pC端单独开发一版时可不作为CSS3媒体查询的适用对象）

CSS

阅读更多关于 CSS

= CSS ============================ CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术 CSS导入方式的优先级：采用就近原则，什么样式离元素越近，优先用什么样式。优先采用内联式，嵌入式和外联式，哪个离元素越近，先用哪个 CSS样式规则：元素选择器：p{} 凡是标签名称为p的元素均采用该样式。 h1，h2{} h1和h2标签采用该样式类选择器：.myclass{} 凡是使用class=“myclass”的元素均用该样式，可以给同一个元素加上多个类选择器，中间以空格隔开。 id选择器：#myid{} id属性为myid的元素采用该样式包含选择器：#imgTable img{} id属性为ingTable元素中的img子元素采用该样式通配选择器：#mydiv *{} id属性为mydiv的元素中，所有的子元素采用该样式伪类选择器：#myImage：hover{} 当鼠标悬停在id为my Image的元素时，采用该样式属性选择器：input[type=text]表示input标签的元素，type属性为text的元素，采用该样式 = 样式规则的位置 ===================== 外部样式表不需要style标签嵌入式样式表内联样式

bootstrap

阅读更多关于 bootstrap

bootstrap4.3 0) 介绍 html/css/js框架，方便创建一个响应式的，移动优先的网页 1. 无需编写大量的基础的css代码 2. 无需编写大量的基础的js代码 3. js依赖jQuery、popper（定位） css布局 css基础样式组件（结构，样式，功能）如果编写H5页面，并且这网页在手机中打开 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> hello world 1. 导入依赖 cdn 本地模块化（es6） 2. 应用 .btn 布局(12栅格系统) 浮动布局/伸缩盒布局/定位布局 container 在特定的屏幕都会有一个最大的宽度，一般不会占满整个屏幕 container-fluid 在任意屏幕下都会占满整个屏幕 row 行 col 列（极小屏中的列）实现响应式布局 col 极小 [,576px] col-sm 小 [576px,768px] col-md 中 [768px,992px] col-lg 大 [992px,1200px] col-xl 极大 [1200px,] 移动优先只有在大屏情况下一行显示两列 border 为盒子添加边框 w-100 换行后内容重组 col-auto 内容宽度自适应 ml-auto margin-left

Bulma CSS - 开始

阅读更多关于 Bulma CSS - 开始

Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式有数种方法可以安装Bulma：使用npm安装Bulma包使用cdnjs CDN链接到Bulma样式表从GitHub项目库获得最新的开发版本 1. 使用npm安装Bulma包 npm install bulma 2. 使用cdnjs CDN https://cdnjs.com/libraries/bulma 3. 从GitHub项目库下载 https://github.com/jgthms/bulma/tree/master/css Font Awesome 字体图标如果想使用图标，可加上Font Awesome 字体图标库： <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> 规范要求 Bulma能正常工作需要把网页设置为支持响应式。 1. 使用HTML5 doctype <!DOCTYPE html> 2. 添加支持响应式的viewport元标记 <meta name="viewport" content="width=device-width, initial-scale

Bulma CSS - 简介

阅读更多关于 Bulma CSS - 简介

Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什么？ Bulma是一个开源、简单、现代的CSS框架，它基于flexbox模块(用于开发响应式布局结构)，纯css没有js代码。版本历史 Bulma 于2016年发布，遵循MIT license。特性轻量级的现代CSS框架，使用Flexbox 支持响应式布局，网格等纯CSS，没有Javascript代码可定制、模块化优点为电脑、平板和手机提供响应式设计纯CSS框架，很容易与JavaScript框架集成，如VueJS, ReactJS等代码优雅简洁来源： https://www.cnblogs.com/haibianren/p/11525783.html

Bulma CSS - CSS类

阅读更多关于 Bulma CSS - CSS类

Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一个纯粹的CSS框架，没有任何JavaScript代码，最终生成的只是一个简单的.css文件: https://github.com/jgthms/bulma/blob/master/css/bulma.css Bulma的原则是不直接对标签设置样式，而是通过css类，让开发人员选择是否应用Bulma样式。例如 <input type="text"> ，如果不设置css类，是没有Bulma的样式效果的，只有当设置 .input css类后才有： <input type="text" class="input"> 。 Bulma只在2种特殊情况下，直接对标签设置样式：重置页面样式： generic.sass 文本内容的样式(如所见即所得)： .content css类包含的内容主要的CSS类 Bulma中主要包含了以下几大类的css定义修饰符分列布局表单元素组件修饰符可以方便地设置元素的颜色、大小等。如下面定义了一个按钮， is-primary 就是修饰符 <a class="button is-primary"> Button </a> 分列

前端组件化

阅读更多关于前端组件化

在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。那么前端组件化开发都经历了哪些阶段呢？二、前端组件化开发发展之路 1、交互少的静态页面时期：公共模块和CSS 这是一个很古老的时代，那时的前端页面就是一些基本的HTML标签以及JS和CSS，页面上大部分都是一些静态的文字，就在这个时期，前端JS和CSS已经出现了组件化，或许更多的应该成为模块化，即开发者把不同模块的或者公共的JS和CSS放在不同的文件中，然后在页面引入并使用，这种方式也沿用至今。 2、繁琐的早期动态页面时期：动态引入由于静态页面不能在页面上存储数据，阅读者也不满足于基本的页面交互，更希望页面能够活起来，且能够把交互的数据存储起来，于是出现了很多服务端技术，比如ASP，JSP。这些技术的出现使得前端页面活起来了，用户可以根据自己的需求进行数据的交互。然而这时的页面上充斥着业务逻辑，随着业务逻辑的增多，页面的内容也越来越多，越来越复杂。在这个时期前端组件化开发得到了一定的发展，开发者已经不满足于简单的将JS和CSS文件模块化

e

阅读更多关于 e

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明普通变量、静态变量、模块和类。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等，另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

e

阅读更多关于 e

订阅 css框架