简易版cnlog

注意的点

1.一定先分好块标签,再基于一个个块标签进行装饰(相当于给一个个人化妆)

2.浮动: 我的理解是从一个平面上浮到一个平面上,所有的标签都有浮动(包括块标签和行内标签),标签上浮都是在自己当前的位置上浮,上浮之后就算是原本是块标签都不会拥有独占一行的权力,而是自己的有多大就占多大的地方.

'''

举个例子:一个div标签内套有两个div1和div2标签,div2标签上浮并不会上顶,因为div1还是独占一行的,div2只是会在自己的区域内上浮.如果是两个div都上浮了,就是div1和div2显示在同一行,div的边框就是造成塌陷,边框会只显示一条线,为了避免这种情况,要继承clearfix类.

clearfix这个类就是div里content=''空内容寻找自己的位置,必须满足clrear=both;display=block;表示我必须独占一行,遇到阴影就不占,顺着它的大小往下找,找到了空白的地方就填方,只是没有内容,但是div的边框就被撑起来了.

'''

如果div1和div2的大小一样,然后div1是在div2后面的话,div2向左浮动,div2浮动之后就会div1顶上去,如果位置掉换,div2就算浮动也不会覆盖div1.

注意区分向左向右浮动,因为两个div都向左移动的话,变成都在一个平面上,然后后者会覆盖前者.

3.设置一方浮动为position:fixed时,另一方的浮动也就是块标签会随内容的增大而增大(在不设定高度和宽度的情况下),因为是上下内容的滑动,所以可以不设定高度,而宽度最好设定为默认页面的80%,而一方浮动position:fixed,宽度为20%,高度可以设定为100%,注意左浮和右浮,然后为了方便也为了好看将body里的margin:0,也加上背景颜色,然后右浮的那一方就不用写背景颜色了,直接就会显示body的,然后position:fixed那一方自己设定颜色覆盖body的.

4.  box-shadow: 3px 3px 3px rgba(0,0,0,0.3) 水平阴影位置 垂直阴影位置 模糊距离 颜色(rgba(0.3)为通明度)

5.每个标签都有border(即使为0,也是有border),有些是有默认值,有些要自己设定border的, 调节字体的大小对边距是不会有影响的,等比例放大.

6.造成文字的溢出是因为设定了宽高,文字过多,用overflow:hidden

7.ol内部一定要写li

8.ol { list-style:None;} 不显示序号

9.一个块标签可以继承多个类class='clearfix link'这是两个类

10.行内标签使用浮动不需要clearfix,直接向左向右移就好了

11.再连接点过之后,hover ,link,active都无效了

12.border就是边框并不是div的整个区域,设置div区域里的背景颜色和margin,这个div里面包含的所有div都是随着内容的增加而增大,而边框不管多大都只是边框的大小,虽然遇到文字会显示并不会覆盖.

html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>cnlog</title>

    <link rel="stylesheet" href="mycess.css">

</head>

<body>

    <div class="float-left">

        <div class="circle">

            <img src="../css自己的练习/3.png" alt="">

        </div>

        <div class="title">

            yaya博客

        </div>

        <div class="info">

            是谁来偷看我女朋友博客呢

        </div>

        <div class="link">

            <ol>

                <li><a href="https://home.cnblogs.com/u/huangxuanya/detail/">点我! 点我!</a></li>

                <li><a href="https://www.cnblogs.com/huangxuanya/">博客园</a></li>

                <li><a href="https://music.163.com/#/my/m/music/playlist?id=407024508">迷醉女声</a></li>

            </ol>

        </div>

        <div class="explain">

            <ol>

                <li>#Python</li>

                <li>#Java</li>

                <li>#Go</li>

            </ol>

        </div>

    </div>

    <div class="float-right">

        <div class="border">

            <span class="c1">无标题</span>

            <span class="c2">2019-5-30</span>

            <div class="content">												


											
