网页设计:运用html与css实现水平居中、文字图片重叠混排

每次要写html的时候,总把之前很基础的东西忘了,搞得几乎每次都要现场去网上翻资料熟悉回一些基本操作。。。

今天写这篇文章就是想一劳永逸的解决问题,也希望顺便给阅读的网友提供一些帮助。

先看成品:

在这里插入图片描述
其实组成要素很简单,一段文字,一张图片。

先上代码,代码非常简单。思路:一个盒子(div)里面装了p标签和图片,通过相对于父级元素的绝对定位来使得图片与文字重叠并设置z-index来调整层次关系。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>作业</title>
        <style type="text/css">
        *{
   margin:0;padding:0;}  /*“*”代表全部元素的意思,这里的作用的去除网页默认的内外边距*/
            .bigbox{
   
                border-style:
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值