简易版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. loadrunner通过socket测接口
			
    #include "lrs.h" Action() {     //建立到服务端的连接     lrs_create_socket("socket1",&quo ...
    
			
    2. 
						
  2. 淘宝网-接口测试白皮书V0.1
			
    <软件自动化测试开发> 出版了 淘宝(中国)软件有限公司 接口测试白皮书   V0.1 淘宝网平台测试组(qa.taobao.com) 淘宝网-接口测试白皮书 2 目录 1  接口测试的背 ...
    
			
    3. 
						
  3. 使用itchat发送天气信息
			
    微信发送当日天气情况 念头萌生 之前在浏览网站的时候发现了篇文章「玩转树莓派」为女朋友打造一款智能语音闹钟,文章中介绍了使用树莓派打造一款语音播报天气的闹钟. 当时就想照着来,也自己做个闹钟.因为一直 ...
    
			
    4. 
						
  4. gcc编译器常用选项的含义
			
    -w: 关闭编译时的警告, 也就是编译后不显示任何warning,因此有时编译中会出现一些诸如数据转换之类的可忽略警告, -Wall: 显示编译后所有警告 -W: 显示警告,但是只是显示编译器认为的会 ...
    
			
    5. 
						
  5. Spark OFF_HEP变迁
			
    在文章的开头,安利一下我自己的github上的一个项目:AlluxioBlockManager,同时还有我的github上的博客:blog这个项目的作用是替代Spark2.0以前默认的TachyonB ...
    
			
    6. 
						
  6. java反序列化-ysoserial-调试分析总结篇(2)
			
    前言: 这篇主要分析commonCollections2,调用链如下图所示: 调用链分析: 分析环境:jdk1.8.0 反序列化的入口点为src.zip!/java/util/PriorityQueu ...
    
			
    7. 
						
  7. HelloWorld系列（一）- 手把手教你做JDK环境变量配置
			
    分下载,配置,验证三个步骤讲解如何进行JDK环境变量配置. 步骤1:首先看配置成功后的效果步骤2:下载,并解压到E:\JDK步骤3:环境变量配置步骤4:Win10 下环境变量Path的配置步骤5:验证 ...
    
			
    8. 
						
  8. 从头认识js-HTML中使用JavaScript
			
    <script>元素 在HTML页面中插入Javascript的主要办法就是使用<script>元素,HTML4.01为<script>定义了下列6个属性. 1.a ...
    
			
    9. 
						
  9. python安装pip (windows64)
			
    1.前提条件是先安装了easy_install(easy_install安装教程http://www.cnblogs.com/IT-Crowd/articles/6528469.html) 2.在ea ...
    
			
    10. 
						
  10. 7-49 求前n项的阶乘之和 (15 分)
			
    从键盘输入一个整数n,求前n项的阶乘之和,1+2!+3!+...+n!的和 输入格式: 输入一个大于1的整数.例如:输入20. 输出格式: 输出一个整数.例如:2561327494111820313. ...
    
			
    11.