<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>无标题文档</title>

    <link rel="shortcut icon" href="img/icoTest.ico">

</head>

<style type="text/css">

    .content{

        width: 200px;

        height: 300px;

        border: 1px solid #ccc;

    }

    .content img{

        float: left;

        width: 100px;

        height: 100px;

    }

    .content p{

        text-indent: 32px;

    }

</style>

<body>

    <div class="content">

        <img src="heart.png">

        <p>这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。</p>

    </div>

</body>

<html>

HTML+CSS图文排版的更多相关文章

  1. CSS页面排版的一点笔记

    CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...

  2. ACM TOMM 2017最佳论文：让AI接手繁杂专业的图文排版设计工作

    编者按:你是否曾经为如何创作和编辑一篇图文并茂.排版精美的文章而烦恼?或是为缺乏艺术灵感和设计思路而痛苦?AI技术能否在艺术设计中帮助到我们?今天我们为大家介绍的这篇论文,“Automatic Gen ...

  3. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  4. CSS文字排版

    一.font-size 我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red. <!DOCTYPE HTML> <html> <head> ...

  5. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  6. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  7. CSS格式化排版--排版

    1.文字排版--字体:利用font-family设置字体,注意设置的字体必须是本地电脑中存在的字体. 例子:class="MicrosoftYahei"的h1标签的字体设置为 宋体 ...

  8. 从零开始学习html（十）CSS格式化排版——下

    六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...

  9. 从零开始学习html（十）CSS格式化排版——上

    一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. 【BZOJ4767】两双手（动态规划，容斥）

    [BZOJ4767]两双手(动态规划,容斥) 题面 BZOJ 题解 发现走法只有两种,并且两维坐标都要走到对应的位置去. 显然对于每个确定的点,最多只有一种固定的跳跃次数能够到达这个点. 首先对于每个 ...

  2. 【洛谷3674】小清新人渣的本愿（莫队，bitset）

    [洛谷3674]小清新人渣的本愿(莫队,bitset) 题面 洛谷,自己去看去,太长了 题解 很显然的莫队. 但是怎么查询那几个询问. 对于询问乘积,显然可以暴力枚举因数(反正加起来也是\(O(n\s ...

  3. 网络协议之mDNS20170217

    DNS(Domain Name System,域名系统)因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终得 ...

  4. 图像处理之Canny边缘检测

    http://blog.csdn.net/jia20003/article/details/41173767 图像处理之Canny 边缘检测 一:历史 Canny边缘检测算法是1986年有John F ...

  5. eclipse show view失效的解决办法

    今天打开eclipse,发现console窗口没有了,然后使用show view也无法打开,上网查找办法,找到了方法试了一下,窗口重置(Windows-->Perspective-->Re ...

  6. Linux系统之路——python多版本共存问题（ps：自行切换python版本,pip安装遇到的一些问题）

    经常遇到这样的情况: 系统自带的Python是2.6,自己需要Python 2.7中的某些特性: 系统自带的Python是2.x,自己需要Python 3.x: 此时需要在系统中安装多个Python, ...

  7. python自学笔记(一)

    我没学过python,通过网上和一些图书资料,自学并且记下笔记. 很多细节留作以后自己做项目时再研究,这样能更高效一些. python基础自学笔记 一.基本输入和输出 pthon3.0用input提示 ...

  8. 持久化的基于L2正则化和平均滑动模型的MNIST手写数字识别模型

    持久化的基于L2正则化和平均滑动模型的MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: Tens ...

  9. WdatePicker日历控件动态设置属性参数值

    首先吐槽一下需求人员给了我一个很坑的需求:WdatePicker日历控件里面选择的最小时间(minDate)的值是级联动态改变的,而且这个值要从数据库获取,这样子只能使用 ajax 来发起请求获取mi ...

  10. Codeforces 148 D Bag of mice

    D. Bag of mice http://codeforces.com/problemset/problem/148/D time limit per test 2 seconds memory l ...