• 星球
  • 快讯
  • 商铺
  • 专题
  • 文档
文章
文章用户商铺文档快讯星球话题

{{userData.name}}已认证

文章

评论

关注

粉丝

¥{{role.user_data.money}}
{{role.user_data.credit}}
您已完成今天任务的
  • 私信列表所有往来私信

  • 推广中心推广有奖励

    NEW
  • 任务中心每日任务

    NEW
  • 成为会员购买付费会员

  • 认证服务申请认证

    NEW
  • 小黑屋关进小黑屋的人

    NEW
  • 我的订单查看我的订单

  • 我的设置编辑个人资料

  • 进入后台管理

  • 知识碎片
  • 生活经验
  • 相关技能
  • 阅读感悟
  • 共享资源
  • 想法探索
写文章
全部标签

HTML

  • HTML中自定义QQ或微信分享标题和描述及分享预览图

    HTML中自定义QQ或微信分享标题和描述及分享预览图

    在我们平常使用手机或者电脑分享一个网页到微信或者QQ的时候,会发现显示的不是http的链接,而是显示标题和描述还有一张预览图,这些是怎么设置的,调用的是哪里的呢,今天小编来告诉大家。 其实这些都是在html页面的head标签里面 一段描述的话: <meta name="description" itemprop="description" content="这里是自定义分享的描述"> …
    知识碎片
    • 60
    • 0
    岳泽以岳泽以21年12月22日
  • 想让网站落雪花,一段代码实现雪花飘落效果

    想让网站落雪花,一段代码实现雪花飘落效果

    在冬季或者圣诞节之类的节日来临时,想让自己的网站增添一个雪花飘落的动态效果,其实很简单,在网页内插入一段代码就可以实现。 第一种: 演示页面:雪花飘落演示1 代码:(中间随机飘落) <script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script> <script src="https://o.xiezhiz…
    共享资源
    • 78
    • 0
    岳泽以岳泽以21年12月17日
  • HTML+JS制作一个简单的3D仿真圣诞树和纯HTML和CSS制作的圣诞树

    HTML+JS制作一个简单的3D仿真圣诞树和纯HTML和CSS制作的圣诞树

    马上临近圣诞,昨天刷到一个抖音一个作者展示了他制作的圣诞树,虽然很简陋但还是有点意思的,今天分享一下源代码。 HTML+JS版 演示地址:点击查看3D圣诞树 演示效果图:(效果是动态的,截图不是) 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "/TR/html4/frameset.dtd"> <ht…
    共享资源
    • 472
    • 0
    岳泽以岳泽以21年12月16日
  • 解决img标签下面的小空隙

    解决img标签下面的小空隙

    很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e…
    知识碎片
    • 26
    • 0
    岳泽以岳泽以21年12月8日
  • 10个非常实用的CSS技巧

    10个非常实用的CSS技巧

    在开发交互式用户界面时,级联样式表 (CSS) 非常棒且非常强大。CSS 有一些惊人的隐藏提示和技巧,可以用来改善你网站的外观。 在本文中,我们将介绍每个前端开发人员在开发出色且用户友好的网页时需要知道的一些很棒的 CSS 技巧。 现在,就让我们开始吧。 1、首字下沉 我们可以在 CSS 中实现首字下沉。它比看起来简单得多。查看下面显示的图像和代码片段。 效果如下: p:first-letter …
    知识碎片
    • 22
    • 0
    岳泽以岳泽以21年12月1日
  • 网站项目中版心的介绍及使用

    网站项目中版心的介绍及使用

    场景:把页面的主体内容约束在网页中间! 作用:让不同大小的屏幕都能看到页面的主体内容。 代码: .container { width: 1240px; margin: 0 auto; } PS:版心类名常用:container、wrapper、w等
    知识碎片
    • 24
    • 0
    岳泽以岳泽以21年11月29日
  • HTML5中有语义的布局标签

    HTML5中有语义的布局标签

    <header>  :标记定义一个页面或一个区域的头部   <nav>  :标记定义导航链接    <article>  :标记定义一篇文章   <section>  :标记定义一个区域   <aside>  :标记定义页面内容部分的侧边栏…
    知识碎片
    • 11
    • 0
    岳泽以岳泽以21年11月29日
  • CSS的过渡属性

    CSS的过渡属性

    作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验 属性名:transition 常见取值: all 1s 所有能过渡的属性都过渡,过渡时间为1秒 width 1s 只有width有过渡,过渡时间为1秒 width 1s, background-color 2s; 只有width和bgc过渡,过渡时间分别为1秒和2秒 写法示例: div { width: 200px; heigh…
    知识碎片
    • 16
    • 0
    岳泽以岳泽以21年11月28日
  • ​精灵图的介绍及使用步骤

    ​精灵图的介绍及使用步骤

    精灵图的介绍: 场景:项目中将多张小图片合并成一张大图片,这张大图片称为精灵图。 优点:减少服务器发送次数,减轻服务器的压力,提高页面的加载速度。 例如: 如果八张小图片需要在服务器中分别发送八次 合并成为一张图片后只需要在服务器发送一次 精灵图的使用步骤 创建一个盒子 通过PxCook量取小图片的大小,将小图片的宽高设置给盒子 将精灵图设置为盒子的背景图片 通过PxCook测量小图片左上角坐标,…
    知识碎片
    • 39
    • 0
    岳泽以岳泽以21年11月28日
  • 元素隐藏与显示属性及操作方式

    元素隐藏与显示属性及操作方式

    元素的隐藏显示经常会使用,比如二级导航,响应式布局等等。 使用场景:让某元素在屏幕中不可见,如:鼠标:hover之后元素隐藏/显示 常用属性方法: visibility: hidden; 浏览器对其渲染可是不可见,它在网页中占位置却不可点击,也就是说明元素不可见却仍然占据空间。 /* 元素隐藏 */ display:none; /* 元素显示 */ display:block; 隐藏元素本身,并且…
    知识碎片
    • 36
    • 0
    岳泽以岳泽以21年11月27日
  • CSS边框圆角介绍及案例

    CSS边框圆角介绍及案例

    场景:让盒子四个角变得圆润,增加页面细节,提升用户体验。 属性名:border-radius 常见取值:数字+px、百分比 写法: border-radius:50px; 或 border-radius:10%; 原理: 赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角! 边框圆角的场景应用 画一个正圆: 盒子必须是正方形 设置边框圆角为盒子宽高的一半→border-radi…
    知识碎片
    • 22
    • 0
    岳泽以岳泽以21年11月27日
  • CSS鼠标光标常见样式类型

    CSS鼠标光标常见样式类型

    属性及写法 cursor: 属性值; 常见属性值: default 默认值,通常是箭头 pointer 小手效果,提示用户可以点击 text 工字型,提示用户可以选择文字 move 十字光标,提示用户可以移动 cursor鼠标常见样式 url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头…
    知识碎片
    • 21
    • 0
    岳泽以岳泽以21年11月27日
  • 垂直对齐方式及常见可以解决的问题

    垂直对齐方式及常见可以解决的问题

    设置行内/行内块元素垂直对齐方式的属性: vertical-align 垂直对齐方式的常见取值: baseline 默认,基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 项目中vertical-align可以解决的问题 文本框和表单按钮无法对齐问题 input和img无法对齐问题 div中的文本框,文本框无法贴顶问题 div不设置高度由img标签撑开,此时img标签下面…
    知识碎片
    • 47
    • 0
    岳泽以岳泽以21年11月27日
  • CSS中元素的层级问题及更改定位元素的层级方法

    CSS中元素的层级问题及更改定位元素的层级方法

    不同布局方式元素的层级关系: 标准流 < 浮动 < 定位 HTML < float < position 不同定位之间的层级关系: 相对、绝对、固定默认层级相同 此时HTML中写在下面的元素层级会更高,会覆盖上面的元素 更改定位元素的层级: 场景:仅限于改变定位元素的层级,不适用于其他元素。 属性名:z-index 属性值:数字 属性值的数字越大,层级越高。 如图,gree…
    知识碎片
    • 21
    • 0
    岳泽以岳泽以21年11月26日
  • 子绝父相水平居中及水平垂直都居中解决方法

    子绝父相水平居中及水平垂直都居中解决方法

    原图: 水平居中操作步骤: 1.先让子盒子往右移动父盒子的一半 left:50% 2.再让子盒子往左移动自己的一半 普通做法: margin-left: 负的子盒子宽度的一半 缺点:子盒子宽度变化后需要重新改代码 优化做法: transform:translateX(-50%) 优点:表示沿着X轴的负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不想要更改代码。 水平居中后显示效果: 水平垂直…
    知识碎片
    • 25
    • 0
    岳泽以岳泽以21年11月26日
  • CSS中定位的介绍及使用

    CSS中定位的介绍及使用

    静态定位: 静态定位是默认值,就是之前认识的标准流。代码:postion:static静态定位不能通过方向偏移值来改变。 相对定位: 自恋型定位,相对于自己之前的位置进行移动。代码:postion:relative 需要配合访问属性来移动 相对于自己原来的位置进行移动 在页面中占位置→没有脱标 应用场景:配合绝对定位组cp(子绝父相),用于小范围的移动。 绝对定位: 拼爹型定位,相对于非…
    知识碎片
    • 18
    • 0
    岳泽以岳泽以21年11月25日
  • BFC简单介绍

    BFC简单介绍

    块级格式化上下文(Block formatting context):BFC 是web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。 创建BFC的方法: html标签是BFC盒子 浮动元素是BFC盒子 行内块元素是BFC盒子 overflow属性取值不为visible。如:auto、hidden… …… BFC盒子…
    知识碎片
    • 20
    • 0
    岳泽以岳泽以21年11月25日
  • HTML中CSS清除浮动的方法总结

    HTML中CSS清除浮动的方法总结

    1.直接设置父元素的高度 优点:简单粗暴、方便。 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块等。 2.额外标签法 操作: 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear:both 缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂。 3.单伪元素清除法 操作:用伪元素替代了额外标签。 基本写法: .father::after { display:…
    知识碎片
    • 37
    • 0
    岳泽以岳泽以21年11月25日
  • 结构伪类选择器的分类以及使用语法

    结构伪类选择器的分类以及使用语法

    结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 E:last-child    选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1) E:nth-child(n)    选择父元素的第n个子元素,n从1开始计算     E:nth-la…
    知识碎片
    • 28
    • 0
    岳泽以岳泽以21年11月24日
  • HTML中CSS浮动布局的特点

    HTML中CSS浮动布局的特点

    浮动元素会脱离标准流(简称:脱标),在标准流中不占位置。※ 相当于从地面飘到了空中,如果一个元素按照正常的标准流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动的元素之后,不能以正常的标准流里进行判断。 浮动元素比标准流高半个级别,可以覆盖标准流中的元素。 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动。 浮动元素会受到上面元素边界的…
    知识碎片
    • 36
    • 0
    岳泽以岳泽以21年11月24日

关于我们

写知者(www.xiezhizhe.com)是一家以碎片化知识书写为主题的综合性创作社区,这里属于一群自由、认真、友善的知识拥有者,你可以在这里写下你的知识并与星球居民们互动交流!

服务与支持

  • 法律声明

    本站的法律声明

  • 联系我们

    发送邮件给我们

我们的团队

  • 岳泽以
  • 闫航
  • Evan
  • 七
  • 飛
  • 八九
  • 悦
  • 人生路漫漫
  • 精彩人生
  • RyuHeun
  • 月光
  • 杨生,达人客赞渠道经理
  • 悟空
  • 人生路漫漫
  • kay
  • px°99
  • 高尼
  • 爸爸

微信公众号

Copyright © 2022 写知者
・鲁ICP备20011932号 ・公网安备 37078502370916号
查询 35 次,耗时 0.2198 秒
首页星球商铺
专题认证我的