自己仿制阿里巴巴达摩院网页，急急。,Web开发,技术交流,鱼C论坛

真的只会一点点 发表于 2020-10-19 10:17:52

自己仿制阿里巴巴达摩院网页，急急。

抱歉，正在上课没法上传我的代码，请大佬帮我看一下网页前半部分怎么做（考核规定的不能抄，只能自己写），谢谢大佬

不二如是 发表于 2020-10-21 14:33:44

没代码...没办法{:10_266:}

真的只会一点点 发表于 2020-10-21 15:24:45

代码马上到，大佬帮我润色一下，帮我修改修改可不

真的只会一点点 发表于 2020-10-21 18:12:50

不二如是发表于 2020-10-21 14:33
没代码...没办法

<html lang="en">
<head>
<meta charset=”utf-8“>
<title>达摩院</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="top">
<span><a href="#">登录</a></span>
<span class=”split_line“> | </span>
<span><a href="#">注册</a></span>
<span class="language">EN</a></span>
</div>
<div class="nav">
<div class="menu">
<div class="menu_item">
   <div><a href="https://damo.alibaba.com" />首页</a></div>
   <div>HOME</div>
</div>
<div class="menu_item">
   <div><a href="https://damo.alibaba.com/labs /">实验室</a></div>
   <div>LABORATORIES</div>
</div>
<div class="menu_item">
   <div><a href="https://damo.alibaba.com/collaborations /">合作生态</a></div>
   <div>COLLABORATION</div>
</div>
<div class="menu_item">
   <div> <img src="https://img.alicdn.com/tfs/TB1vzbYMFYqK1RjSZLeXXbXppXa-147-69.svg" /></div>
</div>
<div class="menu_item">
<div><a href="https://damo.alibaba.com/damo-projects/" >达摩项目</a></div>
<div>DAMO PRO JECTS</div>
</div>
<div class="menu_item">
<div><a href="https://damo.alibaba.com/events/" >新闻活动</a></div>
<div>EVENTS</div>
</div>
<div class="menu_item">
<div><a href="https://damo.alibaba.com/about/" >关于我们</a></div>
<div>ABOUT US</div>

</div>
</div>
</div>
<div class="image_slider">
<img src="380_220.jpg"/>
<span class="img_title">
         <a href="https://damo.alibaba.com/labs/intelligent-transportation/robot/">阿里巴巴发布首款物流机械人“小蛮驴”</a>
</span>
<span class="img_desc">
      物流机械人小蛮驴是面向末端物流场景、提供最后三公里配送服务的智能机械人，它继承了达摩院最前沿的人工智能和自动驾驶技术，具备类人智能决策、五重安全守护和量产定制技术。
</span>
<a href="https://damo.alibaba.com/labs/intelligent-transportation/robot/"><button class="img_detail_btn">查看详情</button></a>
</div>
<div class="scend">
<div class="zhi">
<div class="charect">从这里，走向未来</div>
</div>
<div class="four">
<span><strong>Research for Solving Problems witf Profit and Fun</strong></span>
</div>
<div class="chi">阿里巴巴达摩院（Alibaba DAMO Academy for Discovery,Adventure,Momentum and Outlook)
      是一家致力于探索科技未知，以人类愿景<br />为驱动力的，立足于基础科学、创新性技术和应用技术的研究院。
</div>
</div>
<div class="two"></div>
<div >
<div class="eee"> 新<br />闻<br />动<br />态</div>
<div class="ccc"> |</div>
</div>
<div class="news-slider">
<div class="zong">
<div class="new">

   2020/09/17

</div>
   <div class="char">
   <a href="123.html" target="_blank"><strong>阿里巴巴发布首款物流机器人“小蛮<br />驴”</strong></a>
</div>
   <div class="xin">
<a href="123.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p>物流机器人小蛮驴是面向末端物流场景、提供最后三公里配送服务的智能机械人，它继承了达摩院最前沿的人工智能和自动驾驶技术，具备类人智能决策、五重安全守护和量产定制技术。</p>
</div>

   <a href="123.html" target="_blank"><img src="380_220.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/09/09

