网页练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>智博星</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
body {
    background-image: url(Images/banner.jpg);
    background-attachment: fixed;
    min-width: 980px;
}
.div1 {
    height: 950px;
    width: 100%;
    position: relative;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#div2 {
    background-image: url(Images/banner2.jpg);
}
#div3 {
    background-image: url(Images/banner3.jpg);
}
#div4 {
    background-image: url(Images/banner4.jpg);
}
.div5 {
    background-color: #333;
    width: 100%;
    height: 478px;
    position: relative;
}
.anniu {
    width: 240px;
    height: 40px;
    border: 1px solid #00B8A2;
    border-radius: 10px;
    line-height: 30px;
    color: #FFF;
    background-color: #00B8A2;
    cursor: pointer;
    transition: 0.5s;
    padding: 10px 60px;
}
.anniu:hover {
    opacity: 0.7;
}
#divtop {
    height: 60px;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99;
}
#zuodiv {
    background-image: url(Images/logo-01.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 60px;
    background-position: center center;
    width: 160px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99;
}
#youdiv {
    width: 800px;
    height: 60px;
    position: fixed;
    top: 0px;
    right: 40px;
    line-height: 60px;
    z-index: 99;
}
li {
    float: left;
    color: #FFF;
    margin-left: 40px;
    list-style: none;
    cursor: pointer;
}
li:hover {
    cursor: pointer;
    color: white;
    border-bottom: 3px solid #00B8A2;
}
a {
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
}
#youzuo {
    width: 450px;
    height: 60px;
    line-height: 60px;
    position: absolute;
}
#youyou {
    width: 350px;
    height: 60px;
    position: absolute;
    top: 0px;
    right: 0px;
}
.denganniu {
    width: 70px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #00B8A2;
    top: 15px;
    position: relative;
    float: left;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
}
#zhu {
    color: white;
    background-color: #00B8A2;
    cursor: pointer;
}
#deng {
    color: #00B8A2;
    transition: 0.5s;
    cursor: pointer;
}
#deng:hover {
    color: white;
    background-color: #00B8A2;
}
#sou {
    width: 150px;
    height: 30px;
    border: 1px solid #00B8A2;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    right: 20px;
}
.ios {
    width: 230px;
    height: 42px;
    border: 1px solid #999;
    top: 50px;
    position: relative;
    margin-left: 400px;
    border-radius: 5px;
    color:#FFF;    
    line-height: 42px;
    background-image:url(../../HTML%E4%B8%8A%E8%AF%BE%E9%83%A8%E5%88%86/10.24/og1_.png);
    background-size:20px; 
    background-repeat: no-repeat;
    background-position:10px;
    font-weight:bold;
    
}
.ios1:hover{
    cursor: pointer;
    background-color: #6d8dab;
    font-weight: bold;
}
.ios2:hover{
    cursor: pointer;
    background-color: #6d8dab;
    font-weight: bold;}
    .ios:hover{
    cursor: pointer;
    background-color: #6d8dab;
    font-weight: bold;}
.ios1 {
    width: 230px;
    height: 42px;
    border: 1px solid #999;
    top: 50px;
    position: absolute;
    margin-left: 800px;
    border-radius: 5px;
    color: #FFF;
    text-align: center;
    line-height: 42px;font-weight:bold;
}
.ios2 {
    width: 230px;
    height: 42px;
    border: 1px solid #999;
    top: 50px;
    position: absolute;
    margin-left: 1200px;
    border-radius: 5px;
    color: #FFF;
    text-align: center;
    line-height: 42px;font-weight:bold;
}
.cp {
    position: relative;
    width: 150px;
    height: 160px;
    left: 380px;
    top: 140px;
}
.gs {
    position: absolute;
    width: 150px;
    height: 160px;
    left: 680px;
    top: 185px;
}
.zc {
    position: absolute;
    width: 150px;
    height: 160px;
    left: 1000px;
    margin-top: -15px;
}
.lx {
    position: absolute;
    width: 300px;
    height: 160px;
    right: 300px;
    margin-top: -10px;
}
.di {
    position: relative;
    width: 1200px;
    height: 50px;
    left: 380px;
    border-top: 1px solid #03C;
    top: 200px;
}
.jiantou{ margin-top:150px; border-radius:50px;
    }
