首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第六天的笔记:HTML AND CSS: text-center class属性:文本居中:...例:your text btn class属性:Bootstrap风格按钮: 例:按钮 btn-block class属性:使其按钮填满水平空间: 例:按钮 注意:添加btn-block时,也需要btn...(笔记本屏幕) col-xs-* class属性:xs(应用于较小的屏幕,比如手机屏幕),* 是需要填写的数字,代表在一行中, 各个元素应该占的列宽。...标签:创建文本内元素:text 例:textlove 结果:textlove(love是红色) Font Awesome图标库:一个非常方便的图标库。...你可以将 Font Awesome 中的 class 属性添加到 i 元素中,把它变成一个图标 例: fa fa-thumbs-up:赞图标 谢谢大家观看~

80750
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一步步教你用CSS添加SVG过滤器

    接下来创建标题部分,这里将包含受 SVG 过滤器影响的标题。在 body 标签内添加代码。...它设定了 padding 值,使其周围能够有适量的空间,颜色也会改变。...现在文本被替换了 如果在此阶段测试过滤器,则波纹效果会完全取代文本。这很容易解决。回到 index.html 页面中的过滤器代码。这样将应用波纹和源图形(即文本),并将其应用为位移过滤器。...把模糊和位移进行组合,可以获得更令人愉悦的效果 在之前的高斯模糊下面添加复合线。你将看到会把模糊和位移效果结合在一起,并且还为文本创建了水润的半透明效果。...添加导航 接下来让我们用另外一个 SVG 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部,也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡?的菜单图标。

    2.9K20

    【Java 进阶篇】深入了解 Bootstrap 按钮和图标

    在本文中,我们将深入探讨 Bootstrap 中按钮和图标的使用,适合初学者,帮助他们更好地理解和应用这些元素。 什么是 Bootstrap 按钮?...什么是 Bootstrap 图标? 图标是网页设计的重要组成部分,它们用于增强用户界面的可视效果和交互性。Bootstrap 内置了一组常用图标,可以直接在按钮、链接、文本等元素中使用。...: fa-coffee"> 这个示例中,我们引入了 Font Awesome 图标库,然后使用 fas fa-coffee 类来添加一杯咖啡图标。...结语 按钮和图标是网页设计中的重要元素,Bootstrap 提供了丰富的按钮样式和内置图标库,使开发者能够轻松创建具有吸引力和交互性的界面。...愿本文的内容能够帮助初学者更好地理解和应用按钮和图标,使他们能够创建漂亮且富有交互性的网页。希望您在网页设计的道路上取得成功!

    28030

    一款高颜值的词云包让我拍案叫绝

    并添加了一些有用的功能,从而创建出独特的词云。 ?...网址:https://fontawesome.com/license/free 在stylecloud \ static的文件夹中,有一个fontawesome.min.css文件包含了巨量的图标,你可以定期到官方网站去升级这个图标库...fontawesome.min.css文件内容 多亏有中文网站分门别类罗列了图标的样子和名字, 比如:https://fontawesome.dashgame.com/ 它最新版地址:https://fa5...非常多的图标 使用方法如下: ? 如果我们想要使用小狗的蒙版,只需先查找到它的图标名字fa-dog,再加入到参数中icon_name='fas fa-dog'即可。...部分动物蒙版 其实企鹅并没有在动物里找到,不过我想起来了QQ的图标就是,但是替换后是报错的。原来品牌的图标前缀与其他不同,需要改为icon_name='fab fa-qq',这样就可以啦。 ? ?

    1.5K40

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    在src/main/ets文件中创建components文件夹并在其中创建Home.ets和HomeProduct.ets文件。 2....注册这个字体后,后续就可以在界面中使用该字体来展示特定的文本样式了,例如显示一些自定义的图标字体等内容。...该函数接收三个参数: itemIndex(表示当前选项卡的索引) title(选项卡对应的标题文本) ico(用于显示的图标对应的字符编码,通常结合自定义字体来显示图标样式),并基于这些参数构建一个包含图标和标题文本的...对于图标对应的 Text 组件: 设置了固定的宽度和高度(width(30) 和 height(30)),指定使用之前注册的 myFont 字体,字体大小为 30,文本居中对齐(textAlign...在技术层面,深入理解并运用组件化开发提升代码可维护性与复用性,像 Home 和 HomeProduct 组件各司其职;通过 @ohos.font 模块注册自定义字体用于图标展示,增强界面特色;灵活采用多种布局组件构建复杂结构

    14610

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    在src/main/ets文件中创建components文件夹并在其中创建Home.ets和HomeProduct.ets文件。 2....注册这个字体后,后续就可以在界面中使用该字体来展示特定的文本样式了,例如显示一些自定义的图标字体等内容。...该函数接收三个参数: itemIndex(表示当前选项卡的索引) title(选项卡对应的标题文本) ico(用于显示的图标对应的字符编码,通常结合自定义字体来显示图标样式),并基于这些参数构建一个包含图标和标题文本的...对于图标对应的 Text 组件: 设置了固定的宽度和高度(width(30) 和 height(30)),指定使用之前注册的 myFont 字体,字体大小为 30,文本居中对齐(textAlign...在技术层面,深入理解并运用组件化开发提升代码可维护性与复用性,像 Home 和 HomeProduct 组件各司其职;通过 @ohos.font 模块注册自定义字体用于图标展示,增强界面特色;灵活采用多种布局组件构建复杂结构

    11000

    Markdown语法与外挂标签写法汇总

    %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %} 圆角样式:rounded, circle 增加文字样式:可以在容器内增加 标题和描述文字和图标 {% bdage Theme,Butterfly %} {% bdage Frame,Hexo,hexo %} 2.信息参数,定义徽标右侧内容背景色,指向链接 {%...[@icon]: FontAwesome 图标名称(全名,看起来像“ fas fa-font”) 可以指定带空格或不带空格; 例如’Tab caption @icon’ 和 ‘Tab caption@...This is Tab 3. 4.Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名 第一个Tab 炸弹 tab 名字为第一个 Tab 只有图标 没有 Tab 名字...2.23 阿里图标 icon 标签语法 参数配置 示例源码 渲染演示 {% icon [icon-xxxx],[font-size] %} icon-xxxx:表示图标font-class,可以在自己的阿里矢量图标库项目的

    1.8K10

    【推荐收藏】介绍2种Python绘制词云的手法,你会偷偷pick谁呢?

    简单的例子 由于英文句子每个单词之间都会由空格或标点符号分开,不需要做额外的分词处理,因此对于英文文本来说,直接可用。...中文词云制作 由于中文博大精深,一段文本是有句子组成的,句子之间才有标点符号分开。而句子则是由单字或词组无缝连接而成,所以我们需要对文本进行分词处理。...其核心主要在 配色方案 和 蒙版方案 上,其配色方案是让词云图更美观优雅的点,只能使用其提供的蒙版方案上我觉得反而让自由空间变小了,所以今天我们会介绍如何自定义蒙版!...大家可以去它的网站了解详情: https://fontawesome.dashgame.com/ 在stylecloud有一个fontawesome.min.css文件包含了巨量的图标,你可以定期到官方网站获取最新的图标库来更新...苹果注意: 需要关注的是图标前缀存在三种:fas(实心)、far(常规)和fab(品牌)。大家在设置的时候一定要注意,比如我搜索apple-alt就是实心fas,大家在网站上是可以找到分类的。 ?

    77121

    Hexo-Butterfly主题修改记录

    Inline Block Toggle inline 在文本里面添加按钮隐藏内容,只限文字 {%hideInline content,display,bg,color %} content: 文本内容...fa-download %} {%cell 查看文档, /, fa fa-download %} {%endbtns %} 十玖八柒 下载源码 查看文档 可以在容器内增加 标题 和...另外可以通过添加faa-fast动画加速,faa-slow动画减速 引入动态图标时,只需要引入动态图标的开源库:,然后在图标后面添加动态图标属性即可 以menu上的图标为例: menu: 主页...以阿里云图标库(Iconfont)为例; 在阿里云图标库找到自己想要引入的图标,点击添加到购物车; 点击购物车,选中添加到项目按钮; 如果没有项目,就新建一个; 添加完成后自动跳转到项目界面;...然后点击查看在线链接; 首次会提示需要生成代码(加入新的图标后,会提示更新代码),按照提示生成即可,然后复制生成的代码,在主题配置文件中引入; 复制图标代码(icon-jiaoliu),在需要引入图标的位置填入即可

    1.9K10

    腾讯云:WordPress创建带缩略图文章内链

    如何用 WordPress 短代码或可视化编辑器按钮来创建一个图文混排的文章内链 更多内容关注qq群(197783973) 文章内链在 SEO 链接建设中一直是相当重要的,良好的内链结构对 SEO 十分有益...当你有在当前文章页调用站内其他文章或页面时,积极在页面中增加内链可以极大地提高蜘蛛抓取的次数和深度,在增加了收录量的同时也提高了锚文本关键词的收录。...有些旧文章如果更新了,你也可以通过在新文章中添加内链来引导蜘蛛重新抓取收录更新。 常见的内链形式是文字链接,结构为 锚文本。...安装完毕后,在左侧菜单栏下方会多出一个齿轮图标和 Visual Editor Custom Buttons。点击 Add New,创建一个 custom button,名称随意。...想好你只需要在可视化中显示按钮还是文本中也显示按钮。 注意如果同时勾了后者(Text Editor),或者只勾了后者,那么本文第四步第1)部分“文本状态下添加快捷按钮”可跳过,否则就会重复创建了。

    94830

    词云绘制,推荐三种 Python包外加一个在线网站!

    词云是文本可视化的重要方式,可将大段文本中的关键语句和词汇高亮展示, 本篇文章先介绍几种制作词云的 Python 库,分别是 WordCloud、StyleCloud、Pyecharts;再加一个在线词云制作网站...;最后通过代码实操和可视化效果对它们做个简单比较 WordCloud、StyleCloud、Pyecharts 这三个包制作词云都具备一个特点: 仅需几行代码就能绘制出一张精美的词云图,但需设置的参数量较大...= random.randint(0, 15) # 随机取0-15中间一个数字; result_dict = dict(counter.most_common()[start:]) # 在...,并且设置时可直接对接 Font Awesome 网站,这里面有各式各样的图标 4,除了 text文本可作为词汇输入之外,还支持等 csv、txt 文件格式的输入; 主程序只需一行代码即可 def Style_WordArt...icon_name='fas fa-cat',# 词云图标; font_path= "D:/Data/fonts/HGXK_CNKI.ttf",# 中文字体路径 random_state

    1.1K20

    django-simpleui 后台主题框架安装使用

    ', ] 1、在settings.py中加入: STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ] 2、在项目下新建目录static...如果改为True,自定义和系统菜单将会并存 menu_display 过滤显示菜单和排序功能 该字段用于告诉simpleui,是否需要开启过滤显示菜单和排序功能。...menus说明 字段 说明 name 菜单名 icon 图标,参考element-ui和fontawesome图标 url 链接地址,绝对或者相对,如果存在models字段,将忽略url models...后续可考虑扩展Model的 Meta class 进行配置图标 字段 说明 name 模块名字,请注意不是model的命名,而是菜单栏上显示的文本,因为model是可以重复的,会导致无法区分 icon...图标 例子: SIMPLEUI_ICON = { '系统管理': 'fab fa-apple', '员工管理': 'fas fa-user-tie' } https://github.com

    4.5K20
    领券