HTML入门(二)表格_字体_超链接_布局

HTML入门(二)表格_字体_超链接_布局

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>商城首页title>
    head>
    <body>
        
        <table border="1px" width="1300px" align="center">
            
            <tr>
                <td>
                    
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td width="33.3%">
                                <img src="../img/logo2.png" height="47px" />
                            td>
                            <td width="33.3%">
                                <img src="../image/header.jpg" height="47px" />    
                            td>
                            <td width="33.3%">
                                <a href="#">登录a>
                                <a href="#">注册a>
                                <a href="#">购物车a>
                            td>
                        tr>
                    table>
                td>
            tr>
            
            <tr height="50px">
                <td bgcolor="black">
                       
                    <a href="#"><font size="5" color="white">首页font>a>     
                    <a href="#"><font color="white">手机数码font>a>    
                    <a href="#"><font color="white">电脑办公font>a>    
                    <a href="#"><font color="white">鞋靴皮包font>a>    
                    <a href="#"><font color="white">家用电器font>a>    
                td>
            tr>
            
            <tr>
                <td>
                    <img src="../img/1.jpg" width="100%"/>
                td>
            tr>
            
            <tr>
                <td>
                    
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td colspan="7">
                                  
                                <font size="5">最新商品font>  
                                <img src="../img/title2.jpg" />
                            td>
                        tr>
                        <tr>
                            <td rowspan="2" width="190px" height="500px">
                                <img src="../img/big01.jpg" width="100%" height="100%"/>
                            td>
                            <td colspan="3" width="555px" height="250px">
                                <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/>a>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                        tr>
                        <tr>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                            <td width="185px" height="250px" align="center">
                                <a href="#"><img src="../img/small03.jpg" />a><br />
                                <a href="#"><font color="gray">电炖锅font>a><br /><br />
                                <font color="red">¥299.00font>
                            td>
                        tr>
                    table>
                td>
            tr>
            
            <tr>
                <td>
                    <img src="../img/ad.jpg" width="100%" />
                td>
            tr>
            
            <tr>
                <td>
                    热门商品
                td>
            tr>
            
            <tr>
                <td>
                    <img src="../img/footer.jpg" width="100%"/>
                td>
            tr>
            
            <tr>
                <td align="center">
                    <a href="#">关于我们a> 
                    <a href="#">联系我们a> 
                    <a href="#">招贤纳士a> 
                    <a href="#">法律声明a> 
                    <a href="#">友情链接a> 
                    <a href="#">支付方式a> 
                    <a href="#">配送方式a> 
                    <a href="#">服务声明a> 
                    <a href="#">广告声明a> 
                    <p>
                        Copyright © 2005-2016 传智商城 版权所有
                    p>
                td>
            tr>
        table>
    body>
html>

HTML入门(二)表格_字体_超链接_布局_第1张图片

HTML入门(二)表格_字体_超链接_布局_第2张图片

 

posted @ 2017-09-26 22:28 douzujun 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:(HTML入门(二)表格_字体_超链接_布局)