根据自己的个性化设计完成响应式简历的设计与实现HTML+CSS+BootStrap

于 2022-05-13 21:04:12 发布
阅读量433 收藏 4
点赞数
文章标签： css html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45800181/article/details/124759876
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./shiyan6.css">
    <link href="css\font-awesome.min.css" rel="stylesheet">
    <link href="css\advertising.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div class="container-fluid d1">
        <div class="row">
            <div class="col-6">
                <img src="./img/头像.jpg" id="d2">
                <div class="a1">
                    <p style="font-weight:bolder;">消&nbsp失&nbsp的&nbsp狐&nbsp狸&nbsp菌</p>
                </div>
            </div>
            <div class="col-6 ">
                <div class="row d3">
                    <dl>
                        <dt>联系方式</dt>
                        <dd>地址：南华大学</dd>
                        <dd>电话：18876617430</dd>
                        <dd>邮箱：33288187074@qq.com</dd </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="col d4">
        <h4>个人简介</h4>
        <div class="d4_1">
            <img src="./img/头像.jpg">
        </div>
        <p>挫折之花，绽放于与命运的抗衡。司马迁因秉笔直书，“不溢美，不隐恶”，而遭受腐刑，然而他在狱中却坚强的与命运作斗争，面对挫折，他选择了勇敢；面对挫折，他选择了发愤；面对挫折，他选择了秉笔直书。终于，他“着成信史照尘寰”，留下了千古美名！让挫折之花绽放了两千年！
        </p>
    </div>
    <div class="col d5">

        <h4>掌握的技能</h4>
        <div class="row scrollable d5_1">
            <div class="col-s-6 col-m-4 center-fixed d5_2">
                <div class="skills-icon">
                    <i class="fa fa-html5 fa-5x"></i>
                </div>
                <div class="d5_5">
                    <div class="skills-title">
                        <h3>HTML 5</h3>
                        <p>熟悉 HTML5 网站的架构和开发</p>
                    </div>
                </div>
                <label for="customRange2" class="form-label">掌握程度：</label>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                </div>
            </div>
            <div class="col-s-6 col-m-4 center-fixed d5_3">
                <div class="skills-icon">
                    <i class="fa fa-css3 fa-5x"></i>
                </div>
                <div class="skills-title">
                    <h3>CSS3</h3>
                    <p>熟悉使用 CSS3 写响应式网站、动画等</p>
                </div>
                <label for="customRange2" class="form-label">掌握程度：</label>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">100%</div>
                </div>
            </div>
            <div class="col-s-6 col-m-4 center-fixed d5_4">
                <div class="skills-icon">
                    <!-- <i class="fa fa-code"></i> -->
                </div>
                <div class="skills-title">
                    <i class="fa fa-css3 fa-5x"></i>
                    <h3>JavaScript</h3>
                    <p>能使用 JS 制作简单的程序、交互与特效</p>
                </div>
                <label for="customRange2" class="form-label">掌握程度：</label>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">85%</div>
                </div>
            </div>

        </div>
    </div>
    <div class="col d6">
        <h4>作品展示</h4>
        <div class="row">
            <div class="col-sm">
                <img src="./img/img1.png" alt="">
                <h5 style="text-align: center; background-color: rgb(210, 238, 235);padding: 10px;">多肉商城网页</h5>
            </div>
            <div class="col-sm">
                <img src="./img/img2.png" alt="">
                <h5 style="text-align: center;background-color: rgb(210, 238, 235);padding: 10px;">个人信息设计</h5>
            </div>
            <div class="col-sm">
                <img src="./img/img4.png" alt="">
                <h5 style="text-align: center;background-color: rgb(210, 238, 235);padding: 10px;">旅游景点网站</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <img src="./img/img1.png" alt="">
                <h5 style="text-align: center;background-color: rgb(210, 238, 235);padding: 10px;">多肉商城网页</h5>
            </div>
            <div class="col-sm">
                <img src="./img/img2.png" alt="">
                <h5 style="text-align: center;background-color: rgb(210, 238, 235);padding: 10px;">个人信息设计</h5>
            </div>
            <div class="col-sm">
                <img src="./img/img4.png" alt="">
                <h5 style="text-align: center;background-color: rgb(210, 238, 235);padding: 10px;">旅游景点网站</h5>
            </div>
        </div>
    </div>
    <div class="col d7">
        <h4>留言信息</h4>


        <div class="mb-3 row">
            <label for="inputName" class="col-sm-2 col-form-label">姓名：</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="请留下您的名字" style="text-align: center;">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputEmail" class="col-sm-2 col-form-label">邮箱：</label>
            <div class="col-sm-10">
                <input type="emain" class="form-control" id="inputPassword" placeholder="请留下您的邮箱" style="text-align: center;">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="exampleFormControlTextarea1" class="form-label">留言信息:</label>
            <div class="col-sm-10" style="margin-left:100px ;">
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
            </div>
        </div>



    </div>
    <div class="footer">

        <p> Copyright&nbsp&nbsp&nbsp&nbsp 2022年5月13日 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp响应式简历网站&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp. All Rights Reserved by &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp肖丽萍出品
        </p>
    </div>
    </div>

    <script src="./bootstrap/js/jquery-3.5.1.slim.min.js"></script>
    <script src="./bootstrap/js/popper.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

CSS:

 

页面效果：

