网站购物车界面(div+css实现)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>叮咚网购物车</title>
<style type="text/css">
.main{
width:100%;
height:590px;
border:1px solid #000;
text-decoration: none;
}
.top{
width:100%;
height:52px;
border:1px solid #000;
}
.downMenu{
width:100%;
height:30px;
font:normal normal 20px "宋体";
color:#fff;
background-color: #000000;
}
#search{
margin-left:520px;
}
a{
text-decoration: none;
}
#img1{
margin-left:330px;
}
#logo{
font:normal normal 20px "宋体";
padding-bottom: 5px;
}
#d{
padding-bottom:30px;
margin-left:290px;
}
a:link{
font-size: 20px;
color:aquamarine;
}
a:visited{
color:darkgray;
}
a:hover{
color:#FFFFFF;
}
a:active{
color:cadetblue;
}
.bottom{
text-align: center;
}
#img5{
width:100%;
height:80px;
}
#indent{
width:100%;
height:300px;
padding-left: 180px;
padding-top:60px;
}
table{
text-align: center;
border-collapse:collapse;
}
#tr1{
background-color:antiquewhite;
}
#tr2{
background-color:aliceblue;
}
#font1{
margin-left:530px;
font:italic normal 16px "黑体";
}
#font2{
margin-left:770px;
font:normal normal 16px "黑体";
}
</style>

</head>
<body>
    <div class="main">
        <div class="top">
            <div id="logo">
                <img src="img/logo.gif" title="叮咚网logo" alt="logo"></img>
                <img src="img/header.png" title="img1"   alt="img1" id="img1"></img>
                <a href="登录.html" target="_blank" id="d"><font color="darkcyan">登录</font></a>&nbsp;&nbsp;
                <a href="注册.html" target="_blank"><font color="darkcyan">注册</font></a>&nbsp;&nbsp;
                <a href="购物车.html" target="_blank"><font color="darkcyan">购物车</font></a>
            </div>
        </div>
        <div class="downMenu">
                <a href="#" target="_blank">首页</a>&nbsp;&nbsp;
                <a href="#" target="_blank">手机数码</a>&nbsp;&nbsp;
                <a href="#" target="_blank">电脑办公</a>&nbsp;&nbsp;
                <a href="#" target="_blank">学习用品</a>&nbsp;&nbsp;
                <a href="#" target="_blank">家具电器</a>
                <input  id="search" type="text" name="search" value="search">
                <input type="submit" name="submit" value="submit">
        </div>
        <div id="indent">
            <font color="#000000" size="5px" weight="bold">订单详情</font>
            <table border="1px" width="960px" height="100px">
                <tr id="tr1">
                    <td>图片</td>
                    <td>商品</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr id="tr2">
                    <td>
                        <img src="img/dadonggua.jpg" width="80px" height="60px">
                    </td>
                    <td>
                        <font color="aqua"> 有机蔬菜&nbsp;&nbsp;大冬瓜</font>
                    </td>
                    <td>
                        ¥298.00
                    </td>
                    <td>
                        <input type="text" name="price" value="1">
                    </td>
                    <td>
                        ¥596.00
                    </td>
                    <td>
                        删除
                    </td>
                </tr>
            </table>
            <div id="price">
                <font color="darkorange" id="font1">登录后是否享有优惠</font>&nbsp;&nbsp;
                赠送积分:
                <font color="darkorange">596</font>
                商品金额:
                <font color="darkorange">¥596.00元</font><br />
                <font color="deepskyblue" id="font2">清空购物车</font>&nbsp;&nbsp;&nbsp;
                <input type="submit" name="redister" value="提交订单" id="submit">
            </div>
        </div>

        <div class="img5">
            <img src="img/footer.jpg" id="img5">
        </div>
        <div class="bottom">
            <a href="#" target="_blank"><font color="dodgerblue" size="3px"> 关于我们</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">联系我们</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">招贤纳士</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">法律声明</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">友情链接</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">支付方式</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">配送方式</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">服务声明</font></a>&nbsp;&nbsp;&nbsp;
            <a href="#" target="_blank"><font color="dodgerblue" size="3px">广告声明</font></a>
        </div>
        <div class="bottom">
            <font size="2px">Copyright&copy;2015-2016西部开源&nbsp;版权所有</font>
        </div>
    </div>
</body>

</html>

原文地址:http://blog.51cto.com/13678728/2092391

时间: 2024-07-30 03:06:21

网站购物车界面(div+css实现)的相关文章

网站注册界面(div+css实现)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52p

网站登录界面(div+css实现)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52p

使用Div+CSS布局设计网站的优点

网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样.      <DIV>Very excellent webmaster club www.qpsh.com </DIV>      如果单独使用 DIV

DIV+CSS的好处和意义

DIV+CSS的好处和意义 http://www.ijavascript.cn/jiaocheng/div-css-sense-435.html 业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样. 如果单独使用 DIV 而不

DIV+CSS简介

传统页面数据和布局都混合在一起,如下图: 而DIV+CSS存在下述优势: 1.符合W3C标准.微软等公司均为W3C支持者.这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰. 2.支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容. 3.搜索引擎更加友好.相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好. 4.样式的调整更加方便.内容和样式的分离,使页面和样式的调整变得更加方便. 现在YAHOO

DIV+CSS的好处

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样. 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 是一样的. DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 C

div+css的优势

什么是div+css:在介绍div+css优势之前先来介绍一下什么是div+css.div+css是当下网页设计中最流行的词汇之一,它是一种网页布局方式.在XHtml标准中,不再使用table定位方式,而是通过CSS控制div来实现我们所需要的定位,即div+css布局.此种布局方式已经超越表格布局方式,成为当下最为流行的方式,当前主流的大型网站甚至中小企业网站都已div+css布局方式,可见它的优越性所在.div+css的优势:div+css网页布局相对于table布局方式具有以下几个主要的优

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

div+css登陆界面案例2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873a