简易版cnlog的更多相关文章
	

    
								
  1. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”
		
    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...
    
		
    2. 
						
  2. MVC 验证码实现（ 简易版）
		
    现在网站上越来越多的验证码,使用场景也是越来越多,登陆.注册.上传.下载...等等地方,都有可能大量使用到验证码,那么制作验证码到底有多简单呢?我们一起来看下最简易版的验证码实现过程- 验证码的基本步 ...
    
		
    3. 
						
  3. 简易版自定义BaseServlet
		
    这几天在学Java Web,一直在思考Servlet重用的问题,就用java的反射机制实现自定义的简易版BaseServlet; 该方式有点像struts2 利用映射获取前端的参数.有兴趣的同学可以自 ...
    
		
    4. 
						
  4. 简易版的TimSort排序算法
		
    欢迎探讨,如有错误敬请指正 如需转载,请注明出处http://www.cnblogs.com/nullzx/ 1. 简易版本TimSort排序算法原理与实现 TimSort排序算法是Python和Ja ...
    
		
    5. 
						
  5. html5 canvas简易版捕鱼达人游戏源码
		
    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
    
		
    6. 
						
  6. Python写地铁的到站的原理简易版
		
    Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...
    
		
    7. 
						
  7. MVC5+EF6 简易版CMS（非接口） 第四章：使用业务层方法，以及关联表解决方案
		
    目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...
    
		
    8. 
						
  8. C+命令行+方向键=简易版扫雷
		
    前言: 想起来做这个是因为那时候某天知道了原来黑框框里面的光标是可以控制的,而且又经常听人说起这个,就锻炼一下好了. 之前就完成了那1.0的版本,现在想放上来分享却发现有蛮多问题的,而且最重要的是没什 ...
    
		
    9. 
						
  9. MVC5+EF6 简易版CMS（非接口） 第三章：数据存储和业务处理
		
    目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. js里的null 与undefined
			
    null 表示一个值被定义了,定义为'空值': undefined 表示没有定义. 转换为数字时 Number(undefined) === NaN Number(null) === 0 在es6使用 ...
    
			
    2. 
						
  2. Java 笔试面试（6）异常处理
			
    Java 笔试面试(6)异常处理 1. finally的代码何时执行? 问题描述:try{}里有一个return语句,那么在这个try后面的finally{}中的代码是否为执行?如果会,是在retur ...
    
			
    3. 
						
  3. 2、【Spark】Spark环境搭建(集群方式)
			
    Spark集群方式搭建结构如图所示,按照主从方式.
    
			
    4. 
						
  4. Redis list实现原理 - 双向循环链表
			
    双向链表 双向表示每个节点知道自己的直接前驱和直接后继,每个节点需要三个域 查找方向可以是从左往右也可以是从右往左,但是要实现从右往左还需要终端节点的地址,所以通常会设计成双向的循环链表; 双向的循环 ...
    
			
    5. 
						
  5. 扫描神器nmap使用教程
			
    总结 nmap -v 详细信息输出nmap -p 指定端口nmap -iL 扫描文件中的ipnmap -exclude 不扫描某些ipnmap -Pn 使用ping扫描,显式地关闭端口扫描,用于主机发 ...
    
			
    6. 
						
  6. .NET Core 基于Websocket的在线聊天室
			
    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后 ...
    
			
    7. 
						
  7. 2020年春招面试必备Spring系列面试题129道（附答案解析）
			
    前言 关于Spring的知识总结了个思维导图分享给大家   1.不同版本的 Spring Framework 有哪些主要功能?   2.什么是 Spring Framework? Spring 是一个 ...
    
			
    8. 
						
  8. Head First设计模式——复合模式
			
    复合模式是HeadFirst上面详细讲的最后一个模式,其前面的模式作者认为都是成熟的经常使用的模式.所以这是详细讲解模式的最后一篇,同时这个模式讲解的篇幅也是最长的,接下来我就对其进行总结提炼进行讲解 ...
    
			
    9. 
						
  9. java递归树形菜单显示
			
    今天写权限整好涉及到一些菜单的显示,最先想到的是递归遍历输出,但是呢在网上找了很多有关的资料没有符合自己需求的所以就自己写了一个,如果觉得靠谱 请点点关注!!!赞一个 首先看一些设计的数据库设计 菜单 ...
    
			
    10. 
						
  10. 使用增量备份修复DG中的GAP
			
    问题描述 oracle中DG出现主备不同步现象,alert日志报警有gap信息,但是v$archive_gap视图查不到任何信息.同时主库上的对应归档已经删除且没有备份 解决方案 1.查询备库的scn ...
    
			
    11.