</div>

   <div class="char">
         <a href="345.html" target="_blank"><strong>2020阿里达摩院青橙奖“硬核10人”出炉，钟南山寄语青年科学家</strong></a>
   </div>
<div class="xin">
<a href="345.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p>9月9日，2020年阿里巴巴达摩院青橙奖获奖名单公布，梁文华等10位青年科学家获得达摩院的1000万元奖金。这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励：“你们处在最好的时候，要记得把握机遇。”</p>
</div>

   <a href="345.html" target="_blank"><img src="222.jpg"></a>

</div>
<div class="zong">
<div class="new">

   2020/05/29

</div>

   <div class="char">
         <a href="567.html" target="_blank"><strong>AI识别的新冠CT成国家级馆藏，阿里达摩院获颁中科馆数字馆藏证书</strong></a>
   </div>
   <div class="xin">
<a href="567.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p>5月29日，全国科技工作者日来临之际，一个特别的藏品入选中国科技馆“2020数字馆藏”——阿里巴巴达摩院AI识别标注的第一张新冠肺炎CT影像。</p>
</div>

   <a href="567.html" target="_blank"><img src="333.png"></a>

</div>

<div class="zong">
<div class="new">

   2020/04/01

</div>

   <div class="char">
         <a href="678.html" target="_blank"><strong>自动驾驶新突破，实现3D物体检测精度与速度兼得</strong></a>
   </div>
   <divclass="xin">
<a href="678.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p>近期，阿里巴巴达摩院的一篇论文入选计算机视觉顶会 CVPR 2020，该论文提出了一个通用、高性能的自动驾驶检测器，首次实现 3D 物体检测精度与速度的兼得，有效提升自动驾驶系统安全性能。</p>
</div>

   <a href="678.html" target="_blank"><img src="555.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/04/18

</div>

   <div class="char">
         <a href="789.html" target="_blank"><strong>自然语言智能：为商业搭建语言桥梁</strong></a>
   </div>
<divclass="xin">
<a href="789.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p>大咖说第九场《摘取人工智能的明珠：达摩院语言技术研发》的精华整理。本场大咖说嘉宾为达摩院语言技术实验室负责人、ACM杰出科学家、阿里巴巴高级研究员司罗，他为大家做了题为《为商业搭建语言桥梁》的分享，主要介绍了当前自然语言研发的现状、趋势，达摩院在自然语言智能方面所做的工作和自然语言如何在应用场景创造价值。</p>
</div>

   <a href="789.html" target="_blank"><img src="444.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/01/09

</div>

   <div class="char">
         <a href="987.html" target="_blank"><strong>阿里云智能达摩院AI产品矩阵</strong></a>
   </div>
<divclass="xin">
<a href="987.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p> “人工智能”已经成为了大家耳熟能详的词汇。如今，AI不再只是“能够在围棋比赛中战胜世界冠军”的技术了，人们对于它有了更多的期许。而在AI技术原子能力和产业落地产生的商业价值之间存在着必然的鸿沟，如何弥补这一鸿沟，为AI技术的终端用户产生真正的价值？本文中，达摩院机器智能实验室资深算法专家高杰将为大家分享他的观点。</p>
</div>

   <a href="987.html" target="_blank"><img src="666.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/02/21

</div>

   <div class="char">
         <a href="876.html" target="_blank"><strong>阿里云智能达摩院AI产品矩阵</strong></a>
   </div>
<divclass="xin">
<a href="876.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p> 达摩院医疗AI已在湖北、上海、广东、江苏等16个省市的26家医院上岗，截至目前，达摩院AI已对3万个临床疑似新冠肺炎病例CT影像进行了诊断，单个病例影像分析可在20秒内完成，准确率达到96%。据介绍，该技术将很快在全国100多家新冠肺炎定点医院完成部署应用。</p>
</div>

   <a href="876.html" target="_blank"><img src="777.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/01/09

