guxin_duyin的博客

css 固定宽高比 aspet-ratio padding-bottom

CSS3基础 一、CSS轮廓 1.作用：主要是用来突出元素的作用 2.属性与描述   3.示例   二、多列 多列属性   多列示例   属性 描述 CSS column-count 规定元素应该被分隔的列数。 3 column-fill 规定如何填充列。 3

三、CSS属性 1.文字属性 1.1  规定文字样式的属性 格式：font-style: italic; 取值： normal ： 正常的， 默认就是正常的 italic :  倾斜的 快捷键： fs    font-style: italic; fsn   font-style: normal; 1.2  规定文字粗细的属性 格式： font-weight: bold;

前端主题切换 主题换肤

一、CSS（层叠样式表）概述 html 在一个网页中负责的事情是一个页面的结构（给内容添加语义化） css(层叠样式表) 在一个网页中主要负责了页面的数据样式。 1.通过CSS来修改样式的好处 1.1.不用记忆哪些属性属于哪个标签 1.2.当需求变更时我们不需要修改大量的代码就可以满足需求 1.3.在前端开发中CSS只有一个作用, 就是用来修改样式 2.  编写css代码的方式：

七、 盒子模型 1. 边框属性 1.1 什么是边框? 边框就是环绕在标签宽度和高度周围的线条 1.2 边框属性的格式 1.2.1 连写(同时设置四条边的边框) border: 边框的宽度 边框的样式 边框的颜色; 快捷键: bd+ border: 1px solid #000; 注意点: 1.连写格式中颜色属性可以省略, 省略之后默认就是黑色 2.连写格式中样式不能省略,

本文分享一些非常好用的CSS代码片段，它们很短但功能强大。使用这些代码，我们可以立即提高网站的体验。下面是11个非常好用的CSS代码片段： 1. Scroll behavior html { scroll-behavior: smooth; } 这行简单的代码可以避免编写复杂的JavaScript。 此属性使我们能够定义当用户,单击滚动框中链接时，浏览器的滚动是跳跃还是平稳过渡。Chrome版本61+、Firefox 36+和Edge版本79+支持此属性。 2. Clip path

一直想写一套web前端入门的基础知识汇总，从HTML、CSS、JS到JQuery，后面有可能会加上我现在正在自学的Vue和Angular，但是因为各种各样的原因一直没有开始做这件事（好吧，我承认，最大的原因就是我懒）。今天既然我决定开始干这件事，那么我一定会把这件事做完，但是时间就不太好说了，有可能今年就能写完，如果接下来的日子加班多的话也有可能会拖到明年也说不定。  先说一下我对web前端这些

五、表格标签 1.什么是表格标签? 表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.表格标签格式:              需要显示的内容      其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格 其实表格标签中的tr标签代表

HTML5新增标签 一、新增的主题结构元素 1. article 元素 1.1作用 article 元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。 1.2 实例   Internet Explorer 9   Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布..... 1.3 应用

多页应用 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。 为什么多页应用的首屏时间快？ 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。 为什么搜索引擎优化效果好（SEO）？ 搜索引擎在做网页排名的时候，...

一、什么是BFC？ 1.BFC的概念 BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。 2.BFC布局规则 1.内部的Box会在垂直方...

一、水平居中 1.1 行内元素 .parent{text-align:center} 1.2 块级元素 1.2.1 块级元素一般居中方法 .son{margin:0 auto} 1.2.2 子元素含 float .parent{width:fit-content;margin:0 auto;} .son{float:left;} 1.2.3 Flex 弹性盒子 .pare...

浏览器兼容性问题太让人蛋疼了，今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决，毕竟要从用户的角度着想。百度了好多还是无法解决，最后google了一下，找到了方法。        直接上例子： <div id="container"> <div id="box1">This box should be on top</d...

前几天做一个需求的时候要实现这么一个功能，有两个日期输入框，结束日期和开始日期要是同一个月。那么具体要如何实现呢？且看以下代码：HTML代码开始日期 结束日期 JS代码： var d1; var d2; $("#date1").blur(function(){ var date1=$("#date1").val();

最近在项目中有遇到需要带复选框的下拉列表，找了好久都没找到相关资料，只好自己用jQuery+css实现了一个简单的小demo，虽然有点丑，但效果基本实现了，大家将就着看吧。 注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.) html代码如下

当人们试图学习JavaScript或其他编程语言的时候，他们通常会遇到如下挑战。 一些概念让他们感到困惑，特别是如果之前学过其他类型的语言。 很难找到学习的时间（或者动力）去学习。 你很容易忘掉之前学到的东西。 JavaScript工具太多并且经常更新，以至于很难找到学习的切入点。 幸运的是，这些难题最终能够被克服。在这篇文章，我将