HTML，location，用法(获取当前URL)，css3学习笔记之按钮

哇塞! 看到这个题目，我就想到了一句中国流行的语气：“好厉害，一波操作！”这是一个评价某人技能高超的常用语。在这篇文章中，我会向大家介绍如何使用HTML的location属性获取当前URL以及CSS3中的按钮样式。

Part 1: HTML location 用法

使用HTML的location属性可以获取当前页面的URL地址。通常，可以使用location.href或location.toString()来获取当前URL。这两个方法都会返回一个包含当前完整URL的字符串。

例如，假设当前网页的URL地址是 https://www.example.com/，我们可以使用下面的代码来获取当前URL：

```

var currentURL = location.href;

console.log(currentURL);

```

运行上述代码后，我们会在控制台上输出当前页面的完整URL地址。

如果只想获取URL中的某个部分，可以使用location对象的其他属性，如location.protocol、location.hostname、location.pathname和location.search等。下面是一个示例：

```

console.log(location.protocol); //输出当前页面的协议类型，如https、http、ftp等。

console.log(location.hostname); //输出当前页面的主机名，如www.example.com。

console.log(location.pathname); //输出当前页面的路径名，如/index.html。

console.log(location.search); //输出当前页面的查询字符串，如?id=1。

```

Part 2: CSS3 学习笔记之按钮

在CSS3中，我们可以使用一些新的样式来美化网页中的按钮。下面是一些使用CSS3添加样式的示例：

1. 悬浮样式

我们可以添加悬浮样式，当用户将鼠标悬停在按钮上时，按钮的颜色或背景会发生改变，从而增强按钮的视觉效果。

```

button:hover {

background-color: #4CAF50;

color: white;

}

```

2. 圆角样式

我们可以添加圆角样式，使按钮的边缘变得柔和，并增加整个按钮的视觉美感。

```

button {

border-radius: 5px;

}

```

3. 阴影样式

我们可以添加阴影样式，使按钮立体感更强，看起来更有质感。

```

button {

box-shadow: 2px 2px 4px #000000;

}

```

4. 渐变样式

我们可以添加渐变样式，使按钮看起来更加高端、简洁大气。

```

button {

background: linear-gradient(to bottom, #4169E1, #6495ED);

}

```

通过使用上述所有样式的组合，我们可以创建出一个具有超强视觉效果的按钮。下面是一个使用了所有样式的按钮示例：

```

button {

background: linear-gradient(to bottom, #4169E1, #6495ED);

border: none;

color: white;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 5px;

box-shadow: 2px 2px 4px #000000;

}

button:hover {

background-color: #4CAF50;

color: white;

}

```

以上就是我的文章，希望大家通过本文能够更好地了解HTML location的用法以及CSS3中按钮的样式。写这篇文章过程中，有点像是在练习口语，好开心啊！