代码编织梦想

li与li之间的空白-爱代码爱编程

有时,在写页面的时候,会需要将<li>这个块状元素横排显示,此时就需要将display属性设置为inline-block,此时问题出现了,在两个<li>元素之间会出现大约8px左右的空白间隙,下面举例说明: <html> <head> <title>demo</title> <style type=

2021-01-03-爱代码爱编程

上效果先: 先言: 看过我文章可以知道,这东西似曾相识~ ╭(●`∀´●)╯确实,这个和我另一篇文章“文字点闪特效”原理是差不多的 实现: 1.定义html标签: <h1> <span>佛</span> <span>主</sp

handsome主题美化(二)- 底部页脚版权美化-爱代码爱编程

原文链接 1.将以下添加至自定义CSS中 /*底部页脚*/ .github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; backg

bootstrap-爱代码爱编程

bootstrap简介 1)bootstrap由@mdo 和 @fat 在Twitter工作时创建,Bootstrap使用 LESS CSS 并用 Node 编译,托管在 GitHub 上,方便大家使用这一框架构建更好的web应用。 2)Bootstrap不光为了看起来好看,而且在现代的桌面浏览器上有极佳的表现(包括IE7!)。在平板电脑和智能手机上面

CSS浮动属性-爱代码爱编程

CSS 浮动属性 ** float 是 css 的定位属性。**在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中, 应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除

元素设置浮动以后,缩放窗口塌陷问题。-爱代码爱编程

项目场景: 浮动元素缩放,高度塌陷。 问题描述: float 做项目时,元素已经设置了浮动,而且父元素也清除了浮动,但是会出现缩放时,会出现高度塌陷问题。如下图。 <style> li{ float:left; width:110px; height:90px; margin:5px; list

2020年下半年1+X Web前端开发(中级)实操考试模拟试题一(附答案)-爱代码爱编程

传送门教育部:职业教育将启动“1+X”证书制度改革职业教育改革1+X证书制度试点启动1+X成绩/证书查询入口 文章目录 试题一(每空 2 分,共 30 分)试题一答案试题二(30分)试题二答案试题三(每空 2 分,共 20 分)试题三答案试题四(每空 2 分,共 20 分)试题四答案 试题一(每空 2 分,共 30 分) 阅

CSS选择器-爱代码爱编程

CSS选择器 CSS概述: CSS是Cascading Style Sheets的简称,也称层叠样式表,是对html标签的渲染和布局。 CSS语法由选择器和一条或多条声明构成,声明由属性和值构成。 CSS选择器作用于HTML元素,是选择你想要的元素的样式的模式。 “选择器”指明了{ }中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。CSS标

CSS高级技巧 之 精灵图、字体图标的引入与追加-爱代码爱编程

一、精灵图 1. 为什么需要精灵图? 一个网中会应用很多个小背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,没出现了CSS精灵技术(也成CSS Sprites)。 精灵图如图所示,即把页面上所有

Flask项目--todolist说明书-爱代码爱编程

简介 使用Flask, bootstrap4 和 SQLAlchemy 开发的todo webapp 源码: flask-todolist Demo: todo.NUTURE 目录结构 TODO │ app.py # 后端程序 │ Dockerfile # 使用docker可以方便地部署在服务器上 │ LICENSE │ README.

HTML与CSS基础-爱代码爱编程

HTML与CSS基础 一、HTML1.概念2.快速入门3.标签学习(1)文件标签:构成html最基本的标签(2)文本标签:和文本有关的标签(3)图片标签(4)列表标签(5)链接标签(6)div和span(7)语义化标签(8)表格标签(9)表单标签:二、CSS1.概念2.使用CSS的好处3.CSS的使用,与html结合方式内联样式内部样式外部样式4.

CSS显示隐藏元素案例——土豆网视频显示隐藏遮蔽罩-爱代码爱编程

鼠标不移动到图片上不显示遮蔽罩 鼠标移动到图片上显示遮蔽罩和播放标志 <div class="tudou"> <div class="mask"> <img src="images/tudou.jpg" alt=""> </div> .tudou { positio

CSS基础-爱代码爱编程

HTML:展示页面信息 CSS:页面美化和布局控制 1.概念:Cascading Stytle Sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,同时生效 2.好处: *功能比较强大 *将内容展示和样式的控制分离,解耦,让分工协作更容易,可以提高开发效率 3.CSS的使用:CSS与html结合方式 1.内联样式 2.内部样式 3

【Javascript】进阶之选项卡在项目中的运用(一)-爱代码爱编程

描述: 点击对应文字描述, 切换到对应的图片(AJAX信息交互方式) 代码实现 HTML <!-- hot live --> <div class="hotlive clearfix"> <!-- title -->

从零到入职-番外篇-Python-网络爬虫-爱代码爱编程

工具准备 Python环境 -> 建议用Anaconda浏览器 -> Chrome (它提供了强大的开发者工具)PycharmWeb应用(需要了解一下网络访问的全过程)HTML(超文本标记协议,组织网页结构内容)CSS(层叠样式表,页面的展示方式)JavaScript(弥补HTML,CSS的不足,为用户提供更丰富的交互模式)爬虫 网络爬虫(

IntelliJ IDEA使用教程(动图详解):Emmet 的使用-爱代码爱编程

Emmet 的使用 Emmet 的介绍 Emmet 的前身叫做:Zen Coding,也许熟知旧名的人不在少数。Emmet 一般前端工程师用得比较多,具体它是做什么的,我们通过下面两张 Gif 演示图来说明: IntelliJ IDEA 自带 Emmet 功能,使用的快捷键是 Tab。 Emmet 资料介绍: Emmet 官网

元素的显示和隐藏(display、visibility、overflow)-爱代码爱编程

类似网页广告,当点击关闭就不见了,但重新刷新页面,就会重新出现。 本质:让元素在页面中显示或者隐藏。 一、display 显示 display属性用于设置一个元素如何显示。 display: none; 隐藏对象display: block; 转换为块级元素;显示元素display隐藏元素后,不再占有原来的位置。 二、visibility 可见性

前端笔记记录---简单导航栏(浮动)-爱代码爱编程

声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正! 实现效果 点击前: 点击后: 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

css实现炫彩字体-爱代码爱编程

css实现炫彩字体 #logo { font-weight: 600; font-size: 28px; font-family: "黑体"; color: #8c888b;

VUE中使用百度地图BaiduMap-爱代码爱编程

VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好。最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图用在vue上,把整个过程记录下来,以备自己和别人使用借鉴 第一种,使用VUE BAIDU MAP 网址是:https://dafrok.github.i