在线报刊html代码,2017IFE-通过HTML及CSS模拟报纸排版

前言

2017-百度前端技术学院编码任务：通过HTML及CSS模拟报纸排版

任务目的

深入掌握CSS中的字体、背景、颜色等属性的设置

进一步练习CSS布局

任务描述

参考 PDS设计稿(点击下载)，实现页面开发，要求实现效果与 样例(点击查看) 基本一致

页面中的各字体大小，内外边距等可参看 标注图(点击查看)

页面宽度固定(定宽)

实现

字体

font

简写字体属性

/* font简写声明顺序：style | variant | weight | size/line-height | family */

.normal {

font-style: normal; //选择 font-family常规字体

}

.italic {

font-style: italic; //选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体(oblique )替代

}

.oblique {

font-style: oblique; //选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体( italic )替代

}

p.small

{

font-variant:small-caps; //设置为小型大写字母的字体

}

/* normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

100

200

300

400

500

600

700

800

900

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

*/

p.normal {font-weight:normal;} //默认正常

p.thick {font-weight:bold;} //字体为粗体

p.thicker {font-weight:900;} //可设置数字，由小到大设置粗细

/*

smaller 把 font-size 设置为比父元素更小的尺寸。

larger 把 font-size 设置为比父元素更大的尺寸。

length 把 font-size 设置为一个固定的值。

% 把 font-size 设置为基于父元素的一个百分比值。

*/

h1 {font-size:18px;}

h2 {font-size: smaller;}

p {font-size: larger;}

浏览器会使用识别的第一个字体系列，如果没有就使用浏览器默认字体

/*amily-name

generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。*/

p

{

font-family:"Times New Roman",Georgia,Serif;

}

背景

background-size 这个属性的定义必须在 之后, 并使用 '/' 符号分隔

background-color

background-position/background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

body

{

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

}

/**

color_name 规定颜色值为颜色名称的背景颜色(比如 red)。

hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。

transparent 默认。背景颜色为透明。

**/

body

{

background-color:yellow;

}

h1

{

background-color:#00ff00;

}

p

{

background-color:rgb(255,0,255);

}

默认左上角

- 关键词：left,top

- 百分比：25%，50%，如果只设置一个值，另外自动为50%

- 像素：24px,40px,

background-size: length|percentage|cover|contain;

length: 固定的像素

percentage：百分比设置

cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain：缩放背景图片以完全装入背景区，可能背景区部分空白

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

padding-box

(默认)背景图像相对于内边距框来定位。

border-box

背景图像相对于边框盒来定位。

content-box

背景图像相对于内容框来定位。

border-box

(默认)背景被裁剪到边框盒。

padding-box

背景被裁剪到内边距框。

content-box

背景被裁剪到内容框。

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

fixed 当页面的其余部分滚动时，背景图像不会移动。

url('URL') 指向图像的路径。

none 默认值。不显示背景图像。

颜色

三种方式描述颜色

关键字：red

RGB系统： rgb(255,0,51) rgba(255,0,51,.5)

HSL系统：hsl(240,100%,50%)或hsla(240,100%,50%,0.05)

currentColor 关键字

表示和当前元素的color一样的颜色

文本

length 定义固定的缩进。默认值：0。

% 定义基于父元素宽度的百分比的缩进。

// 文本缩进2字符

text-indent：2em;

em默认父元素字体大小的倍数，

text-align

规定文本水平对齐方式

left 把文本排列到左边。默认值：由浏览器决定。

right 把文本排列到右边。

center 把文本排列到中间。

justify 实现两端对齐文本效果。

象形文字的语言或非罗马书写体往往无法指定字间隔，注意对中文无效

normal 默认。定义单词间的标准空间。

length 定义单词间的固定空间。

p

{

word-spacing:25px;

}

与word-spacing类似，区别在于它是对字母或单个字符产生影响

h1 {letter-spacing:2px}

h2 {letter-spacing:-3px}

none 默认。定义带有小写字母和大写字母的标准的文本。

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。

一个规则中结合多种装饰

none 默认。定义标准的文本。

underline 定义文本下的一条线。

overline 定义文本上的一条线。

line-through 定义穿过文本下的一条线。

blink 定义闪烁的文本。

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

direction

属性规定文本的方向 / 书写方向

ltr 默认。文本方向从左到右。

rtl 文本方向从右到左。

问题

首行字母大写的长宽过大，布局变形

解答：利用伪元素 first-letter 针对整体第一行的首字母进行处理

/* 使每段开头的第一个字母变红变大 */

p::first-letter { /* 使用:first来兼容IE8- */

color: red;

font-size: 130%;

}

查看链接