</div>

   <div class="char">
         <a href="765.html" target="_blank"><strong>阿里云智能达摩院AI产品矩阵</strong></a>
   </div>
<divclass="xin">
<a href="765.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p> AI+影像在遥感行业市场中呈现暴风式增长的势态。本次演讲将为大家介绍阿里达摩院AI遥感智能检异的产品，并分别从产品功能，产品形态以及应用案例等方面提供简单背景介绍。阿里达摩院希望通过遥感影像智能检异的能力，与各个合作伙伴及各个行业一起共建AI+遥感的生态能力。</p>
</div>

   <a href="765.html" target="_blank"><img src="888.png"></a>

</div>
<div class="zong">
<div class="new">

   2020/01/02

</div>

   <div class="char">
         <a href="654.html" target="_blank"><strong>达摩院2020十大科技趋势</strong></a>
   </div>
<div class="xin">
<a href="654.html" target="_blank">VIEW</a>
   </div>
<div class="yin">
   <p> 2020是如此科幻的年份，步入2020年，仿佛回到久违的未来。科技浪潮新十年开启，蓄势已久的智能革命将迎来颠覆性的技术变局。达摩院今天发布2020十大科技趋势，希望与你共同见证那些期待已久或从未料想的变化，并且循着技术演进的曲线，找到我们的来处和去向。</p>
</div>

   <a href="654.html" target="_blank"><img src="999.png"></a>

</div>
</div>
<div class="divtop">
<div class="divtitle">LABORATORY</div>
<div>
   <span class="word">实</span>
      <span class="line">|</span>
   <span class="word">验</span>
      <span class="line">|</span>
   <span class="word">>室</span>
</div>
   </div>
<div class="box">
   <img src="shiyanshi.jpg" />
</div>

<div class="bag">

<div class="divtops">
<div class="divtitle">CAREERS</div>
<div>
   <span class="word">达</span>
      <span class="line">|</span>
   <span class="word">摩</span>
      <span class="line">|</span>
   <span class="word">纳</span>
      <span class="line">|</span>
      <span class="word">贤</span>
</div>
<div class="join-info">
<ul class="join-list clear">
   <li class="join-item">
         <div class="watermark han-symbolyan"></div>
         <div class="ch-title">研究员</div>
         <div class="en-title">Researcher</div>
         <div class="brief"> 面向全球工业界与学术届的精英人才，广纳机器智能领域、数据计算领域、机器人领域、金融科技领域等人才。</div>
   </li>
   <li class="join-item">
            <div class="watermark han-symbolyan"></div>
         <div class="ch-title">访问学者</div>
         <div class="en-title">Visiting Scholar</div>
         <div class="brief"> 面向全球学者提供在阿里巴巴杭州总部、北京或美国西雅图分部的访问机会。访学期间，访问学</div>
   </li>
   <li class="join-item">
            <div class="watermark han-symbolyan"></div>
         <div class="ch-title">博士后</div>
         <div class="en-title">Postdoc</div>
         <div class="brief"> 面向博士群体为期2年的引才培养项目，围绕丰富场景，联合高校培养，解决技术难题。</div>
   </li>
   <li class="join-item">
         <div class="watermark han-symbolyan"></div>
         <div class="ch-title">实习生</div>
         <div class="en-title">Researcher</div>
         <div class="brief">面向海内外顶尖高校的博士生、硕士生及本科生的实习生项目，目标是基于阿里巴巴在电商、金</div>
   </li>
<ul>
</div>
<div class="gao">
<div class="footer">
   <nav class="row">
      <div class="xiao_box xiao_box-1">
            <h3>实验室</h3>
            <ul>
               <li>机器智能</li>
               <li>数据计算</li>
               <li>机器人</li>
               <li>金融科技</li>
               <li>X实验室</li>
            <ul>
      </div>
   <div class="xiao_box xiao_box-2">
      <h3>合作生态</h3>
      <ul>
            <li>合作项目</li>
<li>联合实验室</li>
            </ul>
   </div>
