嘿，朋友们！今天我来分享一下如何用HTML加CSS制作一个炫酷的书城网页，并教大家如何使用JavaScript来获取HTML标签的属性值。废话不多说，让我们开始吧！

首先，我们需要创建一个基本的HTML结构。打开你喜欢的文本编辑器，创建一个新的HTML文件。在文件中，我们需要添加以下基本的HTML标签：

```html

```

接下来，我们需要创建一个CSS文件来样式化我们的网页。在同一文件夹下，创建一个名为style.css的文件。打开这个文件，添加以下代码：

```css

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

margin: 0;

padding: 0;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

}

.header {

background-color: #333;

color: #fff;

padding: 10px;

}

.navbar {

background-color: #666;

color: #fff;

padding: 10px;

}

.navbar ul {

list-style: none;

margin: 0;

padding: 0;

}

.navbar ul li {

display: inline-block;

margin-right: 15px;

}

.content {

padding: 20px;

}

.book {

margin: 10px;

padding: 10px;

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

.footer {

background-color: #333;

color: #fff;

padding: 10px;

text-align: center;

}

```

在这个CSS文件中，我们定义了一些基本的样式规则。我们将整个网页的宽度限制在1200像素，并添加了一些背景颜色和边距属性。我们还定义了头部，导航栏，内容，书籍和页脚的样式。

接下来，回到我们的HTML文件，在标签中，添加以下代码：

```html

```

在这个HTML文件中，我们创建了一个容器来包裹整个网页的内容。我们有一个顶部的标题，一个导航栏，一个显示畅销书籍的内容部分，和一个底部的版权信息。

现在，我们需要创建一个名为script.js的JavaScript文件。在同一文件夹下，创建一个名为script.js的文件，并添加以下代码：

```javascript

function getBookDetails(button) {

var bookName = button.parentNode.querySelector("h3").innerHTML;

var bookImage = button.parentNode.querySelector("img").src;

var bookDescription = button.parentNode.querySelector("p").innerHTML;

console.log("书名：" + bookName);

console.log("封面图片：" + bookImage);

console.log("描述：" + bookDescription);

}

```

这段JavaScript代码定义了一个名为getBookDetails的函数。当点击“查看详情”按钮时，该函数将获取并打印所点击书籍的书名、封面图片和描述。

现在，我们需要将所有这些文件连接起来。在同一文件夹下，创建一个名为index.html的文件，并将以上所述代码复制到对应的文件中。确保HTML文件链接到CSS和JavaScript文件，将CSS文件名和JavaScript文件名替换为你自己的文件名。

现在，你可以在浏览器中打开index.html文件，看到在浏览器中显示出来。当你点击“查看详情”按钮时，你会在浏览器的控制台中看到有关该书籍的书名、封面图片和描述的信息。

这就是使用HTML加CSS制作一个书城网页并使用JavaScript获取HTML标签属性值的全过程！希望这篇文章对你有所帮助。如果你有任何问题，请随时在下方评论区留言。谢谢！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/