备案控制台
探索云世界
开发者社区 云计算 文章 正文

个人博客,个人网页（下）

2022-05-16 163
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 2、关于我们效果图+代码

2、关于我们效果图+代码

网络异常，图片无法展示
|


网络异常，图片无法展示
| 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关于我们</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .about {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .about_bgc {
        width: 100%
    }
    .about_tit {
        position: absolute;
        top: 280px;
        left: 0;
        right: 0;
        font-size: 28px;
        font-weight: 550;
        bottom: 0;
        width: 800px;
        margin: auto;
        text-align: center;
    }
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }
    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
    ;
        border: 1.5em solid #fff;
    }
    .ribbon:after {
        border-right-color: transparent;
    }
    .ribbon:before {
        border-left-color: transparent;
    }
    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }
    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }
    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }
    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    .me {
        display: flex;
        justify-content: center;
        margin-top: 60px;
        overflow: hidden;
    }
    .me_tit {
        width: 600px;
        line-height: 36px;
        font-size: 18px;
        margin-left: 100px;
        margin-top: 50px;
    }
    .me_img {
        width: 800px;
        height: 600px;
    }
    .animate {
        padding-left: 20px;
        width: 500px;
        font-size: 22px;
        color: #000;
        animation: 10s wordsLoop linear infinite normal;
    }
    @keyframes wordsLoop {
        0% {
            transform: translateY(100px);
            -webkit-transform: translateY(100px);
        }
        100% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
    }
    .videos {
        display: flex;
        margin-top: 60px;
        padding-bottom: 80px;
    }
    .videos span {
        width: 400px;
        margin-right: 100px;
        margin-left: 300px;
        color: #FFD204
    }
    #footer{
        display: flex;
        justify-content: center;
        margin-top: 10px;
        /*overflow: hidden;*/
    }
</style>
<body>
<div class="about">
    <h3 class="about_tit">要不断的努力，才能成为更好的自己</h3>
    <img class="about_bgc" src="./img/from1.png" alt="">
    <div class='ribbon'>
        <a href='./index.html'><span>Home</span></a>
        <a href='./about.html'><span>About</span></a>
        <a href='./speech.html'><span>Speech</span></a>
        <a href='./contact.html'><span>Contact</span></a>
    </div>
    <div class="me">
        <img class="me_img" src="./img/imgs19.jpg" alt="">
        <span class="me_tit animate ">20多岁的我们，丧失了最纯真的好奇心。我们醉心于那些表面的、外在的、甚至是虚无的成就感。我们每天循环着尝试使用各种工具解决各种问题，以此来换取一些微薄的酬劳。我们会用各种不同的编程手法、不同的思维来解决同一个问题，以此来判别你与竞争对手的水平高低；我们也会彼此竞争式的学习更多的语言、更好的框架、更新的技术，可我们所谓的学习，却仅仅只是“会用”。时间久了，累了，厌倦了，就觉得没有意思了。你迷茫了。迷茫是再正常不过的了。跟着形式跑，看不到事物的本质，你永远会觉得疲倦。
            </span>
    </div>
    <div class="videos">
            <span>
                        这是我很喜欢的一个动漫电影，玩具总动员里面的第四部，讲述的事胡迪深知自己在这个世界上的使命，就是照顾他的主人，无论是原来的安迪还是新主人邦妮。当邦妮将不情愿成为玩具的“叉叉”带回家时，胡迪又担起了教导叉叉接受自己新身份的责任。 然而当邦妮将所有玩具带上房车家庭旅行时，胡迪与伙伴们将共同踏上全新的冒险之旅，领略房间外面的世界有多广阔，甚至偶遇老朋友牧羊女。在多年的独自闯荡中，牧羊女已经变得热爱冒险，不再只是一个精致的洋娃娃。正当胡迪和牧羊女发现彼此对玩具的使命的意义大相径庭时，他们很快意识到更大的威胁即将到来。
                    </span>
        <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/videos.mp4"></video>
    </div>
    <div id="footer">
        <a href="http://beian.miit.gov.cn/" target="_blank"><center>京ICP备19024686号-2</center></a>
    </div>
</div>
</body>
</html>
复制代码


3、关于我们

网络异常，图片无法展示
| 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联系我~</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }
    .form {
        overflow: hidden;
        position: relative;
    }
    .bgc {
        width: 100%;
    }
    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }
    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
    ;
        border: 1.5em solid #fff;
    }
    .ribbon:after {
        border-right-color: transparent;
    }
    .ribbon:before {
        border-left-color: transparent;
    }
    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }
    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }
    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }
    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }
    .submit {
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-top: 180px;
        width: 500px;
        height: 500px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
    }
    .form_title {
        text-align: center;
        margin-top: 40px;
        font-size: 18px;
    }
    .form_input span {
        width: 85px;
        align-self: center;
    }
    #footer{
        margin-top: -40px;
        height: 40px;
        width: 100%;
        background: #e5e5e5;
        line-height: 40px;
    }
