HTML 格式与布局

一、position：fixed

　　锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。

二、position：absolute

　　1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。

　　2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。

示例：

三、position：relative

　　相对位置。

　　如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。

示例：

四、分层（z-index）

　　在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

　　在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？如下：

示例：

五、float：left、right

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

　　overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；

　　<div style="clear:both"></div> //截断流

设置超链接的样式示例：

附：cursor：pointer 鼠标指到上面时的形状

&copy 版权符号©

半透明效果：

在样式表中的代码为：

.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}

老师讲解

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p
{
    text-decoration:underline;
    color:#F00;}
.qq
{
    font-size:48px;
    color:#0F0;}
#ww
{
    color:#90F;
    font-size:60px;
    text-decoration:overline;}
</style>
</head>

<body style="background-color:#3FF; font-size:36px;">
123<p>今天突然冷了。</p>
<div class="qq">三月二十三日</div>
<span id="ww">淄博汉企。
</span>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#a
{
    border:2px solid blue;
    height:100px;
    width:100px;
    background-color:#0F6;
    right:60px;
    bottom:70px;
    position:fixed;}
.b
{
    border:2px solid blue;
    height:100px;
    width:100px;
    background-color:#0F6;
    right:0px;
    bottom:0px;
    position:absolute;}
.c
{
    border:2px solid red;
    width:400px;
    height:200px;}
.d
{
    border:2px solid red;
    width:400px;
    height:200px;
    position:absolute;}
#aaa
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:30px;
    top:30px;
    position:fixed;}
#bbb
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:30px;
    top:30px;
    position:relative;}
</style>
</head>
<body>
<div id="a">广告招商</div>
<div class="c">c<div class="b">b</div></div>
<div class="d">d<div class="b">bb</div></div>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#aaa
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:30px;
    top:30px;
    position:fixed;
    overflow:visible;
    }
#bbb
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:60px;
    top:60px;
    position:relative;}
#ccc
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:right;}
    #ddd
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:left;}
</style>
</head>
<body><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="ccc">广告位置招商</div><div id="ddd">广告位ddd</div><div id="ddd">广告位eee</div><div id="ccc">广告位置招商fff</div>
<!--<div id="aaa">aaa<div id="bbb">bbb</div></div> -->
</body>
</html>

自己练习

360导航页面制作

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360导航布局</title>
<style>
#daohang
{
    border:2px solid #CCC;
    height:60px;
    width:1000px;
    left:110px;
    background-color:#FFF;
    z-index:2;
    position:fixed;}  
#zuodaohang
{
    border:2px solid #CCC;
    height:500px;
    width:50px;
    left:0px;
    background-color:#FFF;
    top:90px;
    position:fixed;}
#youzhiding
{
    border:2px solid #CCC;
    height:50px;
    width:50px;
    right:70px;
    bottom:30px;
    position:fixed;}
#a
{
    border:2px solid #CCC;
    height:315px;
    width:220px;
    left:110px;
    top:110px;
    background-color:#FFF;
    position:absolute;}
#b
{
    border:2px solid #ccc;
    height:380px;
    width:750px;
    left:360px;
    top:110px;
    background-color:#FFF;
    position:absolute;}
#c
{
    border:2px solid #ccc;
    height:160px;
    width:220px;
    left:110px;
    top:450px;
    background-color:#fff;
    font-size:13px;
    position:absolute;}
#d
{
    border:2px solid #ccc;
    height:500px;
    width:750px;
    left:360px;
    top:515px;
    background-color:#fff;
    position:absolute;}
#e
{
    border:2px solid #ccc;
    height:1960px;
    width:220px;
    left:110px;
    top:635px;
    background-color:#fff;
    position:absolute;}
#f
{
    border:2px solid #ccc;
    height:1350px;
    width:750px;
    left:360px;
    top:1040px;
    background-color:#FFF;
    position:absolute;}
#g
{
    border:2px solid #ccc;
    height:180px;
    width:750px;
    left:360px;
    top:2415px;
    background-color:#fff;
    position:absolute;}
#h
{
    border:2px solid #ccc;
    height:500px;
    width:1000px;
    left:110px;
    top:2625px;
    background-color:#fff;
    position:absolute;}