.jiantou:hover{ background-color:#999;}
</style>
</head>

<body>
<div id="divtop"> </div>
<div id="zuodiv"></div>
<div id="youdiv">
  <div id="youzuo">
    <ul style="z-index:2;">
      <li><a href="#" style="color:#00B8A2">首页</a></li>
      <li><a href="#">下载</a></li>
      <li><a href="#">动态</a></li>
      <li><a href="#">社区</a></li>
      <li><a href="#">智博星</a></li>
    </ul>
  </div>
  <div id="youyou">
    <div class="denganniu" id="deng">登陆</div>
    <div class="denganniu" id="zhu">注册</div>
    <div id="sou">
      <input type="text" placeholder=" 搜索" style="background:none; color:white; font-size:20px; height:28px; width:120px; border:none; position:relative; top:1px;" />
      <img src="Images/searchIcon.png" style="position:absolute; top:5px; right:7px;" /> </div>
  </div>
</div>
<div class="div1"> <img style="margin-top:300px;" src="Images/01.png" /><br />
  <img style="margin-top:20px; opacity:0.7;" src="Images/02.png" /><br />
  <br />
  <a class="anniu">产品亮点</a><br />
 <img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /></div>
<div class="div1" id="div2"> <img style="margin-top:300px;" src="Images/201.png" /><br />
  <img style="margin-top:20px; opacity:0.7;" src="Images/202.png" /><br />
  <br />
  <a class="anniu">用户故事</a> <br />
 <img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /> </div>
<div class="div1" id="div3"> <img style="margin-top:300px;" src="Images/301.png" /><br />
  <img style="margin-top:20px; opacity:0.7;" src="Images/302.png" /><br />
  <br />
  <a class="anniu">功能列表</a> <br />
<img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /></div></div>
<div class="div1" id="div4"> <img style="margin-top:300px;" src="Images/401.png" /><br />
  <img style="margin-top:20px; opacity:0.7;" src="Images/402.png" /><br />
  <br />
  <a class="anniu">注册体验</a> <br />
<img class="jiantou" src="../../HTML上课部分/10.24/箭头上.png" /></div></div>
<div class="div5">
  <div class="ios">&nbsp;&nbsp;iOS版下载</div>
  <div class="ios1">Android版下载</div>
  <div class="ios2">PC版下载</div>
  <div class="cp">
    <table>
      <tr height="40">
        <td style="color:white; font-size:20px;">产品</td>
      </tr>
      <tr height="30">
        <td>◆产品介绍</td>
      </tr>
      <tr height="30">
        <td>◆使用手册</td>
      </tr>
      <tr height="30">
        <td>◆更新日志</td>
      </tr>
      <tr height="30">
        <td>◆案例展示</td>
      </tr>
    </table>
  </div>
  <div class="gs">
    <table>
      <tr height="40">
        <td style="color:white; font-size:20px;">公司</td>
      </tr>
      <tr height="30">
        <td>◆关于团队</td>
      </tr>
      <tr height="30">
        <td>◆招聘专栏</td>
      </tr>
      <tr height="30">
        <td>◆新闻资讯</td>
      </tr>
      <tr height="30">
        <td>◆合作加盟</td>
      </tr>
    </table>
  </div>
  <div class="zc">
    <table>
      <tr height="40">
        <td style="color:white; font-size:20px;">支持</td>
      </tr>
      <tr height="30">
        <td>◆官方博客</td>
      </tr>
      <tr height="30">
        <td>◆用户社区</td>
      </tr>
      <tr height="30">
        <td>◆在线模版</td>
      </tr>
      <tr height="30">
        <td>◆隐私声明</td>
      </tr>
      <tr>
        <td>◆服务条款</td>
      </tr>
    </table>
  </div>
  <div class="lx">
    <table>
      <tr height="40">
        <td style="color:white; font-size:20px;">联系我们</td>
      </tr>
      <tr height="30">
        <td>地址：中国.山东省淄博市张店区齐鲁电商谷</td>
      </tr>
      <tr height="30">
        <td>电话：0533-6078222</td>
      </tr>
      <tr height="30">
        <td>信箱：6078222@163.com</td>
      </tr>
    </table>
  </div>
  <div class="di"></div>
</div>
</body>
</html>

智博星

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple(中国)-官方网站</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
.a {
    height: 40px;
    background-color: #333;
    z-index: 2;
    position: relative; opacity:0.5; z-index:99;
}
.aa {
    height: 20px;
    width: 100px;
    right: 400px;
    position: absolute;
    top: 15px
}
.b {
    height: 700px;
    position:relative;
    width: 100%; background-image:url(../../HTML%E9%83%A8%E5%88%86/1029/Images/event_large.jpg); background-repeat:no-repeat; background-position:center;
}
.c {
    height: 200px;
    position:relative;
    width:100%;
}
.cc {
    height: 200px;
    position:relative;
    float: left;
    width: 25%;
    margin: 0px
}
}
#a {
    left: 400px;
    position: relative;
    bottom: 9px
}
.c1 {
    float: left;
    position: relative; margin-left:80px;line-height:40px; color:white; z-index:99;}
