官方bilibiliWindows破解入门Android逆向入门
【网络诊断修复工具】切换到窄版

吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步，快速开始

吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn»网站 › 【 软件安全 】 › 『编程语言区』 › 『编程语言讨论求助区』 › 深入浅出学习HTML5+css3自学笔记(1)
12下一页
返回列表 发新帖
查看: 2124|回复: 11
收起左侧

[学习记录] 深入浅出学习HTML5+css3自学笔记(1)

[复制链接]
l2430478
l2430478 发表于 2021-12-18 12:20
本帖最后由 l2430478 于 2021-12-27 16:51 编辑

学习了Python后，发现基础非常-重-要，直接爬取，就好像类似不会编程，先做破解，哈哈，就像没有学会数字1先学数字2。
不知道具体结构，就需要死记硬背许多东西。
又学习一段时间html+ css3后，感觉不少收获，特分享给大家，菜鸟来，大神勿喷。
经过学习，我可以做一些简单的网页了，也更深刻理解爬虫时候，某些取选择器的原因了。
深入浅出，大家一起学习吧。

------------------------------（奇怪 52怎么了  很多字打不出来 被屏蔽）
上工具！https://www.52pojie.cn/thread-1337968-1-1.html
下面发布一个vscode（全拼为Visual Studio Code）1.52绿色版 使用方便。
链接为：https://cloud.189.cn/t/Bz2INzNzeQfa（访问码：ufa9）




