前端入门CSS(3)
day60
不透明度
opacity()\
opacity (不透明度)
1. 取值0~1
2. 和rgba()的区别:
1. opacity改变元素\子元素的透明度效果
2. rgba()只改变背景颜色的透明度效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度示例</title>
<style>
.c1,
.c2
{
height: 400px;
width: 400px; color: red;
} .c1{
/*背景和子标签都变淡*/
background-color: black;
opacity: 0.5;
}
.c2{
/*只改变背景颜色透明度*/
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body> <div class="c1">我是c1类的div标签</div>
<div class="c2">我是c2类的div标签</div> </body>
</html>
效果：
c1中内容根据背景透明度改变而改变，c2只有背景透明度改变。
z-index
1. 数值越大,越靠近你
2. 只能作用于定位过的元素
3. 自定义的模态框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
*{
/*页面不留边界*/
padding: 0;
margin: 0;
}
.c1{
height: 150px;
width: 150px;
background-color: red;
/*虽然位置不变，但是属于定位过的元素*/
position: relative;
/*z-index只作用于定位过的元素*/
/*数值越大,越靠近你 */
z-index: 2;
}
.c2{
height: 200px;
width: 200px;
background-color: green;
position: relative;
top: -150px;
}
</style>
</head>
<body> <div class="c1"></div>
<!--c2覆盖c1,因为c2在后面，需要用z-index调整-->
<div class="c2"></div> </body>
</html>
效果：
红色不会被覆盖。
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>青春版模态框示例</title>
<style>
.cover{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
.modal{
width: 600px;
height: 400px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
/*往左上角挪*/
margin-top: -200px;
margin-left: -300px;
}
</style>
</head>
<body> <div class="cover"></div>
<!--modal覆盖cover,因为modal在后面-->
<div class="modal"></div> </body>
</html>
效果：
小米导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城导航条示例</title>
<style>
*{
margin: 0;
padding: 0;
}
/*将列表前的点去掉*/
ul{
list-style-type: none;
}
/*使导航条横着*/
.nav-left li{
float:left;
padding-right: 20px;
}
.nav-right {
float: right;
} .nav{
/*左右都浮动，没有内容撑起，需要内容撑起*/
background-color: #79aec8;
} .c1{
clear:left;
clear:right;
}
</style>
</head>
<body> <div class="nav">
<div class="nav-left">
<ul>
<!--li*8>a tab-->
<li><a href="">玉米商城</a></li>
<li><a href="">大米</a></li>
<li><a href="">豆浆</a></li>
<li><a href="">腰果</a></li>
<li><a href="">橘子</a></li>
<li><a href="">柚子</a></li>
<li><a href="">黑米</a></li>
<li><a href="">橙子</a></li> </ul>
</div>
<div class="nav-right">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<!--作用为撑起内容，因为清除左右浮动，所以另起一行，但是没有内容，所以只撑起背景色-->
<div class="c1"></div>
</div> </body>
</html>
效果：
前端入门CSS(3)的更多相关文章
- 前端入门CSS(2)
参考: https://www.cnblogs.com/liwenzhou/p/7999532.html 背景属性 /*背景颜色*/background-color: red; /*背景图片*/ ba ...
- 前端入门CSS(1)
day48 参考:https://www.cnblogs.com/liwenzhou/p/7999532.html CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式,不推 ...
- 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)
结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...
- web前端入门：一小时学会写页面
一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...
- 前端入门3-CSS基础
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- 2019年Web前端入门的自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...
- webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
随机推荐
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- 20172325 2017-2018-2 《Java程序设计》第九周学习总结
20172325 2017-2018-2 <Java程序设计>第九周学习总结 教材学习内容总结 异常 1.学习了异常的基本概念: 2.区分异常与错误: 一个异常是指一个定义非正常情况或错误 ...
- 如何看待阿里 AI 每秒制作 8000 张海报？
看了其他设计老师们的回答,给了我一些启发,于是更新一波. 设计本质上是产品和服务的一部分,如果只站在设计师角度看这问题,免不了会有一种被取代的危机感. 来源:千锋UI 但如果站在整个产品和服务的角度 ...
- CreateMutex用法
1. CreateMutex只是创建了一把锁, 这把锁你用来锁门还是锁抽屉还是锁你对象的内裤都由你自己决定. 2. lpName是指定这把锁的名字. 你要不给这把锁取个名字都可以. 只是有了相 ...
- 使用delphi 开发多层应用（二十四）KbmMW 的消息方式和创建WIB节点
KbmMW 中支持基于UDP的消息广播,也支持TCP/IP hub/spoke 方式,还有 基于UDP或者TCP/IP 的点对点的消息传输. 1.基于UDP的消息广播
- 通过电机编码器AB相输出确定电机转向
AB相输出相差90度,即当A相"正跳变"时如果B相是高电平那么是"正转",反之是"反转" 图片: 正转 反转 #include <Ti ...
- 疯狂安装oracle 12c，此版本没有scott这个用户
今天要学习oracle,然后寻思下个吧,结果出现了很多问题,在此分享一下,搞疯了,太痛苦了,学的教程是用的 Oracle 11g,我去官网下载的Oracle 12g,文件很大,好不容易装好了,寻思就这 ...
- UVaLive 4452 The Ministers' Major Mess (TwoSat)
题意:有 m 个人对 n 个方案投票,每个人最多只能对其中的4个方案投票(其他的相当于弃权),每一票要么支持要么反对.问是否存在一个最终决定,使得每个投票人都有超过一半的建议被采纳,在所有可能的最终决 ...
- 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解
call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向. a ...
- <a href=“#”>
在html中看到这样的属性:<a href=“#”>搜了好久,感觉不甚明白,现记之,等遇到了再做补充. # is called an anchor (or hash...). so the ...