前端学习记录

计划

因为 我想做一个问卷系统 大致看了一下 感觉要学的东西有点多

大一大二的时候比较松散 不怎么学习 前期不学的后作用就是这样了

目标十天看完它 或者一个周吧

472af49630084b4b8865c517617303f0.png

 学习进度

今天2023.03.08

因为之前有个假期自己看了一点b站的html

所以我学到了表格 现在到表单

大概是从下午三点开始   现在是 21:56

把这本书的html部分看完了,前面的没看,因为觉得差不多都是那样的

搞出来的东西好丑哈哈哈,然后我搜了一下怎么样把背景放进表格,baidu说要css

接下来按着课本来制作一下这个网页

十分钟才搞得这个框框 好拉... 接下来要把它往下挪一点

伟大的作品往往采用最朴实的做法

加个表 空的 高80

这是昨晚最后的效果

本来我的框直接用了iframe标签,但是这个是要放一个专门的html文件才可以,应该会更简单吧

但是我现在就随便弄弄,不过真的好麻烦啊 这个table tr td

 下面是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框架练习</title>
    <style type="text/css">
        body{background: url(/resource/小猫.jpg);}
    </style>
</head>
<body>
    <table height="80"></table>

    <table align="center">
        <tr>
         <td>

             <table width="300" height="600" bgcolor="pink" align="center" >
                <tr clospan="10"> <td><table height="50"></table></td></tr>
                    
                <tr><td align="center">
                <table>
                <tr ><td><input type="button" value="   内容1   "  style=" font-family: 宋体;font-size: larger;" ></td></tr>  
                <tr ><td><input type="button" value="   内容2   "  style=" font-family: 宋体;font-size: larger;" ></td> </tr>
                <tr ><td><input type="button" value="   内容3   "  style=" font-family: 宋体;font-size: larger;" ></td></tr>       
                <tr ><td><input type="button" value="   内容4   "  style=" font-family: 宋体;font-size: larger;" ></td></tr>    
                </table>        
                </td></tr>          
                <tr clospan="10"> <td><table height="50"></table></td> </tr>             
                             
                            
             </table>
         </td>


         <td>
  
             <table align="center" width="900" hight="600" align="center" border="2">
                 <tr height="50"><td width="30"  ><input type="image" src="/resource/老鼠.png"  height="50"></td>
                                    <td align="left">&nbsp;&nbsp新手上路</td>
                 </tr>

                 <tr height="150"><td colspan="2"><input type="image" src="/resource/老鼠.png"  width="900" height="220" ></td>
            
                 </tr>
                 <tr height="50"><td width="30"  ><input type="image" src="/resource/老鼠.png"  height="50"></td>
                    <td align="left">&nbsp;&nbsp新手上路</td>
                 </tr>

                 <tr height="250"><td colspan="2">
                    <ul>
                        <li>买买买</li><li>买买买</li><li>买买买</li><li href="/xiaoxiao.html">买买买</li>
                    </ul></td>
                 </tr>

             </table>

         </td>
        </tr>
    </table>


</body>
</html>

2023.3.9

今天开始学习css

2023.3.12

又摆了几天

不过昨晚看了一个这个 B站视频 感觉收益很大 果然不可以单看书

 现在的效果是这样

 下面为新代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title>网页导航</title>
</head>
<style>
    .one {
        width: 180px;
        background: pink;
        text-align: right;
        text-indent: 20px;
    }

    input {
        width: 150px;
        text-align: left;

        text-indent: 25px;
        height: 35px;
        margin: 3px;
        font-family: 黑体;
        font-size: 15px;
        font-weight: bold;

    }

    .two {
        height: 20px;
        display: block;
        background-image: url(/resource/老鼠.png);
        background-size: 20px;
        background-repeat: no-repeat;
        border-bottom: 1px solid gray;
        text-indent: 22px;
    }

    .flow {
        display: block;
        height: 120px;
        width: 300px;
        background-image: url(/resource/小猫.jpg);
        background-size: 220px;
        background-repeat: no-repeat;
        background-position: right;
        text-align: left;
        line-height: 100px;
        margin-top: 10px;
    }

    .list {
        display: block;
        margin-top: -10px;
    }

    a:hover {
        color: pink;
    }
</style>

<body>
    <table>
        <tr>
            <td class="one">
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="帮助首页"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="注册与认证"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="购物规则"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="联系我们"></div>
            </td>
            <td>
                <div class=" two">新手上路
                </div>
                <span class="flow">买家入门:</span>
                <br />
                <span class="flow">卖家入门:</span>

                <div class="two">热门帮助</div>
                <div class="list">
                    <ul>
                        <li><a href="">如何实时与卖家沟通</a></li>
                        <li><a href="">如何查找想要的商品</a></li>
                        <li> <a href="">如何出价购买商品</a></li>
                        <li> <a href="">如何使用购物通付款</a></li>
                        <li> <a href="">如何给卖家评价</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</body>

</html>

最终效果啦

<!DOCTYPE html>
<html lang="en">

<head>
    <title>网页导航</title>
</head>
<style>
    table {
        margin: 100px auto 20px auto;
        height: 500px;

    }

    .one {

        height: 500px;
        width: 180px;
        background: pink;
        text-align: right;
        text-indent: 20px;
    }

    input {
        width: 150px;
        text-align: left;

        text-indent: 25px;
        height: 35px;
        margin: 3px;
        font-family: 黑体;
        font-size: 15px;
        font-weight: bold;

    }

    .two {
        height: 25px;
        width: 600px;
        display: block;
        margin-left: 20px;
        background-image: url(/resource/老鼠.png);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 0 -2px;
        border-bottom: 1px solid gray;
        text-indent: 22px;
        font-size: 18px;
    }

    .flow {
        display: block;
        height: 100px;
        width: 600px;
        background-image: url(/resource/小猫.jpg);
        background-size: 600px;
        background-repeat: no-repeat;
        background-position: 100px 0px;
        text-align: left;
        text-indent: 20px;
        line-height: 100px;
        margin-top: 10px;
        font-weight: 600;
        font-family: 黑体;
    }

    .list {
        height: 300px;
        display: block;
        margin-top: -10px;
        font-size: 17px;
        margin-left: 12px;
    }

    a:hover {
        color: pink;
    }
</style>

<body>


    <table>
        <tr>
            <td class="one">
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="帮助首页"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="注册与认证"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="购物规则"></div>
                <div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="联系我们"></div>
            </td>
            <td>
                <div class=" two">新手上路
                </div>
                <span class="flow">买家入门:</span>
                <br />
                <span class="flow">卖家入门:</span>

                <div class="two">热门帮助</div>
                <div class="list">
                    <ul>
                        <li><a href="">如何实时与卖家沟通</a></li>
                        <li><a href="">如何查找想要的商品</a></li>
                        <li> <a href="">如何出价购买商品</a></li>
                        <li> <a href="">如何使用购物通付款</a></li>
                        <li> <a href="">如何给卖家评价</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</body>

</html>

又学到了,  .类 img{width:100%;}   就可以等宽啦

我上面的都是手动调的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值