HTML+CSS制作人物介绍网页

原创 已于 2023-05-22 18:32:23 修改 · 9.6k 阅读 · 139
于 2023-05-22 18:32:15 首次发布

*仅作个人学习记录用*

网页效果

视频演示

 代码实现

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://blog.csdn.net/please.css">
    </head>
    <body background="./images/bg.jpg" style="background-repeat: no-repeat;background-size: 100%;overflow:hidden ;">
        <div class="container">
          <div>
            <video id="pv" controls>
                <source src="https://blog.csdn.net/video/%E8%89%BE%E5%B0%94%E6%B5%B7%E6%A3%AE_%E8%A7%92%E8%89%B2%E6%BC%94%E7%A4%BA.mp4">
            </video>
          </div>
          <div class="main">
            <div class="nav">
                <table>
                    <tr>
                        <td><a href="#intro">角色简介</a></td>
                        <td><a href="#story">角色故事</a></td>
                        <td><a href="#skills">技能介绍</a></td>
                    </tr>
                </table>
            </div>
            <div class="content">
                <!--首页部分-->
                <div class="homepage">
                    <div class="organ">
                        <img src="https://blog.csdn.net/images/%E6%99%BA%E6%85%A7%E7%9A%84%E5%85%AD%E9%9D%A2.jpg">
                    </div>
                    <div class="text">
                        <p style="margin:40px 20px 15px 20px;"><span id="name0">艾尔海森</span><span id="title">「诲韬诤言」「文弱的学术分子」</span></p>
                        <p id="text_main">米哈游出品的游戏《原神》及其衍生作品中的角色，须弥教令院六大学派之一“知论派”的学者，现任教令院书记官兼任代理贤者，有过人的智慧与才能，生活得自由自在，一般人基本找不到他。</p>
                        <p id="text_main">在须弥的风波结束，虚空系统关闭之后，教令院还有很多亟待解决的难题。而艾尔海森身为代理贤者，又是当前教令院中非常有智谋的角色，也将会面临新的考验。不过，不论发生什么，艾尔海森的头脑始终保持着冷静和清醒，能从更宏观的视角找到病灶，最高效率地去解决问题.</p>
                    </div>
                </div>
                <!--角色简介部分-->
                <div id="intro">
                    <div class="box">
                        <div class="titleNline">
                            <img src="https://blog.csdn.net/images/%E8%80%B3%E6%9C%BA.png" width="20px">
                            基本信息
                        </div>
                        <div class="intro" >
                            <img src="https://blog.csdn.net/images/%E8%89%BE%E5%B0%94%E6%B5%B7%E6%A3%AE_%E8%AF%81%E4%BB%B6%E7%85%A7.jpg" id="info_img"> 
                            <div class="intro_text">
                                <table  >
                                    <tr><td id="name">艾尔海森</td></tr>
                                    <tr height="50px" style="vertical-align: text-top;"><td><span id="major">「知论派」</span><span id="college">室罗婆耽学院</span></td></tr>
                                    <tr>
                                        <td id="info">所属</td>
                                        <td id="info_right">须弥教令院</td>
                                    </tr>
                                    <tr>
                                        <td id="info">生日</td>
                                        <td id="info_right">2月11日</td>
                                    </tr>
                                    <tr>
                                        <td id="info">神之眼</td>
                                        <td id="info_right">草</td>
                                    </tr>
                                    <tr>
                                        <td id="info">命之座</td>
                                        <td id="info_right">天隼座</td>
                                    </tr>
                                </table>
                            </div>                                      
                        </div>
                        <div class="titleNline">
                            <img src="https://blog.csdn.net/images/%E8%80%B3%E6%9C%BA.png" width="20px">
                            他人评价
                        </div>
                        <div class="others">
                            <table height="100px">
                                <tr>
标签
#html5 #css
最低0.47元/天 解锁文章
Kyra17
关注
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS）
wx___BJ050106的博客
08-06 2812
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大........
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 1万+
web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单
【博主推荐】HTML制作一个美观的个人简介网页（附源码）
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
05-13 7万+
文章目录HTML制作一个美观的个人简介网页模块1（个人信息）示例图模块2（基本资料）示例图模块3（项目经验）示例图模块4（专业技能）示例图模块5（工作经历）示例图模块6（自我评价）示例图模块7（联系方式）示例图整体示意图源码地址 HTML制作一个美观的个人简介网页 利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web 模块1（个人信息）示例图 用于展示个人简介主题信息，采用背景图+文字的效果 <div class=
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 7万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
简单 静态 网页制作 篮球 人物介绍 库里 HTML+CSS
weixin_47152832的博客
07-11 9490
简单的入门级别的网页，分享一下。 网站的链接层次三级页面 浮动，定位技术，列表，块的布局和图片的浮动定位 注册用户的页面，要求有返回主页的功能 图片等素材显示正常、链接无误 要有导航功能 有问题欢迎联系！ <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css">
年会活动html酷炫抽奖功能-高端版
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
01-26 4768
年会活动html酷炫抽奖功能-高端版，支持json数据，主题风格切换。 资源下载地址（https://download.csdn.net/download/weixin_43151418/14934322）
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
BASK2312的博客
05-19 1万+
动态的朦胧天空背景图，可以配置个人职业技能，大图标，姓名，年龄，性别，手机号，邮箱，qq号，居住地，户籍，学历，学校，专业等信息，也可以扩展新的。动态的朦胧天空背景图，可以配置自己的图标，个人名言，名字，职称，邮箱，手机号，工作地址等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人工作过的公司，工作的时间，负责的项目，开发工具等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人教育的学校，时间，几学到的东西等信息，也可以扩展新的。出来，个人的掌握的工具，及熟练度等信息，也可以扩展新的。
html制作好看的个人简历(附源码)
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
HTML+CSS好看的小黄人网页制作（人物介绍部分，附全部代码）
m0_73664236的博客
11-06 7499
HTML+CSS好看的小黄人网页制作（人物介绍部分，附全部代码），人物介绍部分通过缩放增强视觉冲击效果，使得网页更加灵动。
利用html+css制作个人简历
WeiComp
04-02 1万+
使用html和css，制作一份个人简历（内容比较基础，上手容易）
html实现好看的个人介绍，个人主页模板5(附源码)
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
06-18 2万+
html实现好看的个人介绍，个人主页模板5(附源码)，第五种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。代码备注详细，可在此基础上更加完善功能，打造属于自己的个人介绍主页。
HTML+CSS制作人物介绍卡片效果
道阻且长，行则将至。
12-28 1万+
HTML+CSS制作人物介绍卡片效果 效果图如下： HTML部分源代码如下： <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作人物介绍</title&g
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值