使用HTML和CSS建立简单的个人网页

最新推荐文章于 2023-12-05 16:25:09 发布

sxtdxyf

最新推荐文章于 2023-12-05 16:25:09 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.csdn.net/weixin_58547057/article/details/128482023

本文介绍如何使用HTML和CSS构建个人网页，包括设计思路（首页、项目、作品、技能、爱好和留言页），网站文件结构（HTML、CSS、JS和图片文件），并推荐了HBuilder作为实现工具，同时提供了HTML结构和CSS样式的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、个人网页的设计

包括首页、以及个人项目、作品、技能还有爱好，最后一个页面是留言

二、网站文件：HTML页面结构文件、css页面样式文件、js特效文件、image页面图片文件

三、软件实现：HBuilder

四、代码实现

（1）HTML结构代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>我的博客</title>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
 </head>
 <body>
  <div class="page">
   <div class="nav">
    < a href=" " class="logo fl">首页</ a>
    <ul class="fr">
     < a href="index.html"><li>网站首页</li></ a>
     < a href="sw.html"><li>我的项目</li></ a>
     < a href="jn.html"><li>我的技能</li></ a>
     < a href="zp.html"><li>我的作品</li></ a>
     < a href="ms.html"><li>喜爱美食</li></ a>
     < a href="ly.html"><li>留言交流</li></ a>
    </ul>
   </div>
   <div class="mid">
    <div class="banner">< img src="images/banner.jpg" alt=""></div>
    <div class="left fl">
     <p class="title">关于我</p >
     <div class="jj">
      < img src="images/tx.jpg" alt="">
      <p><b>姓名：</b>XXX</p >
      <p><b>手机：</b>188****0711</p >
      <p><b>邮箱：</b>123456789@qq.com</p >
      <p><b>爱好：</b>音乐、动漫、游戏、运动</p >
     </div>
     <p class="title">欢迎登录</p >
     <form action="" class="login" method="post">
      <input type="text" placeholder="请输入用户名" value="" />
      <input type="password" placeholder="请输入密码" name="" />
      <button type="submit">登录</button>
     </form>
    </div>
    <div class="right fl">
     <p class="title">个人简介</p >
     <div class="wz">
      < img src="img/a1.jpg"alt="">
      <p>本人性格开朗、稳重、有活力,待人热情、真诚;工作认真负责,积极主动,能吃苦耐劳,用于承受压力, 勇于创新;有很强的组织能力和团队协作精神,具有较强的适应能力;纪律性强,工作积极配合;意志坚强，具有较强的无私奉献精神。 对待工作认真负责,善于沟通、协调有较强的组织能力与团队精神;活泼开朗、乐观上进、有爱心并善于施教并行;上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地提高自己的工作能力,与企业同步发展。</p >
     </div>
    </div>
   </div>
   <div class="foot">版权所属：XXX&emsp; 个人网页</div>
  </div>
 </body>
</html>

（2）CSS样式代码


