利用 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. 思维题+栈的应用——cf1092D有意思

    第一例很简单,把两个差为偶数的列不断合并即可 这种不需要撤销的合并相连数直接用栈来做 /* 如果相邻两列高度差为偶数 那么可以直接消去 */ #include<bits/stdc++.h> ...

  2. SpringBoot2.0+ 使用Log4j2日志输出

    据说Log4j2相比log4j效率有很大提升. pom.xml导入 <dependency> <groupId>org.springframework.boot</gro ...

  3. hdu多校第四场 1007 (hdu6620) Just an Old Puzzle 逆序对

    题意: 给你一个数字拼图,问你数字拼图能否能复原成原来的样子. 题解: 数字拼图的性质是,逆序数奇偶相同时,可以互相转化,逆序数奇偶不同,不能互相转化. 因此统计逆序对即可. #include< ...

  4. 解决ubuntu16.04鼠标键盘自动休眠导致的失灵问题

    sudo vi /etc/laptop-mode/conf.d/runtime-pm.conf 把 AUTOSUSPEND_RUNTIME_DEVTYPE_BLACKLIST="" ...

  5. Collection、Iterator、泛型初步

    java.util.Collection 集合层次的根接口 java.util.List extends Collection ArrayList implements List 常用方法 boole ...

  6. 《DSP using MATLAB》Problem 8.33

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  7. Mysql优化系列之查询优化干货1

    从这一篇开始,准备总结一些直接受用的sql语句优化,写sql是第二要紧的,第一要紧的,是会分析怎么查最快, 因为当你写过很多sql后,查询出结果已经不是目标,快,才是目标.另外,通过测试和比较的结果才 ...

  8. 自己写一个依赖注入容器Container

    前言:在平时的写代码中为了解耦.方便扩展,经常使用一些DI容器(如:Autofac.Unity),那是特别的好用. 关于它的底层实现代码 大概是这样. 一.使用依赖注入的好处 关于使用依赖注入创建对象 ...

  9. Spoj-DISUBSTR - Distinct Substrings~New Distinct Substrings SPOJ - SUBST1~(后缀数组求解子串个数)

    Spoj-DISUBSTR - Distinct Substrings New Distinct Substrings SPOJ - SUBST1 我是根据kuangbin的后缀数组专题来的 这两题题 ...

  10. 基于jdk8的格式化时间方法

    背景 jdk8之前,java使用Date表示时间,在做时间的格式化时,通常使用SimpleDateFormat,但是SimpleDateFormat是非线程安全的,在写代码时通常要将之定义为局部变量或 ...