如何简单制作简单的个人主页(一)

最新推荐文章于 2024-05-17 16:15:43 发布
最新推荐文章于 2024-05-17 16:15:43 发布
阅读量993 收藏 2
点赞数
分类专栏： web前端 文章标签： web前端 html css javas 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	 <title>个人网站-首页</title>
	 <style type="text/css">
	 *{margin:0px;
	   padding:0px;}
	   ul{list-style: none;}
	   body{background: #d9d7cb;
	        font-size: 12px;}
	   #top,#vi,#nav,#main,#bt{width:779px;
	                           margin: 0px auto;}
	   #top,#bt{background: #000;}
	   #top{height:18px;
	        padding-top:5px;
	        text-align: right;
	        color:#fff;}
	   #top_txt{margin-right:5px;}
	   #vi{height:85px;
	       background: #98a363;}
	   #nav{height:35px;
	        background: #e6e4db;}
	   #nav ul{margin-left: 30px;}
	   #nav ul li{float: left;}
       #nav ul a{display: block;
                 width:85px;
                 height: 25px;
                 padding-top: 10px;
                 text-decoration: none;
                 letter-spacing: 15px;
                 text-align: center;
                 color: #000;
                 font-size: 15px;
                 font-weight: bold;}
      #nav ul a:visited{color:#000;}
      #nav ul a:hover:{color:#98a363;
                       background: #fff;}
      #nav ul li.bar{width:6px;
                     padding-top: 12px;}
      #main{height:560px;
            background: #fff;}
      #left{width:180px;
            height:350px;
            border:1px solid #d9d7cb;
            margin:10px;
            float:left;
            clear:left;}
      h4{letter-spacing:1em;
          font-size: 15px;
          background:#e6e4db;
          height:24px;
          border-bottom:1px solid #d9d7cb;
          padding-top: 5px;
          margin-top: 2px;
          padding-left: 10px;}
      #left h4{width:170px;}
      #left ul{margin:16px;line-height: 3em;}
      #left li{width:150px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow:ellipsis;}
       #right{width:564px;
               height:350px;
               border:1px solid #d9d7cb;
              margin-top: 10px;
              float: left;}
       #right h4{width:554px;}
       #right h5,#right .date,#right p {margin-left:30px;}
       #right h5{maigin-top:10px;
                 font-size:13px;}
       .date {font-style:italic;}
       #right p{width:500px;
               height: 90px;
               background:#f4f4f0;
               border:1px solid #999;
               text-indent:2em;
               overflow: hidden;
      }
      hr{margin-top:20px;}
      #photo{width:756px;
      	height:176px;
      	border:1px solid #d9d7cb;
      	margin-left:10px;
      	float: left;}
      #photo h4{width:746px;}
      #photo_img{width:700px;
                 margin-left: 60px;
                 margin-top: 10px;
                text-align: center;}
      #photo img{display: block;
                 width:100px;
                 height:100px;
                float:left;
                margin-right:30px;
                border:1px solid #d9d7cb;}
      #photo h5{width: 100px;
                margin-right:30px;
                margin-top:5px;
               font-size: 12px;
               float: left;}
      #bt{height:46px;
          padding-top:34px;
          text-align: center;
          color:#fff;}
       </style>
   </head>
   <body>
     <div id="top">
     <div id="top_txt">收藏本页</div>
    </div>
    <div id="vi"></div >
      <div id="nav">
        <ul>
          <li><a href="#" target="_self">首页</a></li>
          <li class="bar">|</li>
          <li><a href="#" target="_self">日志</a></li>
          <li class="bar">|</li>
          <li><a href="#" target="_self">相册</a></li>
          <li class="bar">|</li>
          <li><a href="#" target="_self">留言</a></li>
        </ul>
      </div>
      <div id="main">
        <div id="left">
          <h4>|最新留言</h4>
          <ul>
              <li>留言内容一</li>
              <li>留言内容二</li>
              <li>留言内容三</li>
              <li>留言内容四</li>
              <li>留言内容五</li>
              <li>留言内容六</li>
              <li>留言内容七</li>
              <li>留言内容八</li>
            </ul>
          </div>
          <div id="right">
            <h4>|最新日志</h4>
            <h5>日志标题一</h5>
            <span class="date">日志修改时间</span>
            <br/>
            <p>日志内容一</p>
            <hr />
            <h5>日志标题二</h5>
            <span class="date">日志修改时间</span>
            <br />
            <p>日志内容二</p>
          </div>
          <div id="photo">
            <img src=""/>
            <img src=""/>
            <img src=""/>
            <img src=""/>
            <img src=""/>
           <h5>相片说明</h5>
           <h5>相片说明</h5>
           <h5>相片说明</h5>
           <h5>相片说明</h5>
           <h5>相片说明</h5>
         </div>
       </div>
     </div>
     <div id="bt">底部个人信息</div>
   </body>
   </html>


