/* 关于我样式 */ .about{ margin-top: 1000px; } .about-content { padding: 100px 50px 50px; text-align: center; } .about-content h2 { font-size: 40px; line-height: 1.2; margin-bottom: 20px; color: white; } .about-content p { font-size: 25px; maring-bottom: 30px; line-height: 1.5; color: white; } .about-content button { padding: 15px 30px; font-size: 20px; background-color: #FFB03B; color: white; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; } .about-content button:hover { background-color: white; color: #FFB03B; }
时间: 2024-02-19 22:01:56 浏览: 19
这段代码用于设置“关于我”部分的样式。具体来说,about类用于设置“关于我”部分的外边距,将其与上方元素隔开一定距离;about-content类用于设置“关于我”部分的内容,包括内边距和文本对齐方式;h2用于设置“关于我”标题的样式,包括字体大小、行高、下边距和文本颜色;p用于设置“关于我”内容的样式,包括字体大小、下边距、行高和文本颜色;button用于设置“关于我”部分的按钮样式,包括内边距、字体大小、背景颜色、文本颜色、边框、边框半径和鼠标悬停时的样式。
相关问题
优化下面这段代码 <!DOCTYPE html> <html> <head> <title>注册示例</title> <style> .container { display: flex; flex-direction: column; align-items: center; margin-top: 100px; } .btn { padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; margin-top: 20px; cursor: pointer; } </style> </head> <body> <div class="container"> <h1>欢迎来到注册页面</h1> <a href="#" class="btn" id="register-link">注册</a> </div> <script> // 获取注册链接 var registerLink = document.getElementById('register-link'); // 注册链接点击事件处理程序 registerLink.addEventListener('click', function(event) { // 阻止默认行为,避免直接跳转 event.preventDefault(); // 打开新标签页 var newTab = window.open('about:blank', '_blank'); // 在新标签页中添加内容 newTab.document.write('<h1>注册页面</h1>'); // 弹出注册失败提示框 var confirmResult = newTab.confirm('注册失败'); // 确定按钮点击事件处理程序 if (confirmResult) { // 关闭当前标签页,返回开始页面 window.close(); } }); </script> </body> </html>
以下是对代码的优化:
1. 使用外部样式表代替内部样式表,可以提高代码的可维护性。
2. 将 JavaScript 代码放置在 body 元素底部或使用 defer 属性,可以提高页面加载速度。
3. 为注册链接添加按钮样式,可以增强用户体验。
4. 为跳转链接添加 title 属性,可以增加网站的可访问性。
优化后的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>欢迎来到注册页面</h1>
<a href="#" class="btn" id="register-link" title="点击注册">注册</a>
</div>
<script defer src="script.js"></script>
</body>
</html>
```
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}
```
```javascript
// 获取注册链接
var registerLink = document.getElementById('register-link');
// 注册链接点击事件处理程序
registerLink.addEventListener('click', function(event) {
// 阻止默认行为,避免直接跳转
event.preventDefault();
// 打开新标签页
var newTab = window.open('about:blank', '_blank');
// 在新标签页中添加内容
newTab.document.write('<h1>注册页面</h1>');
// 弹出注册失败提示框
var confirmResult = newTab.confirm('注册失败');
// 确定按钮点击事件处理程序
if (confirmResult) {
// 关闭当前标签页,返回开始页面
window.close();
}
});
```
这样的代码结构更加清晰、易读,且符合最佳实践。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Poems</title> <style> p:hover { color: red; font-weight: bold; } body { background-color: MistyRose; font-family: Arial, sans-serif; color: DarkSlateGray; } h2 { font-size: 30px; font-family: Georgia, serif; color: DarkSlateBlue; margin-bottom: 5px; } p { font-size: 20px; line-height: 28px; margin-top: 0px; margin-bottom: 20px; } .hover { color: white; background-color: DarkSlateGray; cursor: pointer; } </style> </head> <body> <h2>Poem 1</h2> <p>Roses are red,<br> Violets are blue,<br> Sugar is sweet,<br> And so are you.</p> <h2>Poem 2</h2> <p>There is a charm about<br> the forbidden that makes<br> it unspeakably desirable.</p> <script> var hoverEls = document.querySelectorAll('.hover'); hoverEls.forEach(function(hoverEl) { hoverEl.addEventListener('mouseover', function() { hoverEl.classList.add('hover'); }); hoverEl.addEventListener('mouseout', function() { hoverEl.classList.remove('hover'); }); }); </script> </body> </html>优化这段代码,为其段落给予不同的字体以及加入表格
对于代码的优化,可以像下面这样对段落进行样式调整,给予不同的字体,并且加入表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Poems</title>
<style>
body {
background-color: MistyRose;
font-family: sans-serif;
color: DarkSlateGray;
}
h2 {
font-size: 30px;
font-family: Georgia, serif;
color: DarkSlateBlue;
margin-bottom: 5px;
}
p:first-of-type {
font-size: 25px;
line-height: 35px;
font-family: Arial, sans-serif;
margin-top: 0px;
margin-bottom: 20px;
}
p:last-of-type {
font-size: 23px;
line-height: 33px;
font-family: Verdana, sans-serif;
margin-top: 20px;
margin-bottom: 0px;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Poem 1</h2>
<p>Roses are red,<br>
Violets are blue,<br>
Sugar is sweet,<br>
And so are you.</p>
<h2>Poem 2</h2>
<p>There is a charm about<br>
the forbidden that makes<br>
it unspeakably desirable.</p>
<table>
<tr>
<td>表格中的内容1</td>
<td>表格中的内容2</td>
</tr>
<tr>
<td>表格中的内容3</td>
<td>表格中的内容4</td>
</tr>
</table>
</body>
</html>