消失的狐狸君
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
qq_30148319的博客
05-01 1281
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、响应式开发 1、响应式开发原理 原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 响应式尺寸 超小屏幕（手机） < 768px 100% 小屏设备（平板） >= 768px ~ <992px 750px 中等屏幕（桌面显示
《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》-教学PPT.rar
06-22
本教程《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》专注于这一领域，结合了最新的HTML5和CSS3技术，并引入了流行的Bootstrap框架，以帮助学习者快速掌握响应式设计的核心技能。 HTML5是超文本标记语言的第五...
Bootstrap响应式个人简历网站模板.zip
05-25
Bootstrap响应式个人简历网站模板，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、Email me、照片等网站模板页面。
Bootstrap3.1开发的响应式个人简历模板
tyygming的专栏
07-17 1760
在线演示 使用bootstrap3快速开发一个响应式的个人简历，如果有兴趣了解如何开发，请访问ＧＢ课程库，地址如下： Bootstrap3构建响应式前端设计师简历模板 http://www.gbtags.com/gb/gbliblist/10.htm ...
HTML/CSS+bootstrap
Joovo的博客
07-11 762
HTML/CSS css覆盖的优先级 一些细节问题 bootstrap bootstrap 用法 使用心得 JQuery 在freecodecamp上学了一下，感觉比同类型的学习网站更好一些。 想整理一下学习的内容，但是发现太杂了… 果然还是写点心得吧，第二天就碰上了css的覆盖问题。 HTML/CSS style标签里的写法： .开头对应一个class #开...
智能专项练习--HTML+CSS+bootstrap（1）
Bidding
07-25 2374
1、在CSS3中，以下哪个是IE浏览器（Trident内核）的私有属性前缀？ （ ） 正确答案: D A、–Webkit B、–trident C、–ie D、–ms 2、在bootstrap中， 关于导航条，下列说法正确的是? 正确答案: A B C D A、应该将被包裹的元素放到navbar-collapse类中 B、表单应该放置于navbar-form内 C、可以使
HTML+CSS+JS+JQ+Bootstrap的创意生活产品设计响应式网页.7z
07-24
模块化设计：代码可能采用模块化方式编写，使得部分功能可以轻松地被提取或替换，适合个性化定制。 3. 兼容性和响应式设计 跨浏览器兼容：确保网站在不同浏览器中表现一致，提高用户体验。 响应式布局：适应各种设备...
HTML+CSS+JS+JQ+Bootstrap的web&UI&UX设计师个性简历响应式网页-源码.7z
最新发布
07-24
模块化设计：代码可能采用模块化方式编写，使得部分功能可以轻松地被提取或替换，适合个性化定制。 3. 兼容性和响应式设计 跨浏览器兼容：确保网站在不同浏览器中表现一致，提高用户体验。 响应式布局：适应各种设备...
HTML+CSS+JS+JQ+Bootstrap的简洁个性商品网店响应式网页.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
网页设计基于bootstrap实现的外贸电子商务网站模板+html+css+js
06-20
响应式设计：该模板充分利用Bootstrap的响应式布局特性，确保网站在各种屏幕尺寸和设备上都能良好地展示。无论是桌面电脑、平板电脑还是手机，用户都能获得一致且流畅的浏览体验。 模块化组件：通过Bootstrap提供的...
最好用的前台模板，纯html页面+css+bootstrap
08-16
本压缩包里面包含html+css+bootstrap的源码，不牵扯到后台代码，适合一个人写一些小型的项目。
Bootstrap响应式个人简历.zip
11-07
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。移动设备优先。响应式布局个人简历，适应不同的设备或页面大小。
Bootstrap-个人简历响应式网页模板
06-08
Bootstrap个人简历响应式网页模板基于Bootstrap3.3.1制作，自适应分辨率，兼容PC端和移动端，单页面多栏目设计，有首页、关于我、画廊、联系等网站栏目。
html+css+bootstrap网页布局学习Day4
weixin_39048009的博客
12-03 125
浏览器的私有前缀 根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其她内核都是基于此四种进行在研发的。 1.gecke内核 前缀为 -moz- 火狐浏览器 2.webkit内核 前缀为 -webkit- 谷歌浏览器/safari 3.trident内核 前缀为 -ms- ie内核 4.presto内核 前缀为 -o- 目前只有opera /* 在实际使用中 通常将所有的前缀写一遍，标准的写在最后 */ google -webkit-animation: ; opera-o-
html+css+bootstrap网页布局学习Day3
weixin_39048009的博客
12-02 143
今日完成效果： 头部、logo、导航栏内容的添加。 此处应该使用js来实现，暂用css的hover。 红框内容的实现，它是一个div，父级为核心产品的div。 把它 定位为绝对定位 position：absolute；display:none; 当鼠标悬浮在父级上则显示 三角形的是采用iconfun 中的元素完成，有类似边框效果是使用了阴影。 text-shadow: 1px -1px #CCCCCC , -1px -1px #CCCCCC; 每一个课程为一个div， <div id="bo
html+css+bootstrap网页布局学习Day6
weixin_39048009的博客
12-12 155
响应式布局：可以为不同终端的用户提供更加舒适的界面和更加友好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多网站采用这个技术 响应式设计一定是最佳选择吗？ 如果预算充足且形式需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口额大小为用户提供匹配的视觉效果还是优先选择响应式设计。 优点： 面对不用分辨率设备灵活性强。 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大
web 响应式_建立响应式Web简历
cungui5726的博客
08-19 373
web 响应式I recently received a question from a reader regarding development of a single-page HTML résumé, with an example at CSS Tricks cited as a particular inspiration. While Chris Coiyer’s work was e...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

消失的狐狸君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值