<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML文档</title>

    <style>

        body {

            margin: 0;

        }

        .clearfix:after {

            content: '';

            clear: both; /*左右两边都不能有浮动的元素*/

            display: block;

        }

        .left {

            width: 25%;

            height: 1000px;

            background-color: rgba(36,36,35,0.87);

            float: left;

        }

        .right {

            width: 75%;

            height: 1000px;

            /*background-color: aliceblue;*/

            background-color: rgba(128,126,126,0.18);

            float: left;

        }

        .head {

            width: 150px;

            height: 150px;

            border: 5px solid white;

            border-radius: 50%;

            margin: 20px auto;

            overflow: hidden;

        }

        .head img {

            max-width: 100%;

        }

        #name {

            width: 320px;

            text-align: center;

            font-size: 14px;

            color: rgba(180,188,195,0.52);

        }

        .msg {

            margin-top: 60px;

            width: 320px;

            text-align: center;

            font-size: 19px;

            color: rgba(180,188,195,0.52);

        }

        .content {

            background-color: white;

            height: 155px;

            width: 880px;

            margin: 10px 20px 10px 15px;

            padding: 0 10px;

            box-shadow:  10px 10px 5px #888888;

        }

        .content .title {

            font-size: 24px;

            border-left: red solid 3px;

            height:35px;

            margin-left: -10px;

            padding-top: 5px;

            padding-left: 10px;

        }

        .content span {

            float: right;

            font-size: 12px;

            margin-top: 5px;

            /*font-family: 隶书;*/

        }

        .content1 {

            padding-left: 10px;

        }

        .content2 {

            padding-left: 10px;

        }

    </style>

</head>

<body>

    <div class="left clearfix">

        <div class="head"><img src="头像.jpg" alt=""></div>

        <div id="name">

            <p>胖子布莱尼</p>

            <p>人生不如意十有八九 而你是一二。</p>

        </div>

        <div class="msg">

            <p>关于我</p>

            <p>微博</p>

            <p>微信公众号</p>

        </div>

        <div class="msg">

            <p># Python</p>

            <p># HTML</p>

            <p># MySQL</p>

        </div>

    </div>

    <div class="right clearfix">

        <div class="content">

            <p class="title">标题一<span>2019-11-14</span></p>

            <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>

            <hr>

            <p class="content2"># Pyhton  # HTML</p>

        </div>

        <div class="content">

            <p class="title">标题一<span>2019-11-14</span></p>

            <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>

            <hr>

            <p class="content2"># Pyhton  # HTML</p>

        </div>

        <div class="content">

            <p class="title">标题一<span>2019-11-14</span></p>

            <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>

            <hr>

            <p class="content2"># Pyhton  # HTML</p>

        </div>

        <div class="content">

            <p class="title">标题一<span>2019-11-14</span></p>

            <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>

            <hr>

            <p class="content2"># Pyhton  # HTML</p>

        </div>

        <div class="content">

            <p class="title">标题一<span>2019-11-14</span></p>

            <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>

            <hr>

            <p class="content2"># Pyhton  # HTML</p>

        </div>

    </div>

</body>

</html>

1114作业 html的更多相关文章

  1. 作业成绩 final 20161124-1201 09:00

    final阶段,20161124-1201 09:00. 申诉截止时间 20161206 12:00,微信联系杨贵福. 凡描述需求或BUG时,应给出以下4项: 你期待看到的现象如何 你实际看到的现象 ...

  2. 第三次作业——K米评测

    第一部分 调研,评测 1.第一次上手体验 其实让我下载一个APP并且长期使用它是一件特别难的事情,不仅是因为占空间,需要注册个人信息,绑定账号,更是因为每款软件的功能虽然都很齐全,但是你并在没有真正用 ...

  3. BUAA软工个人作业Week3-案例分析

    一. 调研评测 评测项目:为了联系移动和PC版,我同时下载了必应词典的Android版本和UWP版本,选择UWP的原因是想看看微软推广的UWP在微软自己的应用上的效果.当然主要是对安卓的测评(UWP用 ...

  4. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  5. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  6. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  7. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  8. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  9. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

随机推荐

  1. KEIL软件中编译时出现的Error L6200E: symbol multiply defined ...的解决方法

    原因:如LCD.C文件使用了bmp.h中的image[ ]变量,那么就不能将#include"bmp.h"放在LCD.H中,要将#include"bmp.h"放 ...

  2. UVA - 11795 Mega Man's Mission

    Mega Man is off to save the world again. His objective is to kill the Robots created by Dr. Wily who ...

  3. HOOK 技术

    在介绍 截获系统消息钩子 之前,这几个函数是密切相关的: SetWindowsHookEx() 介绍: 功能:将应用程序定义的挂钩过程安装到挂钩链中. 函数原型:HHOOK SetWindowsHoo ...

  4. 新手入门HTML5开发，你必须先搞懂这6个问题

    凭借着跨平台,实时更新,无需安装,易于分发等众多优点,HTML5受到越来越多企业的青睐.而凭借着入门相对简单的优势,很多人编程初学者都选择学习HTML5.但对于初学者来说,学习HTML5之前,会有很多 ...

  5. opencv::Canny边缘检测

    Canny算法介绍 五步 in cv::Canny 高斯模糊 - GaussianBlur 灰度转换 - cvtColor 计算梯度 – Sobel/Scharr 非最大信号抑制 高低阈值输出二值图像 ...

  6. 如何通过 Docker 部署 Logstash 同步 Mysql 数据库数据到 ElasticSearch

    在开发过程中,我们经常会遇到对业务数据进行模糊搜索的需求,例如电商网站对于商品的搜索,以及内容网站对于内容的关键字检索等等.对于这些高级的搜索功能,显然数据库的 Like 是不合适的,通常我们采用 E ...

  7. pytest1-Installation and Getting Started

    pytest是python的一种单元测试框架(非自带,需要安装),与python自带的unitest测试框架相比,使用起来更加简洁.效率更高.总之,一句话,pytest优于unitest. 1.安装p ...

  8. CentOS6-Linux内核编译 详细步骤

    CentOS6-Linux内核编译 详细步骤 背景 Win10用VMwareWorkstation搭的虚拟机 CentOS6.5,内核版本2.6.32-431.el6.x86_64 在该环境下升级至4 ...

  9. Spring Boot - 访问外部接口最全总结

    Spring Boot - 访问外部接口 在Spring-Boot项目开发中,存在着本模块的代码需要访问外面模块接口,或外部url链接的需求, 比如调用外部的地图API或者天气API. Spring ...

  10. C# WPF基础巩固

    时间如流水,只能流去不流回. 学历代表你的过去,能力代表你的现在,学习能力代表你的将来. 学无止境,精益求精. 一.写作目的 做C# WPF开发,无论是工作中即将使用,还是只应付跳槽面试,开发基础是非 ...