![](https://img-blog.csdnimg.cn/b226204b609e465d8fee2275b31c6181.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css
文章平均质量分 85
html标签学习和css样式学习笔记
焦妮敲代码
仅此一生,竭尽全力
展开
-
Bootstrap框架——用于开发响应式布局、移动设备优先的 WEB 项目
Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。如果你没有用过该框架,那么在本篇文章中,你可以学会Bootstrap的基本使用。原创 2022-03-14 00:08:08 · 1830 阅读 · 1 评论 -
两种移动适配方案——rem、vm/vh
移动适配1. rem媒体查询flexiable.js适配2. vm/vh移动适配指的是在屏幕宽度不同时,网页元素尺寸不同(等比缩放)1. remrem单位是相对单位,是相对于HTML标签的字号计算结果1rem = 1HTML字号大小例如在HTML字号大小为20px时,box盒子的宽度为520=100px,高度为320=60px/* 1rem = 1html标签字号大小 */ html { font-size: 20px; } .box { width: 5r原创 2022-03-12 20:12:53 · 6340 阅读 · 1 评论 -
Less语法的简单使用
Less (Leaner Style Sheets ) 是一门向后兼容的 CSS 扩展语言,其扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。原创 2022-03-12 20:08:24 · 580 阅读 · 0 评论 -
Flex弹性布局
1.必备基础知识屏幕大小分辨率视口标签二倍图百分比布局2. Flex布局主轴对齐方式(justify-content)侧轴对齐方式(align-items)伸缩比(flex:整数值)主轴方向(flex-direction)弹性盒子换行(flex-wrap)原创 2022-03-12 15:41:25 · 394 阅读 · 0 评论 -
如何在网页中使用阿里图标iconfont(2022最新版详细)
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录。选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默认选择,点击新建即可。搜索自己需要的图标,比如购物车图标选择自己图标感兴趣的,加入购物车。选择好后,点击右边的小购物车,添加到刚创建的项目中然后点击下载即可使用文件把下载解压完的文件移入自己的项目中去,然后通过link引入iconfont.css。打开下载文件的demo_in原创 2022-02-09 12:25:37 · 2153 阅读 · 0 评论 -
CSS——平面转换、渐变背景、空间转换、动画
移动web学习1. 平面转换位移旋转修改寻转中心点多重转换旋转1. 平面转换使用transform属性实现元素的位移、旋转、缩放等效果位移注意:一般要加过渡属性transition: all 0.5s;这样就会显示移动的效果。谁变化就加谁身上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati原创 2022-02-09 15:59:47 · 822 阅读 · 0 评论 -
小兔鲜静态页面(Html5+CSS3)
小兔鲜静态页面1. 补充知识点精灵图背景图片大小盒子阴影过渡1. 补充知识点精灵图介绍使用步骤例子精灵图如下:取第三个小图,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-12-22 21:11:42 · 3863 阅读 · 1 评论 -
CSS学习笔记三——详细附图
CSS学习笔记三1. PxCook2. 盒子模型2.1 盒子模型的介绍宽高边距(border)内边距(padding)外边距(margin)2.2 综合案例新浪导航1. PxCook实际开发需要测量工具测量图片尺寸大小或者颜色,如图所示。一般我们使用的是Pxcook软件,点击链接可以查看下载和使用教程。2. 盒子模型2.1 盒子模型的介绍示例<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-12-17 21:22:55 · 313 阅读 · 0 评论 -
CSS学习笔记二 ——详细附图
CSS学习笔记二1. 选择器进阶复合选择器后代选择器(注意空格)子代选择器(大于号)并集选择器(,)交集选择器hover伪类选择器Emment语法2. 背景相关属性3. 元素显示模式4. CSS特性5. 综合案例1. 选择器进阶复合选择器后代选择器(注意空格)1.相关介绍2. 演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-12-04 17:06:20 · 326 阅读 · 0 评论 -
CSS学习笔记一 ——详细附图、入门必看
CSS入门1. 基础认知初始引入方式2. 基础选择器标签选择器类选择器id选择器通配选择器3. 字体和文本样式font文本缩进水平对齐方式文本修饰行高颜色常见取值标签水平居中方法(常用)4.Chrome调试工具1. 基础认知初始CSS是层叠样式表。css写在style标签中,style标签一般写在head标签里面,title标签下面。(1)选择器是查找标签的,css的注释:/* */例子:<!DOCTYPE html><html lang="en"><原创 2021-12-02 21:47:44 · 419 阅读 · 0 评论 -
PxCook的基本使用
PxCook的基本使用1. 下载2. 创建项目3. 设计模式——png扩展名尺子吸管4. 开发模式——psd扩展名1. 下载点击官网链接,直接下载。下载好后直接安装即可2. 创建项目右上角点击创建项目->选择Web->填写项目名字->创建项目,即可得到一个项目。如图所示3. 设计模式——png扩展名如果图片是png的则使用设计,如图所示(把图片拖进来,然后双击打开)。常用的功能主要是下面两个尺子吸管4. 开发模式——psd扩展名选择开发模式后,直接点击想查原创 2021-12-17 19:35:35 · 14179 阅读 · 4 评论 -
Html5学习笔记——详细附图
HTML5和CSS3入门1. HTML51.1 基础知识1. HTML51.1 基础知识1.前端的代码要通过 **浏览器转化(解析和渲染)**成用户看到的网页。2.原创 2021-11-30 10:46:17 · 1126 阅读 · 0 评论