html+css

于 2019-09-24 20:27:43 发布
阅读量113 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lord_GEO/article/details/101310568
版权

只用table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<table>
<table width="100%" cellspacing="0">
    <tr>
        <td align="left">
            <img src="../img/logo2.png" height="50px">
        </td>
        <td align="center">
            <img src="../img/header.jpg" >
        </td>
        <td align="right">
           <a href="#">登入</a>
            <a href="#">注册</a>
            <a href="#">购物车</a>
        </td>
    </tr>
</table>
<table width="100%" bgcolor="black" >
    <tr >
        <td align="center"><a href="#"><font color="white">首页</font></a></td>
        <td  align="center"><a href="#"><font color="white">手机数码</font></a></td>
        <td  align="center"><a href="#"><font color="white">鞋靴箱包</font></a></td>
        <td  align="center"><a href="#"><font color="white">电脑办公</font></a></td>
        <td align="center"><a href="#"><font color="white">香烟酒水</font></a></td>
    </tr>
</table>
    <tr>
        <td align="center">
            <img src="../img/1.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <h3>最新商品<img src="../img/title2.jpg"></h3>
        </td>
    </tr>
    <tr>
        <td >
            <table width="100%">
                <tr>
                    <td rowspan="2" height="480px" width="206px">
                        <img src="../products/hao/big01.jpg" >
                    </td>
                    <td colspan="3" height="240px" >
                        <img src="../products/hao/middle01.jpg" height="240px" width="100%">
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                    <td>
                        <img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red">$1000</font></p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <img src="../products/hao/ad.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <img src="../img/footer.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%">
                <tr align="center">
                    <td >
                        <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>
                    </td>
                </tr>
                <tr align="center">
                    <td>Copyright@2019-2039中软国际 版权所有</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

用上了css


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .logo{
            float: left;
            width: 33%;
            height: 60px;
            line-height: 60px;
        }

        .menu{
            width: 18%;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            line-height: 50px;
            height: 50px;
        }

        .product{
            float: left;
            text-align: center;
            width: 16.6%;
            height: 240px;
        }

    </style>
</head>
<body>
<div>
    <div>
        <div class="logo">
            <img src="../img/logo2.png" height="50px">
        </div>
        <div class="logo" align="center">
            <img src="../img/header.jpg">
        </div>
        <div class="logo" align="right">
            <a href="#">登入</a>
            <a href="#">注册</a>
            <a href="#">购物车</a>
        </div>
    </div>
    <div style="clear: both"></div>

    <div style="background-color: black;height: 50px">
        <a href="#" class="menu"><font color="white">首页</font></a>
        <a href="#" class="menu"><font color="white">手机数码</font></a>
        <a href="#" class="menu"><font color="white">鞋靴箱包</font></a>
        <a href="#" class="menu"><font color="white">电脑办公</font></a>
        <a href="#" class="menu"><font color="white">香烟酒水</font></a>
    </div>

    <div>
        <img src="../img/1.jpg" width="100%">
    </div>

    <div>
        <div><h2>最新商品<img src="../img/title2.jpg"></h2></div>

        <div style="float: left;height: 480px">
            <img src="../products/hao/big01.jpg">
        </div>
        <div style="float: left;height: 480px;width: 80%">
            <div style="float: left;width: 50%;height: 240px">
                <img src="../products/hao/middle01.jpg" width="100%" height="100%">
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>
            <div class="product">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p style="color: red;">$999</p>
            </div>

        </div>

    </div>
    <div>
        <img src="../products/hao/ad.jpg" width="100%">
    </div>

    <div>
        <img src="../img/footer.jpg" width="100%">
    </div>

    <div style="text-align: center">
        <a href="#">关于我们</a>
        <a href="#">关于我们</a>
        <a href="#">关于我们</a>
        <a href="#">关于我们</a>
        <a href="#">关于我们</a>
        <a href="#">关于我们</a>
    </div>

    <div style="text-align: center">
        Copyright @ 2019-2039 中软国际 版权所有
    </div>



</div>

