html+css开发
关注
分享
扫一扫
左手喵子
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML基础
【代码】HTML基础标签。原创 2025-01-14 21:31:21 · 209 阅读 · 0 评论 -
css基础
【代码】css基础。原创 2025-01-14 21:56:23 · 274 阅读 · 0 评论 -
html+css开发--文章汇总
HTML基础-优快云博客chorme 浏览器记住密码后input黄色背景处理方法(两种)_浏览器记住密码背景色-优快云博客 css基础-优快云博客CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行_css数字自动换行-优快云博客内容超出div宽度后自动换行的css代码_css写一个消息框文字超过盒子宽度换行不影响盒子的样式-优快云博客flex 布局：一行固定个数，超出换行（流式布局）_flex设置一行几个-优快云博客 css 字体透明度继承父级透明度，导致不能正常显示。防原创 2025-02-23 20:24:20 · 470 阅读 · 0 评论 -
3分钟读懂移动端rem使用方法
在介绍rem之前先介绍em，em是父元素的字体大小，比如一个子盒子的宽度为2em，而且父盒子的font-size是15px，则该子盒子的宽度是2em=15px*2=30px；html{此时若在该页面任意位置写大小3rem则代表3*15px=45px；相比em，rem在整个页面中html的文字大小只有一个font-size能够做到大小一致。原创 2024-02-13 13:05:09 · 954 阅读 · 0 评论 -
手机端页面自适应解决方案—rem布局
设计图一般是640px的，这样相当于100px = 1rem，可以方便计算；转载 2024-02-12 11:47:00 · 227 阅读 · 0 评论 -
移动端和PC端rem布局方式
html设置初始font-size：640px的字体大小。原创 2024-02-13 11:25:59 · 579 阅读 · 0 评论 -
苹果屏幕尺寸和分辨率dpi大全
pt ---- 代表点，是一个标准的长度单位，定义上：1 pt = 1 / 72 英寸，英寸跟我们所熟悉厘米、米一样，所以我们可以明确的指出1pt的长度是多少。DPI ---- 最初用于衡量打印物上每英寸的点数密度，就是表示你的打印机可以在一英寸内打印多少个点。当DPI的概念迁移到计算机屏幕上的时候，就应该称之为PPI。同理：PPI就是表示计算机屏幕上每英寸可以显示的像素点的数量。px ---- 代表像素，是屏幕上能显示的最小单位，在分辨率高的屏幕上，一个像素可能会达到我们肉眼无法识别的大小。原创 2024-02-12 12:52:39 · 1222 阅读 · 0 评论 -
IE9 以下版本浏览器兼容HTML5的方法
Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。--------------------也不知道这句话是什么时候说的？这样，IE9及以下版本就可以使用h5标签了。IE9 以下版本浏览器兼容。原创 2024-02-12 13:34:06 · 238 阅读 · 0 评论 -
CSS实战 - 波纹扩散效果
效果一：涟漪扩散效果效果二：波动扩散效果。原创 2024-02-11 10:47:26 · 1938 阅读 · 1 评论 -
CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行
解释：使用break-word时，是将强制换行。兼容各版本IE浏览器，兼容谷歌浏览器。原创 2023-10-11 20:40:49 · 243 阅读 · 0 评论 -
内容超出div宽度后自动换行的css代码
使用一段css代码：”word-wrap: break-word;原创 2024-02-11 10:41:57 · 415 阅读 · 0 评论 -
flex 布局：一行固定个数，超出换行（流式布局）
设置在父容器上的属性：display：flex，align-items(交叉轴对齐方式)，justify-content(主轴对齐方式)，flex-wrap(换行)。设置在子容器上的属性，通过 flex: 1，简写了 flex-grow、flex-shrink、flex-basis 三个属性。原创 2023-10-24 16:59:49 · 6743 阅读 · 0 评论 -
pc端与移动端base.css公共样式
base.css公共样式 pc端body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, tabl原创 2024-02-13 11:22:18 · 293 阅读 · 0 评论 -
CSS3 transition 浏览器兼容性
在IE7-9进行测试时，transition的效果没有过渡效果（如线性过渡效果），但是还是有效果（立即执行。原文地址：https://www.cnblogs.com/mengfangui/p/6603452.html。原创 2023-10-11 21:21:49 · 534 阅读 · 0 评论 -
chorme 浏览器记住密码后input黄色背景处理方法(两种)
使用chrome浏览器选择记住密码的账号，输入框会自动加上黄色的背景，有些设计输入框是透明背景的，需要去除掉这个黄色的背景；由于是设置颜色覆盖，所以只对非透明的纯色背景有效；原创 2024-02-12 13:23:16 · 717 阅读 · 0 评论 -
css 字体透明度继承父级透明度，导致不能正常显示。防止opacity子元素继承方法
给父级盒子设置透明度导致内部文字也存在透明度的问题。原创 2024-02-09 12:46:07 · 383 阅读 · 0 评论 -
修改CSS中transition属性的方向
在练习CSS hover时用到了transition属性，发现transition属性只能从左向右、从上向下延伸，但是我想要的效果是从下向上延伸。经过我多方面的Google和测试，找到了一个实用的方法，在此做个记录。首先，“修改transition属性”做个说法其实是错误的，窍门其实就是修改容器（div）的位置。以下是没有设置过div位置的代码，此时transition属性是正常地从上向下延伸。想要从右向左的话也是同样的道理，固定right的值就好了。原创 2024-02-12 12:20:40 · 597 阅读 · 0 评论 -
css的文字间距letter-spacing的应用以及应用后不居中的显示
letter-spacing能给文本加一个字间距，非常好用，但是带来的问题就是不居中，原因不明，但都是往左偏了一些。解决方法：字间距是X px，则整个文本再加一个padding-left，同样是X px，效果图如下。原创 2024-02-12 11:15:05 · 805 阅读 · 0 评论 -
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
transform:scale()可以实现按比例放大或者缩小功能。transition允许CSS的属性值在一定的时间区间内平滑过渡。鼠标经过或悬停时，图片会缓慢放大；鼠标离开，图片缓慢还原。可以调节放大倍数以及放大过程所用时间。下图分别为：原图、鼠标经过。原创 2024-02-11 11:37:24 · 897 阅读 · 0 评论 -
CSS3实现的4种水波特效
（1）HTML结构（2）CSS样式。原创 2024-02-11 11:07:47 · 893 阅读 · 0 评论 -
解决text-align: justify；浏览器、安卓手机不兼容问题
原文地址：https://segmentfault.com/a/1190000013146385。var text= "这一行要两端对齐";原创 2023-10-11 20:49:00 · 252 阅读 · 0 评论 -
display换行
【代码】display换行。原创 2024-02-08 10:15:49 · 798 阅读 · 0 评论 -
11 种垂直居中的方法
在学习了上面的 11 种垂直居中布局方法后，我们简单概括一下如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用absolute + 负 margin方法实现；如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用css-table方式实现；如果你的项目在 PC 端无兼容性要求，推荐使用flex实现居中，当然不考虑 IE 的话，grid也是个不错的选择；如果你的项目在移动端使用，那么推荐你使用flexgrid也可作为备选。原创 2023-11-01 22:26:23 · 224 阅读 · 0 评论 -
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
实现左边固定，右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。使用 float 时，左边元素设置固定宽度，右边元素设置相应的 margin-left 值。使用 flex 时，如果左边元素宽度使用 flex-basis 属性，右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性，右边元素除了可以设置 flex-grow 为 1，或者 flex 为 1，还可以设置宽度 100%。原创 2024-02-08 10:14:31 · 2119 阅读 · 0 评论 -
float布局里面的div怎么撑开外面的div,让高度自适应
关于容器高度自适应的兼容性问题。1.有些时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性：代码如下:height:auto!important;height:200px;min-height:200px;2.很多朋友反映用上面的方法后原创 2024-02-13 13:25:24 · 350 阅读 · 0 评论 -
css 渐变背景设置及修改透明度方法
background: linear-gradient(to right，颜色1, 颜色2);- - - 这种是从左到右，有颜色1过渡为颜色2；background: linear-gradient(颜色1, 颜色2);- - - 这种是从上到下，有颜色1过渡为颜色2；background: linear-gradient(角度, 颜色1, 颜色2, 颜色3);透明度值 0~1 之间，0指完全透明，1指完全不透明，90deg - - - 从左到右，0deg - - - 从上到下，根据具体需求设置渐变方向。原创 2024-02-12 12:45:57 · 1638 阅读 · 0 评论 -
使用CSS修改HTML5 input placeholder颜色
【代码】使用CSS修改HTML5 input placeholder颜色。原创 2024-02-12 13:25:15 · 467 阅读 · 0 评论 -
动态翻滚的导航条
原文地址：https://www.jb51.net/article/72663.htm。原创 2023-10-11 21:27:34 · 61 阅读 · 0 评论 -
移动端与pc端代码准备工作
【代码】移动端与pc端代码准备工作。原创 2024-02-12 14:01:29 · 380 阅读 · 0 评论 -
html ＜a＞标签不能嵌套＜a＞
中国天气网百度中国天气网百度中国天气网原创 2023-10-11 20:53:33 · 214 阅读 · 0 评论 -
html、body宽高都是100%，body里面一个div设置margin-top，body却跑下来了
给body设置一个上边框，跟背景颜色一致，然后设置其盒子模型为border-box就应该可以了。原创 2024-02-11 12:51:06 · 496 阅读 · 0 评论 -
a标签的锚点链接
【代码】a标签的锚点链接。原创 2023-10-11 20:56:43 · 62 阅读 · 0 评论 -
关于＜a＞＜/a＞标签里嵌套＜a＞＜/a＞标签的bug
</a>标签时，在<a>标签中再插入一个<a>原创 2023-10-11 20:51:59 · 258 阅读 · 0 评论 -
网页中＜a＞标签属性统一设置新窗口打开
base>标签规定文档中所有相对 URL 的基准 URL 和/或目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。<base>标签必须具有href或target属性，或两者都有。一份文档中只能有一个<base>元素，而且它必须位于<head> 元素内部。原创 2024-02-11 10:17:39 · 5385 阅读 · 0 评论