CSS入门笔记：小技巧

最新推荐文章于 2021-02-10 17:25:08 发布
最新推荐文章于 2021-02-10 17:25:08 发布
阅读量57 收藏
点赞数
分类专栏： 学习 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52021758/article/details/113060023
版权

1.让文字在盒子内垂直居中：使文字的高度（line-height)等于盒子的高度

2.网页抠图：点击检查->点击图片路径->标签打开->图片另存为

3.导航栏设计注意：
在这里插入图片描述
4.浮动的盒子不会有外边距合并的问题，即不会有塌陷问题

小新源
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础与提高的笔记
12-31
CSS高级技巧 - **响应式布局**: 通过媒体查询实现不同设备屏幕下的适应性布局。 - **Flexbox布局**: 提供了一种更高效的方式来布局、对齐和分配空间内的项目。 - **Grid布局**: 一种二维网格布局系统，可以更好地...
html和css笔记
06-01
#### CSS入门 CSS是实现网页美观的关键技术，通过选择器定位HTML元素，并应用样式规则。CSS的基本概念包括： - **选择器**：如`.classname`（类选择器）、`#idname`（ID选择器）、`element`（类型选择器），用于...
B站笔记-HTML+CSS.rar
04-15
学习HTML+CSS时，通常会从基础语法入手，逐步掌握页面布局技巧，理解盒模型，熟悉各种选择器的使用，以及如何实现响应式设计。同时，动手实践是非常重要的环节，可以结合实际项目或仿站练习，提升对这两门技术的理解...
Web前端入门：从零开始做网站.txt打包整理.zip
03-05
.zip文件意味着这是一份压缩包，包含多个相关的文件或文档，可能是教程、笔记或者代码示例。 【标签解析】 "前端"标签明确了内容的领域，即Web前端开发，这是构建网页和应用程序用户界面的技术。"css"是Cascading ...
云笔记,云笔记app排行榜,HTML
09-10
例如，描述中的“微信小程序代码简单模板”，就是为新手提供的一种快速入门的学习资源，帮助他们快速掌握云笔记小程序的开发技巧。 在提供的压缩包文件中，我们看到一系列图片和资源文件，可能包含了云笔记小程序的...
浅谈＜img＞标签src属性
热门推荐
m0_52021758的博客
01-21 2万+
<img> 是网页的图像标签，用于告诉浏览器当前位置为一个图片，在img中必不可少的属性为"src"。”src"的值为一个文件路径，用于告诉浏览器图片放在那个文件的。因此，若我们想正确使用src,还需要懂得如何得到文件的路径。 路径可以分为相对路径和绝对路径。 相对路径是以引用文件所在的位置为参考基础而建立的路径，在HTML文档中可以简单理解为“图片相对于HTML页面的位置”。相对路径通常有以下几种情况 绝对路径是你所需要的图片在电脑的实际位置，通常以盘符开始。 在实际开发中我们通常是使用
浅谈＜a href=“ “ target=“ “＞ ＜/a＞链接标签
m0_52021758的博客
01-21 1万+
链接标签<a>通常用于进行页面跳转，其中有两个主要属性，分别为href和target。 href用于指定链接内容的地址，是超链接标签的必要属性，当href有值时，超链接标签就有了链接的功能。 target用于设置链接网页的打开方式。当target的值为"_self",则表示在当前页面打开链接网页，当target的值为“_blank"时，则会在新窗口打开链接网页。 下面，介绍一下链接几种常见的用法： 1.外部链接：即链接地址为目标的网址，如<a href="https://www.bilib
浅谈HTML表单标签＜form＞、＜input＞
m0_52021758的博客
01-22 759
网页常常会有信息收集功能，而完成此功能的主要模块就是表单，常见于注册页面。 一个表单通常由三个部分组成，分别为表单域、表单控件和提示信息，下面就让我们深入了解一下这三个部分吧。 1.表单域<form></form>:是一个包含表单元素的区域，实现用户信息的收集和传递。在表单域中有以下常见属性： 2.表单控件： a.<input type=" ">:输入表单元素，用于用户输入相关信息。 type可以取如下值： 实现单选按钮时需要注意以下两点： 1.type=“radio
JS入门笔记十一：密码框提示信息
m0_52021758的博客
02-06 738
当我们在一些网站输入或者注册账号密码时会出现这些效果： 1.当输入密码的格式不正确时密码框后会有提示，如“含有非法字符”等 2.当密码的位数超出或者少于要求时会有提示，如“输入错误，密码为6~16位” 3.当密码输入正确时会有提示：“密码正确” 4.当密码框为空时会提示：“请输入密码” 分析：此案例涉及的修改信息较多，且不同的条件下修改的内容不同，那么我们可以采取分块涉及的方法，将上面的4个要求分为四个类，当满足相应的条件后，用className = ‘类名’ 对其进行相应的选择即可 ...
浅谈表格标签＜table＞ ＜/table＞
m0_52021758的博客
01-21 433
表格是网页中常见的元素，其形式丰富多样，具有很好的数据展示的功能。因此，想要在网页中清晰、美观的展示数据，熟练的掌握表格标签是必不可少的。 表格标签主要有以下三种基本格式： 1.无表头形式： <table> <tr> <td> </td> ......<td> </td> </tr> ....... <tr> <td&g
CSS入门笔记三：字体属性font
m0_52021758的博客
01-23 375
在CSS中将字体的属性全用font来来设置，我们常用的有以下属性： 1.字体系列：font-family;后可跟多个值，但值之间需要用逗号隔开，当电脑无第一个值的字体（如微软雅黑）时会选择第二个值的字体，若无第二个值的字体则会选择第三个值，这样依次往下选择。 2.字体大小：font-size;属性值是像素值，用于设置字体的大小。 3.字体粗细：font-weight;设置字体的粗细程度，属性值有normal、bold、bolder等，具体信息可以查询文档。 4.字体样式：font-style;用于设置字体的
JS入门笔记九：循环精灵图案例
m0_52021758的博客
02-05 346
在开发中，精灵图往往是按照一定规律制作的，前端程序员往往可以借助其规律来快速制作相应的图标，提升开发效率。 操作步骤： 1.寻找精灵图的排布规律 2.按照规律改变背景位置 以淘宝为例 这是淘宝精灵图的一部分，通过测量可知每个小图片间的间隔为22px,且图片大小为2222，所有每个精灵图在x轴的坐标为0，在y轴的坐标为-44(i-1),如第一张精灵图的x为0，y为-44*（1-1）=0；由此规律，我们利用循环就可以将其全部制作。 ...
html常见标签介绍
m0_52021758的博客
01-21 310
html常见标签介绍 结构标签 1:<html></html> | 开始、结束标签（一般称为根标签），所有的html标签都要包含在这对内 2：<head>|</head> | 头部标签，在这个标签中我们主要设置网页的标题，也就是<title> 3：<title></title> | 标题标签，让网页有自己的名字 4：<body></body> |
CSS入门笔记二十三：vertical-align属性应用
m0_52021758的博客
01-29 280
作用：用于设置一个元素的垂直对齐方式，但只针对行内或行内块元素有效。常常用于图片和文字的居中对齐。 语法： 设置值中的线是英语中的四线三格中的线 注意：这个属性常常加到图片的样式中，使图片与文字垂直居中 如何使图片在盒子内五下缝隙 产生原因：行内或行内块元素默认和基线对齐。 解决办法1：使行内块或行内元素不与基线对齐 解决办法2：使元素转为块级元素 ...
JS入门笔记十：显示隐藏文本框内容
m0_52021758的博客
02-05 221
分析：在我们打开百度、京东等时，会发现这样一个现象：它们的搜索框内有文字，但是当我们的光标在搜索框内时，搜索框内的内容会消失，当光标离开且搜索框内为空时，默认内容又会显示出来。 想实现这个功能，我们要先了解两个事件onfocus和onblur。onfocus表示获得焦点，onblur表示失去焦点。 有了这两个事件我们就可以完成上面所说的功能了。但input获得焦点时并且框中的内容不是默认文字的话，我们可以令input框中的内容变成空；当input失去焦点并且框中的内容为空时显示默认内容，需要注意的是，所谓的
JS入门笔记：获取文档对象
m0_52021758的博客
02-06 216
DOM获取元素的方法 1.getElementById(参数) a.参数为元素的id，并且是字符串形式 b.返回的是一个元素对象 c.使用console.dir()打印获取的元素可以更好的察看其相关属性和方法 2.根据标签名来获取元素：getElementsByTagName() a.因为一个HTML中有很多相同的标签，所有返回的是对象的集合，以伪数组的形式存储 b.得到的元素是动态的，动态即当标签内容改变时，js获取的对象内容会自动改变 c.如果页面中没有此元素，则返回一个空的伪数组 d.获取父元素里的子
JS入门笔记二十：禁止复制文本
m0_52021758的博客
02-08 187
在我们的网页中，有一些内容是不想让别人复制的，如何实现这个功能呢？ 要完成这个功能，我们要了解以下知识点： 1.禁止鼠标右键菜单事件：contextmenu document.addEventLiatener('contextmenu ',funtion() { e.preventDefault(); }) 注册这个事件，鼠标不能点出右键菜单，但可以使用Ctrl+c复制 2.禁止选中：selectstart document.addEventLiatener('selectst
CSS入门笔记八：背景设置
m0_52021758的博客
01-23 143
1.背景图片设置：background-image 2.背景颜色： background-color 3.背景平铺： background-repeat 注意：背景平铺有4种方式，分别为： 复制平铺（repeat):即把整个背景都平铺完 沿x轴平铺（repeat-x） 沿Y轴平铺（repeat-y） 不平铺（on-repeat):背景有大就显示多大 4 背景位置：background-postion: x y;x,y可以是像素值也可以是方位名词 注意： a.x,y若是方位名词，则无顺序区分，即right
JS入门笔记三十三：scroll系列
m0_52021758的博客
02-10 131
HTML+CSS入门：打造网页骨架与排版技巧
本资源是一份针对HTML和CSS初学者的详细学习笔记，主要目标是帮助学员掌握这两种基础Web开发技术，并通过实践案例深入理解。HTML部分讲解了网页的基本构成，包括标签的语法、分类（如双标签和单标签）、标签的嵌套...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值