按要求合理使用HTML5与CSS3语言语法正确。1、结构中必须使用HTML5语言制作文字、图片、超链接、列表、表单等网页元素。2、样式中必须使用CSS3中文本样式、盒子模型、圆角边框、浮动、伪类、等知识点对网页样式进行设置。
<!DOCTYPE html>
<html>
<head>
<title>HTML5与CSS3示例</title>
<style>
/* 设置页面背景颜色 */
body {
background-color: #f2f2f2;
}
<pre><code> /* 设置标题样式 */
h1 {
font-size: 36px;
color: #333;
text-align: center;
margin-top: 50px;
}
/* 设置图片样式 */
img {
display: block;
margin: 0 auto;
border-radius: 50%;
box-shadow: 2px 2px 5px #999;
}
/* 设置链接样式 */
a {
color: #333;
text-decoration: none;
border-bottom: 1px solid #333;
transition: border-bottom 0.3s ease-in-out;
}
a:hover {
border-bottom: 1px solid #ff6600;
}
/* 设置列表样式 */
ul {
list-style-type: none;
margin: 20px 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
font-size: 20px;
}
/* 设置表单样式 */
form {
margin-top: 50px;
text-align: center;
}
input[type="text"], input[type="email"], textarea {
display: block;
margin: 20px auto;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 80%;
box-sizing: border-box;
font-size: 18px;
color: #333;
}
input[type="submit"] {
background-color: #ff6600;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: #cc5500;
}
</style>
</code></pre>
</head>
<body>
<h1>HTML5与CSS3示例</h1>
<img src="https://via.placeholder.com/150" alt="示例图片">
<ul>
<li><a href="#">示例链接1</a></li>
<li><a href="#">示例链接2</a></li>
<li><a href="#">示例链接3</a></li>
</ul>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入您的邮箱">
<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" placeholder="请输入您的留言"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/gDWf 著作权归作者所有。请勿转载和采集!