您的位置 首页 > 程序开发 > Css教程

如何利用div+css来给背景图片上文字布局

这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字。

CSS布局

我想到了可以将图片设为背景,然后在上面添加问题,但是却不能定位。我立马想到可以用表格或者DIV+CSS来实现布局,但是当我想利用table来布局的时候,突然觉得如果在这个div+css横行的年代还用表格是不是太土了,于是果断放弃。但像俺这种学东西快忘东西也快的屌丝,早就把曾经学会的东西完完整整的还给自认为东大最拽的那位计算机老师了~~

没办法俺只能白手起家,研究了一晚上终于有点眉目了,最终还是利用div+css完成这个貌似很简单的任务。

<div> <style> .seekhill-content{position:relative;} .pzboy-content

p{position:absolute;top:668px;left:87px;line-height:26px;text-align:left;font-family:”微软雅黑”,”宋

体”,”Arial”;font-weight:bold;letter-spacing:1px;color:#444;} </style>

<img src=”背景图片链接地址”>

<p style=”top:664px;”> 寻小山博客是一个分享个人兴趣<br/>学习计算技术,分享php、css等相关学习经验<br/>关注互联网相关热点最新资讯<br/>有时候也写写个人随便的原创博客 </p> </div>

事实上,如果对代码不是很熟悉的童鞋可以利用Dreamweaver这款有可视性设计软件来操作还是比较简单的说,反正我刚开始接触代码的时候就是用这个东东~~利用Dreamweaver的具体操作步骤如下:

首先利用Dreamweaver打开这个页面,然后在在属性里可以添加背景图片,接着在页面中插入一个div标签,我们可以点击工具栏的“插入DIV标签”按钮,在打开的对话框中ID项给这个div命一下名,我们给它起个名叫seekhill(名称根据自己需要命名,这里与上面采用一样的)。

最后插入div后,在右侧的css样式面板中,定义id为.seekhill-content的样式,确定后在打开的css编辑对话框的方框选项中设计宽度、高度,然后添加所要的东东。

blank

关于作者: 破折君

江西九江人,专注新媒体、搜索引擎、电商运营、IT技术、软件使用技巧!

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

1条评论