简易版cnlog
2024-09-21 06:32:10
简易版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">
最新文章
- Egret 集成第三方库 记录
- raspbian调整分辨率
- mysql 外键 级联
- 解决WAMP搭建PHP环境后后局域网其他机器无法访问的问题
- DEM数据如何生成高程点
- C#之基类及接口
- Django--models基础
- 1072: [SCOI2007]排列perm - BZOJ
- Android WebView 小结
- ES6中的Symbol类型
- 字典的.get方法
- 小白のjava实现wc.exe功能
- Tars http服务
- python 自动获取手机短信验证码
- python模块的学习
- Date ——日期型函数Date常用API
- CodeForces903G Yet Another Maxflow Problem 扫描线 + 线段树 + 最小割
- nginx报错整理
- 验证Xpath和CSS 路径是否有效
- Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十二）VMW安装四台CentOS，并实现本机与它们能交互，虚拟机内部实现可以上网。
热门文章