前端之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 ...
随机推荐
- POI 解析excel 空行问题
https://www.cnblogs.com/interdrp/p/4019583.html
- HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- UI5-文档-4.2-Bootstrap
在使用SAPUI5做一些事情之前,我们需要加载并初始化它.加载和初始化SAPUI5的过程称为引导.一旦引导完成,我们只需显示一个警告. Preview An alert "UI5 is re ...
- 通过yumdownloader下载rpm包
通过yum自带的一个工具:yumdownloader [root@web1 ~]# rpm -qa |grep yum-utils [root@web1 ~]# yum -y install yum ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第四周
java学习第四周体会 本周,与前几周不同的是,老师没有进行课堂测试,而是上了一节课,回顾与总结了之前三周所学的知识,也是因为这节课,我注意到了之前学习中忽略的一些细节,和之前学习方法 ...
- SVN服务器的安装和使用
------------------siwuxie095 SVN 服务器的安装 1.SVN 服务器,选择 VisualS ...
- 百度Cafe原理--Android自动化测试学习历程
主要讲解内容及笔记: 一.Cafe原理 Cafe是一款自动化测试框架,解决问题:跨进程测试.快速深度测试 官网:http://baiduqa.github.io/Cafe/ Cafe provides ...
- TZOJ 4813 机器翻译(模拟数组头和尾)
描述 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先在内存中查找这 ...
- 【校招面试 之 剑指offer】第10-3题 矩阵覆盖问题
题目:我们可以使用2✖️1的小矩形横着或者竖着去覆盖更大的矩形.请问用8个2✖️1的小矩形无重叠地覆盖一个2✖️8的大矩形,共有多少种方法? 分析:当放第一块时(假定从左边开始)可以横着放,也可以竖着 ...
- 1. Spring boot 之热部署
1. spring boot 热部署 1.1. springloaded springloaded可以实现修改类文件的热部署.下载地址:springloaded 安装单击Run Configurati ...