#lianxi
{
    border:2px solid #ccc;
    height:50px;
    width:1000px;
    left:110px;
    top:3155px;
    background-color:#CCC;
    position:absolute;}
    a:link
    {
        text-decoration:none;
        color:#000;}
        a:visited
        {
            text-decoration:none;
            color:#000;}
            a:hover
            {
                text-decoration:underline;
                color:#F90;}
                a:active
                {
                    text-decoration:underline;
                    color:#F60;}
</style>
</head>
<form>
<body background="../0319学习/PIC_20140308_211545_490.jpg" topmargin="20" >
<a name="top"></a>
<div id="daohang">
<table>
<tr height="25" align="center"><td width="900">
网页&nbsp;&nbsp;&nbsp;&nbsp;
新闻&nbsp;&nbsp;&nbsp;&nbsp;
视频&nbsp;&nbsp;&nbsp;&nbsp;
图片&nbsp;&nbsp;&nbsp;&nbsp;
音乐&nbsp;&nbsp;&nbsp;&nbsp;
微博&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://ditu.so.com/?ie=utf-8&src=hao_360so_d&t=map&k=" target="_blank">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
问答&nbsp;&nbsp;&nbsp;&nbsp;
购物&nbsp;&nbsp;&nbsp;&nbsp;
机票&nbsp;&nbsp;&nbsp;&nbsp;
汽车
</td></tr>
<tr height="25" align="center"><td>
<select size="1">
<option>综合搜索</option>
<option>360搜索</option>
<option>必应搜索</option>
<option>Google</option>
</select>
<input type="text" value="" style="width:300px"/>
<input type="button" value="搜索"/>
</td></tr>
<tr height="10"><td></td></tr>
</table>
</div>
<div id="zuodaohang">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr height="75"><td width="40"></td></tr>
<tr height="70"><td width="40"><a href="http://top.so.com/" target="_blank">热门</a></td></tr>
<tr height="70"><td width="40"><a href="http://www.huajiao.com/?src=hao360_sidebar" target="_blank">直播</a></td></tr>
<tr height="70"><td width="40"><a href="http://wan.360.cn/?src=hao-cbl-top01&realtime" target="_blank">游戏</a></td></tr>
<tr height="70"><td width="40"><a href="http://mall.360.com/" target="_blank">智能</a></td></tr>
<tr height="70"><td width="40"><a href="http://fuwu.hao.360.cn/movie?from=zuocetu" target="_blank">电影</a></td></tr>
<tr height="75"><td width="40"></td></tr>
</table>
</div>
<div id="youzhiding">
<a href="#top"><img src="../0319学习/PIC_20140308_011700_89D.jpg" width="50" height="50" title="置顶"/></a>
</div>
<div id="a">
<table border="0" cellpadding="0" cellspacing="0" >
<tr align="center" height="44">
<td width="110">新闻·视频</td>
<td width="110">电影·电视剧</td>
</tr>
<tr align="center" height="44">
<td>购物·海淘</td>
<td>彩票·理财</td>
</tr>
<tr align="center" height="44">
<td>活期·定期</td>
<td>小说·智能</td>
</tr>
<tr align="center" height="44">
<td>游戏·小游戏</td>
<td>动漫·直播秀</td>
</tr>
<tr align="center" height="44">
<td>搞笑·解梦</td>
<td>教育·度假</td>
</tr>
<tr align="center" height="44">
<td>查询·星座</td>
<td>机票·火车票</td>
</tr>
<tr align="center" height="44">
<td>手机·娱乐</td>
<td>好药·旅游</td>
</tr>
</table>
</div>
<div id="b">
<table>
<tr align="center" height="40">
<td width="125">360搜索·商城</td>
<td width="125"><a href="http://www.sina.com.cn/" target="_blank">新浪</a>·<a href="http://weibo.com/?c=spr_web_360_hao360_weibo_t001" target="_blank">微博</a></td>
<td width="125">天猫·精选</td>
<td width="125">搜狐·视频</td>
<td width="125">网易·邮箱</td>
<td width="125">凤凰·军事</td>
</tr>
<tr align="center" height="40">
<td>360游戏</td>
<td><a href="http://www.taobao.com/" target="_blank">淘宝网</a></td>
<td>网上购物</td>
<td>百度·热搜</td>
<td>360·手机卫士</td>
<td>携程旅游</td>
</tr>
<tr align="center" height="40">
<td>爱淘宝</td>
<td>360影视</td>
<td>聚划算</td>
<td>国美在线</td>
<td>东财·理财</td>
<td>央视网·直播</td>
</tr>
<tr align="center" height="40">
<td>京东商城</td>
<td>58同城</td>
<td>太平洋电脑</td>
<td>世纪佳缘</td>
<td>同程旅游</td>
<td>中关村在线</td>
</tr>
<tr align="center" height="40">
<td>汽车之家</td>
<td>易车网</td>
<td>太平洋汽车</td>
<td>安居客</td>
<td>折800</td>
<td>苏宁易购</td>
</tr>
<tr align="center" height="40">
<td>驴妈妈旅游</td>
<td>人民·新华</td>
<td>赶集网</td>
<td>当当网</td>
<td>途牛旅游</td>
<td>1号店</td>
</tr>
<tr align="center" height="40">
<td>珍爱婚恋网</td>
<td>乐居二手房</td>
<td>亚马逊</td>
<td>艺龙网</td>
<td>去哪儿网</td>
<td>沪江网校</td>
</tr>
<tr align="center" height="40">
<td>蘑菇街</td>
<td>宜人贷</td>
<td>唯品会</td>
<td>聚美优品</td>
<td>搜房网</td>
<td>12306官网</td>
</tr>
<tr align="center" height="40">
<td>猎聘网</td>
<td>工商银行</td>
<td>陆金所理财</td>
<td>六间房</td>
<td>携程机票</td>
<td>大主宰</td>
</tr>
</table>
</div>
<div id="c">
<table>
<tr height="80" align="center">
<td><a href="http:www.baidu.com/" target="_blank"><img src="../素材/t0131621f97ee84f9d3.jpg" height="80" width="210" title="百度"><a/></td>
</tr>
<tr height="40" align="center">
<td width="210"><a href="http://www.huajiao.com/pc" target="_blank">德云社陈九福家里直播说贯口</a></td>
</tr>
<tr height="40" align="center">
<td><a href="http://www.360kan.com/special/person1.html" target="_blank">看《太阳的后裔》与仲基“恋爱”</a></td>
</tr>
</table>
</div>
<div id="d">d</div>
<div id="e">e</div>
<div id="f">f</div>
<div id="g">g</div>
<div id="h">h</div>
<div id="lianxi">
<table>
<tr height="15"><td width="900"></td></tr>
<tr height="20" align="center"><td><a href="http://www.cnblogs.com/yy01/" target="_blank">关于我们</a></td></tr>
<tr height="15"><td></td></tr>
</table>
</div>
</form>
</body>
</html>

posted @ 2016-03-25 10:17 Yao1101 阅读(888) 评论(0) 编辑收藏举报

Yao1101

HTML 格式与布局

半透明效果：

公告