css啊嗯，前端学习小结（a1-a3）

于 2021-02-04 22:13:46 发布
阅读量286 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wafer_biscuit/article/details/113665407
版权

没事就回头看看，那让我们从a1看起。

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1{
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .a2{
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .a3{
        width: 700px;
        height: 120px;
        background-color: red;
    }
</style>


<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>
</html>

a1没啥说的，学习浮动的小测试。记住一点就行-浮动会压住后面的标准流，而不会压住前面的标准流。

看看a2

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin:0;
        padding: 0;
    }
    .a1{
        position: relative;
        width: 500px;
        height: 310px;
        background-color: pink;
        margin: 100px auto;
    }
    .a1 img{
        width: 100%;
        height: 100%;
    }
    /* .b1{
        width: 600px;
        height: 600px;
        background-color: purple;
    } */
    .linka,
    .linkb{
        position:absolute;
        top: 50%;
        margin-top: -15px;
        width: 20px;
        height: 30px;
        background-color: rgba(1, 1, 1, 0.4);
        text-decoration: none;
        color:white;
        text-align:center;
    }
    .linka{
        left: 0;
        border-radius: 0px 15px 15px 0px;
    }
    .linkb{
        right: 0;
        border-radius: 15px 0px 0px 15px;
    }
    .por{
        position:absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -75px;
        width: 150px;
        height: 20px;
        background-color: rgba(253, 246, 246, 0.397);
        border-radius: 10px;
    }
    .por li{
        float: left;
        list-style: none;
        width: 16px;
        height: 16px;
        background-color: royalblue;
        border-radius: 50%;
        margin-left: 11px;
        margin-top: 2px;
    }
    /* 注意权重问题___20>11 */
    .por .select{
        background-color: salmon;
    }
</style>
<body>
    <div class="a1">
        <img src="pic/1.jpg" alt="" srcset="">
        <a href="#" class="linka">&lt;</a>
        <a href="#" class="linkb">&gt;</a>
        <ul class="por">
            <li></li>
            <li></li>
            <li class="select"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- <div class="b1"></div> -->
</body>
</html>

嗯，a2是一个焦点图的案例，利用了定位，下面选择栏的小点用了ul-li，注意以下>在html里用&gt表示。以后可以回头优化下。

继续看a3。

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?n0sldy');
  src:  url('fonts/icomoon.eot?n0sldy#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?n0sldy') format('truetype'),
    url('fonts/icomoon.woff?n0sldy') format('woff'),
    url('fonts/icomoon.svg?n0sldy#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.a1{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: blueviolet;
    margin:auto;
}
.a2{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    background: rgba(1, 1, 1, 0.5) url("pic/1.jpg") center no-repeat;
    background-size: 100%;
    /* 上面是新的写法，但有一点小问题->现在好了 */
    display: none; 
}
.a1:hover .a2{
    display: block;
}
 .a5 {
    font-family: 'icomoon';
    cursor: not-allowed;
}
input{
    outline: none;
}
textarea{
    resize: none;
    outline:red;
}
.b1{
    width: 100px;
    height: 100px;
    background-color: pink;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 以上缺一不可 */
}
.b2 li{
    list-style: none;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-left: -1px;
}
.b2{
    overflow: hidden;
    /* 清除浮动！ */
}
.c1{
    width: 0px;
    height: 0px;
    border-top: 50px solid pink;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid black;
    margin-bottom: 10px;
}
.c2{
    width: 0px;
    height: 0px;
    border-top: 0px solid pink;
    border-right: 0px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid black;
    margin-bottom: 10px;
    /* 清除了上-右后的结果 */
}
.c3{
    width: 0px;
    height: 0px;
    border-top: 50px solid pink;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    margin-bottom: 10px;
}
.c4{
    width: 0px;
    height: 0px;
    border-top: 100px solid transparent;
    border-right: 0px solid red;
    border-bottom: 0px solid blue;
    border-left: 50px solid black;
    margin-bottom: 10px;
}
.d1 a{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: violet;
    text-decoration: none;
    text-align: center;
    /* 水平居中 */
    font-size: 18px;
    line-height: 40px;
    font-weight: 700;
    color: black;
}
.d1 .d2{
    /* 注意权重 */
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: transparent;
    text-decoration: none;
    text-align: center;
    /* 水平居中 */
    font-size: 18px;
    line-height: 40px;
    font-weight: 700;
    color: black;
}
.e1{
    width: 180px;
    height: 30px;
    border: 1px solid red ;
}
.e1 .e2{
    /* display: inline-block; */
    /* 浮动会自动转成行内块元素，并且使文字围绕！ */
    position: relative;
    float: left; 
    width: 100px;
    height: 30px;
    background-color: red;
    margin-right: 10px;
}
.e1{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
}
.e1 .e2 .e3{
    /* float: left; */
    position: absolute;
    right: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-color: transparent white transparent transparent;
    border-style: solid;
    /* 都是细节鸭 */
    border-width: 30px 10px 0 0;
}
.e1 .e4{
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    color: gray;
}

</style>

<body>
    <div class="a1">
        <div class="a2"></div>
    </div>
    <span class="a5">aaa<br></span>
    <span class="a5"></span>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div class="b1">
        a12345678987654321a
    </div>
    <ul class="b2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="end">4</li>
    </ul>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="d1">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#" class="d2">...</a>
        <a href="#">10</a>
    </div>
    <div class="e1">
        <span class="e2">
            100￥
            <i class="e3"></i>
        </span>
        <span class="e4">210￥</span>
    </div>
    
</body>
</html>

嗯，a3要讲的就挺多的了。
首先第一个，{土豆视频案例}这里的大盒包小盒不是最好的做法。在后面有所改进（用了a1::before）。用定位是不错的习惯，可以迅速确定精确位置。
第二个。字体图形的下载引入和使用。以及textarea。
之后，多余文字的。。。表示方式。
and，margin -边距的巧妙应用。
接下来是重量级！如何创造三角形之后是一个菜单栏以及三角形的应用。

多看多改正在这里插入图片描述

my威化饼干
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值