HTML-图文排版如何以代码实现

经常看到浏览器中新闻的排布方式,上面是标题,下左是图片,右侧是介绍,今天我们就自己来敲打一篇美文吧

操作方法

  • 01

    在敲代码前,先想好结构,最后先在纸上画出一个结构。在此例中,可以将其分为一个整体的三部分,上左右部分,最上方为标题栏,下面左侧可以放置图片,右侧是文字搭配。 然后我们打开DW,新建HTML文件,然后在body标签下建立一个大的盒子,将三个部分包含的大盒子,起个类名称为box;然后将第一行的标题栏以h1表示吧

  • 02

    然后左侧栏设置一个图片盒子,类名称为pic,然后将图片img插入到标签下

  • 03

    右侧就是文字了,单独设置在一个盒子中,里面的段落可以使用p标签来区别段落

  • 04

    将内容补充好后,就开始在head标签下建立style修饰内容了,首先将整体box设置了一个宽度,然后居中对齐

  • 05

    标题栏文字,基本不用动,可以对其添加链接或更改下字体颜色;然后对图片进行设置下,设置了固定宽高,并向左浮动

  • 06

    然后就是对右侧文字进行修饰,向右浮动,然后将文件保存去浏览器中预览效果。

  • 07

    如图在浏览器中预览后的效果。在实际运用可以需要对浮动对象清除浮动。

(0)

相关推荐

  • 如何复制借鉴别人微信推送文章里的图文排版样式

    做得比较成熟的微信公众号都会有一套美观大方的图文排版样式,如何复制或者在他人的样式基础上进行简单的修改呢? 新加了一种方法,利用windows版微信客户端实现,附加在最后一步 1.以下图绿色的编号&q ...

  • Dreamweaver图文排版-文字在左图片居右设置

    在使用DW敲打代码时,经常会遇到图文排版文字,比如左侧为文字栏,右侧为图片区,这时该如何敲打代码呢 操作方法 01 可以先打个草稿,左侧为文字区,右侧为图片区,图片区可以作为一个整体,这样可以看做一个 ...

  • 99%的高逼格PPT图文排版

    临近年底,自然少不了年终汇报,老板一发话,又开始埋头苦中PPT,交了那么多稿,老板还是不满意.今天这篇PPT模板的总结,作者可是投入不少心血,原话是"没看过1000个PPT作品,怎么敢下手呢 ...

  • word2016文章和图片怎么排版? word图文排版技巧

    word中可以对文件进行排版,该怎么排版呢?下面我们就来看看详细的教程. 1.打开word,进入到操作界面.文档里已经事先插入了图片以及文字,一般情况来说图文是这样的. 2.如何让文字与图片快速排版, ...

  • 怎么使用米秀给微信图文排版?

    现如今进入自媒体时代,各种各样的微信公众号应运而生,不得不说微信公众号是一个非常好用的信息平台.很多时候,我们个人也好,组织也好,一个微信公众号可以给我们带来很大的便捷.但是当你开始着手运营自己的微信 ...

  • spss19软件怎么安装?IBM SPSS Statistics 19安装破解图文详细教程(附代码)

    怎么安装spss19软件?spss全称IBM SPSS Statistics ,这是一款专业数据统计软件,受到各种社会学科的研究生.研究员的欢迎.软件能够对信息的采集.处理.分析进行全面评估和预测.s ...

  • 怎么在WPS的PPT中进行工作总结型图文排版

    今天给大家介绍一下怎么在WPS的PPT中进行工作总结型图文排版的具体操作步骤.1. 如图,打开电脑上想要编辑的WPS演示文稿,点击上方的插入选项,在打开的选项中,依次点击图片---本地图片选项,选择插 ...

  • Word怎样排版图片和文字(美观的word图文排版)

    说到word排版,我们常常就会想到论文的排版,制作目录,不同页眉页脚如何设置.今天我们来说两个不一样的word排版技巧,让你的word文档更加精美.1.word对齐技巧说到对齐的问题,一般都是采用强行 ...

  • 图文排版入门指南

    图文排版是个老生常谈的话题,每一位设计师都具备一定的图文排版能力.我们工作中几乎天天都在排版,对于排版似乎是信手拈来,然而就是这样的信手拈来,却会让不少初中级的设计师忽视掉很多排版的细节,做起设计来也 ...

  • 不论是海报、PPT还是杂志封面设计,都离不开的图文排版技巧

    网站落地页面和在线广告设计,无论从广告牌到名片,我们每天遇到的许多设计都有一些共同之处.我说的是什么呢?平面设计的最基本的组成部分之一--图文排版.虽然在一张漂亮的照片上写上一句引人入胜的短语,可能看 ...