码迷，mamicode.com
首页 > Web开发 > 详细

前端css（完）

时间：2020-05-14 22:37:59      阅读：101      评论：0      收藏：0      [点我收藏+]

标签：opened   position   margin   验证   司机   并且   小米   play   link   

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题

"""
解决浮动带来的影响 推导步骤
    1.自己加一个div设置高度
    2.利用clear属性
        #d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
  3.通用的解决浮动带来的影响方法
      在写html页面之前 先提前写好处理浮动带来的影响的 css代码
      .clearfix:after {
            content: ‘‘;
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;
        }
        #d2 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #d3 {
            height: 100px;
            width: 100px;
            background-color: greenyellow;
            float: left;
        }
        /*#d4 {*/
        /*    !*height: 50px;*!*/
        /*    clear: left;  !*该标签的左边(地面和空中)不能有浮动的元素*!*/
        /*}*/
        .clearfix:after {
            content: ‘‘;
            display: block;
            clear:both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
<!--    <div id="d4"></div>-->
</div>
</body>
</html>

溢出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            height: 100px;
            width: 100px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }
    </style>

</head>
<body>
    <p>我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!</p>
</body>
</html>

溢出的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            background-color: #4e4e4e;
        }
        #d1 {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            margin: 20px auto;
            overflow: hidden;
        }
        #d1>img {
            /*max-width: 100%;*/
            width: 100%;
            /*占标签100%比例*/
        }
    </style>
</head>
<body>
<div id="d1">
    <img src="111.jpg" alt="">
</div>
</body>
</html>

定位

  • 静态

    所有的标签默认都是静态的static，无法改变位置

  • 相对定位(了解)

    相对于标签原来的位置做移动relative

  • 绝对定位(常用)

    相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

    eg:小米网站购物车

    当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位

  • 固定定位(常用)

    相对于浏览器窗口固定在某个位置

    eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

ps:浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
    1.相对定位
# 脱离文档流
    1.浮动
  2.绝对定位
  3.固定定位
  
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

z-index模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
        h1  {
            text-align: center;
        }

        #d1, #d2 {
            text-align: center;
        }
        button {
            margin-bottom: 10px;
            margin-left: 40%;
        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p id="d1">username:<input type="text"></p>
    <p id="d2">password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

透明度opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            background-color: rgba(0,0,0,0.5);
        }
        #d2 {
            background-color: rgb(0,0,0);
            opacity: 0.5;
            color: blue;
        }
    </style>
</head>
<body>
    <p id="d1">111</p>
    <p id="d2">22asdasdasd2</p>
</body>
</html>

博客园页面搭建

技术图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
        <div class="blog-avatar">
            <img src="111.jpg" alt="">
        </div>
        <div class="blog-title">
            <p>老司机的博客</p>
        </div>
        <div class="blog-info">
            <p>该老司机车速太快，什么都没有留下!</p>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">微信公众号</a></li>
            </ul>
        </div>
        <div class="blog-tag">
            <ul>
                <li><a href="">#Python</a></li>
                <li><a href="">#Java</a></li>
                <li><a href="">#Golang</a></li>
            </ul>
        </div>
    </div>
    <div class="blog-right">
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
        <div  class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2020/5/14</span>
            </div>
            <div class="article-body">
                <p>jason老师从来不开车,非常正儿八经的!</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#Python&nbsp;&nbsp;</span>
                <span>#JavaScript</span>
            </div>
        </div>
    </div>
</body>
</html>
html端
技术图片 
/*这是博客园首页的样式文件*/

/*通用样式*/
body {
    margin: 0;
    background-color: #eeeeee;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}
/*左侧样式*/
.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    /*position: fixed;*/
    background-color: #4e4e4e;
}

.blog-avatar {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px solid white;
    margin: 20px auto;
    overflow: hidden;
}
.blog-avatar img {
    max-width: 100%;
}

.blog-title,.blog-info {
    color: darkgray;
    font-size: 18px;
    text-align: center;
}

.blog-link,.blog-tag {
    font-size: 24px;
}

.blog-link a,.blog-tag a {
    color: darkgray;
}

.blog-link a:hover,.blog-tag a:hover {
    color: white;
}

.blog-link ul,.blog-tag ul {
    text-align: center;
    margin-top: 100px;
}


/*右侧样式*/
.blog-right {
    float: left;
    width: 80%;
    height: 1000px;
}

.article {
    background-color: white;
    margin: 20px 40px 10px 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.title {
    font-size: 36px;
}
.date {
    float: right;
    margin: 20px 20px;
    font-weight: bolder;
}
.article-title {
    border-left: 8px solid red;
    text-indent: 16px;
}

.article-body {
    font-size: 18px;
    text-indent: 30px;
    /*border-bottom: 1px solid black;*/
}

.article-bottom {
    padding-left: 30px;
    padding-bottom: 10px;
}
blog.css

 

前端css（完）

标签：opened   position   margin   验证   司机   并且   小米   play   link   

原文地址：https://www.cnblogs.com/BoyGc/p/12891675.html
踩
(0)
赞
(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)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！