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基础:格式与布局的更多相关文章

  1. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  3. css基础-2 div布局

    div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...

  4. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  6. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  7. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  8. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  10. css样式,边界和边框,格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

随机推荐

  1. super 与 this 同时使用问题

    大家都知道this 和 super 调用构造函数时都必须放在第一句,今天同学问我的一个问题有点意思. 那么:我怎么在子类中 显式的用 super 初始化父类同时用 this 初始化子类? ------ ...

  2. Java之IO流概述和File基本操作

    IO流图解 IO(in / out)流的分类 流向: 输入流  读取数据 输出流  写出数据 数据类型: 字节流 一个字节占8位, 以一个字节为单位读数据 八大数据类型所占字节数: byte(1), ...

  3. 【转载】linux C …

    原文地址:[转载]linux C 获取与修改IP地址作者:liuhong1.happy // setip.h #ifndef _INCLUDE_SETIP_H_ #define _INCLUDE_SE ...

  4. ASP.NET Core MVC Tag Helpers 介绍

    简介 Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能.将它们添加到视图中,会经过Razor模板引擎处理并创建一个HTML,之后再返回给浏览器.有一些Tag Helpers,其实 ...

  5. ABP+AdminLTE+Bootstrap Table权限管理系统第八节--ABP错误机制及AbpSession相关

    上一节我们讲到登录逻辑,我做的登录逻辑很简单的,我们来看一下abp module-zero里面的登录代码. #region Login / Logout public ActionResult Log ...

  6. NYOJ--139--我排第几个(康托展开)

    我排第几个 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在有"abcdefghijkl"12个字符,将其所有的排列中按字典序排列,给出任意一 ...

  7. NYOJ--1276--机器设备(河南省第九届省赛,简单的bfs)

    机器设备 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 Alpha 公司设计出一种节能的机器设备.它的内部结构是由 N 个齿轮组成.整个机器设备有 一个驱动齿轮,当 ...

  8. 移动端https抓包那些事--进阶篇

    上一次和大家介绍了手机端https抓包的初级篇,即在手机未root或者未越狱的情况下如何抓取https流量,但是当时分析应用时会发现,好多应用的https的流量还是无法抓取到,这是为什么呢? 主要原因 ...

  9. 干货--Excel的表格数据的一般处理和常用python模块。

    写在前面: 本文章的主要目的在于: 介绍了python常用的Excel处理模块:xlwt,xlrd,xllutils,openpyxl,pywin32的使用和应用场景. 本文只针对于Excel表中常用 ...

  10. js数组去重方法分析与总结

    数组去重经常被人拿来说事,虽然在工作中不常用,但他能够很好的考察js基础知识掌握的深度和广度,下面从js的不同阶段总结一下去重的方法. ES3阶段 该阶段主要通过循环遍历数组从而达到去重的目的 多次循 ...