</body>
</html>
Lord_GEO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css 实现简单的列表
qq_38836118的博客
12-05 3812
实现效果 结构 128.00 0 苏州石公山、明月湾、古樟园一日自驾游 南京-->苏州 出发时间： 2017-12-02 共 1 天 踏青旅游
html+css+js实现类似音乐app似的列表播放
weixin_30797199的博客
05-17 787
最近做了一个类似于音乐app里面列表播放的功能，主要是音频播放和按钮状态的联动： 　　界面如下： 　　　　　 　　如上图所示 　　　　上面有一个播放按钮 　　　　下面有一个播放列表 　　　　上面还有一个歌曲长度的总时长 　　　　上面一个按钮能控制下面所有歌曲的播放和暂停 　　　　下面的也可以控制相对应的歌曲的播放和暂停 　　　　上面的按钮要做到和下面的按钮状态同步 　　　　头部...
纯CSS实现展开列表
YooHoeh的博客
05-26 5953
效果预览 以下为源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;style&gt; *{ padding:0;
html&css练习表
John_boom的博客
07-16 920
HTML5&CSS编程实战课程列表 快速练习这里面的习题，可以加深对html与css的了解。
BootStrap-CSS选项列表大全
jklfjsdj79hiofo的专栏
09-13 9443
将以前学习的总结整理下：以下是BootStrap-CSS选项大全 手风琴效果 accordion accordion-group accordion-headin  accordion-inner accordion-toggle active 选中状态 add-on 弹出提示信息 Alert Alert-heading Alert-block Alert-dange
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
HTML+CSS总结.doc
11-17
HTML+CSS总结.doc
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
HTML+CSS+JS 网页设计模板.zip
05-31
HTML+CSS+JS 网页设计模板.zip
html+css+js网页设计源代码.zip
05-31
计软院和巨耀通杯网页设计大赛作品，一个猫站。
中软国际实训全记录——第一天
weixin_44218075的博客
07-10 1087
中软国际实训第一天——软件安装安装jdk 1.0功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 安装jdk 1.0 下...
中软培训第一周复习总结 --简单的HTML 与CSS
banghuangshuo6405的博客
09-04 185
一些需要记住的点： day1 HTML格式及简单标签: 　　html 文件一般格式： 1 <html> 2 <head lang="en"> 3 <meta charset="utf-8"> 4 <title>页面名称</title> 5 </head&...
CSS 自定义列表样式
feng2029的专栏
06-18 4865
CSS列表样式 使用图片显示列表样式本例中使用了 list-orange.png 图片我们还可以使用 list-green.png top.png 或 up.png 图片学习列表样式 自定义列表样式 ul  {  list-style-image:url("/images/list-orange.png"); } 使用图片显示列表样式 本
用HTML+CSS实现简单的下拉列表
u014745848的专栏
03-31 812
HTML里面的代码 CSS的样式： 效果：
css 列表横向排列
热门推荐
tt010175的博客
10-10 1万+
ul class="list-inline" style="margin-left: 60px;"> li>a href="#" >111a>li> li>a href="#" >222a>li> li>a href="#" >333a>li> li>a href="#" >111a>li> li>a href="#" >222a>li> li>a
用html与css实现一个下载列表
☂yǒng 超-站在巨人的肩膀上来创新.
07-27 852
今天项目需求，需要一个鼠标放在一个下载超链接上然后弹出一个文本框显示左右上传的
使用DIV+CSS实现下拉列表菜单
Java海洋
01-19 5754
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><br /> <html xmlns="http://www.w3.org/1999/xhtml "><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html;
中软国际实训-第六天
Slience_Lee的博客
07-16 268
SSM框架-分页、新建、修改 今天也就是在之前工作的基础上，完成分页，用户增加、用户修改等操作。 分页 就是在use-list页面上，将用户列表能够转页保存，效果如下： 代码如下： Controller.java public ModelAndView findAll(@RequestParam (defaultValue = "1") int page,@RequestParam(defau...
《中软国际实习Day6:在子模块ssm框架基础上实现增删改查》
qq_42107181的博客
07-03 125
前提：搭建子模块的ssm框架以及实现登录功能在前一篇博客已经给出，故不在赘述，这里只对登录后对数据库增删改查进行简单说明 说明框架图如下所示（资源文件以及webapp文件等前端材料自行准备，这里只做后台的编程介绍） 用户信息（UserInfo类)：注意写完变量后利用系统自动生成get and set 等方法 package com.zhongruan.bean; public clas...
html＋css书城
最新发布
03-09
HTML和CSS是用于构建网页的两种核心技术HTML（超文本标记语言）用于定义网页的结构和内容，而CSS（层叠样式表）用于控制网页的样式和布局。 一个基本的HTML+CSS书城网页可以包含以下几个部分： 1. 页面结构：使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值