前端之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 ...
随机推荐
- 37. CentOS-6.3安装配置Weblogic-10
安装说明 安装环境:CentOS-6.3-x64软件:server1001_ccjk_linux32.bin安装方式:bin文件安装 安装位置:/usr/local/weblogic/下载地址:htt ...
- Activity服务类-3 FormService服务类
1.获取//通过流程定义ID获取表单字段集合StartFormData startFormData = formService.getStartFormData(processDefinitionId ...
- apiCloud事件发送与监听
apiCloud事件发送与监听 1.sendEvent 将任意一个自定义事件广播出去,该事件可在任意页面通过 addEventListener 监听收到. sendEvent({params}) 2. ...
- Pycharm安装autopep8工具
参考文当:https://www.cnblogs.com/heenhui2016/p/6802122.html
- H5 缓存机制解析
在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面在浏览器里打开还是没 ...
- JAVA发送HttpClient请求及接收请求结果过程
1.写一个HttpRequestUtils工具类,包括post请求和get请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
- SQL语言类别
SQL语言主要分为四大类:数据查询语言DQL,数据操纵语言DML, 数据定义语言DDL,数据控制语言DCL. DQL (data query language) DML(data manipulati ...
- Haskell语言学习笔记（66）Aeson
Data.Aeson 安装 aeson $ cabal install aeson Installed aeson-1.2.3.0 Prelude> :m +Data.Aeson Prelude ...
- JAVA的String类的常用方法（转载）
Java-String类的常用方法总结 一.String类String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的f ...
- drupal 7.1 doc
https://www.drupal.org/docs/8/api/database-api/dynamic-queries/count-queries https://www.drupal.org/ ...