css基础:格式与布局
1.定位:position:fixed;锁定位置,相当于屏幕位置锁定,不随页面移动。
position:absolute;绝对位置,相对于页面定位,随页面移动。
position:relative;相对位置,相对于页面内周边元素的位置,要注意与周围元素的关系,避免相互排挤。
2.其他属性:z-index:n;该层设置为第n层,三维布局,在z轴方向分层,可理解为摞纸。
float:left;横向左侧排列,横向流式布局,超出边框后自动排在下一行;right 横向右侧排列。
overflow:hidden;超出部分隐藏;scroll 显示出滚动条。
min-width:4px;最小宽度。
border-radius:5px;边框圆角,可填像素或百分比。
box-shadow:5px 5px 5px black;边框阴影:向右 向下 虚化5px 黑色。
text-shadow:5px 5px 5px black;文字阴影:向右 向下 虚化5px 黑色。
transition:0.5s;渐变效果,变化时间为0.5s。
transform:rotate(360deg);旋转360度。
margin-left:10px;向右平移10px。
opacity:0.5;半透明效果,50%透明效果
a:hover {color:red;鼠标指向链接时颜色变为红色;cursor:pointer;鼠标指到上面时的形状;}
css基础:格式与布局的更多相关文章
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- css基础-2 div布局
div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开 ...
- css样式表:样式分类,选择器。样式属性,格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- 前端总结·基础篇·CSS(一)布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- css样式,边界和边框,格式和布局
1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...
随机推荐
- 浅谈lvs和nginx的一些优点和缺点
借鉴一些网上资料整理了简单的比较: LVS的负载能力强,因为其工作方式逻辑非常简单,仅进行请求分发,而且工作在网络的第4层,没有流量,所以其效率不需要有过多的忧虑. LVS基本能支持所有应用,因为工作 ...
- perl的INC设置
perl中的INC变量中包含了所有的perl module的查找路径. 可以使用perl -V 来查看INC的值. 1)默认地INC如下: @INC: C:/Perl/site/lib C ...
- CentOS服务器运维监控Nagios(一)
CentOS下搭建Nagios 王尚 2014.11.09 操作系统:CentOS-6.5-i386-bin-DVD1.iso 安装在VM中进行测试的. 本章需要的软件链接: php-5.3.2.ta ...
- NOIP 2001 提高组 题解
NOIP 2001 提高组 题解 No 1. 一元三次方程求解 https://vijos.org/p/1116 看见有人认真推导了求解公式,然后猥琐暴力过的同学们在一边偷笑~~~ 数据小 暴力枚举即 ...
- 实例甜点 Unreal Engine 4迷你教程(6)之三个重要基础操作SpawnActor、TArray的Add和Remove
本小节的教程需要完成前置教程:建议阅读<实例甜点 Unreal Engine 4迷你教程(5)>,因为5里面提到了本节的工程,不过也可以在不看5的前提下直接阅读本教程. 第一步:Empty ...
- python进阶(3):模块和包
之前两天我们介绍了一些比较常用的模块,而我也说过会讲解什么是模块,今天我们就来分析分析模块和包,模块我们现阶段使用还可以而包的话现阶段我们基本很少会用到包,学的不是很清楚也没关系这些东西都是用的多了也 ...
- Bat脚本自动卸载软件-静默执行
通过Bat脚本卸载软件,原理是得到某软件的ProductCode,然后通过MsiExec.exe命令卸载软件,下面是卸载一个产品的基本代码示例: set ML4.0HF4Name=Product4.0 ...
- Eclipse中将hadoop项目放在集群中运行
1.加入配置文件到项目源码目录下(src) <configuration> <property> <name>mapreduce.framework.name< ...
- 关于ftp出现425错误
在centos上搭建一个ftp,一切都配置好之后,我去访问时仍然会出现425 Failed to establish connection.这个错误,经过一番查找,原来是这个 -A INPUT -j ...
- Java面试题大全
前言 关于赢在面试的Java题系列基本收集整理完成了,所有题目都是经过精心挑选的,很基础又考验求职者的基本功,应该说被面试到的几率很大.这里整理挑选出来供大家面试前拿来看一看,所有题目整理自网络,有一 ...