@charset "utf-8";
*{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
}
li{
 list-style: none;
}
a{
 color: #000;
 text-decoration: none;
}
.fl{
 float: left;
}
.fr{
 float: right;
}
.clear20{
 clear: both;
 margin-bottom: 20px;
}
body{
 font-size: 12px;
 color: #000;
 background: url(../images/bg.jpg) repeat-x;
 background-size: 50% 100%;
 background-attachment: fixed;
}
.page{
 width: 960px;
 margin: 0 auto;
 background-color: #FFF;
 overflow: hidden;
}
.nav{
 width: 100%;
 background-color: #53a3b9;
 overflow: hidden;
}
.logo{
 display: block;
 white-space: nowrap;
 text-indent: 999em;
 width: 213px;
 height: 50px;
 background: url(../images/logo.png) no-repeat;
 background-size: cover;
 overflow: hidden;
 margin: 5px 8px;
}
.nav ul{
 width: 720px;
 overflow: hidden;
 margin: 5px 10px 5px 0;
}
.nav ul li{
 width: 120px;
 text-align: center;
 line-height: 50px;
 font-size: 14px;
 color: #FFF;
 float: left;
}
.nav ul li:hover{
 background-color: #4996a5;
}
.mid{
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
 overflow: hidden;
}
.banner{
 width: 100%;
 height: 400px;
 overflow: hidden;
 margin-bottom: 15px;
}
.banner img{
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.left{
 width: 300px;
 margin-right: 20px;
}
.right{
 width: 620px;
}
p.title{
 width: 100%;
 line-height: 38px;
 text-indent: 1em;
 background-color: #53A3B9;
 color: #FFF;
 font-size: 18px;
 margin-bottom: 20px;
}
.jj{
 width: 260px;
 margin: 0 auto 20px;
}
.jj img{
 display: block;
 width: 220px;
 height: 220px;
 box-sizing: border-box;
 border-radius: 50%;
 border: 3px solid #53A3B9;
 margin: 0 auto 20px;
}
.jj p{
 line-height: 26px;
 margin-bottom: 5px;
}

.login{
 width: 260px;
 margin: 0 auto 20px;
}

.login input{
 width: 100%;
 height: 35px;
 box-sizing: border-box;
 border-radius: 5px;
 border: 1px solid #000;
 padding: 8px;
 margin-bottom: 15px;
}
.login button{
 text-align: center;
 width: 100%;
 height: 35px;
 box-sizing: border-box;
 border-radius: 5px;
 background-color: #53A3B9;
 font-size: 14px;
 color: #FFF;
 cursor: pointer;
}
.login button:hover{
 background-color: #4996A5;
}

.wz{
 width: 100%;
 padding: 15px;
 box-sizing: border-box;
 overflow: hidden;
}

.wz b{
 display: block;
 margin-top: 10px;
 margin-bottom: 20px;
 font-size: 16px;
 font-weight: normal;
}

.wz p{
 text-indent: 2em;
 line-height: 35px;
 margin-bottom: 10px;
}

.wz>img{
 display: block;
 margin: 10px auto;
}

.wz p>img{
 display: inline-block;
 margin: 10px;
}

.foot{
 width: 100%;
 background-color: #53a3b9;
 text-align: center;
 line-height: 50px;
 font-size: 14px;
 color: #FFF;
}

.jn{
 width: 100%;
 height: 500px;
 position: relative;
}

.jn span{
 position: absolute;
 text-align: center;
 color: #FFF;
 cursor: pointer;
 transition: transform 0.6s;
 border-radius: 50%;
}

.jn span:hover{
 transform: scale(1.1);
}

.jn span:nth-of-type(1){
 width: 120px;
 line-height: 120px;
 font-size: 18px;
 background-color: rgba(246,229,141,0.9);
 top: 280px;
 left: 120px;
 z-index: 1;
}

.jn span:nth-of-type(2){
 width: 160px;
 line-height: 160px;
 font-size: 20px;
 background-color: rgba(255,190,118,0.7);
 top: 90px;
 left: 240px;
 z-index: 3;
}

.jn span:nth-of-type(3){
 width: 130px;
 line-height: 130px;
 font-size: 20px;
 background-color: rgba(255,121,121,0.8);
 top: 110px;
 left: 120px;
 z-index: 2;
}

.jn span:nth-of-type(4){
 width: 240px;
 line-height: 240px;
 font-size: 24px;
 background-color: rgba(186,220,88,0.7);
 top: 280px;
 left: 280px;
 z-index: 4;
}

.jn span:nth-of-type(5){
 width: 120px;
 line-height: 120px;
 font-size: 16px;
 background-color: rgba(185, 251, 244, 1.0);
 top: 60px;
 left: 420px;
 z-index: 1;
}

.zp {
 width: 100%;
 overflow: hidden;
}

.zp img{
 width: 180px;
 height: 280px;
 box-sizing: border-box;
 border-radius: 5px;
 border: 2px solid #6ad4ee;
 margin: 10px;
 cursor: pointer;
}

.ly span{
 display: block;
 text-align: right;
 line-height: 35px;
 font-size: 16px;
 margin-bottom: 10px;
}

.ly label{
 margin-left: 4px;
 margin-right: 10px;
 font-size: 16px;
}
.ly input[type=text]{
 width: 280px;
 height: 30px;
 box-sizing: border-box;
 padding: 6px;
 border-radius: 4px;
 border: 1px solid #000;
}
.ly textarea{
 width: 280px;
 height: 200px;
 box-sizing: border-box;
 padding: 6px;
 border-radius: 4px;
 border: 1px solid #000;
}
.ly button{
 display: block;
 width: 100px;
 height: 42px;
 text-align: center;
 box-sizing: border-box;
 border-radius: 4px;
 background-color: #53A3B9;
 margin: 30px auto;
 font-size: 16px;
 color: #FFF;
}