<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度热搜</title> </head> <style> .hot-search li:hover { cursor: pointer; } .hot-search li { margin-bottom: 10px; } </style> <body> <div> <h1>百度热搜</h1> <ul class="hot-search"> <li>欧洲仍是新冠大流行中心</li> <li>北京提倡餐饮酒吧业施行预约制度</li> <li>兰州大风浮尘遮天蔽日</li> <li>山东杰瑞集团高管被立案调查</li> <li>中兴通讯回应硫明</li> <li>破坏文物者终身不得登长城</li> </ul> </div> <script type="text/javascript"> (function () { var lis = document.querySelectorAll('.hot-search li'); for (var i = 0; i < lis.length; i++) { (function (index) { lis[index].addEventListener('click', function () { for (var j = 0; j < lis.length; j++) { lis[j].classList.remove('active'); } this.classList.add('active'); alert(index); }); })(i); } })(); </script> </body> </html>弄个黑框框着百度热搜这个整体。
时间: 2024-02-16 22:27:54 浏览: 18
您可以在 `<style>` 标签中添加以下 CSS 代码来实现这个效果:
```css
body {
margin: 0;
padding: 0;
}
.hot-search {
border: 1px solid #000;
padding: 10px;
list-style: none;
}
```
然后将 `<ul>` 标签的 `class` 属性改为 `hot-search`,即可完成整体黑框框效果。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 绿叶学习网; </body> </html>哪里错了
根据你提供的代码,我发现以下几个问题:
1. 缺少`<!DOCTYPE html>`声明,这个声明告诉浏览器使用哪个HTML版本来解析页面。
2. 缺少`<title>`标签,这个标签用于定义网页的标题,显示在浏览器的标题栏或标签页上。
3. 缺少`<body>`标签内的内容,这个标签用于定义网页的主体内容,可以在其中添加文本、图片、链接等元素。
修正后的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绿叶学习网</title>
</head>
<body>
绿叶学习网
</body>
</html>
```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>是一个HTML页面模板,它是一个简单的404页面,用于显示“Not found”错误信息。在这个模板中,<!DOCTYPE html>定义了文档类型,<html>标签定义了HTML文档的根元素,<head>标签定义了文档的头部部分,<meta charset="UTF-8">指定了文档的字符编码为UTF-8,<title>标签定义了文档的标题,<body>标签定义了文档的主体部分,<h1>标签定义了一个一级标题。