简易版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. Python3爬虫：（一）爬取拉勾网公司列表
			
    人生苦短,我用Python 爬取原因:了解一下Python工程师在北上广等大中城市的薪资水平与入职前要求. Python3基础知识 requests,pyquery,openpyxl库的使用 爬取前的 ...
    
			
    2. 
						
  2. usb设备枚举过程
			
    USB主机在检测到USB设备插入后,就要对设备进行枚举了.为什么要枚举呢?枚举就是从设备读取一些信息,知道设备是什么样的设备,如何进行通信,这样主机就可以根据这些信息来加载合适的驱动程序.调试USB设 ...
    
			
    3. 
						
  3. UEditor问题整理
			
    网上可以使用的富文本编辑器有很多,但是经过慎(sui)重(shou)思(yi)考(cha),选择了UEditor,毕竟是百度的东西,质量上应该经得起推敲,另外,使用别人的插件,总要去适应别人的编码习惯 ...
    
			
    4. 
						
  4. JAVA WEB基础巩固之Json、Ajax
			
    一.Json(Json介绍)json校验工具 Json是JavaScript object notation的缩写,优点是易读易编写易于解析: 例如:Object: { "name" ...
    
			
    5. 
						
  5. USB小白学习之路（7） FPGA Communication with PC by CY7C68013,TD_init()解析
			
    注:这个TD_Init()只对EP6进行了配置,将其配置成为Bluk_In端口,而没有对EP2进行配置.这篇文章直接把寄存器的图片贴上来了,看起来比较杂.感兴趣的可以看下一篇文章,是转自CSDN,对E ...
    
			
    6. 
						
  6. VUE实现Studio管理后台（一）：鼠标拖放改变窗口大小
			
    近期改版RXEditor,把改版过程,用到的技术点,记录下来.昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾.不过工作成果完整保留在github上,地址:https:// ...
    
			
    7. 
						
  7. d3学习day3 --y轴添加文本标签
			
    y轴添加文本标签 g.append("g") .call(y_axis) .append("text") .text("price($)") ...
    
			
    8. 
						
  8. 前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
			
    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...
    
			
    9. 
						
  9. CVE-2020-1947  Sharding-UI的反序列化复现及分析
			
    CVE-2020-1947 复现及分析 0x01 影响 Apache ShardingSphere < =4.0.0 0x02 环境搭建 incubator-shardingsphere 的ui ...
    
			
    10. 
						
  10. Java并发编程(02)：线程核心机制，基础概念扩展
			
    本文源码:GitHub·点这里 || GitEE·点这里 一.线程基本机制 1.概念描述 并发编程的特点是:可以将程序划分为多个分离且独立运行的任务,通过线程来驱动这些独立的任务执行,从而提升整体的效 ...
    
			
    11.