2016年10月27日--格式布局

时间：2016-10-28 20:19:53 阅读：158 评论：0 收藏：0 [点我收藏+]

标签：art play 小练习 ges ace pad 9.png charset www

格式布局

1、position：fixed

相对于浏览器窗口来对元素进行定位

position：fixed

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">字字字字字</p>
<p class="two">字字字字字</p>

</body>
</html>

示例

2、position：absolute

使用绝对值来对元素进行定位

position：absolute

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">绝对定位</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

示例

3、position：relative

相对于一个元素的正常位置来对其定位

position：relative

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<h2 class="pos_left">相对于其正常位置向左移动</h2>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<h2 class="pos_right">相对于其正常位置向右移动</h2>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

示例

4、分层（z-index）

Z-index可被用于将在一个元素放置于另一（些）元素之后或之前

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

img在后

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="http://files.cnblogs.com/files/hqxc/001.ico" /> 
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>

</html>

img在前

5、float：left，right

　　float 属性定义元素在哪个方向浮动。

float

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>添加一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="http://files.cnblogs.com/files/hqxc/001.ico" />
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>
</body>

</html>

示例

小练习：

　　1.菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
.aa {
    width: 80px;
    height: 40px;
    background-color: #0000ff;
    position: relative;
    top: 100px;
    left: 300px;
    overflow: hidden;
    transition: 0.7s;
}
.aa:hover {
    overflow: visible;
    background-color: #FFB600;
}
.a1 {
    width: 80px;
    height: 120px;
    background-color: #FFff04;
    position:relative;
    top: 40px;
    left: 0px;
}
.a2 {
    width: 80px;
    height: 40px;
    float: left;
    overflow: hidden;

}
.a2:hover {
    overflow: visible;
    background-color: #FFB600;
}
.a3 {
    width: 240px;
    height: 40px;
    position: relative;
    left: 80px;}
.a4 {
    width: 80px;
    height: 40px;
    position:relative;
    float:left;
}
.a5 {
    width: 80px;
    height: 40px;
    position:relative;
}
</style>
</head>

<body>
<div class="aa" style="">
<div style="position:absolute;"></div>
  <div class="a1">
    <div class="a2" style="background-color:#FFff04">
      <div class="a3" style="background-color:#FF0004">
        <div class="a4" style="background-color:#FFB600">1</div>
        <div class="a4" style="background-color:#FF0004">2</div>
        <div class="a4" style="background-color:#FFB600">3</div>
      </div>
    </div>
    <div class="a2" style="background-color:#FF0004">
      <div class="a3" style="background-color:#FF0004">
        <div class="a4" style="background-color:#FFB600">11</div>
        <div class="a4" style="background-color:#FF0004">22</div>
        <div class="a4" style="background-color:#FFB600">33</div>
      </div>
      </div>
    <div class="a2" style="background-color:#00ff04">
      <div class="a3" style="background-color:#FF0004;width: 80px;">
        <div class="a5" style="background-color:#FF0004">111</div>
        <div class="a5" style="background-color:#FFB600">222</div>
        <div class="a5" style="background-color:#FF0004">333</div>
      </div>
      </div>
  </div>
</div>
</body>
</html>

结果

