【HTML】实战阿里云src页面css模仿基础学习
2024-09-07 02:50:52
实战结果页面gif图片
阿里云src首页模仿完整代码（500行左右）
<!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="#">ASRC2018生态大会-创新与变化</a>
<span class="logs-data">2018-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">2018-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">2018-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">2015-05-19 13:35:26</span></li>
<li><a href="#">阿里500万安全赏金计划</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
<li><a href="#">关于ASRC奖励开启团队奖励的公告</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
<li><a href="#">ASRC资质认证介绍</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
<li><a href="#">关于Lazada站点评分规则更新的通告</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
<li><a href="#">ASRC《用户协议》上线说明</a><span class="list-tips-date">2015-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="#">邮箱：security@service.alibaba.com</a></div>
<div class="pgp"><a href="#">获取 PGP Public Key</a></div>
<div class="src-ww">旺旺交流群：268149067y</div>
<div class="src-qq">QQ交流群：40346338</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>
我的个人博客
孤桜懶契：http://gylq.github.io
最新文章
- HTML JQuery 技巧总结
- Android数据库加密之sqlciher方案
- tomcat中的JSP引擎
- 行锁sqlserver
- 使用ICMP协议Ping网络主机
- poj 1035 Spell checker(水题)
- HDU 5603 the soldier of love 离线+树状数组
- 【转】silverlight 跨域访问
- cocos2d-html5 简易 下拉表单 控件
- Data Annotation
- Enthought科学计算,数据分析
- 怎样获取android手机联系人并按字母展示(一）
- 修改tomcat图标
- hdu_2604Queuing(快速幂矩阵)
- cdnbest常见问题
- mui 从列表进入到详情，再返回，列表页还是进入列表之前的样子，而不刷新页面
- 自建docker swarm体验简单之美
- centos 监控进程，并自动重启
- js递归函数使用介绍
- koa-connect源码解析