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日

悬赏问题

  • ¥20 删除和修改功能无法调用
  • ¥15 kafka topic 所有分副本数修改
  • ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
  • ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?
  • ¥40 串口调试助手打开串口后,keil5的代码就停止了
  • ¥15 电脑最近经常蓝屏,求大家看看哪的问题
  • ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
  • ¥50 C++五子棋AI程序编写
  • ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
  • ¥15 SQL Server analysis services 服务安装失败