-
HTML中自定义QQ或微信分享标题和描述及分享预览图
在我们平常使用手机或者电脑分享一个网页到微信或者QQ的时候，会发现显示的不是http的链接，而是显示标题和描述还有一张预览图，这些是怎么设置的，调用的是哪里的呢，今天小编来告诉大家。 其实这些都是在html页面的head标签里面 一段描述的话： <meta name="description" itemprop="description" content="这里是自定义分享的描述"> …- 88
- 0
-
想让网站落雪花，一段代码实现雪花飘落效果
在冬季或者圣诞节之类的节日来临时，想让自己的网站增添一个雪花飘落的动态效果，其实很简单，在网页内插入一段代码就可以实现。 第一种： 演示页面：雪花飘落演示1 代码：（中间随机飘落） <script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script> <script src="https://o.xiezhiz…- 90
- 0
-
HTML+JS制作一个简单的3D仿真圣诞树和纯HTML和CSS制作的圣诞树
马上临近圣诞，昨天刷到一个抖音一个作者展示了他制作的圣诞树，虽然很简陋但还是有点意思的，今天分享一下源代码。 HTML+JS版 演示地址：点击查看3D圣诞树 演示效果图：（效果是动态的，截图不是） 代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "/TR/html4/frameset.dtd"> <ht…- 502
- 0
-
解决img标签下面的小空隙
很多初学小伙伴在写页面的时候碰到过一个问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e…- 33
- 0
-
10个非常实用的CSS技巧
在开发交互式用户界面时，级联样式表 (CSS) 非常棒且非常强大。CSS 有一些惊人的隐藏提示和技巧，可以用来改善你网站的外观。 在本文中，我们将介绍每个前端开发人员在开发出色且用户友好的网页时需要知道的一些很棒的 CSS 技巧。 现在，就让我们开始吧。 1、首字下沉 我们可以在 CSS 中实现首字下沉。它比看起来简单得多。查看下面显示的图像和代码片段。 效果如下： p:first-letter …- 27
- 0
-
网站项目中版心的介绍及使用
场景：把页面的主体内容约束在网页中间！ 作用：让不同大小的屏幕都能看到页面的主体内容。 代码： .container { width: 1240px; margin: 0 auto; } PS：版心类名常用：container、wrapper、w等- 26
- 0
-
HTML5中有语义的布局标签
<header> ：标记定义一个页面或一个区域的头部 <nav> ：标记定义导航链接 <article> ：标记定义一篇文章 <section> ：标记定义一个区域 <aside> ：标记定义页面内容部分的侧边栏…- 13
- 0
-
精灵图的介绍及使用步骤
精灵图的介绍： 场景：项目中将多张小图片合并成一张大图片，这张大图片称为精灵图。 优点：减少服务器发送次数，减轻服务器的压力，提高页面的加载速度。 例如： 如果八张小图片需要在服务器中分别发送八次 合并成为一张图片后只需要在服务器发送一次 精灵图的使用步骤 创建一个盒子 通过PxCook量取小图片的大小，将小图片的宽高设置给盒子 将精灵图设置为盒子的背景图片 通过PxCook测量小图片左上角坐标，…- 53
- 0
-
元素隐藏与显示属性及操作方式
元素的隐藏显示经常会使用，比如二级导航，响应式布局等等。 使用场景：让某元素在屏幕中不可见，如：鼠标:hover之后元素隐藏/显示 常用属性方法： visibility: hidden; 浏览器对其渲染可是不可见，它在网页中占位置却不可点击，也就是说明元素不可见却仍然占据空间。 /* 元素隐藏 */ display:none; /* 元素显示 */ display:block; 隐藏元素本身，并且…- 40
- 0
-
CSS边框圆角介绍及案例
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验。 属性名：border-radius 常见取值：数字+px、百分比 写法： border-radius:50px; 或 border-radius:10%; 原理： 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！ 边框圆角的场景应用 画一个正圆： 盒子必须是正方形 设置边框圆角为盒子宽高的一半→border-radi…- 25
- 0
-
CSS鼠标光标常见样式类型
属性及写法 cursor: 属性值; 常见属性值： default 默认值，通常是箭头 pointer 小手效果，提示用户可以点击 text 工字型，提示用户可以选择文字 move 十字光标，提示用户可以移动 cursor鼠标常见样式 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头…- 26
- 0
-
垂直对齐方式及常见可以解决的问题
设置行内/行内块元素垂直对齐方式的属性： vertical-align 垂直对齐方式的常见取值： baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 项目中vertical-align可以解决的问题 文本框和表单按钮无法对齐问题 input和img无法对齐问题 div中的文本框，文本框无法贴顶问题 div不设置高度由img标签撑开，此时img标签下面…- 51
- 0
-
CSS中元素的层级问题及更改定位元素的层级方法
不同布局方式元素的层级关系： 标准流 < 浮动 < 定位 HTML < float < position 不同定位之间的层级关系： 相对、绝对、固定默认层级相同 此时HTML中写在下面的元素层级会更高，会覆盖上面的元素 更改定位元素的层级： 场景：仅限于改变定位元素的层级，不适用于其他元素。 属性名：z-index 属性值：数字 属性值的数字越大，层级越高。 如图，gree…- 25
- 0
-
子绝父相水平居中及水平垂直都居中解决方法
原图： 水平居中操作步骤： 1.先让子盒子往右移动父盒子的一半 left:50% 2.再让子盒子往左移动自己的一半 普通做法： margin-left: 负的子盒子宽度的一半 缺点：子盒子宽度变化后需要重新改代码 优化做法： transform:translateX(-50%) 优点：表示沿着X轴的负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不想要更改代码。 水平居中后显示效果： 水平垂直…- 29
- 0
-
CSS中定位的介绍及使用
静态定位： 静态定位是默认值，就是之前认识的标准流。代码：postion:static静态定位不能通过方向偏移值来改变。 相对定位： 自恋型定位，相对于自己之前的位置进行移动。代码：postion:relative 需要配合访问属性来移动 相对于自己原来的位置进行移动 在页面中占位置→没有脱标 应用场景：配合绝对定位组cp（子绝父相），用于小范围的移动。 绝对定位： 拼爹型定位，相对于非…- 22
- 0
-
HTML中CSS清除浮动的方法总结
1.直接设置父元素的高度 优点：简单粗暴、方便。 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。 2.额外标签法 操作： 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear：both 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂。 3.单伪元素清除法 操作：用伪元素替代了额外标签。 基本写法： .father::after { display:…- 38
- 0
-
结构伪类选择器的分类以及使用语法
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) E:nth-child(n) 选择父元素的第n个子元素，n从1开始计算 E:nth-la…- 30
- 0
-
HTML中CSS浮动布局的特点
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。※ 相当于从地面飘到了空中，如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断。 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。 浮动元素会受到上面元素边界的…- 39
- 0
