welcome

ricardo-simple

导航

2022年4月27日 #

meta元素及各种单位

摘要: 如果我们要做手机端上用的页面(H5),除了用媒体查询进行小屏幕设备的适配,还需要设置一些特别的内容,比如页面是否允许被用户缩放 这里我们要用到<head>中的<meta>元素 meta元素 meta是一个自闭和元素,只有开始标签,没有结束标签 对meta元素进行设置指的是通过标签属性进行设置 met 阅读全文

posted @ 2022-04-27 21:05 RicardoSimple 阅读(285) 评论(0) 推荐(0) 编辑

设计稿尺寸处理

摘要: 实际的前端开发中,会根据设计稿的尺寸处理,而一般移动端设计稿是是基于iphone6设计的,宽度往往是750px 现在的高清屏一般的像素比是2,比如iphone6的实际可视区域宽度为375px,但能够显示750px,我们写样式代码时需要除以2才能用。 但每个值都要处理后才能用,很麻烦 Sass自定义函 阅读全文

posted @ 2022-04-27 21:05 RicardoSimple 阅读(274) 评论(0) 推荐(0) 编辑

响应式布局

摘要: 响应式布局 响应式布局就是一个网站能够兼容多个终端,而不是为了一个终端而做的一个特定的版本 响应式布局不仅仅是页面在不同设备上的不同布局,在同一设备上调整浏览器宽度,同样可以看到页面的布局发生了变化 要用到css3中的媒体查询@media 媒体查询 基本语法: "screen":告知设备在打印页面时 阅读全文

posted @ 2022-04-27 21:04 RicardoSimple 阅读(499) 评论(0) 推荐(0) 编辑

CSS预处理器

摘要: css预处理器 SCSS SASS sass是一款css的预编译器 定义了一种新的编程语言,为css增加了一些编程的特性,开发者使用这种语言进行编码后,代码需要编译成css才能被浏览器理解 sass比css更像一门编程语言,它可以有函数,变量,控制语句,导入,嵌套等高级功能 类似的css预编译器还有 阅读全文

posted @ 2022-04-27 21:03 RicardoSimple 阅读(267) 评论(0) 推荐(0) 编辑

CSS装饰

摘要: css装饰 cursor 鼠标箭头的变化就是cursor实现的 <p>点击这里了解更多cursor性质</p> 添加方式: p{ cursor: pointer; } cursor的值很多,有:pointer,default,text,move,grab,zoom-in,zoom-out MDN c 阅读全文

posted @ 2022-04-27 21:02 RicardoSimple 阅读(36) 评论(0) 推荐(0) 编辑

CSS高级美化

摘要: 单行文本超出省略 在网页中我们经常看到文本内容溢出,用省略号代替剩余内容的情况 正常情况下文字内容超过所给的范围宽度就会自动换行,但是我们不希望它换行,就涉及三个内容: 强制不换行,元素内容溢出处理和文本溢出省略 强制不换行 HTML5中推荐使用"white-space: nowrap"实现不换行 阅读全文

posted @ 2022-04-27 21:02 RicardoSimple 阅读(55) 评论(0) 推荐(0) 编辑

CSS定位

摘要: css定位 position-static(默认定位) css的一个非常关键的属性-position,这个属性在css中用于定位dom元素,修改dom元素的布局 static是遵循默认的文档流,从上到下,从左到右 除了这个static还有四个值 relative(相对定位) absolute(绝对定 阅读全文

posted @ 2022-04-27 21:01 RicardoSimple 阅读(45) 评论(0) 推荐(0) 编辑

CSS背景颜色

摘要: 普通的背景颜色就是直接设置 渐变色 这个按钮左边的颜色和右边的颜色就不一样、 左边的色值: #95CA47 右边的色值为: #4DC891 background的新的值linear-gradient(线性渐变) 渐变类型,渐变方向,开始颜色,结束颜色 每个值的含义 渐变方向 to right/to 阅读全文

posted @ 2022-04-27 21:01 RicardoSimple 阅读(189) 评论(0) 推荐(0) 编辑

css进阶

摘要: html5/css3介绍 html5简而言之就是html的升级版 语义化标签 html代码 <!-- 头部 --> <header>header</header> <!-- 主体 --> <main> <!-- 导航 --> <nav>nav</nav> <!-- 区块 --> <section>s 阅读全文

posted @ 2022-04-27 21:00 RicardoSimple 阅读(54) 评论(0) 推荐(0) 编辑

CSS盒模型

摘要: 盒模型 content 在页面中画出矩形的格子 div标签,许多标签都是在div标签的基础上改造的 div就是一个干净透彻的矩形,没有默认,没有margin,padding,border,content content div标签写出来是没有默认高度的,只有默认的宽度,和父标签宽度一样 设置矩形的宽 阅读全文

posted @ 2022-04-27 21:00 RicardoSimple 阅读(24) 评论(0) 推荐(0) 编辑