1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML文档</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .clearfix:after {
  12.             content: '';
  13.             clear: both; /*左右两边都不能有浮动的元素*/
  14.             display: block;
  15.         }
  17.         .left {
  18.             width: 25%;
  19.             height: 1000px;
  20.             background-color: rgba(36,36,35,0.87);
  21.             float: left;
  22.         }
  24.         .right {
  25.             width: 75%;
  26.             height: 1000px;
  27.             /*background-color: aliceblue;*/
  28.             background-color: rgba(128,126,126,0.18);
  29.             float: left;
  31.         }
  33.         .head {
  34.             width: 150px;
  35.             height: 150px;
  36.             border: 5px solid white;
  37.             border-radius: 50%;
  38.             margin: 20px auto;
  39.             overflow: hidden;
  40.         }
  41.         .head img {
  42.             max-width: 100%;
  43.         }
  44.         #name {
  45.             width: 320px;
  46.             text-align: center;
  47.             font-size: 14px;
  48.             color: rgba(180,188,195,0.52);
  49.         }
  50.         .msg {
  51.             margin-top: 60px;
  52.             width: 320px;
  53.             text-align: center;
  54.             font-size: 19px;
  55.             color: rgba(180,188,195,0.52);
  56.         }
  57.         .content {
  58.             background-color: white;
  59.             height: 155px;
  60.             width: 880px;
  61.             margin: 10px 20px 10px 15px;
  62.             padding: 0 10px;
  63.             box-shadow:  10px 10px 5px #888888;
  64.         }
  65.         .content .title {
  66.             font-size: 24px;
  67.             border-left: red solid 3px;
  68.             height:35px;
  69.             margin-left: -10px;
  70.             padding-top: 5px;
  71.             padding-left: 10px;
  72.         }
  73.         .content span {
  74.             float: right;
  75.             font-size: 12px;
  76.             margin-top: 5px;
  77.             /*font-family: 隶书;*/
  78.         }
  79.         .content1 {
  80.             padding-left: 10px;
  81.         }
  82.         .content2 {
  83.             padding-left: 10px;
  84.         }
  85.     </style>
  86. </head>
  87. <body>
  88.     <div class="left clearfix">
  89.         <div class="head"><img src="头像.jpg" alt=""></div>
  90.         <div id="name">
  91.             <p>胖子布莱尼</p>
  92.             <p>人生不如意十有八九 而你是一二。</p>
  93.         </div>
  94.         <div class="msg">
  95.             <p>关于我</p>
  96.             <p>微博</p>
  97.             <p>微信公众号</p>
  98.         </div>
  99.         <div class="msg">
  100.             <p># Python</p>
  101.             <p># HTML</p>
  102.             <p># MySQL</p>
  103.         </div>
  104.     </div>
  105.     <div class="right clearfix">
  106.         <div class="content">
  107.             <p class="title">标题一<span>2019-11-14</span></p>
  109.             <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
  110.             <hr>
  111.             <p class="content2"># Pyhton  # HTML</p>
  112.         </div>
  113.         <div class="content">
  114.             <p class="title">标题一<span>2019-11-14</span></p>
  116.             <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
  117.             <hr>
  118.             <p class="content2"># Pyhton  # HTML</p>
  119.         </div>
  120.         <div class="content">
  121.             <p class="title">标题一<span>2019-11-14</span></p>
  123.             <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
  124.             <hr>
  125.             <p class="content2"># Pyhton  # HTML</p>
  126.         </div>
  127.         <div class="content">
  128.             <p class="title">标题一<span>2019-11-14</span></p>
  130.             <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
  131.             <hr>
  132.             <p class="content2"># Pyhton  # HTML</p>
  133.         </div>
  134.         <div class="content">
  135.             <p class="title">标题一<span>2019-11-14</span></p>
  137.             <p class="content1">鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
  138.             <hr>
  139.             <p class="content2"># Pyhton  # HTML</p>
  140.         </div>
  142.     </div>
  143. </body>
  144. </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. 由一次线上故障来理解下 TCP 三握、四挥 & Java 堆栈分析到源码的探秘

    本文导读: 生产故障场景介绍 TCP 建连三次握手过程 TCP 断连四次挥手过程 结合 Java 堆栈剖析源码 再从堆栈中找到"罪魁祸首" 问题优化方案总结 1.生产故障场景介绍 ...

  2. 《java编程思想》P22-P37（第二章一切都是对象）

    1.JAVA操纵的标识符实际上是对象的一个"引用";如String s;里的s是String类的引用并非对象. 2.程序运行时,有五个不同的地区可以存储数据. (1)寄存器:最快的 ...

  3. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  4. Dubbo+Zookeeper(一)Zookeeper初识

    前面花了一段时间去学习SpringCloud的相关知识,主要是理解微服务的概念并使用SpringCloud的一系列组件实现微服务落地.学习这些组件本身是简单的,跟着操作一遍基本就会了,这也得益于Spr ...

  5. boost::VS2017下编译和配置boost库

    环境: win10  vs2017  v141 1.下载  boost_1_70_0.zip. 2.以管理员方式打开 3. bootstrap.bat 4.编译64位库 b2.exe stage -- ...

  6. 一个有趣的C语言问题

    这个问题是知乎上的一个问题,看了以后觉得比较有意思.代码短到只有十多行,但是这么短的代码却输出了很奇怪的结果.很多人回答的时候都是站在理论的角度上说明代码的问题,但是实际的问题还是没有说明其中的问题. ...

  7. Qualcomm-Atheros-QCA9377-Wifi-Linux驱动

    资源来自:https://download.csdn.net/download/ichdy/10331646 已经下载好了,发现无法使用,本人系统Centos7.2,如果有安装成功,并且可以正常使用的 ...

  8. 百万年薪python之路 -- HTML基础

    一. Web标准 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:c ...

  9. 微信小程序中的canvas基础应用

    学了东西还是要记录一下,刚入职的小萌新啊,运气好分到一个项目不是很急的组原以为时间多了可以多学一些东西,但是发现好像不知道从哪里开始下手,我太南了.... 看旁边的实习生同事一直在搞canvas,自己 ...

  10. Linux 修改网卡名

    1. 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens32 (“ens32”为当前网卡名) 将NAME.DEVICE项修改为eth0 2.  ...