代码编织梦想

笔记:css1-爱代码爱编程

css选择器 简单选择器: *{ } #id{ } .类名{ } 标签名{ } 复合选择器: 后代选择器(以空格隔开) 选择器1 选择2 ...{ } 子代选择器(以大于隔开) 选择器1>选择2 ...{ } 并集(以逗号隔开) 选择器1,选择2,选择3...{

css基础和类选择器介绍和类选择器的好处-爱代码爱编程

css刚入门时,什么情况下使用哪一种类型的基础选择器能决定代码的质量与效率 使用的标签选择器最基础简单,也有局限,因为它选中的是一类标签,那么所以这一类的标签都会被它选中,那肯定有属于同一类但你并不想选中的标签存在。 所以就会用到类选择器,类选择器只要你在前面style标签中设置好了类名和相关属性,那么你想要的一些属性就好比成了一件装备,在后面的标签中

bfc总结-爱代码爱编程

什么是bfc BFC直译起来就是块级格式化上下文。它相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。 BFC的规则 BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签 BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排

html5+css3基础(day18)-爱代码爱编程

一、HTML5和CSS3提高(续) 1.CSS3的新特性 1.1 (1)伪元素选择器使用场景1-配合字体图标 <!DOCTYPE html> <html lang="en"> <hea

1.31学习-爱代码爱编程

案例复习 波纹图(动态的,有空再去弄动态图)     <style>          .map{              width: 747px;              height: 616px;              background: url(eightsix.webp) no-repeat;          

css 盒模型 标准盒模型 ie盒模型-爱代码爱编程

CSS 盒子的组合部分: Content box: 用来显示内容。Padding box: 包围在内容外面的部分。Border box: 包围显示内容和内边距。Margin box: 在border外边的区域,是盒子和其他

纯css实现跑马灯效果-爱代码爱编程

纯CSS实现跑马灯效果 又是一个安静的晚上,又是没有灵感的一天,又只能去逛逛codepen。看到一个流光的边框效果,我就想如何通过自己的方式来现这样一个效果。 突然又想起路边夜市的招牌,不就是一个流光效果加一个广告词吗。

移动端 自适应布局方案-爱代码爱编程

文章目录 DPRrem布局实现机理优点缺点相关技术方案 viewport 布局优点缺点相关技术方案 媒体查询+等比缩放原理 DPR DPR = 设备物理像素 / CSS像素 DPR = 2 为例,把

css如何给div添加一个条纹背景,在背景上画一条有宽度的斜线-爱代码爱编程

如图,想要实现div的背景上有一条深色的斜线。 这里主要使用的是css里的线性渐变属性。 先看一下网上示例及效果: 示例一 <body> <div class="patterns pt1"&

三种前端常用布局及其优缺点-爱代码爱编程

1.网格布局 优点:可将网页划分成不同的网格,任意组合不同布局,可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。缺点:css 实验性新特性,在浏览器中还没有得到广泛的支持。 2.弹性布局 优点:css3新特性,简单快捷,目前主流布局方式,解决旧特性定位时产生元素脱离文档流问题。缺点:仅支持 IE9 以上浏览器。 3.

【立方体】-爱代码爱编程

<ul> <li>1</li> <li>2</li> <li>3</li>

css中float、flex(弹性盒子)和grid(网格)布局的优缺点-爱代码爱编程

float(浮动)布局 首先我们要认识标准流:元素从左往右,从上至下排列。 如图:标准流,下面是4个div盒子,div独占一行,所以从上至下排列 float能脱离文档流,例如div2脱离标准流(给该元素float:left;),浮动到水面层。但div1、div3、div4仍然在标准流当中,所以div3

css选择器学习-爱代码爱编程

选择器 一、分类 基本选择器:id选择器(#)>类选择器(.)>标签选择器 高级选择器: ①结构伪类::first-child :last-child element:nth-child() 以上三个是先找相对应位的元素,在判断所在元素是否和element一致 :first-of-type :last-of-typ

我用css3为好友胡歌的宝宝做了一个动画照片墙-爱代码爱编程

软件人生风雨十年,仙剑一过去也有十年有余了,和胡歌认识那么久,今日喜闻好友胡歌生宝宝的消息,惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果。 目录 1. 实现思路 2. 墙体的实现 3. 选取模板素材,进行图片元素布局 4. css3旋转定位 5. 鼠标上移的放大动画  6. 完整源代码  7. 最后   1.

小lin前端吧-爱代码爱编程

lin-web前端面试题持续更新中... 一.react系列(未完结..)二. Webpack系列(未完结..)三.Vue系列(未完结..)四.JavaScript系列(未完结..)五.CSS系列(未完结..)六.H

不再一个个试错,这众多的flex属性-爱代码爱编程

流式布局 本篇我们将从流式布局的四大方面入手,旨在认识、了解、以至于掌握其特性及功能。 为什么要用? 在我们抛弃标准流、定位流以及浮动流之后,取而代之的是flex流式布局。以一种更加优雅的方式实现元素布局。 轴的

maptalks添加指南针控件-爱代码爱编程

maptalks添加指南针控件 参考文章 https://blog.csdn.net/lhjuejiang/article/details/126426437 与openlayers添加指南针控件不同的是,三维的指南针控件

uniapp的flex布局-爱代码爱编程

1 flex布局 ​ flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中,设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向,它有四个参数可以选择。row(从左至右); row-reverse (从右至左); column(从上到

直播软件app开发,html和css分别实现注册页面表单-爱代码爱编程

直播软件app开发,HTML和CSS分别实现注册页面表单 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charse

transition和animation的区别-爱代码爱编程

1、transition 需要去触发比如:点击事件、鼠标移入事件;而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画2、transition 触发一次播放一次;而 animation 则是可以设置很多的属性,比如循环次数,动画结束的状态等等;3、transition关注的是样式属性的变化,属性值和时间的关系是一个三次贝塞尔曲