学习之前，先请大家欣赏一个漂亮的单页面网页。后期，我逐步教大家如何做。
2021-12-18 12-18-00000.png
大家把代码复制出来，新建一个后缀为html的网页文档即可欣赏。
[Patch] 纯文本查看 复制代码
<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>阿里安全响应中心</title>
        </head>
        <style>
        *{
                padding: 0px;
                margin: 0px;
        }
                body{
                        font-family: Helvetica Neue For Number,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;;
                        font-size: 13px;
                        background-color: #fff;
                }
                .login-box{
                        background-color: #ededed;
                        height: 34px;
                }
                .login-content{
                        margin-right: 120px;
                        text-align: right;
                }
                .login-content span a{
                        text-decoration: none;
                        color: #000;
                }
                .login-content span{
                        line-height: 34px;
                }
                .change-lange{
                        color: #000000;
                        text-decoration: none;
                        border: 1px solid #999;
                        border-radius: 3px;
                        padding: 0px 10px;
                }
                .change-lange:hover{
                        color: #FFF;
                        background-color: #108ee9;
                }
                .logo{
                        float: left;
                }
                .logo img{
                        margin-left: 70px;
                        margin-top: 10px;
                        width: 139px;
                        height: 45px;
                }
                .first-menu li a{
                        color: #000000;
                        text-decoration: none;
                }
                .first-menu{
                        font-size: 16px;
                        list-style: none;
                }
                .first-menu li{
                        line-height: 70px;
                        padding: 0px 16px;
                        float: left;
                }
                .first-menu li:hover{
                        border-bottom: 1px solid #108ee9;
                }
                .nav{
                        height: 70px;
                        border-bottom: 1px solid #dede;
                }
                .submit-LAI{
                        float: right;
                        line-height: 70px;
                        margin-right: 120px;
                }
                .submit-LAI div{
                        background: #008aff;
                    padding-left: 15px;
                    padding-right: 15px;
                           height: 46px;
                            line-height: 46px;
                            display: inline-block;
                           margin-top: 12px;
                           color: #fff;
                            text-align: center;
                }
                .cl{
                        clear: both;
                        padding-bottom: 3px;
                }
                .home-page{
                        text-align: center;
                           background: #000f1c;
                    background: linear-gradient(75deg,#000b14,#00213c);
                    position: relative;
                }
                .home-page img{
                        max-width: 1440px;
                        width: 100%;
                }
                .sub-vulnerability a{
                        display: block;
                        width: 100px;
                        border: 1px solid #aaa;
                        text-decoration: none;
                        color: #aaa;
                        text-align: center;
                        padding: 10px;
                }
                .sub-vulnerability a:hover{
                        background: #108ee9;
                    color: #fff;
                }
                .sub-vulnerability{
                        position: absolute;
                        top: 60%;
                        left: 12%;
                }
                .tips{
                        background: #7a7a7a;
                        height: 45px;
                        color: #000f1c;
                        font-size: 14px;
                        margin-bottom: 30px;
                }
                .tips span a{
                        text-decoration: none;
                        line-height: 45px;
                        color: #000f1c;
                }
                .tips span{
                        display: inline-block;
                        width: 300px;
                        text-align: center;
                }
                .main-left{
                        width: 900px;
                }
                .security-title{
                        border-bottom: 1px solid #dedede;
                        height: 40px;
                }
                .security-title h3{
                        font-weight: normal;
                        float: left;
                        font-size: 18px;
                }
                .security-title h4{
                        font-weight: normal;
                        float: right;
                        font-size: 14px;
                }
                .security-title a{
                        color: #008aff;
                        text-decoration: none;
                }
                .main-box{
                        margin: 0px 35px;
                }
                .logs{
                        clear: both;
                        padding-top: 20px;
                        height: 180px;
                }
                .logs img{
                        float: left;
                        width: 216px;
                        height: 162px;
                }
                .logs-title{
                        height: 120px;
                        width: 600px;
                        padding: 20px 5px;
                        
                        float: left;
                }
                .logs-title:hover{
                        box-shadow: 1px 1px 1px #999;
                }
                .logs-title a{
                        font-size: 20px;
                        color: #000;
                        text-decoration: none;
                }
                .logs-data,.logs-keywords{
                        display: block;
                        clear: both;
                        font-size: 12px;
                        margin-top: 20px;
                        color: #73808c;
                }
                .logs-keywords{
                        color: #999;
                }
                .border-logs{
                        clear: both;
                        border-bottom: 1px solid #dedede;
                }
                .list{
                        margin-top: 20px;
                        margin: 20px 5px 0px 5px;
                        float: left;
                        width: 290px;
                        height: 215px;
                }
                .list img{
                        width: 227px;
                        height: 145px;
                }
                .name{
                        font-size: 20px;
                }
                .list:hover{
                        box-shadow: 1px 1px 1px #dedede;
                }
                .main-left,.main-right{
                        float: left;
                        margin-left: 90px;
                }
                .main-right{
                        margin-left: 20px;
                        width: 400px;
                }
                .list-tips{
                        margin: 15px 0px 20px 0px;
                        list-style: none;
                        line-height: 30px;
                }
                .list-tips li a{
                        text-decoration: none;
                        color: #666;
                        font-size: 14px;
                }
                .list-tips-date{
                        float: right;
                        color: #999;
                        font-size: 12px;
                }
                .src-table{
                        border-spacing: 0;
                        font-size: 12px;
                        width: 400px;
                        text-align: left;
                }
                .src-table tr>th{
                        font-weight: normal;
                        background: #f1f1f1;
                        padding: 16px 8px;
                }
                .src-table tr>td{
                        padding: 16px 8px;
                        border-bottom: 1px solid #e9e9e9;
                }
                .tops-index{
                        background: #008aff;
                        width: 22px;
                    height: 22px;
                           line-height: 22px;
                          display: inline-block;
                           text-align: center;
                    color: #fff;
                }
                .tops-last{
                        background: #b9dfff;
                        width: 22px;
                    height: 22px;
                           line-height: 22px;
                          display: inline-block;
                           text-align: center;
                    color: #fff;
                }
                .main-bottom{
                        clear: both;
                }
                .about-us-title{
                        border-bottom: 1px solid #dedede;
                        height: 40px;
                        margin: 0px 80px 0px 80px;
                }
                .about-us-title h3{
                        font-weight: normal;
                        float: left;
                        font-size: 18px;
                }
                .about-alibaba{
                        font-size: 14px;
                        margin-top: 20px;
                        padding: 0px 80px 0px 80px;
                        text-align: left;
                        color: #666;
                        line-height: 30px;
                }
                #footer{
                        height: 370px;
                        margin-top: 90px;
                        font-size: 14px;
                    background: #262a2e;
                    color: #fff;
                    padding: 30px 90px 0px 90px;
                }
                .contact-me h3{
                        font-weight: normal;
                        margin-left: 100px;
                        font-size: 18px;
                           color: #fff;
                }
                .ab-email a{
                        color: #fff;
                        text-decoration: none;
                }
                .ab-email a:hover{
                        color: #108ee9;
                }
                .pgp a{
                        color: #fff;
                        text-decoration: none;
                }
                .pgp a:hover{
                        color: #108ee9;
                        text-decoration: underline;
                }
                .ab-email,.pgp,.src-ww,.src-qq,.first-new,.news-t{
                        margin-left: 100px;
                        margin-top: 20px;
                        font-size: 14px;
                }
                .news-pic{
                        margin-left: 150px;
                        text-align: center;
                }
                .news-t{
                        text-align: center;
                        padding-left: 50px;
                }
                .footer-left,.footer-right{
                        float: left;
                }
                .news-pic img{
                        width: 126px;
                        height: 126px;
                }
                .list-news{
                        float: left;
                }
                .border-bottom{
                        clear: both;
                        border-bottom: 1px solid #4c545a;
                        padding-top: 30px;
                }
                .xieyi{
                            padding-bottom: 20px;
                            padding-top: 20px;
                                   font-size: 12px;
                                   color: #4c545a;
                                   text-align: center;
                }
        </style>
        <body>
                <div id="header">
                        <div class="login-box">
                                <div class="login-content">
                                        <span><a href="#">登录</a>丨</span>
                                        <span><a href="#">注册</a>丨</span>
                                        <a href="#" class="change-lange">EN</a>
                                </div>
                                <div class="nav">
                                        <div class="logo">
                                                <img src="http://192.168.0.111/img/logo.png">
                                        </div>
                                        <ul class="first-menu">
                                                <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>
                                                <li><a href="#">阿里云安全动态</a></li>
                                                <li><a href="#">礼品兑换</a></li>
                                                <li><a href="#">全球合作</a></li>
                                        </ul>
                                        <a href="#"><div class="submit-LAI"><div>提交漏洞/情报</div></div></a>
                                </div>
                        </div>
                        </div>
                <div class="cl"></div>
                <div id="main">
                        <div class="home-page">
                                <img src="https://img.alicdn.com/tfs/TB1JT.EX29TBuNjy0FcXXbeiFXa-1440-620.png">
                        </div>
                        <div class="sub-vulnerability">
                                <a href="#">提交漏洞/情报</a>
                        </div>
                        <div class="tips">
                                <span>公告:</span>
                                <span><a href="#">2021 ASRC使用指南</a></span>
                                <span><a href="#">本地生活业务漏洞标准</a></span>
                                <span><a href="#">...</a></span>
                                </div>
                        <div class="main-box">
                        <div class="main-left">
                                <div class="security-title">
                                        <h3>阿里安全动态</h3>
                                        <h4><a href="#">更多</a></h4>
                                </div>
                                <div class="logs">
                                        <div class="logs-pic">
                                                <img src="https://img.alicdn.com/tfs/TB1wNU.kgmTBuNjy1XbXXaMrVXa-217-162.png">
                                        </div>
                                        <div class="logs-title">
                                                <a href="#">ASRC2021生态大会-创新与变化</a>
                                                <span class="logs-data">2021-04-09 18:14:25</span>
                                                <span class="logs-keywords">关键字:</span>
                                        </div>
                                </div>
                                <div class="border-logs"></div>
                                <div class="logs">
                                        <div class="logs-pic">
                                                <img src="https://img.alicdn.com/tfs/TB14sS.lS_I8KJjy0FoXXaFnVXa-216-162.jpg">
                                        </div>
                                        <div class="logs-title">
                                                <a href="#">下一代互联通信网络部署在即，IPv6安全防护准备好了吗？</a>
                                                <span class="logs-data">2021-01-06 17:12:57</span>
                                                <span class="logs-keywords">关键字：IPV6</span>
                                        </div>
                                </div>
                                <div class="border-logs"></div>
                                <div class="logs">
                                        <div class="logs-pic">
                                                <img src="https://img.alicdn.com/tfs/TB1XE6ulMvD8KJjy0FlXXagBFXa-216-162.png">
                                        </div>
                                        <div class="logs-title">
                                                <a href="#">【病毒分析】DowginCw病毒家族解析</a>
                                                <span class="logs-data">2021-01-06 17:33:51</span>
                                                <span class="logs-keywords">关键字：病毒、DowginCw</span>
                                        </div>
                                </div>
                                <div class="security-title">
                                        <h3>最新线上活动</h3>
                                        <h4><a href="#">更多</a></h4>
                                </div>
                                <div class="list">
                                        <img src="https://gitee.com/gylq/cloudimages/raw/master/img/%E5%9B%BE%E6%80%AA%E5%85%BD_104000acf4a286e1e91e0d37499449c1_21103.png">
                                        <p class="name">夏日炎炎｜ASRC新人特...</p>
                                </div>
                                <div class="list">
                                        <img src="https://gitee.com/gylq/cloudimages/raw/master/img/%E5%9B%BE%E6%80%AA%E5%85%BD_de938e7e5a8367aaab66c65d2e41dcea_42967.png">
                                        <p class="name">618回血特别活动</p>
                                </div>
                                <div class="list">
                                        <img src="https://gitee.com/gylq/cloudimages/raw/master/img/123123.jpg">
                                        <p class="name">【王牌众测第1期】菜鸟私....</p>
                                </div>
                                </div>
                        <div class="main-right">
                                <div class="security-title">
                                <h3>奖励规则</h3>
                                <h4><a href="#">更多</a></h4>
                                </div>
                                <ul class="list-tips">
                                        <li><a href="#">漏洞评分标准V3.0</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
                                        <li><a href="#">阿里巴巴集团威胁情报定级标准V2.0</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                        <li><a href="#">阿里500万安全赏金计划</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                        <li><a href="#">关于ASRC奖励开启团队奖励的公告</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                        <li><a href="#">ASRC资质认证介绍</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                        <li><a href="#">关于Lazada站点评分规则更新的通告</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                        <li><a href="#">ASRC《用户协议》上线说明</a><span class="list-tips-date">2021-05-19 13:35:26</span></li>
                                </ul>
                                <div class="security-title">
                                <h3>总贡献榜</h3>
                                <h4><a href="#">更多</a></h4>
                                </div>
                                <table class="src-table">
                                        <tr><th>名次</th><th>白帽昵称</th><th>白帽资质</th><th>贡献值</th>        </tr>
                                        <tr><td><span class="tops-index">1</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-index">2</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-index">3</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">4</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">5</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">6</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">7</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">8</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">9</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                        <tr><td><span class="tops-last">10</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
                                </table>
                                </div>
                        <div class="main-bottom">
                                <div class="about-us-title"><h3>关于我们</h3></div>
                                <div class="about-alibaba">
                                        阿里巴巴集团一直致力于建设诚信、共赢、繁荣的电子商务产业生态圈。安全是其健康成长的核心要素，为此特成立集团安全部，隶属于其的安全响应中心（Alibaba Security Response Center，简称ASRC）欢迎广大用户向我们反馈阿里巴巴集团各事业部旗下相关产品及业务的安全漏洞和威胁情报，以帮助我们提升自身产品及业务的安全性，同时也希望借此平台加强与安全业界同仁的合作与交流。我们诚邀您共同为打造健康安全的电子商务产业生态圈贡献力量。
                                </div>
                        </div>
                        </div>
                        </div>
                <div id="footer">
                        <div class="footer-left">
                                <div class="contact-me">
                                        <h3>联系我们</h3>
                                </div>
                                <div class="ab-email"><a href="#">邮箱：[url=mailto:000000@service.alibaba.com]000000@service.alibaba.com[/url]</a></div>
                                <div class="pgp"><a href="#">获取 PGP Public Key</a></div>
                                <div class="src-ww">旺旺交流群：000000000y</div>
                                <div class="src-qq">QQ交流群：000000000</div>
                                </div>
                        <div class="footer-right">
                                <div class="contact-me">
                                <h3>关注我们</h3>
                                </div>
                                <div class="first-new">
                                        第一时间了解线上线下活动资讯：
                                </div>
                                <div class="list-news">
                                        <div class="news-t">阿里安全响应中心微博</div>
                                        <div class="news-pic">
                                                <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044712542.png">
                                        </div>
                                        </div>
                                <div class="list-news">
                                        <div class="news-t">阿里安全响应中心微博</div>
                                        <div class="news-pic">
                                                <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044723128.png">
                                        </div>
                                        </div>
                                <div class="list-news">
                                        <div class="news-t">阿里安全响应中心微博</div>
                                        <div class="news-pic">
                                                <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044712542.png">
                                        </div>
                                        </div>
                                </div>
                        <div class="border-bottom"></div>
                        <div class="xieyi">
                                免责声明及隐私权政策&#8195;浙ICP备09002987号-11 &#169; 2021阿里巴巴集团 版权所有
                        </div>
         </body>
