在个人主页的设计中，我采用了圣代布局和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. JavaGUI输入框事件监听的使用

    JavaGUI输入框事件监听的使用 package GUI; import java.awt.*; import java.awt.event.ActionEvent; import java.awt ...

  2. Color Theme of Emacs

    Choose color theme interactively: M-x customize-themes, or M-x color-theme-select (use key "q&q ...

  3. Java-ThreadPool线程池总结

    ThreadPool 线程池的优势 线程池做的工作主要是控制运行的线程数量,处理过程中将任务放入队列,然后在线程创建后启动这些任务,如果线程数量超过了最大数量,超出的线程排队等候,等待其他线程执行完毕 ...

  4. 谈谈Linux字符设备驱动的实现

    @ 目录 字符设备驱动基础 申请设备号 创建设备节点 在驱动中实现操作方法 文件IO调用驱动中的操作 应用程序与驱动的数据交互 内核驱动如何控制外设 控制LED的简单驱动实例 驱动程序的改进 框架复盘 ...

  5. 个人笔记-----Vue中多个router-view应用

    单个 <router-view/> 和多个 <router-view/> 的区别,单个 <router-view/> 只是一个区域的变化,不需要设置name属性,在 ...

  6. 使用VSCode创建第一个VUE项目

    vue init webpack vue_test回车,然后输入工程名称vue_test vue:Missing space before value for key 'components' 原因是 ...

  7. Spring Boot Mybatis注解：@Mapper和@MapperScan

    使用@Mapper注解 添加了@Mapper注解之后这个接口在编译时会生成相应的实现类,让其他的类进行引用 @Mapper public interface EmpMapper { public Li ...

  8. 【java虚拟机】几种内存溢出及解决方案

    作者:平凡希 地址:https://www.cnblogs.com/xiaoxi/p/7406903.html 1.JVM Heap(堆)溢出:java.lang.OutOfMemoryError: ...

  9. 虚拟机--第二章java内存区域与内存溢出异常--（抄书）

    这是本人阅读周志明老师的<深入理解Java虚拟机>第二版抄写的,有很多省略,不适合直接阅读,需要阅读请出门左转淘宝,右转京东,支持周老师(侵权请联系删除) 第二章java内存区域与内存溢出 ...

  10. java 捕获组与非捕获组

    非捕获组:格式:(?:xxxx), 如:(?:aaa)\\w+(bbb)\\1,\\1 代表重复捕获的第一组即是(bbb) public static void main(String[] args) ...