.c1:hover{ color:#666; cursor:pointer;}
.a1{ position:fixed;}
li {
    position: relative;
    height: 20px;
    color: #535353;
}
li:hover {
    text-decoration: underline;
}
li.biao {
    position: relative;
    text-shadow: 0px 0px 1px #4F4F4F;
    font-size: 12px;
    color: #000;
}
li.biao:hover {
    text-decoration: none;
}
</style>
</head>

<body>
<div style="border-bottom:1px solid; height:40px; background-color:#666;">
  <div class="aa"><font size="-5" color="#999999">
    <广告>
    </font></div>
</div>
<div class="b">
  <div class="a">
    <ul style="position:relative; list-style:none; left:350px;">
      <li  class="c1"><img src="og1.png" width="40"/></li>
      <li class="c1">Mac</li>
      <li  class="c1">iPad</li>
      <li class="c1">iPhone</li>
      <li class="c1">Watch</li>
      <li class="c1">Music</li>
      <li class="c1">技术支持</li>
      <li class="c1"><img src="搜索.png" width="52"</li>
      <li class="c1"><img src="锁.png"</li>
    </ul>
  </div>
</div>
<div class="c">
  <div class="cc"><img src="../../HTML部分/1029/Images/nike_watch_large.jpg" /></div>
  <div class="cc"><img src="../../HTML部分/1029/Images/airpods_large.jpg" /></div>
  <div class="cc"><img src="../../HTML部分/1029/Images/iphone_upgrade_large.jpg" /></div>
  <div class="cc"><img src="../../HTML部分/1029/Images/accessibility_large.jpg" /></div>
</div>
<div style=" position:relative; width:100%;height:460px; line-height:40px; text-align:left; top:5px; background-color:#f2f2f2;">
  <div style="width:1000px; margin-left:auto; margin-right:auto;">
    <div style="position:relative;width:100%; height:50px; font-size:12px; color:#A7A7A7;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。
      <hr />
    </div>
    <div style="position:relative;width:100%;height:245px; font-size:12px;">
      <div style="margin-left:20px; width:200px;position:relative;">
        <ul style="list-style:none;position:relative;float:left;">
          <li class="biao">选购及了解</li>
          <li>Mac</li>
          <li>iPad</li>
          <li>iPhone</li>
          <li>Watch</li>
          <li>Music</li>
          <li>iTunes</li>
          <li>iPod</li>
          <li>配件</li>
        </ul>
      </div>
      <div style="margin-left:100px; width:200px;position:relative;float:left;">
        <ul style="list-style:none;position:relative;">
          <li class="biao">Apple Store 商店</li>
          <li>查找零售店</li>
          <li>Genius Bar 天才吧</li>
          <li>讲座和学习</li>
          <li>青少年活动</li>
          <li>Apple Store App</li>
          <li>翻新和优惠</li>
          <li>分期付款</li>
          <li>重复使用和循环利用</li>
          <li>订单状态</li>
          <li>选购帮助</li>
        </ul>
      </div>
      <div style=" width:200px;position:relative;float:left;">
        <div style=" width:200px;position:relative;float:left;">
          <ul style="list-style:none;position:relative;">
            <li class="biao">教育应用</li>
            <li>Apple 与教育</li>
            <li>高校师生选购</li>
          </ul>
        </div>
        <div style=" width:200px;position:relative;float:left; top:20px;">
          <ul style="list-style:none;position:relative;">
            <li class="biao">商务应用</li>
            <li>Apple 与商务</li>
            <li>商务选购</li>
          </ul>
        </div>
      </div>
      <div style=" width:200px;position:relative;float:left;">
        <div style=" width:200px;position:relative;float:left;">
          <ul style="list-style:none;position:relative;">
            <li class="biao">帐户</li>
            <li>管理你的 Apple ID</li>
            <li>Apple Store 帐户</li>
            <li>iCloud.com</li>
          </ul>
        </div>
        <div style=" width:200px;position:relative;float:left; top:20px;">
          <ul style="list-style:none;position:relative;">
            <li class="biao">Apple 价值观</li>
            <li>辅助功能</li>
            <li>环境责任</li>
            <li>隐私</li>
            <li>供应商责任</li>
          </ul>
        </div>
      </div>
      <div style=" width:200px;position:relative;float:left;">
        <ul style="list-style:none;position:relative;">
          <li class="biao">关于 Apple</li>
          <li>Apple 资讯</li>
          <li>工作机会</li>
          <li>媒体资讯</li>
          <li>活动</li>
          <li>联系 Apple</li>
         </ul>
      </div>

    </div>
        <div style="position:relative;width:100%;font-size:12px; color:#A7A7A7;">
        更多选购方式：前往 Apple Store 零售店，致电 400-666-8800 或查找在你附近的授权经销商。
      <hr />
      <div style="position:relative;float:left;">Copyright © 2016 Apple Inc. 保留所有权利。隐私政策丨使用条款丨销售政策丨法律信息丨网站地图</div>
      <div style="position:relative; margin-right:0px; width:56px; height:20px; float:right; background-image:url(cut/China.png)"></div>
      <div style="position:relative;float; width:950px; height:20px; line-height:20px;float:left;">京公安网安备 11010502008968 京ICP备10214630</div>
          </div>
  </div>
</div>
</body>
</html>

苹果

posted @ 2016-10-30 19:29 孤丷狼阅读(180) 评论(0) 编辑收藏举报

刷新页面返回顶部