m0_75093936 2023-03-29 10:26 采纳率: 100%
浏览 62
已结题

制作华西医院（http://www.wchscu.cn/index.html）如下图局部

【问题描述】
制作华西医院（http://www.wchscu.cn/index.html%EF%BC%89%E5%A6%82%E4%B8%8B%E5%9B%BE%E5%B1%80%E9%83%A8%E3%80%82
要求：
1、使用 Grid 布局
2、尺寸、颜色、背景、字体、字体大小等与原网页一致
3、以“S1431070138.html”命名网页
4、把做的网页与原网页比对并截图

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-03-29 10:41
    关注
    <!doctype html>
<meta charset="utf-8" />
<style>
    body {
        background: url(http://www.wchscu.cn/Uploads/Picture/2022/10/21/s6351f295a7357.jpg) no-repeat;
        background-size: cover;
    }

    .container {
        color:#fff;
        background: rgba(0,0,0,0.45);
        max-width: 420px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding-bottom:20px
    }

     .container img {max-width: 100%}
.container .guide {margin-top: 30px;display:flex;justify-content:center}
.container .guide .item {background-color: #6e1d2a;border-radius:8px;width:calc((100% - 70px)/2);height:120px;display:flex;align-items:center;justify-content:center}
    .container .guide .item .word{margin-left:15px}
    .container .contact{padding:20px 30px;font-size:14px}
    .container .contact .item{line-height:30px;display:flex;background-position:left 8px;background-repeat:no-repeat;padding-left:25px}
 .container .contact .item img{vertical-align:middle;display:inline-block;margin-right:5px;width:20px}
.container .contact .item span{margin-right:5px}
</style>
<div class="container">
    <img src="http://www.wchscu.cn/Uploads/Picture/2022/10/20/s6350fdbeed664.png" />
    <div class="guide">
        <div class="item">
            <img src="http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon1.png" />
            <div class="word">预<br />约<br />挂<br />号</div>
        </div>
        <div class="item" style="margin-left:10px">
            <img src="http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon2.png" />
            <div class="word">院<br />内<br />导<br />航</div>
        </div>
    </div>
    <div class="contact">
        <div class="item" style="background-image:url(http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon4.png)">
            <span>电话:</span>
            028-85422114
        </div>
        <div class="item" style="background-image:url(http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon5.png)">
            <span>传真:</span>
            028-85582944
        </div>
        <div class="item" style="background-image:url(http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon6.png)">
            <span>地址:</span>
            <div>
                四川省成都市武侯区国学巷37号（院本部）<br />
                温江区芙蓉大道三段363号（温江院区）<br />
                锦江区成龙路和锦江大道交汇处（锦江院区）
            </div>
        </div>
        <div class="item" style="background-image:url(http://www.wchscu.cn/Public/static/themes_yq/image/wmy/icon7.png);background-position-y:5px">
            <span>网站备案号:</span>
            蜀ICP备16010396号-5-1
        </div>
    </div>
</div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 3月29日
  • 已采纳回答 3月29日
  • 创建了问题 3月29日

悬赏问题

  • ¥15 poi合并多个word成一个新word,原word中横版没了.
  • ¥15 【火车头采集器】搜狐娱乐这种列表页网址，怎么采集？
  • ¥15 求MCSCANX 帮助
  • ¥15 机器学习训练相关模型
  • ¥15 Todesk 远程写代码 anaconda jupyter python3
  • ¥15 我的R语言提示去除连锁不平衡时clump_data报错，图片以下所示，卡了好几天了，苦恼不知道如何解决，有人帮我看看怎么解决吗？
  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数，无法执行二选一查询
  • ¥15 液位控制，当液位超过高限时常开触点59闭合，直到液位低于低限时，断开
  • ¥15 marlin编译错误，如何解决？