发新贴  快速回复

文字怎么在图片指定位置显示?怎么测量padding和line-height?(书籍-盒模型4-36图练习)

邱小尾巴💯
2018-11-07 15:54

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>4-37</title>

<style>

.a{width:798px;

   height: 498px;

   background-color:#ff80ab;

   border:1px solid #ff80ab;}

.a1{width:700px;

height: 90px;

background:#e15671 url(image/1.png) no-repeat 259px 27px;

margin-top:20px;

margin-left:50px;}

.aa{width:700px;

background:#fff;

margin-left: 50px;

    font:normal 15px "宋体";/*文字ps中是16px,但是16px字体网页显示效果比较大?/

word-spacing:35px;

   }

.a2,.a3,.a4,.a5{

width:584px;

height:80px;

        border-top: 2px solid #ff80ab;

padding-left:116px;

padding-top:10px;

line-height:35px;

}

 

.a2{background: url(image/e.png) no-repeat 40px center;line-height:68px;}

.a3{background: url(image/s.png) no-repeat 40px center;}

.a4{background: url(image/ss.png) no-repeat 40px center;}

.a5{background: url(image/sss.png) no-repeat 40px center;}

</style>

</head>

<body>

<div class="a">

  <div class="a1"></div>

  <div class="aa">

<div class="a2">免费邮 VIP邮箱 企业邮 邮箱大师  </div>

<div class="a3">梦幻西游 新大话 藏地传奇 魔兽世界 星际争霸

<br>倩女幽魂 武魂 天下 新飞飞</div>

<div class="a4">考拉海购 LOFTER 博客 相册 花田交友 约会 女神

<br>跟帖 抢购 CC语音 直播</div>

<div class="a5">彩票 理财 商城 贵金属 电影票 车险 有道词典

<br>翻译 云笔记 印像派 公开课 云课堂 读小说 云音乐</div>

  </div>

 

</div>

</body>

</html>

 

/*文字怎么实现和图片一样的效果?*/

/*文字怎么在图片指定位置显示?怎么测量padding和line-height?*/

附件下载:
 

本帖内容针对以下视频发布:

18-网易产品模块练习
妙味用户902827

我也有这个问题

2019-02-25 15:31  回复本帖
登录 后才可以发表回复