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 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么