在个人主页的设计中，我采用了圣代布局和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. Vue2.x响应式原理

    一.回顾Vue响应式用法 ​ vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应 ...

  2. 10 个超棒的 JavaScript 简写技巧

    今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...

  3. Eclipse中的项目红叉问题查找记录

    1.先查看项目的validation有没有都勾上,如果都勾上,一般项目下边的文件夹下会显示出来.可以解决. 2.如果项目文件夹下各个红叉都解决了,没有什么报错了.那么可以看下工具的problem标签下 ...

  4. MySQL-15-主从复制

    企业高可用性标准 1 全年无故障率(非计划内故障停机) 99.9% ----> 0.001*365*24*60=525.6 min 99.99% ----> 0.0001*365*24*6 ...

  5. 入门Kubernetes-StatefulSets

    前言: 前面文中对通过DaemonSet.存储资源对象,实现了在指定节点中运行一个守护进程. 在真实的业务场景中,部署的服务都是有状态的.且有数据需要持久化的:那么如何实现呢? 那么接下来学习一种更加 ...

  6. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  7. ☕【Java技术指南】「OpenJDK专题」想不想编译属于你自己的JDK呢？（Windows10环境）

    Win10下编译OpenJDK8 编译环境 Windows10专业版64位: 编译前准备 Tip: 以下软件的安装和解压目录尽量不要包含中文或空格,不然可能会出现问题 安装 Visual Studio ...

  8. Git使用：

    配置可参考: 配置name 及email:$ git config --global user.name "Your Name"$ git config --global user ...

  9. 温故知新：老铁，WeakReference了解一下？

    本文供稿--大师兄 弱引用是个什么鬼?大白话说就是不那么强的引用(哈哈,纯属玩笑,实际可不是这样滴),那强引用又是个什么鬼?他们有什么用处?问题有点迷,君阅完这篇文章后或许你心中就有答案了-- 什么是 ...

  10. spring 》Cglib赋值

    第一个:字节码文件时带有ENHANCERBYCGLIB,FastClassByCGLIB组成的文件名 第二个:字节码文件时带有ENHANCERBYCGLIB 第三个:字节码文件时带有FastClass ...