实战结果页面gif图片

阿里云src首页模仿完整代码(500行左右)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"> <!--字符集 -->
  5. <title>阿里安全响应中心</title>
  6. </head>
  7. <style>
  8. *{
  9. padding: 0px;
  10. margin: 0px;
  11. }
  12. body{
  13. 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;;
  14. font-size: 13px;
  15. background-color: #fff;
  16. }
  17. .login-box{
  18. background-color: #ededed;
  19. height: 34px;
  20. }
  21. .login-content{
  22. margin-right: 120px;
  23. text-align: right;
  24. }
  25. .login-content span a{
  26. text-decoration: none;
  27. color: #000;
  28. }
  29. .login-content span{
  30. line-height: 34px;
  31. }
  32. .change-lange{
  33. color: #000000;
  34. text-decoration: none;
  35. border: 1px solid #999;
  36. border-radius: 3px;
  37. padding: 0px 10px;
  38. }
  39. .change-lange:hover{
  40. color: #FFF;
  41. background-color: #108ee9;
  42. }
  43. .logo{
  44. float: left;
  45. }
  46. .logo img{
  47. margin-left: 70px;
  48. margin-top: 10px;
  49. width: 139px;
  50. height: 45px;
  51. }
  52. .first-menu li a{
  53. color: #000000;
  54. text-decoration: none;
  55. }
  56. .first-menu{
  57. font-size: 16px;
  58. list-style: none;
  59. }
  60. .first-menu li{
  61. line-height: 70px;
  62. padding: 0px 16px;
  63. float: left;
  64. }
  65. .first-menu li:hover{
  66. border-bottom: 1px solid #108ee9;
  67. }
  68. .nav{
  69. height: 70px;
  70. border-bottom: 1px solid #dede;
  71. }
  72. .submit-LAI{
  73. float: right;
  74. line-height: 70px;
  75. margin-right: 120px;
  76. }
  77. .submit-LAI div{
  78. background: #008aff;
  79. padding-left: 15px;
  80. padding-right: 15px;
  81. height: 46px;
  82. line-height: 46px;
  83. display: inline-block;
  84. margin-top: 12px;
  85. color: #fff;
  86. text-align: center;
  87. }
  88. .cl{
  89. clear: both;
  90. padding-bottom: 3px;
  91. }
  92. .home-page{
  93. text-align: center;
  94. background: #000f1c;
  95. background: linear-gradient(75deg,#000b14,#00213c);
  96. position: relative;
  97. }
  98. .home-page img{
  99. max-width: 1440px;
  100. width: 100%;
  101. }
  102. .sub-vulnerability a{
  103. display: block;
  104. width: 100px;
  105. border: 1px solid #aaa;
  106. text-decoration: none;
  107. color: #aaa;
  108. text-align: center;
  109. padding: 10px;
  110. }
  111. .sub-vulnerability a:hover{
  112. background: #108ee9;
  113. color: #fff;
  114. }
  115. .sub-vulnerability{
  116. position: absolute;
  117. top: 60%;
  118. left: 12%;
  119. }
  120. .tips{
  121. background: #7a7a7a;
  122. height: 45px;
  123. color: #000f1c;
  124. font-size: 14px;
  125. margin-bottom: 30px;
  126. }
  127. .tips span a{
  128. text-decoration: none;
  129. line-height: 45px;
  130. color: #000f1c;
  131. }
  132. .tips span{
  133. display: inline-block;
  134. width: 300px;
  135. text-align: center;
  136. }
  137. .main-left{
  138. width: 900px;
  139. }
  140. .security-title{
  141. border-bottom: 1px solid #dedede;
  142. height: 40px;
  143. }
  144. .security-title h3{
  145. font-weight: normal;
  146. float: left;
  147. font-size: 18px;
  148. }
  149. .security-title h4{
  150. font-weight: normal;
  151. float: right;
  152. font-size: 14px;
  153. }
  154. .security-title a{
  155. color: #008aff;
  156. text-decoration: none;
  157. }
  158. .main-box{
  159. margin: 0px 35px;
  160. }
  161. .logs{
  162. clear: both;
  163. padding-top: 20px;
  164. height: 180px;
  165. }
  166. .logs img{
  167. float: left;
  168. width: 216px;
  169. height: 162px;
  170. }
  171. .logs-title{
  172. height: 120px;
  173. width: 600px;
  174. padding: 20px 5px;
  175. float: left;
  176. }
  177. .logs-title:hover{
  178. box-shadow: 1px 1px 1px #999;
  179. }
  180. .logs-title a{
  181. font-size: 20px;
  182. color: #000;
  183. text-decoration: none;
  184. }
  185. .logs-data,.logs-keywords{
  186. display: block;
  187. clear: both;
  188. font-size: 12px;
  189. margin-top: 20px;
  190. color: #73808c;
  191. }
  192. .logs-keywords{
  193. color: #999;
  194. }
  195. .border-logs{
  196. clear: both;
  197. border-bottom: 1px solid #dedede;
  198. }
  199. .list{
  200. margin-top: 20px;
  201. margin: 20px 5px 0px 5px;
  202. float: left;
  203. width: 290px;
  204. height: 215px;
  205. }
  206. .list img{
  207. width: 227px;
  208. height: 145px;
  209. }
  210. .name{
  211. font-size: 20px;
  212. }
  213. .list:hover{
  214. box-shadow: 1px 1px 1px #dedede;
  215. }
  216. .main-left,.main-right{
  217. float: left;
  218. margin-left: 90px;
  219. }
  220. .main-right{
  221. margin-left: 20px;
  222. width: 400px;
  223. }
  224. .list-tips{
  225. margin: 15px 0px 20px 0px;
  226. list-style: none;
  227. line-height: 30px;
  228. }
  229. .list-tips li a{
  230. text-decoration: none;
  231. color: #666;
  232. font-size: 14px;
  233. }
  234. .list-tips-date{
  235. float: right;
  236. color: #999;
  237. font-size: 12px;
  238. }
  239. .src-table{
  240. border-spacing: 0;
  241. font-size: 12px;
  242. width: 400px;
  243. text-align: left;
  244. }
  245. .src-table tr>th{
  246. font-weight: normal;
  247. background: #f1f1f1;
  248. padding: 16px 8px;
  249. }
  250. .src-table tr>td{
  251. padding: 16px 8px;
  252. border-bottom: 1px solid #e9e9e9;
  253. }
  254. .tops-index{
  255. background: #008aff;
  256. width: 22px;
  257. height: 22px;
  258. line-height: 22px;
  259. display: inline-block;
  260. text-align: center;
  261. color: #fff;
  262. }
  263. .tops-last{
  264. background: #b9dfff;
  265. width: 22px;
  266. height: 22px;
  267. line-height: 22px;
  268. display: inline-block;
  269. text-align: center;
  270. color: #fff;
  271. }
  272. .main-bottom{
  273. clear: both;
  274. }
  275. .about-us-title{
  276. border-bottom: 1px solid #dedede;
  277. height: 40px;
  278. margin: 0px 80px 0px 80px;
  279. }
  280. .about-us-title h3{
  281. font-weight: normal;
  282. float: left;
  283. font-size: 18px;
  284. }
  285. .about-alibaba{
  286. font-size: 14px;
  287. margin-top: 20px;
  288. padding: 0px 80px 0px 80px;
  289. text-align: left;
  290. color: #666;
  291. line-height: 30px;
  292. }
  293. #footer{
  294. height: 370px;
  295. margin-top: 90px;
  296. font-size: 14px;
  297. background: #262a2e;
  298. color: #fff;
  299. padding: 30px 90px 0px 90px;
  300. }
  301. .contact-me h3{
  302. font-weight: normal;
  303. margin-left: 100px;
  304. font-size: 18px;
  305. color: #fff;
  306. }
  307. .ab-email a{
  308. color: #fff;
  309. text-decoration: none;
  310. }
  311. .ab-email a:hover{
  312. color: #108ee9;
  313. }
  314. .pgp a{
  315. color: #fff;
  316. text-decoration: none;
  317. }
  318. .pgp a:hover{
  319. color: #108ee9;
  320. text-decoration: underline;
  321. }
  322. .ab-email,.pgp,.src-ww,.src-qq,.first-new,.news-t{
  323. margin-left: 100px;
  324. margin-top: 20px;
  325. font-size: 14px;
  326. }
  327. .news-pic{
  328. margin-left: 150px;
  329. text-align: center;
  330. }
  331. .news-t{
  332. text-align: center;
  333. padding-left: 50px;
  334. }
  335. .footer-left,.footer-right{
  336. float: left;
  337. }
  338. .news-pic img{
  339. width: 126px;
  340. height: 126px;
  341. }
  342. .list-news{
  343. float: left;
  344. }
  345. .border-bottom{
  346. clear: both;
  347. border-bottom: 1px solid #4c545a;
  348. padding-top: 30px;
  349. }
  350. .xieyi{
  351. padding-bottom: 20px;
  352. padding-top: 20px;
  353. font-size: 12px;
  354. color: #4c545a;
  355. text-align: center;
  356. }
  357. </style>
  358. <body>
  359. <div id="header">
  360. <div class="login-box">
  361. <div class="login-content">
  362. <span><a href="#">登录</a></span>
  363. <span><a href="#">注册</a></span>
  364. <a href="#" class="change-lange">EN</a>
  365. </div>
  366. <div class="nav">
  367. <div class="logo">
  368. <img src="http://192.168.0.111/img/logo.png">
  369. </div>
  370. <ul class="first-menu">
  371. <li><a href="#">首页</a></li>
  372. <li><a href="#">线上活动</a></li>
  373. <li><a href="#">线下活动</a></li>
  374. <li><a href="#">贡献榜</a></li>
  375. <li><a href="#">公告</a></li>
  376. <li><a href="#">阿里云安全动态</a></li>
  377. <li><a href="#">礼品兑换</a></li>
  378. <li><a href="#">全球合作</a></li>
  379. </ul>
  380. <a href="#"><div class="submit-LAI"><div>提交漏洞/情报</div></div></a>
  381. </div>
  382. </div>
  383. </div>
  384. <div class="cl"></div>
  385. <div id="main">
  386. <div class="home-page">
  387. <img src="https://img.alicdn.com/tfs/TB1JT.EX29TBuNjy0FcXXbeiFXa-1440-620.png">
  388. </div>
  389. <div class="sub-vulnerability">
  390. <a href="#">提交漏洞/情报</a>
  391. </div>
  392. <div class="tips">
  393. <span>公告:</span>
  394. <span><a href="#">2021 ASRC使用指南</a></span>
  395. <span><a href="#">本地生活业务漏洞标准</a></span>
  396. <span><a href="#">...</a></span>
  397. </div>
  398. <div class="main-box">
  399. <div class="main-left">
  400. <div class="security-title">
  401. <h3>阿里安全动态</h3>
  402. <h4><a href="#">更多</a></h4>
  403. </div>
  404. <div class="logs">
  405. <div class="logs-pic">
  406. <img src="https://img.alicdn.com/tfs/TB1wNU.kgmTBuNjy1XbXXaMrVXa-217-162.png">
  407. </div>
  408. <div class="logs-title">
  409. <a href="#">ASRC2018生态大会-创新与变化</a>
  410. <span class="logs-data">2018-04-09 18:14:25</span>
  411. <span class="logs-keywords">关键字:</span>
  412. </div>
  413. </div>
  414. <div class="border-logs"></div>
  415. <div class="logs">
  416. <div class="logs-pic">
  417. <img src="https://img.alicdn.com/tfs/TB14sS.lS_I8KJjy0FoXXaFnVXa-216-162.jpg">
  418. </div>
  419. <div class="logs-title">
  420. <a href="#">下一代互联通信网络部署在即,IPv6安全防护准备好了吗?</a>
  421. <span class="logs-data">2018-01-06 17:12:57</span>
  422. <span class="logs-keywords">关键字:IPV6</span>
  423. </div>
  424. </div>
  425. <div class="border-logs"></div>
  426. <div class="logs">
  427. <div class="logs-pic">
  428. <img src="https://img.alicdn.com/tfs/TB1XE6ulMvD8KJjy0FlXXagBFXa-216-162.png">
  429. </div>
  430. <div class="logs-title">
  431. <a href="#">【病毒分析】DowginCw病毒家族解析</a>
  432. <span class="logs-data">2018-01-06 17:33:51</span>
  433. <span class="logs-keywords">关键字:病毒、DowginCw</span>
  434. </div>
  435. </div>
  436. <div class="security-title">
  437. <h3>最新线上活动</h3>
  438. <h4><a href="#">更多</a></h4>
  439. </div>
  440. <div class="list">
  441. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/%E5%9B%BE%E6%80%AA%E5%85%BD_104000acf4a286e1e91e0d37499449c1_21103.png">
  442. <p class="name">夏日炎炎|ASRC新人特...</p>
  443. </div>
  444. <div class="list">
  445. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/%E5%9B%BE%E6%80%AA%E5%85%BD_de938e7e5a8367aaab66c65d2e41dcea_42967.png">
  446. <p class="name">618回血特别活动</p>
  447. </div>
  448. <div class="list">
  449. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/123123.jpg">
  450. <p class="name">【王牌众测第1期】菜鸟私....</p>
  451. </div>
  452. </div>
  453. <div class="main-right">
  454. <div class="security-title">
  455. <h3>奖励规则</h3>
  456. <h4><a href="#">更多</a></h4>
  457. </div>
  458. <ul class="list-tips">
  459. <li><a href="#">漏洞评分标准V3.0</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  460. <li><a href="#">阿里巴巴集团威胁情报定级标准V2.0</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  461. <li><a href="#">阿里500万安全赏金计划</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  462. <li><a href="#">关于ASRC奖励开启团队奖励的公告</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  463. <li><a href="#">ASRC资质认证介绍</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  464. <li><a href="#">关于Lazada站点评分规则更新的通告</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  465. <li><a href="#">ASRC《用户协议》上线说明</a><span class="list-tips-date">2015-05-19 13:35:26</span></li>
  466. </ul>
  467. <div class="security-title">
  468. <h3>总贡献榜</h3>
  469. <h4><a href="#">更多</a></h4>
  470. </div>
  471. <table class="src-table">
  472. <tr><th>名次</th><th>白帽昵称</th><th>白帽资质</th><th>贡献值</th> </tr>
  473. <tr><td><span class="tops-index">1</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  474. <tr><td><span class="tops-index">2</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  475. <tr><td><span class="tops-index">3</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  476. <tr><td><span class="tops-last">4</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  477. <tr><td><span class="tops-last">5</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  478. <tr><td><span class="tops-last">6</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  479. <tr><td><span class="tops-last">7</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  480. <tr><td><span class="tops-last">8</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  481. <tr><td><span class="tops-last">9</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  482. <tr><td><span class="tops-last">10</span></td><td>小笼包</td><td>一代宗师</td><td>68493</td></tr>
  483. </table>
  484. </div>
  485. <div class="main-bottom">
  486. <div class="about-us-title"><h3>关于我们</h3></div>
  487. <div class="about-alibaba">
  488. 阿里巴巴集团一直致力于建设诚信、共赢、繁荣的电子商务产业生态圈。安全是其健康成长的核心要素,为此特成立集团安全部,隶属于其的安全响应中心(Alibaba Security Response Center,简称ASRC)欢迎广大用户向我们反馈阿里巴巴集团各事业部旗下相关产品及业务的安全漏洞和威胁情报,以帮助我们提升自身产品及业务的安全性,同时也希望借此平台加强与安全业界同仁的合作与交流。我们诚邀您共同为打造健康安全的电子商务产业生态圈贡献力量。
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493. <div id="footer">
  494. <div class="footer-left">
  495. <div class="contact-me">
  496. <h3>联系我们</h3>
  497. </div>
  498. <div class="ab-email"><a href="#">邮箱:security@service.alibaba.com</a></div>
  499. <div class="pgp"><a href="#">获取 PGP Public Key</a></div>
  500. <div class="src-ww">旺旺交流群:268149067y</div>
  501. <div class="src-qq">QQ交流群:40346338</div>
  502. </div>
  503. <div class="footer-right">
  504. <div class="contact-me">
  505. <h3>关注我们</h3>
  506. </div>
  507. <div class="first-new">
  508. 第一时间了解线上线下活动资讯:
  509. </div>
  510. <div class="list-news">
  511. <div class="news-t">阿里安全响应中心微博</div>
  512. <div class="news-pic">
  513. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044712542.png">
  514. </div>
  515. </div>
  516. <div class="list-news">
  517. <div class="news-t">阿里安全响应中心微博</div>
  518. <div class="news-pic">
  519. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044723128.png">
  520. </div>
  521. </div>
  522. <div class="list-news">
  523. <div class="news-t">阿里安全响应中心微博</div>
  524. <div class="news-pic">
  525. <img src="https://gitee.com/gylq/cloudimages/raw/master/img/image-20210713044712542.png">
  526. </div>
  527. </div>
  528. </div>
  529. <div class="border-bottom"></div>
  530. <div class="xieyi">
  531. 免责声明及隐私权政策 浙ICP备09002987号-11 2021阿里巴巴集团 版权所有
  532. </div>
  533. </body>
  534. </html>

