Web前端开发——CSS拓展
Web开发零基础,进阶内容学习与分享!
Web学习指南——Bible01-01
言行物恒
潜心从修......
展开
-
Web前端开发笔记之CSS拓展09——Bootstrap
学习完移动适配后,我们知道不同宽度需要不同的media适配,那么有没有一种框架可以解决编写众多media适配,也可以减少css编写量呢?BootStrap所谓栅格布局就是将视口平分成12份。在使用container时,我们发现左右各有15px的边距,那么我们应该怎么抵消呢,我们可以使用row抵消盒子的外盒子内边距,也有一些别的方法。Bootstrap中文网http://www.bootcss.com使用时,优先应用bootstrap.css。下面是我测试的一段代码..原创 2022-03-29 13:00:42 · 434 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展08——响应式网页、媒体查询
响应式网页:网页可以根据页面宽度改变布局。媒体查询需要按照顺序写,不然会导致css层叠性问题。媒体查询完整写法:关键词:and(用于多个特性判断)、only(用于单一特性判断)、not(非)。媒体类型:媒体特性:外联CSS引入:...原创 2022-03-28 15:32:13 · 155 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展07——Flex布局、移动适配、Less语法
首先我们先看看上面这张图,我们一般会使用浮动排列一排li元素,然后再使用margin来空出中间的间隔。但是这样的方法会出现浮动脱标,我们还需要使用清除浮动来整理元素。很显然,这样的方法有些繁琐,那么有没有简单一点的方法呢?Flex布局让我们来了解了解它:Flex布局模型:主轴对齐方式:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2022-03-27 14:36:15 · 442 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展06——移动端、屏幕、视口、二倍图、流式布局
1.移动端开发与PC端网页的不同?>PC屏幕大,网页固定版心>手机屏幕小,网页宽度多数为100%2.屏幕尺寸:指的是屏幕对角线的长度,一般用英寸来表示。移动端默认屏幕宽度是980px,我们需要使用视口来调整其网页宽度大小等于逻辑宽度。3.视口4.二倍图二倍图用于显示在高分辨率下依旧清晰的效果,同时和逻辑分辨率有比例关系。(以iphone6/7/8为例我们默认以750px做设计方案)5.百分比布局...原创 2022-03-26 11:36:55 · 402 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展05——动画
1.动画:问题引入:我们发现之前在使用过渡属性transition时,只能做到一个状态到另一个状态的变化。如果我们希望一系列的变化一直存在,我们就要用到动画。动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面。构成动画的最小单元是:帧或动画帧。动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)animation动画属性:这里animation写在需要移动的元素上。这里是动画元素的完整写法。重复次数可以使用infinite原创 2022-03-25 18:48:10 · 892 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展04——平面转换、背景渐变、空间转换
1.平面转换平移使用技巧:translate()如果只给出一个值,表示x轴方向移动距离。单独设置某个方向的移动距离:使用translateX()&translateY()。旋转转换原点:用于修改旋转点,此属性需要加在旋转元素上 。多重转换:默认以平移、旋转、放大的顺序进行书写,不然会出现奇怪的情况。原因:旋转优先的化会改变坐标轴向,这样平移的方向就会改变。一个元素可以加上多个转换效果,比如平移和旋转同时进行。缩放2.背景渐变...原创 2022-03-25 11:08:31 · 244 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展04——背景图大小、过渡
1.背景图片大小很多时候我们在使用图片的时候,会发现图片和我们的盒子大小不匹配的情况。.picPart{ width: 300px; height: 500px; background-image: url("/Res/video&photo/tanzhilang.jpeg"); }当我们你使用背景图时,盒子太小,图片会被切割,如下:这时大小属性就派上用了。.picPart{ .原创 2022-03-23 15:03:24 · 2782 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展03——链接、焦点伪类选择器,属性选择器,精灵图
1.链接伪类选择器使用:表示:link 位访问的链接:visited 已经访问过的链接会发生改变:hover 鼠标移动到链接上会发生改变:active 选定的链接2.焦点伪类选择器3.属性选择器应用场景:当我们在表单中有多个input类型标签时,我们希望改变其样式。但是他们具有相同的标签名,而每一个都创建class又会觉得重复,此时就有属性选择器:4.精灵图在使用精灵图时,我们需要用到:background-position属性:其对应两个坐标值,即水平方向和垂原创 2022-03-23 14:07:19 · 260 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展02——垂直对齐属性、光标类型、溢出部分显示效果、元素整体透明效果
1.垂直对齐属性问题引入:当我们使用大图片配合小标签或小文字的时候,会出现扭曲不对齐的情况。这里我们需要知道一个概念就是文字使用自己的基线的。垂直对齐方式:浏览器在读取代码时,默认把行内块和行内标签当作文字处理,默认基线对齐。根据上面的经验,我们知道行内块和行内标签作文字处理,那么我们同样可以使用一些处理文字的标签来定义我们的行内和行内块元素,比如text-align不光可以用于单独的文字,我们可以用在图片上使其居中对齐,同样的我们使用line-height,...原创 2022-03-23 13:14:47 · 518 阅读 · 0 评论 -
Web前端开发笔记之CSS拓展01——结构伪类选择器、伪元素
1.结构伪类选择器,可以指定特定目标进行样式定义。2.伪元素,用于在特定位置前后创建一个虚拟的空位(元素)。伪元素,大多用于一些小功能,如方向键,箭头等。伪元素生成时,一般以行内元素存在!...原创 2022-03-17 16:53:54 · 210 阅读 · 0 评论 -
Web前端开发笔记:CSS中经历(此片会不断更新~)
1.在css中,我们如果遇到div中的内容很长如div{1000个‘字符’},我们应该怎么处理呢?首先我们会想到的是overflow:scroll的方法,但是,我们不想要横向的滚动条,怎么办呢? 那么,我们可以使用word-break: break-all来实现自动转行,而不会出现横向滚动条了。...原创 2022-03-17 15:41:28 · 271 阅读 · 0 评论