伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。
诸如 <img\>
、<input\>
、<iframe\>
,这几个标签是不支持类似 img::before 这样使用。
究其原因,要想要标签支持伪元素,需要这个元素是要可以插入内容的,也就是说这个元素要是一个容器。而 input,img,iframe 等元素都不能包含其他元素,所以不能通过伪元素插入内容。
2025年06月30日
伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。
诸如 <img\>
、<input\>
、<iframe\>
,这几个标签是不支持类似 img::before 这样使用。
究其原因,要想要标签支持伪元素,需要这个元素是要可以插入内容的,也就是说这个元素要是一个容器。而 input,img,iframe 等元素都不能包含其他元素,所以不能通过伪元素插入内容。
2025年06月30日
点(.)属性操作
<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>属性值操作</h2>
<p><input type="text" name="username" value="tom" class="orange" id="mingzi" weight='130' /></p>
<p><input type="button" value="获取" onclick="f1()" /></p>
<p><input type="button" value="设置" onclick="f2()" /></p>
</body>
</html>
<script type="text/javascript">
//设置属性值
function f2(){
var it = document.getElementById("mingzi");
it.name = "usermail";
it.value = "jim@163.com";
it.className = "apple";
it.setAttribute("weight",155);
it.type = "checkbox";
}
function f1(){
var it = document.getElementById("mingzi");
console.log(it.type);
console.log(it.name);
console.log(it.className);
console.log(it.id);
console.log(it.getAttribue("weight"));
console.log(it.getAttribute("value"));
}
</script>
2025年06月30日
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可
2025年06月30日
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。
作为前端开发人员,我们经常会遇到这样的事情。所以我问自己,为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性?
在本文中,我将介绍一些不一样的CSS属性,希望能给你带来点新鲜感,废话不多说,让我们开始吧。
2025年06月30日
提示:点击上方"蓝色字体"↑ 可以订阅噢!
摘要 51RGB官方微信position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。
postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。
2025年06月30日
一、DIV高度自适应(父div高度随子div的高度改变而改变)
1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。
代码:
<styletypestyletype="text/css">
#aa{border:#000000solid5px}
2025年06月29日
ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第八篇。
本期我们要讨论的symbols是个什么东西呢?
这里的Symbols不是指的徽标。
也不是能在代码中使用的小图片。
它也不是代表其它任何东西的一个别名。
2025年06月29日
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid。
今天和大家分享我学到的新知识:如何用 CSS Grid 布局制作一个普通的响应式柱状图。先上效果图:
这篇文章的示例只是一个试验,用来学习 CSS Grid 布局,加上本人也是现学现卖,所以本文出现的代码不具有太多的参照意义。
2025年06月29日
你能在 JavaScript 中创建一个 HTML 元素吗? 答案是肯定的,你可以在 JavaScript 中创建一个元素让我们看看如何?
如果你想在 JavaScript 中创建一个 div 元素——
要在 JavaScript 中创建新元素,我们使用 document.createElement('div'),而不是 div,您可以分配任何 html 标签,例如 p、h1、h2、h3 等,如果您分配 p 标签,它将创建一个 p 标签。
Powered By Z-BlogPHP 1.7.4