随笔分类 - Html 和 Css
摘要：2.1 方法一 （1）调整尺寸大小 直接在连接地址后添加形如=600x600的数字即可调整图片大小。（推荐）  说明：等号 " = " 前
阅读全文
摘要：> HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： > (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-
阅读全文
摘要：问题：复制stylus样式后报错意外缩进 原因：stylus中混用了tab(\t)和空格(' ')导致stylus无法正常编译 最简单解决：查看编辑器右下角一tab等于几个空格，然后把空格*n替换成\t即可 sublime解决： ctrl+shift+p 进入设置搜索框 输入：settings 然后
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：<style> div{ width: 200px; height: 35px; border: 2px solid gray; /*父相*/ position: relative; } span{ /*子绝：相对于父元素进行绝对定位*/ position: absolute; top: 3px;
阅读全文
摘要：<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transform
阅读全文
摘要：简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。 我们要做的,就是确定好我们当前设备的html文字大小就可以了 下载地址：https:
阅读全文
摘要：一、rem适配方案 让一些不能等比自适应的元素,达到当设备尺寸发生改变 的时候,等比例适配当前设备。 使用媒体查询根据不同设备按比例设置html的字体大小， 然后页面元素使用rem做尺寸单位,当html字体大小变化 元素尺寸也会发生变化,从而达到等比缩放的适配。 二、rem实际开发适配方案 ① 按照
阅读全文
摘要：维护css的弊端 CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念。 ●CSS需要书写大量看似没有逻辑的代码. CSS冗余度是比较高的。 ●不方便维护及扩展 ,不利于复用。 ●CSS 没有很好的计算能力 ●非前端开发工程师来讲 ,往往会因为缺少CSS编写经验而很难写出组织良好且
阅读全文
摘要：学习目标 能够使用rem单位 能够使用媒体查询的基本语法 能够使用Less的基本语法 能够使用Less中的嵌套 能够使用Less中的运算 能够使用2种rem适配方案 能够独立完成苏宁移动端首页 解决方案 1.页面布局文字能否随着屏幕大小变化而变化? 2.流式布局和flex布局主要针对于宽度布局,那高
阅读全文
摘要：flex布局原理 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 1.布局原理 flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何-个容器都可以指定为flex布局。 当我们为父盒子设为
阅读全文
摘要：width:calc(100%-50px); width:calc(100px/5); 加减乘除都可进行
阅读全文
摘要：一、属性选择器 <style> /*1.属性选择器：用中括号选择含有value属性的input元素*/ input[value]{ color: blue; } /*2.属性选择器：用中括号选择含有value属性值为password的input元素*/ input[type=password]{ c
阅读全文
摘要：文档：https://www.runoob.com/html/html5-form-input-types.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
阅读全文
