html部分---格式与布局；
一：position：fixed（相对于浏览器窗口来对元素进行定位）
<style type="text/css">
.aa
{
position:fixed;
left:5px;
top:5px;
}
.bb
{
position:fixed;
top:5px;
left:30px;
}
</style>
</head>
<body>
<p class="aa">文字</p>
<p class="bb">文字</p>
二，position absolute 绝对定位
<style>
.aa
{
position:absolute;
left:50px;
top:80px
}
</style>
</head>
<body>
<h2 class="aa">大学生创业</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 50px，距离页面顶部 80px。</p>
</body>
三 position relactive 相对定位
<style>
.aa
{
position:relative;
left:-20px
}
.bb
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<h2 class="aa">相对于其正常位置向左移动</h2>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<h2 class="bb">相对于其正常位置向右移动</h2>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
四 分层（z-index）
<style>
.aa
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="aa" src="../新建文件夹/psb.jpg">
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
<style>
.aa
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="aa" src="QQ截图20161031090629.png"/>
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
五 float 流
<style>
.aa{
float:left;}
</style>
</head>
<body>
<div class="aa">1</div>
<div class="aa">2</div>
<div class="aa">3</div>
前
后
float的例题
<style>
#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}
</style>
</head>
<body>
<div id="menu">
<div class="list">首页</div>
<div class="list">作业管理</div>
<div class="list">作业检查</div>
<div class="list">作业查看</div>
<div class="list">发布作业</div>
</div>
<div style="clear:both"></div> 清流，防止使用流时出现错误
display 控制显示样式 （显示与隐藏）
display:none 表示不显示；
display:block 显示；
#s1{ width:100px; height:100px; background-color:#F00; display:inline-block}
<span id="s1">测试文字</span> <span>和<a>标签不能通过width height进行调整大小，但display:inline-block能控制它的大小；
visibility 控制显示与隐藏
#d5{ width:100px; height:100px; background-color:#666; visibility:hidden}
<div id="d5"></div>
visibility:hidden表示隐藏
overflow 超出部分控制；
超出部分隐藏；
<style>
#d7{ width:100px; height:100px; overflow:hidden}
</style>
</head>
<body>
<div id="d7">蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时</div>
透明处理
<style>
#d8{ width:200px; height:200px; background-color:black;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}
</style>
</head>
<body>
<div id="d8"></div>
圆角处理border-radius:20px;--20表示半径
#d1{width:100px; height:100px; background-color:#000; display:block;border-radius:20px;}
<div id="d1"></div><br />
阴影处理
#d2{width:100px; height:100px; background-color:#666; display:block;border-radius:20px;box-shadow:0 0 50px white;}
<div id="d2"></div>
鼠标变小手 cursor:pointe；
transform:rotate(45deg)；旋转45度
<div style=" width:50px; height:50px; border-bottom:2px solid #006; border-left:2px solid #006;transform:rotate(45deg)"></div>
布局出该效果
提示：使用DIV的border样式，调整边框粗细出现该效果，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。
<div style=" width:200px; height:200px; border-top:3px solid #333"> <div style=" margin-top:10px; border-left:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid transparent; border-top:100px solid #309"></div> </div>
给title加图片
<title>无标题文档</title>
<link rel="shortcut icon" href="psb.jpg"/>
鼠标放上：
要求：鼠标放上的过程中文字位置不移动。
提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39
<style>
*{ 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;}
</style>
</head>
<body>
<div id="d1">
<div>春节</div>
<div>元宵节</div>
<div>端午节</div>
<div>中秋节</div>
<div>国庆节</div>
</div>
添加背景音乐
html部分---格式与布局；的更多相关文章
- 9月11日上午HTML有序列表、无序列表、网页的格式和布局
样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开 ...
- css样式表：样式分类，选择器。样式属性，格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- css样式，边界和边框，格式和布局
1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）
一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
- HTML基础（五）——-css样式表——样式属性——格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 绝对位置: 1.外层没有position:a ...
- 从图片中提取html格式的布局
制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...
- HTML--CSS样式表--格式与布局
一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如: <head> <title>网页标题</title> <s ...
随机推荐
- JNI与NDK简介
最近稍微了解一下JNI和NDK. 网上各种教程给人一种二者不分的感觉, 经过自己运行代码, 将两者的关系理了一下. 就目前了解,JNI应该是java自带的一种调用c和c++等语言(native cod ...
- AFNetworking、MKNetworkKit和ASIHTTPRequest对比
之前一直在使用ASIHTTPRequest作为网络库,但是由于其停止更新,iOS7上可能出现更多的问题,于是决定更换网络库. 目前比较流行的网络库主要有AFNetworking和MKNetworkKi ...
- 使用icon替换你的网页图标（转）
第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后 ...
- 记录一些容易忘记的属性 -- UIButton
//设置按钮文字字体(这个只在自定义button时有效) btn1.titleLabel.font = [UIFont systemFontOfSize:30]; showsTouchWhenH ...
- STM32之RTC配置与初始化-rtc.h rtc.c
<rtc.h> #include "stm32f10x.h" #ifndef _RTC_H #define _RTC_H typedef struct { vu8 ho ...
- Volatile vs VolatileRead/Write?
You should never use Thread.VolatileRead/Write(). It was a design mistake in .NET 1.1, it uses a ful ...
- Java选择结构、循环结构
1:switch语句(掌握) (1)格式: switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; ... default: 语句体n+1; ...
- PHP_ArrayList
<?php //遍历数组的2种方式 $arr=array( "1"=>"hello", "2"=>"my&q ...
- C语言基础:进制转换,变量,常量,表达式,基本数据类型,输出函数,输入函数,运算符. 分类： iOS学习 c语言基础 2015-06-10 21:39 25人阅读 评论(0) 收藏
二进制:以0b开头,只有0和1两种数字.如0101 十进制:0~9十个数字表示.如25 十六进制:以0~9,A~F表示,以0X开头.如0X2B 十进制转换为X进制:连除倒取余 X进制转换为十进制:按权 ...
- 学习笔记：只有一套app设计稿（5s尺寸）切出4和4s尺寸以及安卓系统主流尺寸的图
如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417 版权归原作者所有 目前ios手机 ...