前端之css笔记3
一 display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
<!--.c1{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:darkorange;-->
<!--}--> <!--.c2{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:green;-->
<!--<!–display:none;–>-->
<!--}--> <!--.c3{-->
<!--width:100px;-->
<!--height:200px;-->
<!--background-color:rebeccapurple;-->
<!--}--> <!--.outer:hover .c2{-->
<!--display:none;-->
<!--}--> div{
width:200px;
height:200px;
bockground-color:green;
display:inline;
} span{
width:200px;
height:200px;
background-color:wheat;
display:block;
} </style>
</head>
<body> <div>DIV</div> <span>span</span> <!--<div class="c1"></div>--> <!--<div class="outer">-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->
<!--</div>--> </body>
</html>
二 inline-block属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin:;
padding:;
} .c1{
width:100px;
height:200px;
background-color:darkorange;
display:inline-block;
} .c2{
width:200px;
height:200px;
background-color:green;
display:none;
margin-lift:-4px;
} .c3{
width:300px;
height:200px;
background-color:rebeccapurple;
display:inline-block;
margin-left:-5px;
} ul li{
list-style:none;
}
ul li a{
width:20px;
height:20px;
float:left;
padding:20px;
margin-left:5px;
background-color:wheat;
} </style>
</head>
<body> <a class="c1"></a> <div class="c2"></div>
<div class="c3"></div> <ul>
<li class="item"><a href="">1</a> </li>
<li class="item"><a href="">2</a> </li>
<li class="item"><a href="">3</a> </li>
<li class="item"><a href="">4</a> </li>
<li class="item"><a href="">5</a> </li>
<li class="item"><a href="">6</a> </li>
<li class="item"><a href="">7</a> </li>
<li class="item"><a href="">8</a> </li>
</ul> </body>
</html>
三float 父级塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
padding:;
} .box1,.box2{
float:left;
width:50%;
height:60px;
} .box1{
background-color:wheat;
} .box2{
background-color:green;
}
.content{
width:100%;
height:60px;
background-color:greenyellow;
} .header{
border:red 1px solid;
} .clearfix:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body> <div class="header clearfix"> <div class="box1"></div>
<div class="box2"></div> </div> <div class="content"></div> </body>
</html>
四 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin :0px;
} .div1{
background-color:rebeccapurple;
width:200px;
height:100px;
float:left;
} .div2{
background-color:teal;
width:200px;
height:200px;
float:left;
clear:left;
} .div3{
background-color:green;
width:100px;
height:300px;
float:left;
clear:right;
}
</style>
</head>
<body> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
五 a标签锚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fang1{
width:100%;
height:1000px;
background-color:wheat;
} .fang2{
width:100%;
height:1000px;
background-color:red;
}
.fang3{
width:100%;
height:1000px;
background-color:green;
} </style>
</head>
<body> <ul>
<li><a href="#c1">第一章</a></li>
<li><a href="#c2">第二章</a></li>
<li><a href="#c3">第三章</a></li>
</ul> <div class="fang1" id="c1">第一章</div>
<a href="#">返回顶端</a>
<div class="fang2" id="c2">第二章</div>
<a href="#">返回顶端</a>
<div class="fang3" id="c3">第三章</div>
<a href="#">返回顶端</a>
</body>
</html>
六 position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
body{
margin:0px;
} .div1{
background-color:rebeccapurple;
width:200px;
height:200px;
} .div2{
background-color:green;
width:200px;
height:200px;
position:absolute;
left:200px;
top:200px; <!--position:relatinve--------;1, 参照物是以自己原来在文档流的位置 -->
<!--2 物理位置依然存在--> } .div3{
background-color:teal;
width:200px;
height:200px;
}
.father_box{
position:relative;
border: 2px solid red;
}
</style>
</head>
<body> <div class="div1"></div> <div class="father_box">
<div class="div2"></div>
<div class="div3"></div>
</div> </body>
</html>
七fix定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width:100%;
height:2000px;
background-color:wheat;
} .returnTop{
width:90px;
height:35px;
text-indent:10px;
background-color:grey;
color:white;
tsxt-align:center;
line-height:35px;
position:fixed;
right:20px;
bottom:20px;
}
</style>
</head>
<body> <div class="c1"></div> <div class="returnTop">返回顶部</div> </body>
</html>
八 marging塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0px;
} .div1{
background-color:rebeccapurple;
width:300px;
height:300px; overflow:hidden;
<!--border:1px solid rebeccapurple;-->
<!--padding:1px;-->
}
.div2{
background-color:green;
width:100px;
height:100px;
margin-top:20px;
} .div3{
background-color:teal;
width:100px;
height:100px;
}
</style>
</head>
<body> <div style="background-color: bisque;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div> </body>
</html>
九 txet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
padding:;
} ul li{
list-style:none;
}
</style>
</head>
<body> <ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</body>
</html>
前端之css笔记3的更多相关文章
- 前端之css笔记1
1 css引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 前端之css笔记2
1 属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- mysql 解除安全模式
问题:rror Code: 1175. You are using safe update mode and you tried to update a table without a WHERE t ...
- JAVA Spring JavaBean 引入 JavaBean ( 外部引用, 内部定义, 级联属性 )
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- TP5常量
预定义常量 EXT 类库文件后缀(.php) THINK_VERSION 框架版本号 路径常量 DS 当前系统的目录分隔符 THINK_PATH 框架系统目录 ROOT_PATH 框架应用根目录 AP ...
- 机器学习入门-数据下采样 np.random_choice
1. np.random_choice(array, len) 进行随机的数据选择,array表示抽取的对象,len表示抽取样本的个数 数据的下采样是对多的数据进行np.random.choice ...
- CVE2016-8863libupnp缓冲区溢出漏洞原理分析及Poc
1.libupnp问题分析: (1)问题简述: 根据客户给出的报告,通过设备安装的libupnp软件版本来判断,存在缓冲区溢出漏洞:CVE-2016-8863. (2)漏洞原理分析: 该漏洞发生在up ...
- Imageen 图像切割 （JpegLosslessTrans）
procedure CutAFile(FileName: string; qry: TQuery);var i: Cardinal; FromStream, ToStream: TMemorySt ...
- 给pyspark 设置新的环境
如果是从pysparkshell里面进去,此时已经有了pyspark环境了,所以要加一个:sc.stop() from pyspark import SparkContext, SparkConfsc ...
- 迭代删除元素 并发bug 低级错误
方法一:HashMap<String, Integer> myHashMap = new HashMap<>();myHashMap.put("1", 1) ...
- drupal sql 源码解析query.inc 文件
query.inc 文件: sql语句: $this->condition($field);1707 line public function condition($field, $value ...
- Egit的merge合并冲突具体解决方法
稍微总结下弄了半个下午的egit的merge合并冲突解决方法,网上看的都是一个模板出来的,看的糊里糊涂,花了很多时间去实验整个合并流程.. 前提工作 创建一个普通JAVA工程Test,创建一个类Tes ...