l2430478 发表于 2021-12-18 12:20

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

本帖最后由 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）




学习之前，先请大家欣赏一个漂亮的单页面网页。后期，我逐步教大家如何做。

大家把代码复制出来，新建一个后缀为html的网页文档即可欣赏。
<!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="#">邮箱：000000@service.alibaba.com</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">
                              免责声明及隐私权政策 浙ICP备09002987号-11 © 2021阿里巴巴集团 版权所有
                        </div>
         </body>
</html>


素问何问 发表于 2021-12-18 14:42

你已经掌握了浮动的概念，火候还不够

angelypcd 发表于 2021-12-18 14:54

高手啊 高手啊

jd688 发表于 2021-12-18 16:13

向高手学习！

木子三寿 发表于 2021-12-18 18:11

html看那个书？

czwuyang 发表于 2021-12-19 07:10

感谢你的坚持 带动了我的学习热情

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 发表于 2021-12-21 10:21

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

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

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

会有取舍

木子三寿 发表于 2021-12-21 20:30

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

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

好的呢，我天天在卷
页: [1] 2
查看完整版本: 深入浅出学习HTML5+css3自学笔记(1)


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

Mail To:Service@52pojie.cn