前端学习记录

il_5840

已于 2023-03-12 18:47:52 修改

阅读量62

点赞数

文章标签：学习前端 html5

于 2023-03-08 17:14:37 首次发布

本文链接：https://blog.csdn.net/il_5840/article/details/129407375

版权

计划

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

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

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

学习进度

今天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%；} 就可以等宽啦

我上面的都是手动调的

il_5840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习记录

计划因为我想做一个问卷系统大致看了一下感觉要学的东西有点多大一大二的时候比较松散不怎么学习前期不学的后作用就是这样了目标十天看完它或者一个周吧学习进度今天2023.03.08因为之前有个假期自己看了一点b站的html所以我学到了表格现在到表单
复制链接

扫一扫