简单的个人主页

最新推荐文章于 2024-05-13 10:09:55 发布
最新推荐文章于 2024-05-13 10:09:55 发布
阅读量368 收藏 4
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53303596/article/details/120512451
版权

效果展示在这里插入图片描述
效果代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
    <h1>Hello！欢迎来到我的个人主页</h1>
</div>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">丽人夕阳中</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">学习园地</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h2>关于我</h2>
            <div align="center" style="border: 1px solid black">
                <h5>—— Java工程师 ——</h5>
                <img src="images/tou.jpeg" class="img-circle" width="120" height="140">
            </div>
            <br>
            <p align="center">我情问心终不悔，爱意缠绵如流水。</p>
            <h3>我的空间</h3>
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">个人博客</a></li>
                <li class="active"><a href="#">个人博客园</a></li>
                <li class="active"><a href="#">我的GitHub</a></li>
            </ul>
            <hr class="hidden-sm hidden-md hidden-lg">
        </div>
        <div class="col-sm-8">
            <h2>基本信息</h2>
            <div>
                <table class="table table-bordered table-hover">
                    <tbody>
                    <tr>
                        <td class="active" width="50" align="center">姓名</td>
                        <td width="150">李暖</td>
                        <td class="active" width="50" align="center">性别</td>
                        <td width="150">女</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">民族</td>
                        <td width="150">汉</td>
                        <td class="active" width="50" align="center">籍贯</td>
                        <td width="150">河南</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">出生日期</td>
                        <td width="150">2001/09/15</td>
                        <td class="active" width="50" align="center">婚姻状况</td>
                        <td width="150">未婚</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">学历</td>
                        <td width="150">本科</td>
                        <td class="active" width="50" align="center">专业</td>
                        <td width="150">计算机科学与技术</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">联系电话</td>
                        <td width="150">13401159404</td>
                        <td class="active" width="50" align="center">邮箱</td>
                        <td width="150">18745909420@163.com</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">兴趣爱好</td>
                        <td>喜欢阅读 听音乐</td>
                        <td class="active" width="50" align="center">社会实践</td>
                        <td>2019年 深圳市领胜科技有限公司员工一名</td>
                    </tr>
                    <tr>
                        <td class="active" width="50" align="center">个性评价</td>
                        <td>责任心强 积极热情</td>
                        <td class="active" width="50" align="center">求职意向</td>
                        <td>Java开发工程师</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <h2>职业技能</h2>
            <div>
                <p>
                    <span class="label label-success">JavaScript</span>
                    <span class="label label-success">Vue.js</span>
                </p>
                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 79%;">
                        <span>熟悉</span>
                    </div>
                </div>
                <p>
                    <span class="label label-danger">Node.js</span>
                    <span class="label label-danger">PHP</span>
                </p>
                <div class="progress">
                    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 70%;">
                        <span>了解</span>
                    </div>
                </div>
                <p>
                    <span class="label label-info">HTML/CSS</span>
                </p>
                <div class="progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 75%;">
                        <span>熟悉</span>
                    </div>
                </div>
                <p>
                    <span class="label label-warning">Java/C语言</span>
                </p>
                <div class="progress">
                    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 80%;">
                        <span>掌握</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
    <p>联系我QQ12345678 <a href="#">返回首页</a></p>
</div>

</body>
</html>

css样式目录结构在这里插入图片描述

丽人夕阳中
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单个人主页
03-10
简单个人主页 html
简单弄一个-个人主页
weixin_34355715的博客
03-14 1049
--- 整理一下已经发表的文章 JAVA基础 java基础数据结构之-红黑树(插入) java基础数据结构之-红黑树(删除) 了解一下jdk动态代理的本质 了解一下cglib动态代理的本质 SpringBoot源码解析 前言：阅读springboot源码之前，最好对spring源码有一定的了解，新手建议读一下《spring源码深度解析》这本书。书上已经有的内容我就不重复了，搬运没有意义。 S...
HTML5实现简洁好看的个人主页，个人小站(多种风格附源码)
最新发布
xcLeigh
05-13 1万+
HTML5实现简洁好看的个人主页(个人小站五种风格附源码)，个人主页源码，个人小站源码，五种风格对应五种常用主页菜单，学习类，展示类，制作类，成就类等，界面主题都是以按钮展开延申，展示个人信息，根据不同类型不同显示，对应图片文字可直接修改，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
简单的个人主页简单的个人主页
06-16
简单的个人主页简单的个人主页简单的个人主页
一个简单的HTML个人主页模板，简单易学仅供初学使用。
05-30
一个简单的HTML个人主页模板，简单易学仅供初学使用。
简单的个人主页网站制作
周末简设
09-14 707
/ 01 / 主题 《周末のWIN》 / 02 / 图摘
简单个人主页网页模板
01-14
【简单个人主页网页模板】是一种基础的网页设计资源，适合初学者或希望快速创建个人在线存在的人使用。这种模板通常包含简洁的设计元素，易于理解和编辑，以满足个人展示自我、分享信息或作品的需求。个人主页网页...
很简易个人主页.zip
02-11
【标题】"很简易个人主页.zip"所对应的资源是一个个人主页的压缩包，这通常意味着它包含了一位用户的自定义网页设计。这个标题简洁明了，暗示了这个主页设计非常简单，可能是为了快速搭建或者作为个人展示用途。 ...
简单女孩个人主页模板
01-22
这是一个关于创建个人主页的资源包，特别针对"简单女孩"这一主题设计的网页模板。这个模板可以帮助用户快速构建一个简洁而具有女性特色的个人网站，无需深入的编程或设计知识。 首先，我们来看一下标签：“个人主页...
html网页简单的个人主页
12-02
了解html代码
一个简单的个人页面
12-14
一个简单的个人网页制作，可用于网页设计课程资源，文档中包含图像
简单html个人网站
07-04
一份最简单的html制作模板，HTML 网页编程 主页模板 本人学习过程中索积累下的部分资料，特此上传共享。
个人主页程序简洁漂亮HTML代码
01-16
自己用HTML编写的主页程序，简洁高效，适合当成网页程序作业
个人主页制作模板，html。界面和内容都不错!
06-29
该模板超具有代表性，是初学者的首选，网上找了很多个都不满意，这个是对于初学者的导师。
如何简单制作简单的个人主页(一)
ez_wzr的专栏
03-25 993
个人网站-首页 *{margin:0px; padding:0px;} ul{list-style: none;} body{background: #d9d7cb; font-size: 12px;} #top,#vi,#nav,#main,#bt{width:779px; mar
使用HTML制作一个简单的个人主页
m0_67394360的博客
03-06 9601
此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落的细节处理、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
网页设计与制作
12-29 4729
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
html+css+js制作简单网站首页
热门推荐
weixin_44752434的博客
07-28 2万+
一个简单的网站主页 主要由html+css+js制作 1.图片展示 这是首页的上半部分，主要内容有：顶部标头、顶部导航栏、图片轮播图。 这是首页的下半部分，主要内容有：首页主要内容、底部。 2.代码展示 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我们的恋爱小屋</title> <embe
html简易个人主页
09-21
HTML简易个人主页是一个简单的网页，通常用于展示个人信息和作品。它可以包含一些基本的元素，如标题、段落、图片、链接等，以展示个人的简介、技能、项目和联系方式。 以下是创建一个简易个人主页的步骤： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值