前端入门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>

效果：

转载于:https://www.cnblogs.com/112358nizhipeng/p/10164868.html

前端入门CSS(3)相关推荐

前端入门--CSS篇
CSS 文章目录 CSS 基本的语法规范命名风格注释 CSS的引入方式内部样式内联样式外部样式代码风格 CSS选择器标签选择器类选择器 id选择器通配符选择器复合选择器后代选择器 ...
前端入门CSS(1)
day48 参考:https://www.cnblogs.com/liwenzhou/p/7999532.html CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式,不推 ...
前端入门css学习笔记（十七）-----二级菜单
二级菜单的方法就是在一个<ul><li>中再嵌套一个<ul><li> 如下: <ul class="box"><l ...
前端入门css学习笔记（十一）-----溢出属性之空余空间
内容溢出时可以用white-space:属性来设置如何处理元素内的空白. white-space:属性的值如下:
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...

前端入门CSS(3)

前端入门CSS(3)相关推荐

最新文章

热门文章