day044 cssy其他样式 js初识
float: 浮动
.t1{
float: right/left;
}
关于浮动的两个特点:
1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止.
2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样.
三种取值:
left: 向左浮动
right: 向右浮动
none:默认值,不浮动
clear属性
clear属性规定元素的那一侧不允许有其他浮动元素.(left,right,both(左右两侧均不允许浮动),none,inherit(从父元素中继承clear属性的值))
清除浮动:
浮动的副作用: 父标签塌陷的问题,所以要先清除浮动
主要有三种方式:
1.固定高度 在父标签中加入一个其他的标签
2.伪元素清楚法 css解决
3.overflow:hidden
伪元素清除法:
.t1:after{
content:' ';
display:block;
clear: both;
}
overflow溢出属性
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow(水平和垂直均设置)
- overflow-x(设置水平方向,只出现x轴的滚动条)
- overflow-y(设置垂直方向,只出现y轴的滚动条)
Z-index属性
#i2 {
z-index: 999;
}
1, z-index值表示谁压着谁,数值大的压盖住数值小的.
2.只有定位了的元素,再能有z-index,也就是说.不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素float不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压着没有定位的元素.
4.从父现象: 父亲怂了,儿子再厉害也没用.
opacity
用来定义透明效果.取值范围是0-1,0是完全透明,1是完全不透明.
练习: 写一个小米商城页面
day044 cssy其他样式 js初识的更多相关文章
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- 转载 yii2-按需加载并管理CSS样式/JS脚本
一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\asset ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- .NET程序员也学Node.js——初识Node.js
清明在石门休了八天假,一眨眼,4月又到中旬了...看到.NET在天朝彻底沦陷而又无能为力,我开始尝试去学习一些新的东西来充实自己,我自然是打死不会去学java的,没有为什么,于是乎,最近开始学习一些前 ...
- js初识
01-Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)
原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
- [Web 前端] 021 js 初识 Javascript
1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- Node.JS初识
对Node.JS的认识 1.Node 是一个服务器端 JavaScript 解释器: 2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高 ...
随机推荐
- Codeforces 797A - k-Factorization
A. k-Factorization 题目链接:http://codeforces.com/problemset/problem/797/A time limit per test 2 seconds ...
- android -------- android studio 中设置创建类时的说明信息(包含 作者 ,创建时间,注释说明等)
今天简单来说一下android studio开发工具中的 一个小设置功能: 在开发过程中我们习惯给新建的类添加一些注释信息,创建日期.时间和作者等. 设置信息 File—>Settings—&g ...
- Myeclipse项目中Source、Projects、Libraries、Order and export含义
Myeclipse 新建一个项目时,会出现如下界面 输入项目名,点击next Source source folder:存放.java源文件的根目录:output folder:.class编译输出的 ...
- memcached的部署
window下memcached注册服务 cmd:在学习Memcached时,为了模拟分布存储,常常需要建多个Memcached服务,如何建呢,只能使用命令行了 以管理员身份运行cmd,输入如下命令 ...
- 关于react16.4——错误边界
过去,组件内的 JavaScript 错误常常会破坏 React 内部状态,并导致它在下一次渲染时产生神秘的错误.这些错误总会在应用代码中较早的错误引发的,但 React 并没有提供一种方式能够在组件 ...
- Java异常及错误
java提供了两种异常机制,可以分为运行时异常(RuntimeException)与检查式异常(checked Exception). 检查式异常:java编译器对于这种异常需要我们对其用try... ...
- hdu-3671-tarjin/割点方案
http://acm.hdu.edu.cn/showproblem.php?pid=3671 给出一幅无向图,询问有多少种移除点对的方案使得剩下的连通分量个数大于1. 和上一题差不多的思路直接做n次t ...
- hdu-5889-最短路+网络流/最小割
Barricade Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- Leetcode 131
class Solution { public: vector<vector<string>> partition(string s) { vector<string&g ...
- Linux在shell中输入历史命令
在Linux的shell中,经常输入的命令有很多雷同,甚至是一样的, 如果是长命令,再次敲一遍效率真的是很低, 不过可以通过Ctl+r, 查找history中以前输入的命令,很是好用. 按Ctrl+ ...