蓝布编程网

分享编程技术文章,编程语言教程与实战经验

伪元素的妙用2 - 多列均匀布局及title属性效果

伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 <img\><input\><iframe\>,这几个标签是不支持类似 img::before 这样使用。

究其原因,要想要标签支持伪元素,需要这个元素是要可以插入内容的,也就是说这个元素要是一个容器。而 input,img,iframe 等元素都不能包含其他元素,所以不能通过伪元素插入内容。

JavaScript 操作DOM属性和属性值

点(.)属性操作

<!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>

CSS实现常见元素水平、垂直居中

本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。

水平居中

  • 行内元素

这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可

使用这些不太常用的CSS属性,布局效率上又提高了一个层次

有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。

作为前端开发人员,我们经常会遇到这样的事情。所以我问自己,为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性?

在本文中,我将介绍一些不一样的CSS属性,希望能给你带来点新鲜感,废话不多说,让我们开始吧。

探索CSS position属性

提示:点击上方"蓝色字体"↑ 可以订阅噢!

摘要 51RGB官方微信position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。

基础知识

postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。

如何解决div的高自适应问题

一、DIV高度自适应(父div高度随子div的高度改变而改变)

1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码:

<styletypestyletype="text/css">

#aa{border:#000000solid5px}

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第八篇。

本期我们要讨论的symbols是个什么东西呢?

这里的Symbols不是指的徽标。

也不是能在代码中使用的小图片。

它也不是代表其它任何东西的一个别名。

document.execCommand 已被废弃,现在我们如何与剪贴板交互?

“复制到剪贴板”是一个极为常见的web功能。多年来,我们一直依赖一个略显“古老”的 API——

用 CSS Grid 布局制作一个响应式柱状图

最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid。

今天和大家分享我学到的新知识:如何用 CSS Grid 布局制作一个普通的响应式柱状图。先上效果图:

这篇文章的示例只是一个试验,用来学习 CSS Grid 布局,加上本人也是现学现卖,所以本文出现的代码不具有太多的参照意义。

在 JAVASCRIPT 中创建 HTML 元素...

你能在 JavaScript 中创建一个 HTML 元素吗? 答案是肯定的,你可以在 JavaScript 中创建一个元素让我们看看如何?

如果你想在 JavaScript 中创建一个 div 元素——

要在 JavaScript 中创建新元素,我们使用 document.createElement('div'),而不是 div,您可以分配任何 html 标签,例如 p、h1、h2、h3 等,如果您分配 p 标签,它将创建一个 p 标签。

<< < 41 42 43 44 45 46 47 48 49 50 > >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言