HeroKingsley
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML制作一个简单的个人主页
drhrht的博客
03-02 7078
此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落的细节处理、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
一个特别好看的个人起始页
最新发布
孤客科技
05-17 775
一个特别好看的个人起始页
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
12-09 1701
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
SplashPage：浏览器的个人起始页
02-14
#SplashPage 浏览器的个人主页改编自： 将.env.example重命名为.env并从“插入API密钥在js/weather.js设置纬度和经度在css/style.css更改主题
定制属于自己的Chrome起始页
令狐少侠
09-30 4419
个人感觉没什么技术含量，但是非常实用，我自己的起始页效果如下图： 步骤很简单： 一、用记事本自己写一个静态的html 二、将自己的html配置到起始页，参照http://www.henghengzhu.com/share/158.html html源码如下： 我的起始页 搜索： Google 百度 sta
可用的空白页网址,自己用来自定义浏览器的起始页.
miracle
03-02 1万+
浏览器首页总是推荐有的没的新闻,页面很混乱,也会分散自己的注意力,这点哪点.所以自己干脆设置了个空白的起始页.上浏览器就只会是搜索,不会看了半天新闻推荐而忘了自己要干嘛.地址:http://test.ddzhan.com/homepage/home.php如果希望想自定义下自己的标签页标题,那么可以在title=后面添加相应的文字即可.(例子:想要标签页显示 "主页"  则网址为:http://t...
简单个人主页
06-14
简单个人主页
一个简单的个人主页页面
09-26
通过html+css+js制作一个简单的个人主页。 适合刚开始接触前端这个行业的小白进行练手，里面用到的都是一些简单的标签、样式。
html网页简单的个人主页
12-02
了解html代码
一个简单的个人页面
12-14
一个简单的个人网页制作，可用于网页设计课程资源，文档中包含图像
个人主页程序简洁漂亮HTML代码
01-16
自己用HTML编写的主页程序，简洁高效，适合当成网页程序作业
简单html个人网站
07-04
一份最简单的html制作模板，HTML 网页编程 主页模板 本人学习过程中索积累下的部分资料，特此上传共享。
个人简历简单制作　
06-26
简单个人简历制作~~~
一个简单的网页 个人主页 用Dreamweaver做的
07-07
网页制作是IT领域中的一项基础技能，尤其在互联网日益普及的今天，个人主页成为许多人展示自我、分享兴趣或职业信息的平台。本项目名为“一个简单的网页 个人主页 用Dreamweaver做的”，显然，它是由Adobe ...
个人简单APP制作方法
03-18
个人APP希望能够帮助到您-v-.。。。。。。。。。。。。。
帮我制作一份简单的个人介绍网页
05-17
好的，以下是一个简单的个人介绍网页的示例： ``` <!DOCTYPE html> <html> <head> <title>个人介绍</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { margin: 0; font-size: 36px; } main { max-width: 800px; margin: 0 auto; padding: 20px; } p { line-height: 1.5; font-size: 18px; margin-bottom: 20px; } img { max-width: 100%; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; } ul { margin-left: 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } li { margin-right: 20px; } li:last-child { margin-right: 0; } a { color: #333; text-decoration: none; font-weight: bold; } </style> </head> <body> <header> <h1>个人介绍</h1> </header> <main> <img src="https://via.placeholder.com/300x300" alt="头像"> <p>我叫张三，是一名前端开发工程师。我喜欢编写精美的网页和交互式应用程序。</p> <p>在我的工作中，我使用 HTML、CSS 和 JavaScript 等技术来构建响应式、现代化的网站。我注重细节和用户体验，并喜欢探索新的前端工具和框架。</p> <p>我还喜欢参加技术会议和社区活动，与其他前端开发人员交流经验和知识。</p> <p>如果您需要一个有经验的前端开发人员来帮助您构建您的网站或应用程序，请随时<a href="#">联系我</a>。</p> <h2>技能</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>React</li> <li>Vue</li> <li>Bootstrap</li> <li>Sass</li> </ul> </main> </body> </html> ``` 你可以根据自己的需要进行修改和定制，例如更改头像、修改文本内容、添加链接等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值