![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 76
YinJie…
罗曼罗兰说:“这个世上只有一种真正的英雄主义。那就是,认清生活的真相,并且仍然热爱它。
展开
-
[css]Flex弹性布局详解 [附携程网移动端案例]
目录一、flex布局体验:sunglasses:传统布局:flex弹性布局:二、flex布局父项常见属性:running:1.flex-direction2.justify-content3.flex-wrap4.align-items(单行)5.align-content(多行)三、flex布局子项常见属性:sunny:1.flex属性2.align-self四、携程网移动端案例:sunflower:Flex布局可以说是不论pc端移动...原创 2022-04-06 19:22:12 · 2021 阅读 · 4 评论 -
响应式开发原理及Bootstrap栅格布局详解
文章目录响应式开发原理响应式布局容器Bootstarp简介优点Bootstarp的使用Bootstarp使用四部曲bootstrap的应用布局容器container类栅格系统简介栅格系统参数案例列嵌套列偏移响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式布局容器响应式需要一个父级做为布局容器 ,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面元素的排列方式和大小,从而实现不同屏幕下,看到不同的原创 2022-03-27 20:54:05 · 3372 阅读 · 1 评论 -
移动web开发rem适配布局(rem+Less+媒体查询)
文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范:变量命名规范:Less编译移动端基础meta视口标签我们在移动端开发时都要加上这句话:<meta name="viewport" content="width=device-原创 2022-03-24 16:48:26 · 1290 阅读 · 1 评论 -
[css3] focus伪类选择器-获得焦点元素
:focus伪类选择器用于选取获得焦点的元素,这里我们主要针对的是表单元素我们新建了一个非常简单的文本框,我想在我们的光标定到这的时候让边变成蓝色并且文本框变长,应该怎么做?代码示例:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-sc原创 2022-03-16 08:17:56 · 1236 阅读 · 0 评论 -
[CSS实例] 这是你要的高级感吗-滑动名片
话不多说,先来看效果:示例代码:<!DOCTYPE html><html> <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"&原创 2022-03-06 14:28:01 · 256 阅读 · 0 评论 -
[web-css] 白天/黑夜场景切换案例
我们先看一下效果:代码如下:3.2.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="i原创 2022-03-04 13:30:20 · 581 阅读 · 1 评论 -
【CSS3】你会用CSS3画对话框吗?
我们想要实现的是这样的效果很明显这是由左边一个小三角形和右面的长方形组成的我们只想用到一个div盒子,应该怎么做最方便呢?那我们就必须要用到伪元素了,左边的那个小三角形就是通过伪元素选择器完成的我们有必要说一下画三角形的技巧:这里需要讲一下border属性,当元素border很大而元素的宽和高为零的时候,border实际显示的是一个矩形,而如果只显示其中一条边,那么看起来的形状就是一个三角形。下面是对话框的代码:html:<!DOCTYPE html><html>原创 2022-02-27 15:19:43 · 589 阅读 · 1 评论 -
【CSS】浅谈浮动
文章目录一、文档流介绍二、什么是浮动?三、浮动总结四、清除浮动1.为什么要清除浮动?2.清除浮动的本质3.清除浮动的方法(overflow)一、文档流介绍网页布局的核心,就说用CSS来摆放盒子位置,那么,如何把盒子摆放到合适的位置呢?下面介绍一下CSS的定位机制:CSS的定位机制有3种:普通流(标准流)、浮动和定位普通流:普通流实际上就是一个网页内便签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列二、什么是浮动?元素的浮动是指设置了浮动属原创 2022-02-15 16:14:24 · 256 阅读 · 2 评论 -
【CSS3】一文搞懂盒子模型(知识点加案例)
看透网页布局本质行内元素比如文字类似牛奶,需要一个盒子把他们装起来,我们所学过的双标签都是一个盒子。有了盒子,我们就能任意的,自由的摆放位置了。看透网页布局的本质:把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。比如我们打开小米的官网:显而易见,他就是由一个个大小不一功能不同的盒子组成。盒子模型组成上面的图片说明了盒子模型(Box Model):Margin(外边距) - 清除边框外的区域,外边距是透明的Border(边框) - 围绕在内边距和内容外原创 2022-02-08 16:30:59 · 3197 阅读 · 1 评论 -
【CSS必看】一文搞懂background相关操作
CSS背景操作一、背景颜色图片及其平铺二、背景位置三、背景附着(固定)四、背景简写五、背景半透明六、背景缩放七、凹凸文字效果一、背景颜色图片及其平铺先看下面一段代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> div { width: 400px;原创 2022-02-06 20:51:36 · 963 阅读 · 2 评论 -
【前端入门必看】手把手带你打开前端的大门(涵盖HTML,CSS3,JS)
文章目录前言一、制作HTML页面1.1 创建首个HTML5页面二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言如果你跟我一样也是一名前端初学者,是一个准备学习H5的小白,而HTML5就像是耸立在远处的一座小山,看上去朦朦胧胧,不甚清晰。很容易就一头扎进各种标签、属性、参数这些细节中去。如果只看这些,反而失去了趣味。既然我们要学习他,就要远远地欣赏一下它的全貌,本篇文章通过设计一张贺卡,直观地体验一下HTML5页面的诞生过程。提示:以原创 2022-01-22 00:52:36 · 1030 阅读 · 2 评论