写出一个html+css+js,特效好看的送亲爱的代码
时间: 2023-02-20 09:07:06 浏览: 46
我提供一个漂亮的代码示例:
<html>
<head>
<style>
body {
background-color: #F2F2F2;
}
h1 {
color: #FF0000;
text-align: center;
}
</style>
</head>
<body>
<h1>送给亲爱的!</h1>
<p>这是一个用 HTML、CSS 和 JavaScript 制作的示例代码!</p>
<script>
alert("祝你快乐!");
</script>
</body>
</html>
相关问题
写一个html+css+js静态网页并给出代码
好的,以下是一个简单的例子,包括html、css和js的代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>我的静态网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
<main>
<section>
<h2>这是一个标题</h2>
<p>这是一段文本。这是一段文本。这是一段文本。</p>
<button onclick="changeColor()">改变颜色</button>
</section>
<section>
<h2>这是另一个标题</h2>
<p>这是另一段文本。这是另一段文本。这是另一段文本。</p>
<button onclick="changeText()">改变文本</button>
</section>
</main>
<footer>
<p>© 2021 我的网站</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav li a {
color: #333;
text-decoration: none;
}
main {
margin: 20px;
}
section {
margin-bottom: 20px;
}
section h2 {
margin-bottom: 10px;
}
button {
background-color: #f2f2f2;
border: none;
color: #333;
cursor: pointer;
padding: 10px;
margin-top: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
JS代码:
```
function changeColor() {
var section = document.getElementsByTagName("section")[0];
section.style.backgroundColor = "#f2f2f2";
}
function changeText() {
var section = document.getElementsByTagName("section")[1];
var p = section.getElementsByTagName("p")[0];
p.innerHTML = "文本已经改变了!";
}
```
这个例子是一个由头部、导航、主区域和页脚组成的简单静态网页,包含两个区域,每个区域都有一个标题、一个段落和一个按钮。按钮可以改变区域的颜色或文本内容。
写一个html+css+js兼容ie8的好看搜索框
可以在HTML中插入一个form标签,设置action为搜索的url,method为get,然后在form标签内部插入一个input标签作为搜索框,同时加入一个type为submit的button,点击后会触发搜索。
在CSS中,可以设置搜索框的样式,比如去除默认的border和padding,设置合适的宽度和高度,让搜索框看起来更加美观。
针对兼容IE8的问题,可以添加IE8专用的CSS代码,比如使用Hack来实现针对IE8的样式设置。
在JavaScript中,可以监听输入框的键盘事件,在用户输入时实时更新搜索框的值,并调用搜索服务进行搜索。同时,需要针对IE8的兼容性问题,使用IE8适用的特殊代码来解决这些问题。
总的来说,兼容IE8的搜索框样式需要从HTML、CSS和JavaScript三个方面进行考虑与优化。