</style>
<body>
<div class="form">
    <img class="bgc" src="./img/alley.jpg" alt="">
    <div class='ribbon'>
        <a href='./index.html'><span>Home</span></a>
        <a href='./about.html'><span>About</span></a>
        <a href='./speech.html'><span>Speech</span></a>
        <a href='./contact.html'><span>Contact</span></a>
    </div>
    <div class="submit">
        <span class="form_title">网站源码免费下载</span>
        <div style="margin: 50px 175px">
            <img src="./img/kezuo.jpg" width="150px;" height="150px;" alt="公众号《柯作》" />
        </div>
        <span class="form_title">关注微信公众号(柯作)回复：网站源码</span>
    </div>
    <div id="footer">
        <a href="http://beian.miit.gov.cn/" target="_blank"><center>京ICP备19024686号-2</center></a>
    </div>
</div>
</body>
</html>


1816327243086127
目录
相关文章
游客yygmekjm7fjue
|
5月前
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
游客yygmekjm7fjue
48 0
咸鱼运维杂谈
|
4天前
|
JavaScript Shell 网络安全
又重新搭了个个人博客
又重新搭了个个人博客
咸鱼运维杂谈
11 0
编程乐趣
|
6月前
|
前端开发 JavaScript 关系型数据库
盘点5个C#开发的、可用于个人博客的系统
盘点5个C#开发的、可用于个人博客的系统
编程乐趣
55 0
梁枫一梦
|
9月前
WordPress打造个人博客
WordPress打造个人博客，安装WordPress内置主题包
梁枫一梦
90 9
WordPress打造个人博客
张侠_
|
12月前
|
存储 小程序 前端开发
个人博客小程序
个人博客小程序
张侠_
149 0
北京六翼开源
|
存储
WordPress建站教程：页面与帖子有什么区别？
WordPress建站教程：页面与帖子有什么区别？ 学习 WordPress 的过程中，您不可避免地会在某个时候对 WordPress 帖子与页面感到疑惑。网上有很多关于在 WordPress 中执行各种任务的教程，但他们经常跳过像这样的基本问题。 了解页面和帖子之间的主要区别，并了解选择其中一个选项而不是另一个选项的含义，是使用 WordPress 的基础知识。
北京六翼开源
149 0
WordPress建站教程：页面与帖子有什么区别？
q4qlc6vqsegx4
36个精美完整网站网页完整源码HTML+CSS+JS
36个精美完整网站网页完整源码HTML+CSS+JS
q4qlc6vqsegx4
273 0
36个精美完整网站网页完整源码HTML+CSS+JS
政胤
|
数据采集 IDE 开发工具
python爬虫入门教程：爬取网页图片
python爬虫入门教程：爬取网页图片
政胤
254 0
1816327243086127
个人博客,个人网页（上）
项目成品演示地址：博客地址 1、个人首页效果图+代码
1816327243086127
242 0
游客ho7ajdvzan74y
|
弹性计算 JavaScript 测试技术
服务器搭建网页
使用lnmp快速搭建网页
游客ho7ajdvzan74y
166 1

热门文章

最新文章

  • 1
    解决关于Windows Defender Antivirus Service自启造成运行python程序时，Windows的cpu和内存占用过高问题
  • 2
    订票系统不再瘫痪 阿里云确认与12306合作
  • 3
    iOS - 手动下架的应用后快速恢复上架
  • 4
    du 和 df以及lsof
  • 5
    库克：苹果不是只做富人生意，还一直坚持让世界变得更好
  • 6
    WiGig无线标准正式开始提供验证 最高可达8Gbps
  • 7
    IBM推出新的16位量子处理器
  • 8
    Android:随笔——对页面的View进行截图
  • 9
    shell MAC 地址 校验
  • 10
    【系统优化】数据库系统load飙高问题解决思路
  • 1
    DataWorks产品使用合集之DataWorks中，如果一个虚拟节点被设置为冻结状态，那么它的所有子节点也将被冻结如何解决
    21
  • 2
    DataWorks产品使用合集之DataWorks发布任务的方法如何解决
    25
  • 3
    DataWorks产品使用合集之DataWorks中，配置DataHub数据源如何解决
    22
  • 4
    Nacos 1.4.1核心功能组件及使用入门
    22
  • 5
    DataWorks产品使用合集之在 DataWorks 中，有一个 MySQL 数据表，数据量非常大且数据会不断更新将这些数据同步到 DataWorks如何解决
    14
  • 6
    基于直方图的图像阈值计算和分割算法FPGA实现,包含tb测试文件和MATLAB辅助验证
    13
  • 7
    DataWorks产品使用合集之在DataWorks中，要实现MySQL数据源的增量同步如何解决
    15

    • 相关课程

    更多
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • 如何拥有一个个人网站
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 基于函数计算快速搭建Wordpress博客系统
  • 基于函数计算快速搭建Hexo博客系统
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考