<div class="xiao_box xiao_box-3">
      <h3>加入我们</h3>
      <ul>
         <li>热招岗位</li>
            <li>访问学者</li>
            <li>博士后</li>
               <li>实习生</li>
               <li>阿里故事</li>
         </ul>
   </div>
   <div class="xiao_box xiao_box-4">
      <h3>联系我们</h3>
      <ul>
         <li>damo@alibaba-inc.com</li>
            <li>杭州市余杭区文一西路969号</li>
            <li>阿里巴巴集团</li>
               <li>阿里技术</li>

         </ul>
   </div>
</nav>
</div>
<div class="copyright ">
Copyright © 2018 Alibaba. All Rights Reserved 《法律声明》
</div>
<div class="ipc-bei ">
            <img src="logo.png />
            <span>浙公网安备: 33010002000092号 | ICP备案网站信                息: 浙B2-20120091-4
            </span>
</div>


</div>
下面的是css代码
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.top{
height: 35px;
background-color: #F5F5F5;
text-align: right;
padding-right: 400px;
line-height: 35px;
font-size:14px;
}
.nav{
background-color: #fff;
height: 80px;
text-align: center;
background: url(img/top-background-img.png) center bottom no-repeat;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.02);
}
.menu
{
display: inline-block;
}
.top .split_line
{
margin: 0 5px;
color : #CACDD2;
}
.top .language
{
margin-left:40px;
}
.nav .menu .menu_item
{
float: left;
width: 180px;
text-align: center;
font-size:16px;
font-family:楷体；
}
.image_slider{
background-color: #F5F5F5;

position: relative;
}
.image_slider img
{
width:100%;
height:auto;
}
.image_slider .img_title
{
position: absolute;
left: 50%;
top: 30%;
color:#F9FAFB;
font-size: 16px;
font-family: 仿宋；
font-weight: 400;
}
.image_slider .img_desc
{
position: absolute;
width:40%;
left: 50%;
top: 40%;
color: #ffffff;
font-size: 14px;
line-height: 28px;
opacity：0.8；
}
.image_slider .image_detail_btn
{
position: absolute;
left: 50%;
top: 55%;
height: 40px;
padding: 0 20px;
border: 2px solid #fff;
color: #ffffff;
line-height: 36px;
font-size: 16px;
font-weight: 800;
font-family: 仿宋；
border-radius: 100px;
background: none;
}
.first
{
padding top:300px;
height:356px;
text-align:center;
margin-bottom:20px;
margin-top:1000px;
}
.two
{
height: 60px;
margin-top:40px;
}
.news-slider
{
width:3150;
overflow:auto;

color:1B2B4F;
}
.www
{
text-over: ellipsis;
font-size: 14px;
text-align: center;
}
.eee
{
text-align:center;
font：14px；
margin：0px 590px;

color:#1B2B4F;
}
.ccc
{
background:#1B2B4F;
margin: 11px 599px 17px;
}
.time
{
white-space:pre;
font-size:12px;
}
.scend
{
width:600px;
height:900px;
margin-top:200px;
margin-left:450px;
text-align:center;
}
.scend.charect
{
font-size:40px;
}
.scend .zhi
{
color:#1B2B4F;
font:40px ;
margin:0px 0px 21px;
text-align:center;
}
.scend .chi
{
color:#2A333F
font:14px ;
margin:0px 50px;
text-align:center;
}
.scend .four
{
color:#1B2B4F;
font:32px;
margin:0px 0px 31px;
text-align:center;
font-size:40px;
}
.max
{
height:70px;
width:70px;
padding-top:30px 30px 30px;
}
.new
{
color:#1B2B4F;
font: 12px;
padding:0px 0px 12px;
}
.char
{
color:#1B2B4F;
font:24px;
}
.xin
{
color:#D00000;
font:12px;
padding: 0px 5px 0px 0px;
}
.yin
{
color:#b0b0b0;
font:12px;
padding:0px 16px;

margin-top:20px;
}
.zong
{
width:350px;
height:415px;
background-color:#1B2B4F;
margin:100px auto;
float:left;
overflow:hidden;

}
.zong img
{
width:100%;
}
.divtop
{
width:500px;
height:500px;
text-align:center;
margin-top:80px;
margin-left:450px;
}
.divetitle
{
color:#1B2B4F;
font:12px;
margin:0px 0px 8px;
text-align:center;
}
.word
{
color:#1B2B4F;
font-size :36px;
padding:2px 12px;

}
.line
{
background:#D22C1D;
margin:5px 0px;
}
.box
{
height:500px;
margin:30px;
}
.bag
{
background:#36383D url(damonaxian.jpg) center 0 no-repeat;
position:absolute;
top:0;
width:100%;
height:500px;
margin-top:4000px;
}
.divtops
{
width:500px;
height:500px;
text-align:center;
margin-top:80px;
margin-left:450px;
padding-top:30px;
}
.join-list
{
height:100%;
border-width:0 0 0 1px;
border-style:soild;
border-color:rgba(27,43,79,0.1);
}
.clear
{
clear:both;
}
.join-info
{
height:450px;
margin-top:450px;
width:700px;

}
.join-item
{
position:relative;
float:left;
height:100%;
width:25%;
padding-top:0px;
padding-right:22px;
padding-bottom:0px;
padding-left:22px;
border-width:0 1px 0 0;
border-style:soild;
border-color:rgba(27,43,79,0,1);
}
.watermark {
color: #1B2B4F;
letter-spacing: 0;
margin-top: 32px;
margin-bottom: 20px;
}
.yan {
background-position-x: -900px;
}
.han-symbol {
display: inline-block;
background-image: url(https://img.alicdn.com/tfs/TB19AHAdQL0gK0jSZFtXXXQCXXa-1260-900.svg);
background-size: 1260px 900px;
}
.ch-title {
font-size: 36px;
color: #1B2B4F;
letter-spacing: 0;
line-height: 40px;
font-family:楷体；
}
.brief {
opacity: .8;
font-size: 14px;
color: #1B2B4F;
line-height: 28px;
margin-right: 22px;
position: absolute;
bottom: 100px;
font-family: PingFangSC;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-word;
text-overflow: ellipsis;
overflow: hidden;
}
.en-title {
opacity: .6;
font-size: 16px;
color: #1B2B4F;
letter-spacing: 0;
line-height: 24px;
font-weight: 700;
padding-left: 3px;
font-family:楷体；
}
.footer {
width: 100%;
height: 557px;
min-width: 1000px;
background: url(https://img.alicdn.com/tfs/TB1LIwbMSrqK1RjSZK9XXXyypXa-3840-1114.png) center center no-repeat;
background-size: 1920px 557px;
position: relative;
z-index: 3;
}
.row {
height: 100%;
margin: 0 auto;
position: relative;
}
.wrap {
width: 100%;
height: 420px;
padding-top: 180px;
}
.copyright {
height: 12px;
text-align: left;
font-family: PingFangSC;
font-size: 12px;
color: #1B2B4F;
line-height: 12px;
opacity: .3;
position: absolute;
top: 458px;
left: 60%;
}
.ipc-bei {
position: absolute;
text-align: left;
font-family: PingFangSC;
font-size: 12px;
line-height: 16px;
top: 486px;
left: 60%;
height: 16px;
color: rgba(27,43,79,0.3);
}
.gao
{
height:600;
width:1200px;
position:absolute;
left:150px;
}

.xiao_box
{
text-align:left;
float:left;
}

.xiao_box-1
{
padding-right:140px;
padding-left:70px;
padding-top:150px;
}
.xiao_box-2
{
padding-right:338px;
padding-top:150px;
}
.xiao_box-3
{
padding-right:140px;
padding-top:150px;
}
.xiao_box-4
{
padding-top:150px;
}

zxcbcv 发表于 2020-10-23 19:23:03

占个位子等着上课{:5_105:}

页: [1]

鱼C论坛's Archiver

自己仿制阿里巴巴达摩院网页，急急。