前端学习-第一阶段-day03-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/109789557

前端学习-第一阶段-day03

我把笔记发到了我的资源里，可以用编辑器打开或者用Typora打开，这是我今天的4个练习及相应代码。

第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bix{
            width: 297px;
            height: 435px;
            /* border: 1px black solid; */
            margin: 100px auto;
        }
        .box{
            width: 235px;
            margin-left: 31px;
            margin-top: 30px;
        }
       .box2{
           font-size: 15px;
           color: #888;
       }
       .box3{
        margin-top: -5px;
       }
       .box4{
           color:#ff6700 ;
       }
       .box5{
        color: #999;
       }
    </style>
</head>
<body>
    <div class="bix">
        <img src="./img/Snipaste_2020-11-18_17-51-49.png" >
        <div class="box">
            <p>防止孩子因为沉迷电脑影响学习，他还是个孩子，不要放过他...</p>    
        </div>
        <div class="box box2">
            <p>来自于 xxx 的回复</p>      
        </div>
        <div class="box box3">
            <span>米兔定位电话</span> <span class="box5"> | </span><span class="box4">149元</span>      
        </div>
        
    </div>
</body>
</html>

第二个

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 100px auto;
            width: 300px;
            height: 400px;
            /* border: 1px solid black; */
        }
        .img{
            width: 159px;
            height: 159px;
            margin: 30px auto;
            border: 1px solid black;
        }
        .font{
            margin-left: -23px;
            margin-right: -30px;
        }
        .font-lighter{
            margin-top: 10px;
            margin-left:37px;
            font-size: 14px;
            color: #555;
        }
        .size{
            width: 110px;
            height: 17px;
            margin: 0 auto;
            font-size: 20px;
            margin-top: 20px;
        }
        .red{
            color: red;      
        }
        .grey{
            color: grey;
            font-size: 18px;
            text-decoration: line-through;      
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img"><img src="./img/Snipaste_2020-11-18_18-38-58.png" </div>
        <div class="font">北京联通100M宽带包14个月</div>
        <div class="font-lighter">办理送路由器</div>
        <div class="size">
            <b class="red">&yen;879</b>&nbsp;&nbsp;
            <span class="grey">&yen;880</span>
        </div>
    </div>
</body>
</html>

第三个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big-box{
            margin: 100px auto;
            width: 185px;
            position: relative;
        }
        .img-box1{
            position: absolute;
            width: 185px;
            height: 260px;
            /* border: 1px solid black; */
            overflow: hidden;
        }
        .img-img{
            position: absolute;
            left: -173px;
            top: -218px;
            transform: scale(0.4);
            z-index: -1;
        }
        .bgd-box{
            position: absolute;
            width: 185px;
            height: 260px;
            background-color: rgba(233, 34, 34, 0.938);
            z-index: -1;
        }
        p{  
            text-align: center;
            color: white;
            font-size: 26px;
            font-weight: 900;
        }
        .title-box{
            position: absolute;
            top: 10px;
            width: 185px;
            height: 16px;
            
        }
        .img-box2{
            position: absolute;
            top: 100px;
            text-align: center;
            width: 185px;
        }
        .middle-box{  
            position: absolute;
            top: 165px;
            width: 600px;
        }
        .font{
            position: absolute;
            font-size: 17px;
            left: 23px;
            
        }
       
        .size2{
            left: 73px;
            font-size: 15px;
            font-weight: 400;
        }
        .size3{
            left: 108px;
            font-size: 15px;
            font-weight: 400;
        }
        span{
            color: white;
            font-weight: 900;

        }
        .black{
            background: #000;
        }
        .bottom-box{
            position: absolute;
            top: 200px;
            left: 21px;
            width: 185px;
            font-size: 19px;
        }

    </style>
</head>
<body>
    <div class="big-box">
        <div class="img-box1">
            <img src="./img/true.jpg" class="img-img">
        </div>
        <div class="bgd-box"></div>
        <div class="title-box"><p>京东秒杀</p></div>
        <div class="img-box2">
            <div><img src="./img/sd.png" ></div>
        </div>
        <div class="middle-box">
            <span class="font size1">16:00</span>
            <span class="font size2">点场</span>
            <span class="font size3">倒计时</span>
        </div>
        <div class="bottom-box">
            <span class="bottom-span black"> &nbsp;00&nbsp</span>
            <span class="bottom-span white">:</span>
            <span class="bottom-span black"> &nbsp;00&nbsp</span>
            <span class="bottom-span white">:</span>
            <span class="bottom-span black"> &nbsp;00&nbsp</span>
        </div>
    </div>
    
    
</body>
</html>

第四个

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big-box{
            width: 360px;
            margin: 30px auto;
            /* border: 1px solid black; */
            
        }
        .box{
            margin-left: 20px;
            margin-right: 20px;
        }
        hr {
            border: 1px solid #fa2f2f;
        }
        p {
            font-size: 20px;
            color: #777;

        }
        a {
            text-decoration: none;
        }
        img {
            vertical-align: middle;
        }
        .table{
            margin-top: -15px;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <hr>
        <div class="box">
            
            <h3>微博找人</h3>
            <a href=""><p>名人</p></a>
            <table>   
                <tr>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
            </table>
            <hr style="border: 1px solid #999;">
            <a href=""><p>名人</p></a>
            <table class="table">   
                <tr height="40px">
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
                <tr height="40px">
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
                <tr height="40px">
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
                <tr height="40px">
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
                <tr height="40px">
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                    <td width="100px"><a href=""><img src="./img/it.png" >明星</a></td>
                </tr>
                
                
            </table>
            <hr style="border: 1px solid #999;">

        </div>
        
    </div>
    
    
</body>
</html>