</html>

2021-12-18 12-13-54.png
2021-12-18 12-16-18.png

免费评分

参与人数 2吾爱币 +2 热心值 +2 收起 理由
yjn866y + 1 + 1 我很赞同！
yang586lin + 1 + 1 我很赞同！

查看全部评分

发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
回复

举报

素问何问
素问何问 发表于 2021-12-18 14:42
你已经掌握了浮动的概念，火候还不够
【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
回复 支持

举报

angelypcd
angelypcd 发表于 2021-12-18 14:54
吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。
高手啊 高手啊
如何升级？如何获得积分？积分对应解释说明！
回复 支持

举报

jd688
jd688 发表于 2021-12-18 16:13
《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！
向高手学习！
呼吁大家发布原创作品添加吾爱破解论坛标识！
回复 支持

举报

木子三寿
木子三寿 发表于 2021-12-18 18:11
html看那个书？
如何快速判断一个文件是否为病毒！
回复 支持

举报

czwuyang
czwuyang 发表于 2021-12-19 07:10
感谢你的坚持 带动了我的学习热情
回复 支持

举报

l2430478
 楼主| l2430478 发表于 2021-12-19 13:02
木子三寿 发表于 2021-12-18 18:11
html看那个书？

书有点死板  看看BLBL的视频吧
回复 支持

举报

木子三寿
木子三寿 发表于 2021-12-19 13:06
l2430478 发表于 2021-12-19 13:02
书有点死板  看看BLBL的视频吧

我擦，我刚买了一本
回复 支持

举报

Zhangdomenic
Zhangdomenic 发表于 2021-12-21 10:21
木子三寿 发表于 2021-12-19 13:06
我擦，我刚买了一本

每个人都有自己的学习方法咯，没有必要完全按照别人的方法来学习。

书肯定会讲的更加清楚详细，视频是可视化

会有取舍
回复 支持

举报

木子三寿
木子三寿 发表于 2021-12-21 20:30
Zhangdomenic 发表于 2021-12-21 10:21
每个人都有自己的学习方法咯，没有必要完全按照别人的方法来学习。

书肯定会讲的更加清楚详细，视频是 ...

好的呢，我天天在卷
回复 支持

举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告：本版块禁止回复与主题无关非技术内容，违者重罚！


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-6-1 12:46

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表