14

最新推荐文章于 2022-02-27 14:27:07 发布

你！鸿章

最新推荐文章于 2022-02-27 14:27:07 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/weixin_43024812/article/details/87199713

版权

定位网页元素
position属性
1. static 默认值按照标准流文档进行布局

  2.relative 相对定位   position:relative;    top:px   left: px
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;

}
#father{
    border: 1px #666 solid;
    padding: 10px;
}
#first{
    background-color: #f2bb6f;
    border: 1px #b55a00 dashed;
    position: relative;
    top: -30px;
    left: 50px;
}
#second{
    background-color: blue;
    border: 1px #0000a8 dashed;
}
#third{
    background-color: #f3f3f3;
    border: 1px #395e4f dashed}
#second{
    background-color: blue;
    border: 1px #0000a8 dashed;
}
#third{
    background-color: #f3f3f3;
    border: 1px #395e4f dashed}

3.absolute   绝对定位  position:absolute  top :px right:px 

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
body{margin: 0px;}
div{
    padding: 5px;
    font-size: 12px;
    line-height: 25px;

}
#father{
    border: 1px #666 solid;
    margin: 10px;

}
#first{
    background-color: #f2bb6f;
    border: 1px #b55a00 dashed;
}
#second{
    background-color: blue;
    border: 1px #0000a8 dashed;
}
#third{
    background-color: #f3f3f3;
    border: 1px #395e4f dashed}
#second{
    background-color: blue;
    border: 1px #0000a8 dashed;
}
#third{
    background-color: #f3f3f3;
    border: 1px #395e4f dashed}

  4.fixed  固定定位  position:fixed   right:px bottom:px 
           ( body{ height:1000px})可以上划移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;

z-index属性
opacity:x (x值0~1，值越小越透明）
filter:alpha(opacity=x) (x为0~100，值越小越透明)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <link rel="stylesheet" href="z-indec.css" type="text/css">
</head>
<body>
<div>
    <ul>
        <li><img src="xi/maple.jpg" alt="香山红叶"></li>
        <li class="tiptext">买了佛冷</li>
        <li class="tipBg"></li>
        <li>时间：11月16日 星期六 8：30</li>
        <li>地点：朝阳区西大望路珠江帝景k区正门前集合</li>
    </ul>
</div>
</body>
</html>

ui,li{
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#contene{
    width: 331px;
    overflow: hidden;
    padding: 5px;
font-size: 12px;
    line-height: 25px;
    border: 1px #999 solid;

}
#contene ul{
    position: relative;
}
.tipBg,.tiptext{
    position: absolute;
    width: 331px;
    height: 25px;
    top: 100px;

}
.tiptext{
    color: #fff;
 text-align: center;
}
.tipBg{
    background: #000;
    opacity: 0.6;
    filter: alpha(opacity=50);
}

制作当当网·


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link href="zye1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
    <div>
    <img src="zye/logo.jpg">

        <div class="li1">
            <a href="#">尾品汇</a>
            <a href="#">当当优品</a>
            <a href="#">数字馆</a>
            <a href="#">都看阅器</a>
        </div>
    <img src="zye/icon_count.png" class="img">
    </div>
    <div class="li2">
    <div class="li2"><a href="#">首页</a> </div>
    <div class="li2"><a href="#">图书</a> </div>
    <div class="li2"><a href="#">音像</a> </div>
    <div class="li2"><a href="#">童装</a> </div>
     <div class="li2"><a href="#">服装</a> </div>
    <div class="li2"><a href="#">鞋靴</a> </div>
     <div class="li2"><a href="#">运动</a> </div>
     <div class="li2"><a href="#">箱包</a> </div>
     <div class="li2"><a href="#">美妆</a> </div>
    <div class="li2"><a href="#">珠宝</a> </div>
    <div class="li2"><a href="#">家居</a> </div>
    <div class="li2"><a href="#">食品</a> </div>
    <div class="li2"><a href="#">酒</a> </div>
    <div class="li2"><a href="#">手机</a> </div>
    <div class="li2"><a href="#">数码</a> </div>
    <div class="li2"><a href="#">电脑</a> </div>
    <div class="li2"><a href="#">家电</a> </div>
    </div>