我的个人博客

孤桜懶契:http://gylq.github.io

【HTML】实战阿里云src页面css模仿基础学习的更多相关文章

  1. 2019阿里云开年Hi购季基础云产品分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  2. CSS的基础学习

    CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...

  3. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  4. 阿里云前端路线 | CSS快速掌握

    1.1什么是CSS 翻译为“层叠样式表”或者“级联样式表”, 简称样式表. 1.2CSS的主要作用 它主要是用来给HTML网页来设置外观或者样式 外观或者样式:HTML网页中的文字的大小.颜色.字体, ...

  5. 阿里云server改动MySQL初始password---Linux学习笔记

    主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...

  6. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  7. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

  8. 阿里云上的Centos 7.6的一次Nginx+Mysql+PHP7.3 部署

    阿里云申请了一台服务器 Centos 7.6,每次安装都要上网找一大堆教程,因为不熟悉,因为总是忘记. 所以,有时间的时候,还是记录下自己的学习过程,有助于下次的问题解决. 我先总结下: 1)安装VS ...

  9. 【阿里云产品公测】云引擎ACE初体验

    作者:阿里云用户蓝色之鹰 :RYYjmG5;  来投票支持我把=i2]qj\  序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7  序号10.[阿里云产品公测]结构化数据服 ...

