前端之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 ...
随机推荐
- @Slf4j注解
参考:https://blog.csdn.net/qq_26344609/article/details/78905845 如果不想每次都写private final Logger logger = ...
- IOS HTTP访问端口
Project dyld_sim raised exception class ENetHTTPClientException with message 'Error -1022 accessing ...
- plsql 执行批量文件
plsql 执行批量文件 plsql>command window @c:\a.sql;@c:\b.sql;@c:\c.sql;
- DC组策略相关
恢复DC组策略默认配置 DcGPOFix [/ignoreschema] [/Target: Domain | DC | BOTH] dcgpofix /? gpupdate刷新 gpedit.msc ...
- mybatis 常用jdbcType数据类型
来自 : http://blog.csdn.net/paincupid/article/details/50922981
- Linux tomcat启动慢， Creation of SecureRandom instance for session ID generation using [SHA1PRNG]took [xx] mil
启动慢的解决链接: http://blog.csdn.net/u011627980/article/details/54024974
- as3 文档类引用
/**文档类引用**/ public static var main:CoverMain; public function CoverMain() { main=this; }
- mongodb基础学习14-mapReduce操作
mapReduce随着大数据的兴起而流行,相当于传统数据库的group操作,强项在于分布式计算. map:将一组记录的相关信息映射到一个数组 reduce:对map得到的数组数据进行处理得到一个结果 ...
- [转] #ifndef#define#endif的用法(整理) 原作者：icwk
文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,于是问题来了, ...
- 罗伯特•盖洛博士（Dr. Robert Charles Gallo）是世界著名的美国生物医学家，他以共同发现了人类免疫缺陷病毒（HIV）――这一导致获得性免疫缺陷综合症（AIDS）的致病源而闻名于世。
罗伯特•盖洛 开放分类:各国生物学家|生物学家罗伯特•盖洛博士(Dr. Robert Charles Gallo)是世界著名的美国生物医学家,他以共同发现了人类免疫缺陷病毒(HIV)――这一导致获得性 ...