【HTML】实战阿里云src页面css模仿基础学习
实战结果页面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】实战阿里云src页面css模仿基础学习的更多相关文章
- 2019阿里云开年Hi购季基础云产品分会场全攻略！
2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...
- CSS的基础学习
CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- 阿里云前端路线 | CSS快速掌握
1.1什么是CSS 翻译为“层叠样式表”或者“级联样式表”, 简称样式表. 1.2CSS的主要作用 它主要是用来给HTML网页来设置外观或者样式 外观或者样式:HTML网页中的文字的大小.颜色.字体, ...
- 阿里云server改动MySQL初始password---Linux学习笔记
主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
- 阿里云上的Centos 7.6的一次Nginx+Mysql+PHP7.3 部署
阿里云申请了一台服务器 Centos 7.6,每次安装都要上网找一大堆教程,因为不熟悉,因为总是忘记. 所以,有时间的时候,还是记录下自己的学习过程,有助于下次的问题解决. 我先总结下: 1)安装VS ...
- 【阿里云产品公测】云引擎ACE初体验
作者:阿里云用户蓝色之鹰 :RYYjmG5; 来投票支持我把=i2]qj\ 序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7 序号10.[阿里云产品公测]结构化数据服 ...
随机推荐
- 题解 Strange Housing
传送门 首先想了黑白染色,发现不会染 其实可以考虑如何动态地维护出这个点集 发现题面里对不在点集之中的点之间的连边没有要求 所以考虑不断向图中加点,为了满足要求,每次取一个与当前新图中相连的点 若它与 ...
- 【HMC Core 6.0全球上线】图形计算服务新插件，助力高画质3D手游创新
HMS Core 6.0已于7月15日全球上线,本次新版本向广大开发者开放了众多全新能力与技术.其中华为图形计算服务(CG Kit)开放了体积雾插件和流体插件,为3D手游画面的提升提供了坚实的技术基础 ...
- 9、二进制安装K8s之增加node
二进制安装K8s之增加node 1.复制文件,要部署几台就直接复制即可 #二进制文件 scp /data/k8s/bin/{kubelet,kube-proxy} root@192.168.100.1 ...
- Javascript - Vue - webpack中的axios
导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...
- servlet中servletContext的五大作用（五）
1. 获取web的上下文路径 2. 获取全局的参数 3. 作为域对象使用 4. 请求转发 5. 读取web项目的资源文件 package day10.about_serv ...
- ElasticSearch之配置文件详解
################################### Cluster ################################### #定义集群名称,默认是elasticse ...
- 字符型：char
字符型:char 字符变量的定义和输出 字符变量用于存储一个单一字符,在C语言中用char表示,其中每个字符变量都会占用1个字节.在给字符型变量赋值时,需要用一对因为半角格式的单引号(' ')把字 ...
- Mac 安装 Android commandlinetools 各种报错的问题
https://developer.android.com/studio/releases/platform-tools commandlinetools-mac 下载地址 解压后直接运行 sdkma ...
- [考试总结]noip模拟42
开始给了一个简单的题目,但我还是没有珍惜. 一个简简单单的树形 \(dp\),然而因为取模却不知道该如何比较大小.. 其实可以取 \(log\),然后我就梦中惊坐起,然后想到了魔法少女lbw 淦 然后 ...
- iMX6UL配置MCP2515模块（SPI转CAN）——基于迅为iTOP-iMX6UL开发板
写在前面 在文章"嵌入式Linux的CAN总线配置--基于迅为iTOP-4412开发板"中我给4412开发板配置了SPI转CAN模块,使用的是不带设备树的内核.在本篇文章中,要 ...