随笔分类 -  HTML

前端常见布局之圣杯布局及双飞翼布局
摘要：在前端开发中，要实现一个布局：三列布局——左右列宽度固定，中间列内容优先渲染且中间列宽度自适应一般有两种实现方式，圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）。两者都是用来实现三列布局左右列固定宽度、中间列自适应并且中间列在文档流中优先渲染。以下 阅读全文
posted @ 2025-03-29 22:05 消逝的风i 阅读(509) 评论(0) 推荐(0)
html实现a元素href的URL链接自动刷新或新窗口打开
摘要：有时我们想实现这样一个功能，点击一个链接，如果这个链接浏览器已经打开过，则刷新已经打开的链接窗口；如果这个链接没有打开过，则使用新窗口打开这个链接页面。 这是一个非常好的体验增强功能，可以有效避免浏览器选项卡中打开重复多余的页面。 关键是如何实现呢？ 使用a标签的target属性特性： 无论是a链接 阅读全文
posted @ 2020-07-30 21:26 消逝的风i 阅读(1680) 评论(0) 推荐(0)
HTML中div嵌套div的margin不起作用
摘要：下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 阅读全文
posted @ 2020-07-29 22:41 消逝的风i 阅读(1780) 评论(0) 推荐(0)
html中如何让图片按比例响应式缩放、并自动裁剪的css技巧
摘要：响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时，如果想要图片按比例缩放，最简单的就是把img宽度设为100%，不设置高度，高度就会自动跟着高度缩放。 但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等，然而图片尺寸不是这个比例，又不想让图片拉伸变形 阅读全文
posted @ 2020-07-29 21:54 消逝的风i 阅读(13160) 评论(0) 推荐(0)
html中把多余文字转化为省略号
摘要：在html中如果要把多余的文字显示为省略号，那么有以下几种方法： 单行文本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt 阅读全文
posted @ 2020-07-29 21:30 消逝的风i 阅读(2299) 评论(0) 推荐(1)
html中input提示文字样式修改
摘要：在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以这样设置css样式： <!DOCTYPE html> <html> <head 阅读全文
posted @ 2020-07-29 21:10 消逝的风i 阅读(6041) 评论(0) 推荐(1)
HTML5里的input标签的required属性提示文字修改
摘要：在做表单提交时我们有时会遇到这样的需求，在用户没有输入必填信息点提交时提示文字需要改为我们想要的提示信息，那么可以在input里面增加这样的语句： <input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity( 阅读全文
posted @ 2020-07-29 21:01 消逝的风i 阅读(2933) 评论(0) 推荐(0)
苹果(Safari)浏览器的图片width设置为100%但实际显示为980px改成的问题方法
摘要：最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ； 到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。 可 阅读全文
posted @ 2020-07-29 20:48 消逝的风i 阅读(3246) 评论(0) 推荐(0)
在html页面中引入另一个html页面
摘要：我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。 在这里，有好几种引入html文件的方式，不过每种都是有利有弊 阅读全文
posted @ 2020-07-29 20:06 消逝的风i 阅读(21547) 评论(0) 推荐(1)
safari手机浏览器的width:100%的自适应问题
摘要：Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式，在 Mac 中的 Safari 浏览器 同样开启开发者模式后，进行联机调试。功能彪悍。 最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ； 阅读全文
posted @ 2018-12-25 11:16 消逝的风i 阅读(4678) 评论(0) 推荐(0)