随机推荐

  1. TP6 服务器响应500时没有错误信息的解决方案

    重点!!!! 首先,确认你的电脑管理员账户是否含有中文!!!!!!就像下面这种:所以出现了没有错误提示    查看nginx日志显示\vendor\topthink\framework\src\thi ...

  2. WindowsService开发简单入门

    参考网址: https://www.cnblogs.com/wenlong512/p/7355971.html 一.简介 程序创建在 Windows 会话中,可长时间运行的可执行应用程序.这些服务可以 ...

  3. 一 &#183; 路由事件的三种方式/策略(冒泡 直接 隧道)

    WPF中的路由事件是沿着VisualTree传递的,作用是用来调用应用程序的元素树上的各种监听器上的处理程序. (1)冒泡,这种事件处理方式是从源元素向上级流过去,直到到达根节点即顶层节点,一般为最外 ...

  4. mybatis传入参数为0被误认为是空字符串的解决方法

    在mbatis中使用Xml配置sql语句时,出现了这样一个问题.当我传入的参数为0去做判断时,mybatis会把参数0当成是空字符串去判断而引起查询结果错误 所以在做项目时一定要注意,用到MyBati ...

  5. rabbitMq队列长度限制

    x-max-length:队列最大容纳消息条数 大于设置条数的时候会把,消息队列头部(先进入消息)的消息移除 x-max-length-bytes:队列最大容量消息内存容量服务端限流内存控制流量:40 ...

  6. VS C++ C# 混合编程

    创建C++ DLL 注意,32bit和64bit之间不兼容 创建普通dll工程 设置Properties -> Configuration Properties -> General -& ...

  7. 剖析虚幻渲染体系(11)- RDG

    目录 11.1 本篇概述 11.2 RDG基础 11.2.1 RDG基础类型 11.2.2 RDG资源 11.2.3 RDG Pass 11.2.4 FRDGBuilder 11.3 RDG机制 11 ...

  8. AQS实现原理

    AQS实现原理 AQS中维护了一个volatile int state(共享资源)和一个CLH队列.当state=1时代表当前对象锁已经被占用,其他线程来加锁时则会失败,失败的线程被放入一个FIFO的 ...

  9. 基于Linux系统的MariaDB数据库的安装配置

    数据库是指长期存储在计算机内.有组织的和可共享的数据集合.表是数据库存储数据的基本单位,一个表由若干个字段组成 MariaDB 数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用 G ...

  10. java 线程基础篇,看这一篇就够了。

    前言: Java三大基础框架:集合,线程,io基本是开发必用,面试必问的核心内容,今天我们讲讲线程. 想要把线程理解透彻,这需要具备很多方面的知识和经验,本篇主要是关于线程基础包括线程状态和常用方法. ...