Web开发day3：CSS样式补充

1. hover

2. after

3. position

4. border

进度来源：最新Python的web开发全家桶（django+前端+数据库）

网址：最新Python的web开发全家桶（django+前端+数据库）_哔哩哔哩_bilibili

1. hover

第一种用法：改自己，鼠标放到样式为c1的项目后，由红色变绿色

.c1 {color: red;
}.c1: hover {color: green;
}

第二种用法：改孩子，鼠标放到样式为c1的项目后，显现出孩子c2

.c2{display: none;
}.c1:hover .c2{display: block;
}<div class="c1">点我下载<div class="c2">一个二维码</div>
</div>

2. after

在加入after的项目的子项目后加入after的内容，常与float搭配，消除float影响

.clearfix: after{content: "";display: block;clear: both;
}.item{float: left;
}<div class="clearfix"><div class="item">111</div><div class="item">222</div><div class="item">333</div>
</div>

3. position

fixed：固定在窗口的某个位置，谁的z-index大谁在上

<!--以下表示back框始终离右侧网页边界10px，离下侧网页边界50px-->
.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;z-index: 1000;
}<div class="back"></div>

<!--离上下左右都是0，默认占满全屏-->
.back{position: fixed;right: 0;left: 0;bottom: 0;top: 0;z-index: 1000;
}<div class="back"></div>

relative、absolute：父项目relative，子项目absolute，可实现子项目相对父项目的位置调控

.c1{height: 200px;width: 200px;margin: 50px;border: 1px solid red;position: relative;
}.c2{height: 50px;width: 50px;border: 1px solid blue;position: absolute;right: 20px;bottom: 10px;
}<div class="c1"><div class="c2"></div>
</div>

案例：小米商城的下载app弹出显示，改代码的如下部分

.app{position: relative;
}.download_app{display: none;position: absolute;top: 27px;left: -17px;
}.app:hover .download_app{display: block;
}<a href="https://www.mi.com/" class="each_item app">下载app<div class="download_app"><img style="height: 80px; width: 80px" src="../images/erweima.png" alt="" ></div>
</a>

4. border

.c1{border: 1px solid red;  # 实线border: 1px dotted red;  # 虚线border: 1px dotted #00ff7f;  # 颜色RGB形式border-left: 1px dotted #00ff7f;  # 仅左边框border: 1px solid transparent;  # 透明框，常和hover配合，防止hover出现边框时的移动，提前加一个透明色边框
}

Web开发day3：CSS样式补充相关推荐

重拾web开发-DIV+CSS基础（总结）
以下内容摘自网上各处本人只是总结并非完全原创,特此申明. 文档类型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
java css路径_java web开发中CSS路径有问题吗，运行jsp文件为什么找不到css文件？...
---------------------------------------------------------------------------------------------------- ...
web开发 DIV+CSS规范命名集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 命名规则说明: 1).所有的命名最好都小写 2).属性的值一 ...
前端开发工程师css样式进阶指南
display: none; 与 visibility: hidden; 的区别相同: 它们都能让元素不可见区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间: ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
Web开发基础——CSS
学习目标: • CSS和HTML整合 • CSS选择器的使用学习内容: • css和html整合 ...
前端工程师实战开发：CSS样式继承、像素与选择器权重详解
餐厅练习具体看resource文件夹或者百度继承 <body><p>我是p元素<span>我是p里面的span</span></p> ...
移动端web开发技巧-及样式修复
2019独角兽企业重金招聘Python工程师标准>>> 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(I ...

Web开发day3：CSS样式补充

1. hover

2. after

3. position

4. border

Web开发day3：CSS样式补充相关推荐

最新文章

热门文章