利用 html + css 写一个最基本的页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*通用样式*/

        body {

            margin: 0;

            background: #D5D5D5;

        }

        a {

            text-decoration: none;

        }

        a:hover {

            color: whitesmoke;

        }

        ul {

            list-style-type: none;

            padding-left: 0;

        }

        .clearfix:after {

            content: ' ';

            clear: both;

            display: block;

        }

        /*内容样式*/

        .left {

            width: 20%;

            height: 1000px;

            background-color: #767676;

            position: fixed;

            float: left;

        }

        .left .img {

            border: 3px solid white;

            width: 200px;

            height: 200px;

            border-radius: 50%;

            overflow: hidden;

            margin: 30px auto;

        }

        .img img {

            width: 100%;

        }

        .info1 {

            font-size: 20px;

            color: darkgray;

            text-align: center;

        }

        .info2 {

            font-size: 20px;

            color: black;

            text-align: center;

        }

        .info3 {

            font-size: 20px;

            color: black;

            text-align: center;

        }

        .right {

            width: 80%;

            height: 1000px;

            background-color: white;

            float: right;

        }

        .title {

         border-left: 5px solid red;

            margin-left: 10px;

        }

        .list {

            background-color: white;

            margin: 20px 40px 20px 10px;

            box-shadow: 5px 5px 5px 5px rgba(129,70,34,0.8);

        }

        .title .t {

            /*float: left;*/

            font-size: 35px;

            margin-left: 18px;

        }

        .title .date {

            float: right;

            margin: 20px;

        }

        .content p {

            text-indent: 25px;

        }

        .content {

            border-bottom: 1px solid black;

        }

        .buttom {

            text-indent: 20px;

        }

    </style>

</head>

<body>

<div class="left clearfix">

    <div class="img"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2947173397,1134386833&fm=26&gp=0.jpg" alt=""></div>

    <div class="info1">

        <p>Jack秦</p>

        <p> 爱又怎样,又不能当饭吃 我口袋没有钱请你吃饭 爱我很累,...</p>

    </div>

    <div class="info2">

        <ul>

            <li><a href="https://www.cnblogs.com/qinyujie/">关于我</a></li>

            <li><a href="https://www.cnblogs.com/qinyujie/">微博</a></li>

            <li><a href="https://www.cnblogs.com/qinyujie/">微信公众号</a></li>

        </ul>

    </div>

    <div class="info3">

        <ul>

            <li><a href="https://www.cnblogs.com/qinyujie/"># Python</a></li>

            <li><a href="https://www.cnblogs.com/qinyujie/"># Linux</a></li>

            <li><a href="https://www.cnblogs.com/qinyujie/"># MySQL</a></li>

        </ul>

    </div>

</div>

<div class="right clearfix">

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

    <div class="list">

        <div class="title">

            <span class="t">标题一</span>

            <span class="date">2019/11/15</span>

        </div>

        <div class="content">

            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>

        </div>

        <hr>

        <div class="buttom">

            <span># Python</span>

            <span># Shell</span>

        </div>

    </div>

</div>

</body>

</html>

day45作业的更多相关文章

  1. day45 作业

    一.将当前日期按"2017-12-27 11:11 星期三"格式输出 function getdate(){ var d = new Date(); year = d.getFul ...

  2. 团队作业8——第二次项目冲刺（Beta阶段）Day4--5.21

    展开圆桌式会议: 会议内容:1.团队成员对昨天任务完成情况做一个简单交流,并对昨天工作中存在的问题提出集中讨论解决:2.按照昨天的昨天工作分配表做具体的任务分配:3.简单讨论明天的任务分配每个人的工作 ...

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

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

  4. SQLServer2005创建定时作业任务

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

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

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

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

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

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

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

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

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

  9. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

随机推荐

  1. R语言 数据重塑

    R语言数据重塑 R语言中的数据重塑是关于改变数据被组织成行和列的方式. 大多数时间R语言中的数据处理是通过将输入数据作为数据帧来完成的. 很容易从数据帧的行和列中提取数据,但是在某些情况下,我们需要的 ...

  2. hdu多校第三场 1006 （hdu6608） Fansblog Miller-Rabin素性检测

    题意: 给你一个1e9-1e14的质数P,让你找出这个质数的前一个质数Q,然后计算Q!mod P 题解: 1e14的数据范围pass掉一切素数筛法,考虑Miller-Rabin算法. 米勒拉宾算法是一 ...

  3. 资源-Java：Java资源列表

    ylbtech-资源-Java:Java资源列表 1. 开发软件返回顶部 1.Eclipse https://www.eclipse.org/ 2.IntelliJ IDEA https://www. ...

  4. JS 变量的数据类型转换

    变量的类型转换,一般情况是JS自动转换的,但也有些时候需要手动转换. 1.其它类型转成布尔型 函数和方法的区别 Boolean(a)  //函数是可以独立使用的 document.write(a)   ...

  5. PAT甲级——A1124 Raffle for Weibo Followers

    John got a full mark on PAT. He was so happy that he decided to hold a raffle(抽奖) for his followers ...

  6. 初识OpenCV-Python - 009: 图像梯度

    本节学习找到图像的梯度和边界.只要用到的函数为: cv2.Sobel(), cv2.Scharr(), cv2.Laplacian() 1. Laplacian 和 Sobel的对比 import c ...

  7. python列表的常用操作

    列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型.比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各种数据类型: 列表是p ...

  8. CVE-2015-0235

    看了下代码,由于各人能力问题,只是了解了漏洞的起因,知道哪里出了问题,但是不知道怎么用阿... 可怜... 这种漏洞,公布出来,只要不给EXP,估计威胁都不大.或者,就是我脑筋太死??? 首先,是网上 ...

  9. scull 的内存使用

    scull 使用的内存区, 也称为一个设备, 长度可变. 你写的越多, 它增长越多; 通过使用 一个短文件覆盖设备来进行修整. scull 驱动引入 2 个核心函数来管理 Linux 内核中的内存. ...

  10. [JZOJ2702] 【GDKOI2012模拟02.01】探险

    题目 题目大意 给你一个每条边正反权值不一定相同的无向图,求起点为111点的最小环. 思考历程 一看到这题,就觉得是一个经典模型. 然后思考先前做过最小环的经历,发现没个卵用. 我突然想到,既然这一个 ...