张建军-2020-10-30

homework:
<meta charset="utf-8" />
        <title>天星数科</title>
        <link rel="shortcut icon" href="img/logostars.png"/>
        <link rel="stylesheet" href="css/stars.css" />
        <title></title>
    </head>
    <body>
        
        <div id="a">
            <div class="aa">
                <div class="aaa">
                    <img height="49.53" width="140"  src="img/logo.navigation.png"/>
                </div>
                <div class="aab">
                    <ul>
                        <a href="https://airstar.com/home" style="color: black;"><li>首页</li></a>
                        <a href="https://digit.airstar.com/#/" style="color: black;"><li>产业金融服务</li></a>
                        <a href="https://fth.airstar.com/home" style="color: black;"><li>金融科技服务</li></a>
                        <a href="" style="color: black;">
                            <li class="item">个人金融服务
                                <div>
                                    <a href="https://airstar.com/loan"><span>信贷</span></a>
                                    <a href="https://airstar.com/loan"><span>财富</span></a>
                                    <a href="https://airstar.com/loan"><span>保险</span></a>
                                    <a href="https://airstar.com/loan"><span>钱包</span></a>
                                    <a href="https://airstar.com/loan"><span>互助</span></a>
                                </div>
                            </li>
                        </a>
                        <a href="https://airstar.com/about" style="color: black;"><li>关于我们</li></a>
                    </ul>
                </div>
            </div>
            <div class="ab" style="text-align: center;">
                
                <div class="aba">
                    <ul>
                        <li class="left"></li>
                        <li class="right"></li>
                    </ul>
                    
                </div>
                
                <div class="abb">
                
                </div>
                
            </div>
            <div class="ac">
                <ul>
                    <li>天星数科(原小米数科)是小米集团旗下数字科技服务平台。随着5G+万物互联时代来临,天星数科将依托小米集团“手机×AIoT”战略, 秉承小米集团技术立业的传统,保持行稳致远的节奏,发挥深耕产业的优势,通过开放连接的平台模式,运用数字科技手段,不断自我提升,服务好实体企业的产业金融需求、服务好金融机构的转型升级需求、服务好广大消费者的个人金融需求。</li>
                </ul>
            </div>
            <div class="ad">
                <ul>
                    <li><font size="6">产品及服务</font></li>
                </ul>
                <table align="center">
                    <tr>
                        <td><img src="img/onee.png" width="390" height="200" /><a href="https://digit.airstar.com/#/"><img  src="img/one.png"></a></td>
                        <td><img src="img/two.png" width="390" height="200"/><a href="https://fth.airstar.com/home"><img  src="img/one.png"></a></td>
                    </tr>
                    <tr>
                        <td><img src="img/threee.png" width="390" height="200"/><a href="https://airstar.com/loan"><img  src="img/one.png"></a></td>
                        <td><img src="img/four.png" width="390" height="200"/><a href="https://airstar.com/loan"><img  src="img/one.png"></a></td>
                    </tr>
                    <tr>
                        <td><img src="img/five.png" width="390" height="200"/><a href="https://airstar.com/loan"><img  src="img/one.png"></a></td>
                        <td><img src="img/six.png" width="390" height="200"/><a href="https://airstar.com/loan"><img  src="img/one.png"></a></td>
                    </tr>
                    
                </table>
                <p></p>
                <br />
                <br />
                <table  align="center">
                    
                    <tr>
                        <td><img src="img/siheyi.png"  height="180" width="800"/></td>
                    </tr>
                </table>
            </div>
            <div class="ae">
                <ul>
                    <li><font size="5">合作伙伴</font></li>
                    
                </ul>
                <div class="bank"><ul>
                    <li><img src="img/yinlian.png" /></li>
                    <li><img src="img/nonghang.png" /></li>
                    <li><img src="img/gonghang.png" ></li>
                    <li><img src="img/zhaohang.png" ></li>
                    <li><img src="img/jianhang.png"></li>
                    <li><img src="img/xinwang.png"></li>
                    <li><img src="img/pingan.png"></li>
                    <li><img src="img/fubanghuayi.png"></li>
                    <li><img src="img/guinong.png"></li>
                    <li><img src="img/bohaibank.png"></li>
                </ul></div>
            </div>
            <div class="af">
                <ul>
                    <a href="https://www.mi.com/index.html"><li>小米商城</li></a>
                    <li>|</li>
                    <a href="https://home.miui.com/"><li>MIUI</li></a>
                    <li>|</li>
                    <a href="https://www.xiaomiyoupin.com/"><li>有品</li></a>
                    <li>|</li>
                    <a href="https://iot.mi.com/new/index.html"><li>IoT</li></a>
                    <li>|</li>
                    <a href="https://www.airstarbank.com/zh-hk/"><li>天星银行</li></a>
                </ul>
            </div>
