html音乐MV布局设计,html部分---格式与布局；

一：position：fixed(相对于浏览器窗口来对元素进行定位)

.aa

{

position:fixed;

left:5px;

top:5px;

}

.bb

{

position:fixed;

top:5px;

left:30px;

}

文字

文字

二，position absolute  绝对定位

.aa

{

position:absolute;

left:50px;

top:80px

}

大学生创业

通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 50px，距离页面顶部 80px。

三 position relactive  相对定位

.aa

{

position:relative;

left:-20px

}

.bb

{

position:relative;

left:20px

}

这是位于正常位置的标题

相对定位会按照元素的原始位置对该元素进行移动。

相对于其正常位置向左移动

样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。

相对于其正常位置向右移动

样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

四 分层(z-index)

.aa

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

这是一个标题

默认的 z-index 是 0。Z-index -1 拥有更低的优先级。

.aa

{

position:absolute;

left:0px;

top:0px;

z-index:1

}

这是一个标题

默认的 z-index 是 0。Z-index 1 拥有更高的优先级。

五 float 流

.aa{

float:left;}

1

2

3

前

后

float的例题

#menu{ width:900px; height:50px; float:left}

.list{ float:left; width:100px; height:50px; text-align:center; vertical-align:middle; line-height:50px; background-color:#3FC; margin-left:10px}

首页

作业管理

作业检查

作业查看

发布作业

display 控制显示样式  (显示与隐藏)

display:none 表示不显示；

display:block 显示；

#s1{ width:100px; height:100px; background-color:#F00; display:inline-block}

测试文字 和标签不能通过width height进行调整大小，但display:inline-block能控制它的大小；

visibility 控制显示与隐藏

#d5{ width:100px; height:100px; background-color:#666; visibility:hidden}

visibility:hidden表示隐藏

overflow 超出部分控制；

超出部分隐藏；

#d7{ width:100px; height:100px; overflow:hidden}

蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时

透明处理

#d8{ width:200px; height:200px; background-color:black;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}

圆角处理border-radius:20px;--20表示半径

#d1{width:100px; height:100px; background-color:#000; display:block;border-radius:20px;}

阴影处理

#d2{width:100px; height:100px; background-color:#666; display:block;border-radius:20px;box-shadow:0 0 50px white;}

鼠标变小手 cursor:pointe；

transform:rotate(45deg)；旋转45度

布局出该效果

提示：使用DIV的border样式，调整边框粗细出现该效果，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。

给title加图片

无标题文档

鼠标放上：

要求：鼠标放上的过程中文字位置不移动。

提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39

*{ font-style:微软雅黑; color:#333;}

#d1 { width:500px; height:52px; font-style:微软雅黑; color:#333; border:1px solid #e9e9e9; }

#d1 div{ width:100px; height:50px;float:left; font-weight:bold;text-align:center; vertical-align:middle; line-height:50px; border-top:2px solid #FFF}

#d1 div:hover{ background-color:#b3b6bb; border-top-color:#F00; color:#fff;}

春节

元宵节

端午节

中秋节

国庆节

添加背景音乐

9月11日上午HTML有序列表、无序列表、网页的格式和布局

样式表 六.列表方块 1.有序列表变无序列表

1. 张店
2. 桓台
3. 淄川

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

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

   css样式表 格式与布局

   1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器

   样式表分类: 1.内联样式表, 和html联合显示,例:

   内联样式表

   2.内嵌样式表 作为一个独 ...

   css样式，边界和边框，格式和布局

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

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

   90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

   HTML基础(五)——-css样式表——样式属性——格式与布局

   一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:a ...

   从图片中提取html格式的布局

   制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...

   HTML--CSS样式表--格式与布局

   一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如:

   网页标题

   随机推荐

   Hibernate 查询方式(HQL/QBC/QBE)汇总

   作为老牌的 ORM 框架,Hibernate 在推动数据库持久化层所做出的贡献有目共睹. 它所提供的数据查询方式也越来越丰富,从 SQL 到自创的 HQL,再到面向对象的标准化查询. 虽然查询方式有点 ...

   Kernel Time和User Time分别指什么

   比如你的一个程序读取并分析一个文件,读取时会调用系统接口,系统会调用驱动来从物理设备上读取数据这个就是kernel time,除此以外在你自己进程上下文中执行代码占用的时间就是user time了. ...

   Pet Shop4.0

   http://blog.csdn.net/RainyLin/article/details/1769947

   何谓Dandy？它是一种着装风格

   何谓Dandy?它是一种着装风格_女性_腾讯网 何谓Dandy?它是一种着装风格 2012年02月17日09:47腾讯专稿我要评论(0) 字号:T|T   何谓Dandyism?它是一种风格,词根Da ...

   Java各种工具下载

   http://yunpan.cn/cyUzqFTu8pEER  提取码 355c  myeclipse2013 http://yunpan.cn/cyUzPi7nC8Z9S  提取码 fc4b  my ...

   关于Meta标签中format-detection属性及含义

   一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

   jqgrid表头上面再加一行---二级表头

   实现效果如图,代码如下: $( "#table_list_1" ).jqGrid( 'setGroupHeaders' , { useColSpanStyle : true , / ...

   Pycharm+Python+PyQt5使用

   https://www.cnblogs.com/dalanjing/p/6978373.html

   UVALive-3989 Ladies' Choice (稳定婚姻问题)

   题目大意:稳定婚姻问题.... 题目分析:模板题. 代码如下: # include # include # include

   简单的web小程序

   首先我们先编写一个jsp表面的程序, <%@ page language="java" contentType="text/html; charset=UTF-8& ...