首页 > 代码库 > 2016-10-13笔记

2016-10-13笔记

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>COM</title>
    <style>
    body{
        margin: 0;
    }

    ul{
        list-style: none;
    }
    li{
        line-height:50px;
        text-align: center;
        width: 50px;
        height:50px;
        float:left;
        margin-left: 5px;
        background: red;
    </style>
</head>
<body>
    <!-- .我(当前页面)当前所在文件夹
         ..我(当前页面)当前所在文件夹的上一个目录example:"../1.jpg"-->
         <!-- #bottom锚点 -->
         <!-- href:链接! -->
         <!--  target="blank"新建空白页打开 -->
    <!-- <a href="http://www.mamicode.com/tupians/fafafaf.html #bottom" target="blank"><img src="" alt="点我啊"></a> -->
    <div style="width:500px;height:50px;margin: 0 auto;">
    <ul>
        <a href="http://www.mamicode.com/tupians/1012.html #bottom" target="_blank_"><li>1</li></a>
        
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    </div>
</body>
</html>


第一个红色1可链接

技术分享

链接效果图

技术分享

绿色图形叠加到红色图形上面。

方法一         用了position,瞎用的,效果倒是达到了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body{
            margin:0;
        }
        .uni{
            float:left;
        }

    </style>
</head>
<body>
    <div style="width: 1000px;height: 2000px;margin:0 auto;">
        
        <div style="width: 1000px;height: 300px;background: red;position: relative;top:0px"></div>
        <div style="width: 1000px;height: 150px;background: green;position: relative;top: -150px"></div>    
        <div style="width: 1000px;height: 300px;background: black;position: relative;top:0px"></div>
        
        
    </div>

</body>
</html>

技术分享

方法二      用的margin-top  float

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body{
            margin:0;
        }
        .uni{
            float:left;
        }
    </style>
</head>
<body>
    <div style="width: 1000px;height: 300px;margin:0 auto;">
        <div style="width: 1000px;height: 150px;background: green;margin-top: 150px;" class="uni"></div>
        <div style="width: 1000px;height: 300px;background: red;"></div>    
    </div>
</body>
</html>

技术分享

本文出自 “12145919” 博客,请务必保留此出处http://12155919.blog.51cto.com/12145919/1861655

2016-10-13笔记