note:
定位+页面布局的css文件
*{border: 0;
margin: 0;
padding: 0;}
/*整个页面*/
.page{width: 100%/*不会出现滚动条*/;
    height: auto;}
/*页眉*/
.header{width: 100%;
    height: 120px;/*页眉的高度 红条距离*/}
/*导航栏*/
.naver{width:100% ;
    height:36px ;
    border-top:1px #dedede solid ;
    border-bottom:1px #dedede solid  ;
    position: sticky;/*粘性定位*/   
    top: 0px;/*页眉的高度 红条距离0 */}
/*主内容区*/
.main{width: 100%;
    height: 800px;
    /*position: relative;/*相对定位*/}
    /*广告*/
.ad{width: 60px;
    height: 300px;
    /*position: absolute;/*绝对定位  子绝对 父相对(必写)*/
    position: fixed;/*固定位置 此时位置脱离原文档流 在内容区 与内容区无关*/
    top: 300px;
    right: 0px;/*距离右边0时执行position*/}
/*页脚部分*/
.foot{width: 100%;
    height: 100px;}
/*测试样式*/
.bg{background: red;}

心得体会:
HTML真的是个有趣的东西,感觉被她深深迷惑无法自拔,昨日夜里于我梦中,我与她相会,还是偷偷
摸摸鬼鬼祟祟的那种,这让我非常紧张,首先第一关,是逃脱楼管阿姨的追查,毕竟是半夜,来机房确实有
不法嫌疑,其次是获取机房钥匙,好巧有位秃然的兄弟也要和她的闺蜜约会,于是我轻松的进了机房,然后
就开始和她缠绵,成双成夜,莺歌燕舞,如胶似漆,水乳交融.....
终于,我疲倦但是满意的结束了,擦着额头边的汗水,今晚已被榨干,而她,也在整理心情,保存内容,
等我哄她入眠,待她睡着了,我就悄咪咪的离开了。啊,可真是精彩刺激的一晚。
可是,万万没想到的是,回到宿舍心尚在悸动居然有人跟我请教经验,哎,我也是第一次嘛,也是面红耳
赤手忙脚乱慌慌张张才结束的。但总之就那些东西,页面设计无非就是html构建框架,css设计样式,js是交互
实现的,首先拿到一个界面,先想好它的整体布局,构建整体框架,然后可以采用div或者tr,td或者ul,li的方
式实现页面上块块内容,然后内容填好了就需要调整结构,把内容放到该放的位置,这就需要用到css,可以用
padding实现边外框的宽度,float实现浮动,margin实现内边框间距,width设置宽度,height设置高度,上左
下右,子相父绝,font-family设置页面字体,z-index设置页面显示优先级,background背景,color颜色.......
然后是js,主要从写个小广告出发,毕竟这一块东西有点多有点复杂,也没有太过频繁使用,e.g.
也不是很懂,js是在别人的帮助下才完成的,但总之,这个web前端的设计还是非常有趣的,多个办法都可以实现
一个功能,可以在写程序的过程中获得更多有趣的体验,因此用“她”作代词实不过分emoji/笑哭/,接下来一周听说
要学数据库,貌似很难的样子,emmmmm慢慢来吧,希望在老师和同学的帮助下我可以学会。。。。。。。。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1