简易版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. Openstack neutron学习
			
    最近在学习openstack neutron的东西,记录下自己的一些理解. 网络基础知识 Switches & Vlan交换机的作用是来连接设备,实现互通的.network host之间通过交 ...
    
			
    2. 
						
  2. 自研接口测试平台（Django2+Bootstrap3+Unittest）
			
    自研接口测试平台(Django2+Bootstrap3+Unittest) HttpRuleTest是一款面向 HTTP 协议的通用测试框架,只需web端维护接口测试数据,即可实现自动化测试.监控.数 ...
    
			
    3. 
						
  3. 从赴美IPO绝迹 看那些烧成泡沫的互联网企业
			
    曾经,赴美上市是很多中国企业的终极梦想.然而在当下,随着中概股在美国股市股价的不断走低.中国赴美上市企业私有化速度的加快,大众才发现,原来美国股市并不是那么好混的.但不管怎样,赴美上市始终是一种荣耀. ...
    
			
    4. 
						
  4. jQuery学习笔记二
			
    事件监听者是DOM的一部分,任何页面都可以增加事件监听者.浏览器利用事件监听者监视页面上做了什么,然后告诉Javascript解释器是否需要采取行动.如:$('#showMessage').click ...
    
			
    5. 
						
  5. Ubuntu19.10安装OMNeT++ （omnetpp-5.6）中遇到的问题
			
    在官网上下载对应版本的安装包,里面有说明性的文档,先在第五章ubuntu那里配置好前期的环境,再到linux那一章,看进行安装,本文即从这里开始记录. 安装包中的文档目录为:omnetpp-5.6/d ...
    
			
    6. 
						
  6. 【原创】（三）Linux进程调度器-进程切换
			
    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
    
			
    7. 
						
  7. spring jpa ManyToMany 理解和使用
			
    1.java和jpa 中所有的关系都是单向的.这个关系数据库不同,关系数据库,通过外键定义并查询,使得反向查询总是存在的. 2.JPA还定义了一个OneToMany关系,它与ManyToMany关系类 ...
    
			
    8. 
						
  8. 攻防世界Mobile5 EasyJNI 安卓逆向CTF
			
    EasyJNI 最近正好在出写JNI,正好看到了一道JNI相关的较为简单明了的CTF,就一时兴起的写了,不得不说逆向工程和正向开发确实是可以互补互相加深的 JNI JNI(Java Native In ...
    
			
    9. 
						
  9. MVC05
			
    1. 添加搜索功能 如何实现url添加查询字符串实现查询指定项目的功能? 来到MovisController,修改Index方法如下 public ActionResult Index(string  ...
    
			
    10. 
						
  10. fsLayuiPlugin数据字典使用
			
    概述 数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用. 1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析 ...
    
			
    11.