（一）水平对齐
1.使用margin属性水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

如果宽度是 100%，则对齐没有效果。

2.使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

3.使用float属性来进行左和右对齐

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

（二）尺寸
尺寸属性：
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-height 设置元素最小高度
min-width 设置元素最下宽度
width 设置元素宽度
（三）分类
分类属性用来控制如何显示元素
clear 设置元素侧面是否允许其他浮动元素

cursor 设置显示的光标类型
crosshair 十字线
pointer 一只手
move 四个方向键
e-resize 向东移动
n-resize 向北移动
text 文本输入光标
wait 加载
help 问号

display 规定元素应该生成的框的类型
none 该元素不会被显示
block 显示为块级元素
inline 显示为内联元素，前后没有换行符

float 定义元素那个方向浮动

position 把元素放置到静态的，相对的，绝对的或者固定的位置中

visibility 设置元素是否可见

默认可见，hidden隐藏

（四）导航条
导航栏 = 链接列表
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：

ul
{
list-style-type:none;
margin:0;
padding:0;
}    去掉圆点和外边距

list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。

a
{
display:block;
width:60px;
} 构建垂直导航栏

display:block - 把链接显示为块元素可使整个链接区域可点击，同时也允许我们规定宽度。
width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。

li
{
display:inline;
}构建水平导航栏的方法之一是将 <li> 元素规定为行内元素
li
{
float:left;
}
a
{
display:block;
width:60px;
} 对列表项进行浮动

float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

（五）图片透明度
opacity 来定义透明度
值的设置从0.0到1.0，值越小，越透明
hover效果

img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}

透明框中的文本

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 400px;
height: 266px;
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
border: 1px solid black;
}

div.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

div.transbox p
{
margin: 30px 40px;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。

css补充的更多相关文章

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...

  4. HTML+CSS补充

    1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...

  5. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  6. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  7. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  8. 前端之CSS：CSS补充

    css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...

  9. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  10. CSS 补充

    属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...

随机推荐

  1. C# 使用GDI制作垂直进度条（由下往上）

    使用GDI+绘进度条的方式多种多样,可以封装一个UserControl,也可以直接使用一个控件来绘制(Label.Image.Panel等),甚至可以直接在winForm上画一个,关键代码没几行(这里 ...

  2. javascript 数字字母组合的随机数

    Math.random()方法用于生成,结果为0-1间的一个伪随机数(包括0,不包括1) ,通常的办法是结合parseInt().Math.floor() 或者 Math.ceil()进行四舍五入处理 ...

  3. SpringBoot入门Demo

    前言:相信做java后台编程的童鞋都知道Spring家族,Spring作为我们项目中必备的框架.JavaSpringBoot号称javaEE的颠覆者,这引起了本Y的好奇,这才花费了一点时间,学习了下s ...

  4. XAMPP的配置与使用

    XAMPP的配置与使用 一.起因 一开始,我在本地手动DIY安装了WAMPP环境,其中经历了很长时间的折腾,原因是独立安装Apache和MySQL,以及PHP的时候,屡次遇到版本兼容问题,我主要的时间 ...

  5. 【Unity3D技术文档翻译】第1.4篇 AssetBundle 依赖关系

    上一章:[Unity3D技术文档翻译]第1.3篇 创建 AssetBundles 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Develo ...

  6. C语言学习之插入排序

    此前的一些博文分别写了C语言中经典的排序方式,选择排序 冒泡排序 桶排序,此文就写 插入排序吧. 相对于冒泡排序,插入排序就比较方便快捷了.和冒泡 选择排序一样,插入排序也需要比较大小.可以这样理解插 ...

  7. 新手最纠结的事。学什么语言最好？学什么语言有前途（or 钱途）？

    这篇文章是转载自王根的博客,源地址:http://www.yinwang.org/blog-cn/2017/07/06/master-pl ,虽然王根是一个备受争议的人,不过这篇文章写的很好,我对于编 ...

  8. 依赖于boodtrap3的插件推荐以及bootrap发展前景

    作为一个栅格系统和速度开发的,偏向于框架,bootstrap出来很火,为了节省效率,不少公司选用这个框架进行开发,一同被发现的是依赖于bootrap各种插件的adminLTE的集成模版,但是前端框架日 ...

  9. try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后?

    这是一道面试题,首先finally{}里面的code肯定是会执行的,至于在return前还是后, 看答案说的是在return后执行,我觉得不对,百度了一下,有说return前的,有说return后的, ...

  10. iOS视频直播

    视频直播技术点 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, ...