编写一个个人简介首页或网站,使用表格或div+Css布局
时间: 2023-05-24 12:01:59 浏览: 118
个人简介的网页设计
3星 · 编辑精心推荐
好的,这是一个非常好的项目!对于个人简介的首页或网站,我们可以通过表格或div CSS布局进行构建。表格布局更加传统,但是使用div可以更加灵活地控制网页的布局和美观度。以下是一个示例的代码片段,以如何使用CSS div元素布局为例:
<div class="wrapper">
<header>
<h1>个人简介</h1>
</header>
<section class="about">
<h2>关于我</h2>
<p>你可以在这里写自己的个人介绍,让别人更好地了解你。</p>
</section>
<section class="skills">
<h2>技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
</div>
.wrapper {
max-width: 800px;
margin: 0 auto;
}
header {
text-align: center;
}
.about,
.skills {
padding: 20px;
margin: 20px 0;
background-color: #f5f5f5;
}
.skills li {
display: inline-block;
padding: 5px 10px;
background-color: #ccc;
margin: 5px;
}
这个示例代码使用了一个包裹器(wrapper)来限定网页宽度,使用了header元素来实现标题居中,使用了两个CSS类(about和skills)来分别实现“关于我”和“技能”两个区域的布局和样式。我们还使用了一个无序列表(ul)和多个列表项(li)来实现技能列表的展示。
当然,这仅仅只是一个很简单的例子,你可以根据自己的需求和想象力来进行更加复杂和丰富的布局和设计。希望这个例子能够帮助你更好地开始你的个人简介首页或网站编写工作!
阅读全文