m0_71347170 2022-06-02 15:16 采纳率: 100%
浏览 77
已结题

利用css+div技术设计网站页面

用html，css+div设计网页，要求列出代码，布局居中
效果图

img


细节图

img

img

img

img

img

img

  • 写回答

3条回答 默认 最新

  • m0_71637046 2022-06-02 16:40
    关注
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background: url(img/bg01.jpg);
            }
            #top1{
                position: absolute;
                top: 50px;
                left: 280px;
            }
            #top2{
                position: absolute;
                top: 80px;
                right:300px;
            }
            #menu{
                position: absolute;
                top:140px;
                left: 250px;
            }
            #menu ul{
                list-style-type: none;
            }
            #menu ul li{
                background: url(img/2177b214acf84fc1b912248ccb1566a5.jpg);
                float: left;
                padding: 10px 30px;
            }
            #menu a{
                text-decoration : none;
                color: white;
            }
            #b1{
                background: url(img/578eae048aa945d0a6295c90eb843e50.jpg);
                position: absolute;
                top: 220px;
                left: 290px;
                border: solid black 1px;
                padding: 10px 915px 10px 20px;
            }
            #b2{
                position: absolute;
                top: 350px;
                left: 300px;
            }
            .t{
                margin: 50px 0px;
            }
            .i{
                position: absolute;
                top: 100px;
                right: 0px;
            }
            #g{
                background:url(img/2177b214acf84fc1b912248ccb1566a5.jpg);
                color: white;
                position: absolute;
                top: 10px;
                right: 300px;
                padding: 5px 5px;
            }
        </style>
    </head>
    <body>
        <div id="g"><!--顶部购物车按钮-->
            我的购物车
        </div>
        <div id="top1"><!--顶部logo-->
            < img src="img/logo.png"/>
        </div>
        <div id="top2"><!--顶部标题-->
            < img src="img/icon1.png"/>
        </div>
        <div id="menu"><!--导航栏-->
            <ul>
                <li><a href=" ">首页</a ></li>
                <li><a href="#">裸钻搜索</a ></li>
                <li><a href="#">成品下单区</a ></li>
                <li><a href="#">国际钻石报价表</a ></li>
                <li><a href="#">证书查询</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="b1"><!--位置导航-->
            您现在的位置：首页>关于我们
        </div>
        <div id="b2"><!--内容-->
            <h2>福瑞星珠宝————最专业的网上钻石交易平台</h2>
            <p>福瑞星珠宝公司背靠世界顶级钻石供应商，有强大的货源支撑及最低廉的价格优势面向广大客户。同时公司还具有最专业的首饰设计及加工中心，可</p >
            <p>以满足不同客户的各种需求。公司本着立足长远，稳步发展的宗旨，愿以最优质的服务，最低廉的价格，
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 6月2日
  • 已采纳回答 6月2日
  • 赞助了问题酬金5元 6月2日
  • 创建了问题 6月2日

悬赏问题

  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题
  • ¥15 在现有系统基础上增加功能
  • ¥15 远程桌面文档内容复制粘贴，格式会变化