在个人主页的设计中，我采用了圣代布局和div分块。效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三栏布局</title>

</head>

<body>

<style>

    .backspace{

        width: 100%;

        height: 100%;

        position: fixed;

        background: url("../img/255c52d9b9e2dfc0.jpg");

    }

    body{ text-align:center}

    .main{

        margin:40px auto;

        border:1px solid #000;

        width:1000px;

        height:100%;

        background-color: #aaaaaa;

    }

    .nav li {

        width:100px;

        float:left;

        text-align:left;

        margin-top: 10px;

        font-size:15px;

        line-height:24px;

        text-decoration: none;

    }

    .nav li a:hover { font-size: 120%  }

    .user{

        padding-left: 18px;

        width: 100%;

        height: 20px;

        text-align: left;

    }

    img{

        width: 100%;

    }

    a{

        text-decoration: none;

    }

    .video{

        margin-top: 35px;

    }

</style>

<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>

<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>

<script type="text/javascript">

    new window.FlvJsPlayer({

        id: 'player',

        isLive: false,

        playsinline: true,

        url: '/test/test.flv',

        autoplay: true,

        height: window.innerHeight,

        width: window.innerWidth

    });

</script>

<div class="backspace">

    <div class="main">

        <div class="user"><h3>天岁</h3></div>

        <div class="nav">

            <ul >

                <li><a herf="#">首页</a></li>

                <li><a herf="#">新随笔</a></li>

                <li><a herf="#">联系</a></li>

                <li><a herf="#">订阅</a></li>

                <li><a href="success.html" target="_blank" style="color: black">个人信息</a></li>

                <li><a href="https://www.cnblogs.com/1305536110-dym/" target="_blank" style="color: black">博客园</a></li>

            </ul>

        </div>

        <div>

            <video id="player" width="740" height="560" controls="controls" autoplay="autoplay">

                <source src="../video/123.mp4" type="video/mp4">

            </video>

        </div>

    </div>

</div>

</body>

</html>

HTML+CSS设计个人主页的更多相关文章

  1. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  2. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  3. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  4. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  5. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

  6. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  7. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  8. HTML & CSS设计与构建网站 ([美]达科特) PDF原版​

    HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...

  9. （11）用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

随机推荐

  1. 安鸾CTF-cookies注入

    什么是cookie注入? cookie注入的原理是:修改cookie的值进行注入 cookie注入其原理也和平时的注入一样,只不过注入参数换成了cookie 例如:PHP $_REQUEST 变量变量 ...

  2. 一次关于shiro反序列化漏洞的思考

    0x01前言 之前在我反序列化的那篇文章中(https://www.cnblogs.com/lcxblogs/p/13539535.html),简单说了一下反序列化漏洞,也提了一嘴常见的几种Java框 ...

  3. windows中抓取hash小结（下）

    书接上回,windows中抓取hash小结(上) 指路链接 https://www.cnblogs.com/lcxblogs/p/13957899.html 继续 0x03 从ntds.dit中抓取 ...

  4. Sqli-Labs less20-22

    less-20 第20关成功登陆之后会产生一个cookie,作为下次登陆的凭证(可以用于登陆其他人的qq空间) 这里我依然使用burp suite,其实火狐和谷歌上有许多插件可以改http头和cook ...

  5. 题解 P3191 [HNOI2007]紧急疏散EVACUATE

    题解 本篇题解做法为BFS+二分+最大流 二分需要撤离的时间,也就是答案(这算是一个比较套路的了) 重点在于建模(设时间为 \(tim\)): 我们将每个门拆点,拆成 \(tim\) 个,每个点向汇点 ...

  6. SpringBoot请求日期参数异常(Failed-to-convert-value-of-type-'java-lang-String'-

    问题 Failed to convert value of type 'java.lang.String' to required type 'java.util.Date'; nested exce ...

  7. windows笔记-在可执行文件或DLL的多个实例之间共享静态数据

    全局数据和静态数据不能被同一个. exe或DLL文件的多个映像共享,这是个安全的默认设置.但是,在某些情况下,让一个. exe文件的多个映像共享一个变量的实例是非常有用和方便的. 每个. exe或DL ...

  8. COM笔记-动态链接

    在实现了IUnknown之后,组件和客户之间只是一种非常松散的连接,这使用组件和客户各自可以发生变化而不会对对方造成什么影响. 下面讨论如何将组件放入到动态链接库(dll)中. 关于DLL更多内容可以 ...

  9. 数据结构解析-HashMap

    概要 HashMap在JDK1.8之前的实现方式 数组+链表,但是在JDK1.8后对HashMap进行了底层优化,改为了由 数组+链表+红黑树实现,主要的目的是提高查找效率. 如图所示: JDK版本 ...

  10. RabbitMq四种模式介绍和授权

    rabbitmqctl change_password admin admin123 修改admin密码 界面管理和授权操作 1新增用户 rabbitmqctl add_user admin amin ...