在个人主页的设计中，我采用了圣代布局和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. Deepin Pwn环境的配置

    要学习Pwn  Pwn环境那是必不可少滴! 我是新手,我也弄了好久,这里把经验分享给大家!这里感谢I春秋的"知世"老师的脚本!虽然写的不是很完美.还得我自己动手修改!PS:http ...

  2. Let's Encrypt泛域名使用和Nginx配置拆分

    上一期写了 使用Let's Encrypt实现网站https化 ,随着二级域名的增多,每个二级域名需要一张 SSL 证书,这可太不优雅了,泛域名表示我可以更优雅. 作者:IT王小二 博客:https: ...

  3. Python - typing 模块 —— NewType

    前言 typing 是在 python 3.5 才有的模块 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...

  4. 常见web中间件漏洞（二）Apache漏洞

    Apache(总联想到武直那个)是最常见,使用人数最多的一款web服务器软件.跨平台,多扩展,开源,用过的人都说好 Apache的漏洞主要集中在解析漏洞这一块 1.未知扩展名解析漏洞 Apache的一 ...

  5. NOIP 模拟 $18\; \rm 老司机的狂欢$

    题解 \(by\;zj\varphi\) 一道很有趣的题,我用的动态开点线段树和倍增 首先对于第一问,不难想到要二分,二分时间,因为时间长一定不会比时间短能跑的人多 那么如何 check,先将所有老司 ...

  6. SpringBoot获取请求的参数

    说明 SpringBoot 为我们封装了许多,简便的获取请求参数的方法! 1.获取无注解获取请求参数 请求地址:http://192.168.0.115:8080/myproject/test/noA ...

  7. PE文件结构（32/64差异）

    1 基本概念 下表描述了贯穿于本文中的一些概念: 名称 描述 地址 是"虚拟地址"而不是"物理地址".为什么不是"物理地址"呢?因为数据在内 ...

  8. Maven脑图

    转自:https://segmentfault.com/a/1190000017832792 参考:https://www.cnblogs.com/mzywucai/p/11053341.html

  9. JDBC基础篇（MYSQL）——通过JDBC连接数据库的三种方式

    package day01_jdbc; import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManage ...

  10. Android：绘制字符

    根据FontMetrics的特点,将字符在矩形框中居中显示: