简易版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. Annotation标注
			
    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...
    
			
    2. 
						
  2. jQuery2.0.0版本以后不再支持ie8的原因
			
    在引用jQuery时,引用高版本的Jq会在IE8下报错,在网上查了一下,jq在2.0+的版本就已经放弃对ie8的支持了.之前没有仔细研究过jq版本,借此机会去看了一下jq版本的知识.一.如何查看jq的 ...
    
			
    3. 
						
  3. 码海拾遗：strstr()、strcmp()和strcpy()实现
			
    1.strstr()实现 原型:char * strstr(const char * str1, const char * str2) 说明:判断str2是否为str1的子串,如果是则返回str2第一 ...
    
			
    4. 
						
  4. C++走向远洋——45（警察和厨师、UML）
			
    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
    
			
    5. 
						
  5. 深度解析互联网大厂面试难题自定义@EnableXX系列
			
    深度解析互联网大厂面试难题自定义@EnableXX系列   其实是一个@Import的设计技巧 创建注解@EnableXX(任何名称注解都行,只是这个名字好一些) XXConfiguration类不能 ...
    
			
    6. 
						
  6. php-fpm启动失败处理
			
    报错信息: No pool defined. at least one pool section must be specified in config file [11-Mar-2019 23:57 ...
    
			
    7. 
						
  7. 《ASP.NET Core 3框架揭秘》读者群，欢迎加入
			
    作为一个17年的.NET开发者,我对一件事特别不能理解:我们的计算机图书市场充斥着一系列介绍ASP.NET Web Forms.ASP.NET MVC.ASP.NET Web API的书籍,但是却找不 ...
    
			
    8. 
						
  8. 简单易懂的Servlet路径问题
			
    关于servlet路径,我看了一下网上别人的博客园,发现都有一个通病,讲的太专业了,又抓不住关键部分,往往看一眼就不想看第二眼.所以我特地准备了初学者所通识的servlet路径问题. 1.标识符 /j ...
    
			
    9. 
						
  9. Vue的模板内换行问题
			
    在用vue的模板{{}}进行渲染文本时候,字符串换行不起作用,后使用ES6的模板字符串进行换行仍然不起作用,解决方法: <div>{{str}}</div> 可换为用v-htm ...
    
			
    10. 
						
  10. 一文详解Hexo+Github小白建站
			
    作者:玩世不恭的Coder时间:2020-03-08说明:本文为原创文章,未经允许不可转载,转载前请联系作者 一文详解Hexo+Github小白建站 前言 GitHub是一个面向开源及私有软件项目的托 ...
    
			
    11.