HTML+CSS图文排版

<!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图文排版的更多相关文章
- CSS页面排版的一点笔记
CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...
- ACM TOMM 2017最佳论文:让AI接手繁杂专业的图文排版设计工作
编者按:你是否曾经为如何创作和编辑一篇图文并茂.排版精美的文章而烦恼?或是为缺乏艺术灵感和设计思路而痛苦?AI技术能否在艺术设计中帮助到我们?今天我们为大家介绍的这篇论文,“Automatic Gen ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- CSS文字排版
一.font-size 我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red. <!DOCTYPE HTML> <html> <head> ...
- HTML+CSS学习笔记 (10) - CSS格式化排版
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- CSS格式化排版--排版
1.文字排版--字体:利用font-family设置字体,注意设置的字体必须是本地电脑中存在的字体. 例子:class="MicrosoftYahei"的h1标签的字体设置为 宋体 ...
- 从零开始学习html(十)CSS格式化排版——下
六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...
- 从零开始学习html(十)CSS格式化排版——上
一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
随机推荐
- Tajo--一个分布式数据仓库系统(分布式环境安装试用)
前面两篇介绍了一下tajo,下面就说一下安装和使用吧. 一.分布式安装 前提:hadoop2中的hdfs和yarn已经安装并运行正常. 1.下载source并build源码 $git clone ht ...
- 【HDU4336】Card Collector (动态规划,数学期望)
[HDU4336]Card Collector (动态规划,数学期望) 题面 Vjudge 题解 设\(f[i]\)表示状态\(i\)到达目标状态的期望 \(f[i]=(\sum f[j]*p[j]+ ...
- 【省选水题集Day1】一起来AK水题吧! 题解(更新到B)
题目:http://www.cnblogs.com/ljc20020730/p/6937936.html 水题A:[AHOI2001]质数和分解 安徽省选OI原题!简单Dp. 一看就是完全背包求方案数 ...
- Tornado----自定义异步非阻塞Web框架:Snow
Python的Web框架中Tornado以异步非阻塞而闻名.本篇将使用200行代码完成一个微型异步非阻塞Web框架:Snow. 一.源码 本文基于非阻塞的Socket以及IO多路复用从而实现异步非阻塞 ...
- vijos 小三学算术
描述 小三的三分球总是很准的,但对于数学问题就完全没有想法了,他希望你来帮他解决下面的这个问题:对于给定的n,从1!.2!.3!.…….n!中至少删去几个数,才可以使剩下的数的乘积为完全平方数? 格式 ...
- php使用时间戳保存时间的意义
时间戳记录的是格林尼治时间,使用date格式化的时候会根据你程序设置的不同时区显示不同的时间. 如果使用具体时间,则还需要进行多一步转换.
- 手脱nSPack 2.1 - 2.5
1.载入PEID 使用核心扫描出的结果 nSPack 2.1 - 2.5 -> North Star/Liu Xing Ping 2.载入OD,一进来就是一个大跳转,F8跟着走 >- E9 ...
- 3 ways to download files with PowerShell
Perhaps the greatest strength of PowerShell is it's foundation on the .NET framework. The .NET frame ...
- bzoj 1901 Dynamic Rankings (树状数组套线段树)
1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec Memory Limit: 128 MB Description 给定一个含有n个数的序列a[1] ...
- autofac 在.net core 与经典asp.net中的差异
前提: Install-Package Microsoft.Extensions.DependencyInjection 特點: 使用nstancePerLifetimeScope代替Instance ...