网页模仿

2019-03-31 10:40:03 阅读：267 来源： 互联网

标签：translateX 100% transform webkit 网页书名模仿售价

网页链接：C:\Users\john\Desktop\软工3\软工实验2.2\new_file.html

原网页：

模仿网页：

代码：

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>网上购书</title>
    
    
     <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 3000px;
            margin: 0 auto;
            border: 2px solid royalblue;
            overflow: hidden;
        }
 
        .animate {
            padding-left: 100px;
            font-size: 50px;
            color: mediumvioletred;
            display: inline-block;
            white-space: nowrap;
            animation: 10s wordsLoop linear infinite normal;
        }
 
        @keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
 
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
    </style>

 
    </head>
    <body>
    <div class="box">
    <p class="animate">
       欢迎来到当当书城,当当书城网上书店，正版图书，低价好品质，货到付款，优惠享不停！买书尽在当当，满49元免运费！
    </p>
    </div>

        <table width="100%">
            <td>
                <img  src="01.png">
            </td>
            <td>
                <img src=02.gif width="50" align="middle">
                <a href="http://shopping.dangdang.com/shoppingcart/shopping_cart.aspx?product_ids=0&referer=http://www.dangdang.com/&prev_referer=https://www.sogou.com/link?url=DSOYnZeCC_poyYGZwEVHzJhPzjxJoEXAreaVHN88tHY.">购物车</a>|<a href="http://help.dangdang.com/index">帮助中心</a>|<a href="https://login.dangdang.com/signin.aspx?returnurl=http%3A//shop.dangdang.com/20816">登录</a>
            </td>
        </table>
        

        <table width="100%" bgcolor="black" align="center">
            <td align="center">
                <font color="white">文字  生活  计算机  外语  经营  励志  社科  学术  少儿  艺术  原版  科技  考试  生活百科  <font color="yellow">全部商品目录</font></font>
            </td>
        </table>
        

        <table width="100%" bgcolor="lightblue">
            <tr>
                <td align="right">
                    <a href=http://book.dangdang.com/20190321_izlv /> <button type="button">搜索</button></td>
                </td>
            </tr>
        </table>
        
        
        <div align="right">首页>旅游>图书列表</div>
        

        <h1>
        <a href=http://book.dangdang.com/><font color="orangered">全部商品分类</font></h1>
        <hr/>
        
        <h1>新书上架 </h1>
        <br/>
        
 
        <span>共xxx种商品</span>
        <hr>
        
        <img  src="03.gif" width="100%"/>
        
        
        <table width="100%" align="center">
            <tr>
                <td align="center">
                    <img src="04.jpg"/>
                </td>
                <td align="center">
                    <img src="05.jpg"/>
                </td>
                <td  align="center">
                    <img src="06.jpg"/>
                </td>
                <td align="center">
                    <img src="07.jpg"/>
                </td>
            </tr>
            <tr >
                
                <td align="center">书名：学会宽容<br/>售价：38.00元</td>
                <td align="center">书名：别做正常的傻瓜<br/>售价：45.24元</td>
                <td align="center">书名：培育男孩<br/>售价：30.00元</td>
                <td align="center">书名：谁动了我的奶酪<br/>售价：56.46元</td> 
            </tr>
            <tr>
                <td align="center">
                    <img src="08.jpg"/>
                </td>
                <td align="center">
                    <img src="09.jpg"/>
                </td>
                <td  align="center">
                    <img src="10.jpg"/>
                </td>
                <td align="center">
                    <img src="11.jpg" width="40%"/>
                </td>
            </tr>
            <tr>
                <td align="center">书名：赢在影响力<br/>售价：43.58元</td>
                <td align="center">书名：时空穿行<br/>售价：29.47元</td>
                <td align="center">书名：感悟<br/>售价：42.01元</td>
                <td align="center">书名：网管员必备宝典<br/>售价：43.27元</td>
            </tr>
        </table>
  
        <table width="100%" bgcolor="lightgray">
            <tr>
                <td rowspan="2">
                    <img  src="01.png">
                </td>
                <td>CONTACT us</td>
            </tr>
            <tr>
                <td>Copyright (C) 当当网 2004-2017, All Rights Reserved</td>
            </tr>
        </table>
    
  </body>
</html>

标签：translateX,100%,transform,webkit,网页,书名,模仿,售价
来源： https://www.cnblogs.com/wshuqing/p/10630411.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网页模仿