这个网页如何做,已给出了图片,我作为刚学web前端的大学生,求大家解决这个网页和代码 2阅读 0回答 2022-04-14 13:17

img

img

img

img

img

img


这个网页如何用图片作成这样的背景,针对某个文字如何在网页中设置字体颜色,如何布局成这样的网页。

img

大概这个样吧

img

<!doctype html>
<meta charset="utf-8" />
<meta name="referrer" content="never" />
<style>
    body{margin:0}
    .wrap{max-width:800px;margin:0 auto;background:#2e2e2e url(https://img-mid.csdnimg.cn/release/static/image/mid/ask/015477269056126.jpg) no-repeat}
    .head{padding-top:20px;height:165px;background:url(https://img-mid.csdnimg.cn/release/static/image/mid/ask/832967269056175.jpg) no-repeat left 20px;line-height:165px;font-size:40px;color:#666;text-indent:100px}
    .head span{color:yellow;text-indent:10px}
    .content{width:600px;margin:0 auto;color:#fff;font-size:13px;line-height:30px;padding-top:20px}
    .content img{width:120px;border:solid 3px #fff;margin:0 10px 10px 0;float:left}
    .content img.fr{float:right;margin:0 0 10px 10px}
    .footer{margin-top:20px;border-top:solid 3px yellow;text-align:center;color:#fff;padding:20px 0;font-size:13px;line-height:30px}
</style>
<div class="wrap">
    <div class="head">
        街头<span>生活</span>
    </div>
    <div class="content">
        
        <div><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/609597269056158.jpg" />  Proteus水下空间站发起人——知名的海洋保护主义者兼纪录片制片人Fabien Cousteau认为,对于人类的生存,对于人类通往未来的轨道,海洋探索比太空探索重要1000倍。</div>
        <div><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/076487269056162.jpg?" class="fr" />  地球表面71%是海洋,但人类目前只探索了其中的5%,绘制了这些海洋中不到20%的地图。他希望通过Proteus项目来解决这个问题,并最终建立一个世界范围的水下研究栖息地网络。</div>
        
        <div><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/537087269056128.jpg" />  Proteus水下空间站以国际空间站(ISS)为蓝本,犹如一个安全便利的“家”,可以让潜水员们日夜不停地潜水,而不需要在两次潜水之间进行数小时的减压。就像太空中的宇航员一样,他们可以在水下一次连续待上几天甚至是几周的时间。</div>
   
        
        <div><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/045608269056147.jpg" class="fr" />  Proteus水下空间站可以对海啸和飓风发出预警,还可以促进很多研究领域的发展,包括海洋药物发现、可持续食品生产、能源利用、气候变化、机器人技术等。</div>
        <div style="clear:both"></div>
    </div>
    <div class="footer">
        巴拉巴拉巴拉巴拉巴拉巴拉
        <br />
        巴拉巴拉巴拉巴拉巴拉巴拉
    </div>
</div>

一起把问题采纳了先呗

img

老师来布置作业了

html css 基础的都不会?

在网页中设置字体颜色 color:red

DIV + FLEX布局,基础的还是要自己去学习

单个字设置可以 用个 标签包裹住想要设置的字 然后设置CSS样式