CSS的应用

模块的边框
设置边框样式

border-style::如果是一个值那么表示四个边的样式都一样;如果是两个值那么第一个值代表上下,第二个值代表左右;如果是三个值,第一个值代表上,第二个值代表左右,第三个值代表下;如果是四个值,按顺序代表上、右、下、左,none表示没有边框

dashed:虚线边框

double:双实线边框

solid:实线

dotted:小虚线

也可以单独设置一条到四条边框:border-right-style:设置右边框的样式\

调整边框的粗细

border-width:后面可以跟四个值,顺序和border-style:一致

设置边框的颜色

border-color:后面可以跟四个值,顺序如上

也可以单独设置一条到四条边框的颜色:border-right-color:设置右边框的颜色

border:1px solid yellow;设置边框粗细样式和颜色

border-collapse:collapse;设置表格内相邻边框是否合并(默认不合并,collapse是合并)

模块的边距

使用在块级元素上才有效果

margin-left:左外边距

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin:后面可以跟四个值

padding:内容距离容器的边距 用了padding会使容器增大 上下左右各增加padding的值得大小

DIV(层)的应用

DIV的应用+CSS 用在布局上,比Table布局更有优势,代码量减少并且方便维护

DIV是一个块级元素,多个DIV默认垂直摆放,如果想让这些块级元素水平摆放,使用float:left;

clear:left;清除左浮动

clear:both;清除左右浮动

clear:right;清除右浮动

要最外层box上方与浏览器无缝隙,在CSS中使用margin:0px;``padding:0px;

层的定位
  1. 相对定位:以当前这个层所在的位置为基准进行定位
position: relative;
top:50px;
left:50px;
right: ;
botton: ;
  1. 绝对定位:如果父容器有定位,那么该层会以父容器为基准,如果父容器没有定位,那么该层以网页为基准
position:absolute;
top:50px;
left:50px;
right: ;
botton: ;

z-index:数字越大,层的位置就越上层

overflow:hidden;层中溢出的内容隐藏 scroll;层中会有滚动条

设置鼠标指针

cursor: ;

菜单设置

菜单用无序列表

将无序列表的垂直排列改为水平排列使用浮动:float:left;

把行内元素转化为块级元素:display:block;

HTML基础复习4的更多相关文章

  1. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  2. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  3. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  4. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  5. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  6. Java基础复习笔记系列 四 数组

    Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...

  7. C语言基础复习总结

    C语言基础复习总结 大一学的C++,不过后来一直没用,大多还给老师了,最近看传智李明杰老师的ios课程的C语言入门部分,用了一周,每晚上看大概两小时左右,效果真是顶一学期的课,也许是因为有开发经验吧, ...

  8. JS基础 复习: Javascript的书写位置

    爱创课堂JS基础 复习: Javascript的书写位置复习 js书写位置:body标签的最底部.实际工作中使用书写在head标签内一对script标签里.alert()弹出框.console.log ...

  9. MySQL学习笔记_8_SQL语言基础复习

    SQL语言基础复习 一.概述 SQL语句注释方式 1)以"#"开头直到行尾的所有内容都是注释 2)以"--"(--后还有一个空格)开头直到行尾的所有内容都是注释 ...

  10. Java基础复习笔记基本排序算法

    Java基础复习笔记基本排序算法 1. 排序 排序是一个历来都是很多算法家热衷的领域,到现在还有很多数学家兼计算机专家还在研究.而排序是计算机程序开发中常用的一种操作.为何需要排序呢.我们在所有的系统 ...

随机推荐

  1. 面试 11-00.JavaScript高级面试

    11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...

  2. 多任务-python实现-进程pool(2.1.9)

    @ 目录 1. 概念 2.python代码实现 1. 概念 当需要创建的子进程数量不多时,可以直接利用multiprocessing中的Process动态成生多个进程,但如果是上百甚至上千个目标,手动 ...

  3. matplotlib的学11-image图片

    import matplotlib.pyplot as plt import numpy as np ''' 这一节我们讲解怎样在matplotlib中打印出图像. 这里我们打印出的是纯粹的数字,而非 ...

  4. 容器编排系统K8s之Volume的基础使用

    前文我们聊到了k8s上的ingress资源相关话题,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14167581.html:今天们来聊一下k8s上volum ...

  5. Mysql实现定时清空一张表的旧数据并保留几条数据

    要达到如下目的: Mysql数据库会每隔一段时间(可以是2小时,也可以是一天,这个可以自定义),定时对一张库中的表做一个判断,如果这张表的数据超过了20条(这个数据也是自定义的,也可以是200条),就 ...

  6. sklearn: CountVectorize处理及一些使用参数

    sklearn: CountVectorize处理及一些使用参数 CountVectorizer是属于常见的特征数值计算类,是一个文本特征提取方法.对于每一个训练文本,它只考虑每种词汇在该训练文本中出 ...

  7. Guns自动化生成代码使用

    一.Guns简介 Guns基于Spring Boot2,致力于做更简洁的后台管理系统.包含系统管理,代码生成,多数据库适配,SSO单点登录,工作流,短信,邮件发送,OAuth2登录,任务调度,持续集成 ...

  8. Listary效率快捷键

    快捷键 打开搜索框快捷键: 双击Ctrl键 上一个项目:向上键 下一个项目:向下键/Tap 打开动作:Enter 属性窗口:Ctrl+O (查询)关键字 作用范围:搜索框 使用方法:命令+空格+关键字 ...

  9. Atlas 2.1.0 实践(2)—— 安装Atlas

    在完成Atlas编译以后,就可以进行Atlas的安装了.Atlas的安装主要是安装Atlas的Server端,也就Atlas的管理页面,并确保Atlas与Kafka Hbase Solr等组件的集成. ...

  10. 技术选型关于redis客户端选择

    redis作为分布式缓存框架的首选  相信已经毋庸置疑.能高效.合理的使用好它  必定能提升系统的可用性,高性能.高吞吐量的保障.但选择一个客户端,充分发挥它的能力,就是一个选型问题.现在市场上能选择 ...