　　2.仿照页面布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style></style>
<link href="360.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form>
  <div id="top">
    <div id="index" class="topp"> 设置360导航为首页 </div>
    <div id="topr" class="topp"> 互联网 | 反馈 | 换肤 </div>
  </div>
  <div style="width:1000px;height:2300px; margin-left:auto; margin-right:auto; position:relative; margin-bottom:50px;">
    <div style="height:50px;">
      <div style="width:193px; height:50px; background-image:url(images/t0151320b1d0fc50be8.png); background-repeat:no-repeat; background-position:center; position:relative; float:left;"></div>
      <div style=" position:relative; float:left; border:1px solid #000000; width:420px; height:50px;">天气www</div>
      <div class="topp2">万年历</div>
      <div class="topp2">
        <input type="text" placeholder="邮箱账号" />
      </div>
    </div>
    <div class="sousuo">
      <div style=" margin-left:200px; width:600px;position:absolute;">
        <ul style="list-style:none;position:relative;">
          <li class="ssli">X1</li>
          <li class="ssli">X2</li>
          <li class="ssli">X3</li>
          <li class="ssli">X4</li>
          <li class="ssli">X5</li>
          <li class="ssli">X6</li>
          <li class="ssli">X7</li>
          <li class="ssli">X8</li>
        </ul>
      </div>
      <div style=" float:left; left:200px; top:50px; width:500px; height:30px; border:1px solid #000000;position:relative;">
        <div style=" left:-200px; width:193px; height:33px; position:relative; background-image:url(images/so.png); background-repeat:no-repeat;"></div>
      </div>
      <div style=" float:left; left:210px; top:50px; width:100px; height:30px; border:1px solid #000000;position:relative; line-height:30px;">搜一下</div>
    </div>
    <div class="sousuo" style="height:80px;">
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FFB600;">推荐网站</div>
      <div class="tuijian" style="background-color:#FF0004;">新闻头条</div>
      <div class="tuijian" style="background-color:#FFB600;">333333</div>
      <div class="tuijian" style="background-color:#FF0004; width:30px; font-size:16px; line-height:20px;">静音</div>
    </div>
    <div class="zhuti">
      <div class="zi" style="height: 269px; line-height:269px; background-image:url(cut/1.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 117px; line-height:117px; background-image:url(cut/4.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 276px; line-height:276px; background-image:url(cut/6.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/12.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/13.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; background-image:url(cut/14.png);">背景切图</div>
      <div class="zi" style="height: 245px; line-height:245px; border-botton:0px;background-image:url(cut/15.png);">背景切图</div>
      <div class="zi" style="height: 79px; line-height:79px; border-top:0px;background-image:url(cut/17.png);">背景切图</div>
    </div>
    <div style="left:10px; width:748px;" class="zhuti">
      <div class="zi" style="height: 258px;line-height:258px; background-image:url(cut/2.png);">背景切图</div>
      <div class="zi" style=" margin-top: 10px;height: 40px;line-height:40px; font-size:30px; background-image:url(cut/3.png);">背景切图</div>
      <div class="zi" style=" margin-top: 10px;height: 215px;line-height:215px; background-image:url(cut/5.png);">背景切图</div>
      <div class="zi" style="height: 32px;line-height:32px; border:0px; background-color:#DBD6D6;font-size:30px; background-image:url(cut/7.png);">背景切图</div>
      <div class="zi" style="height: 249px;line-height:249px; border:0px; background-image:url(cut/8.png);">背景切图</div>
      <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/9.png);">背景切图</div>
      <div class="zi" style="height: 219px;line-height:219px; border:0px; background-image:url(cut/10.png);">背景切图</div>
      <div class="zi" style="height: 399px;line-height:399px; border:0px; background-image:url(cut/11.png);">背景切图</div>
      <div class="zi" style="margin-top: 10px;height: 80px;line-height:80px; border:0px;background-image:url(cut/16.png);">背景切图</div>
    </div>
    <div style=" margin-top:10px;height: 230px;" class="zhong">
      <div class="z1" style="background-image:url(cut/18.png);">背景切图</div>
      <div class="z1" style="background-image:url(cut/19.png);">背景切图</div>
      <div class="z1" style="border-right:1px solid #e6e6e6;background-image:url(cut/20.png);">背景切图</div>
    </div>
  </div>
  </div>
</form>
</body>
</html>

HTML部分

@charset "utf-8";
/* CSS Document */

* {
    margin: 0px;
    padding: 0px;
}
#top {
    position: relative;
    background-color: #fbfbfb;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #E1E1E1;
}
.topp {
    text-align: center;
    font-size: 12px;
    margin: 3px;
    position: relative;
    height: 24px;
    line-height: 24px;
}
#index {
    left: 10%;
    border: 1px solid #a8a8a8;
    width: 110px;
    background-color: #fbfbfb;
}
#topr {
    position: absolute;
    right: 10%;
    top: 3px;
}
.topp2 {
    position: relative;
    float: left;
    top: 5px;
    margin-left: 20px;
    padding: 10px;
    border-left: 1px solid #a8a8a8;
    height: 20px;
}
.sousuo {
    position: relative;
    width: 1000px;
    height: 100px;
    line-height: 50px;
    background-color: #fbfbfb;
    margin-top: 10px;
}
.ssli {
    line-height: 20px;
    top: 20px;
    position: relative;
    float: left;
    margin-left: 20px;
}
.ssli:hover {
    background-color: #3AFF00;
}
.tuijian {
    width: 105px;
    height: 40px;
    position: relative;
    float: left;
}
.zhuti {
    top: 5px;
    width: 238px;
    height: 1745px;
    position: relative;
    float: left;
}
.zi {
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 2px #969696;
    font-size: 50px;
    font-weight: 700;
    background-repeat: no-repeat;
    text-align: center;
    color: #FF0004;
}
.zhong {
    margin-top: 10px;
    width: 100%;
    height: 200px;
    position: relative;
    float: left;
}
.z1 {
    width: 332px;
    height: 100%;
    position: relative;
    float: left;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    font-size: 50px;
    font-weight: 700;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 220px;
    color: #FF0004;
}

CSS部分

2016年10月27日--格式布局

标签：art play 小练习 ges ace pad 9.png charset www

原文地址：http://www.cnblogs.com/hqxc/p/6008985.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行