用HTML写一个个人唯美主页
<!DOCTYPE html>
<html>
<head>
<title>我的唯美主页</title>
<style type="text/css">
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
}
<pre><code> header {
background-color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
font-size: 48px;
color: #333;
margin: 0;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
nav a {
color: #fff;
font-size: 24px;
text-decoration: none;
margin: 0 20px;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
nav a:hover {
background-color: #fff;
color: #333;
}
section {
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: 20px;
}
section h2 {
font-size: 36px;
color: #333;
margin: 0 0 20px;
}
section p {
font-size: 18px;
line-height: 1.5;
color: #666;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</code></pre>
</head>
<body>
<header>
<h1>欢迎来到我的唯美主页</h1>
</header>
<pre><code><nav>
<a href="#">首页</a>
<a href="#">关于我</a>
<a href="#">我的作品</a>
<a href="#">联系我</a>
</nav>
<section>
<h2>关于我</h2>
<p>我是一个喜欢唯美风格的程序员，喜欢写代码，同时也喜欢设计网页。在这里，我会分享我的一些作品和一些有趣的事情。</p>
</section>
<section>
<h2>我的作品</h2>
<p>以下是一些我设计的网站和应用程序：</p>
<ul>
<li><a href="#">唯美小清新网站</a></li>
<li><a href="#">唯美博客</a></li>
<li><a href="#">唯美相册</a></li>
<li><a href="#">唯美在线商城</a></li>
</ul>
</section>
<section>
<h2>联系我</h2>
<p>如果您对我的作品感兴趣，或者想和我交流一下，请通过以下方式联系我：</p>
<ul>
<li>电子邮件：<a href="mailto:example@example.com">example@example.com</a></li>
<li>微信：<a href="#">example</a></li>
<li>QQ：<a href="#">123456789</a></li>
</ul>
</section>
<footer>
<p>&copy; 2021 My Website. All rights reserved.</p>
</footer>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/DB2 著作权归作者所有。请勿转载和采集!