<img src="zye/banner.png" class="img1">
</div>
<div id="div">
<img src="zye/bg_bang.gif" id="img">
  <div id="div1">
              <img src="zye/book-01.jpg" alt="偷影子的人" class="img2"/>
      <div>
      <img src="zye/bookNo1.gif" alt="No1" class="a"/>
          <div class="fu">
          <a href="#">偷影子的人</a>

          <p>作 者[法]马克・李维（Marc Levy著,段韵灵 译</p>

          <p>出版社：湖南文艺出版社</p>

          <p>当当价：<strong>￥ 17.90</strong></p>

          <p>
              不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br/>我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br/>马的回忆，一个时间之神没有应允的愿望。
              一个老是<br/>受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能<br/>力而强大：他能“偷别人的影子”，因而能看见他</p>
          </div>
      </div>
</div>
    <div id="dier" >
<img src="zye/book-02.jpg" class="img3">
        <img src="zye/bookNo2.gif" class="a1">
        <div class="fu1">
        <a href="#">看见(央视知名记者、主持人柴静：十年个人<br/>成长的告白，中国社会变迁的备忘</a>

        <p>作 者：柴静 著</p>

        <p>出版社：广西师范大学出版社</p>

        <p><strong>￥ 29.40</strong> <span>7.4折</span></p>
        </div>
    </div>
    <div  id="dier1">
<img src="zye/book-03.jpg" class="img3">
        <img src="zye/bookNo3.gif" class="a1">
        <div class="fu1"><a href="#">改变孩子先改变自己</a>

            <p>作 者：贾容韬 贾毅 著</p>

            <p>出版社：作家出版社</p>

            <p><strong>￥ 22.20</strong> <span>7.4折</span></p></div>
    </div>
</div>
<div id="end">
Copyright (C) 当当网 2004-2017, All Rights Reserved版权标志<img src="zye/validate.gif">版权标志京ICP证041189号出版物经营许可证新出发京批字第直0673号
</div>
</body>
</html>


.div2{
    height: 200px;
}
.div1{
    border: none;
    width: 1000px;
    height: 200px;
    padding: 20px;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: red;
}
.li1{
    border: none;
    background: #00b7ff;
    color: black;
    list-style-type: none;
    display: inline;
    float: right;
    padding: 5px;
    position: relative;
    top: 9px;
    right: 31px;
    margin: 8px;
}
.li2{
    background: orange;
    color: white;
    border: none;
    list-style-type: none;
    display: inline;
    border: none;
    padding:6px ;
    margin-right: 9px;

}
.img{
    position: relative;
    bottom: 30px;
    left: 600px;
}
.img1{
    position: relative;
    top: 10px;
}
#div{
    border: 2px green solid;
    height: 450px;
    width: 1040px;
    position: absolute;
}
#img{
    position: relative;
    top: 20px;
    right: 30px;
    margin: 10px;
}
#div1{
    border: none;
    width: 640px;
    height: 350px;
    position: relative;
}
.img2{
    position: relative;
    top: 40px;
    margin: 10px;
}
.first{
    float: right;
}
.a{
    position: relative;
    bottom: 250px;
    left: 30px;
}
.fu{
    position: relative;
    bottom: 270px;
    left: 260px;
    font-size: 14px;

}
#dier{
    border: none;
    width: 400px;
    height: 150px;
    position: relative;
    bottom: 300px;
    left: 600px;
}
#dier1{
    border:none;
    width: 400px;
    height: 150px;
    position: relative;
    bottom: 300px;
    left: 600px;
}
.img3{
    position: relative;
    top: 20px;
    margin: 10px;
}
.a1{
    position: relative;
    bottom:60px;
    right: 100px;
}
.fu1 {
    position: relative;
    bottom: 100px;
    left: 100px;
    font-size: 12px;
}
#end{
    position: relative;
    top: 450px;
    eft: 50px;
}