2017IFE-通过HTML及CSS模拟报纸排版

前言

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

任务目的

  • 深入掌握CSS中的字体、背景、颜色等属性的设置
  • 进一步练习CSS布局

任务描述

实现

DEMO

项目地址


字体

  • 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
这个属性的定义必须在 <position> 之后, 并使用 '/' 符号分隔

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   背景图像将仅显示一次。
  • background-origin
    background-origin 属性规定 background-position 属性相对于什么位置来定位。
padding-box
(默认)背景图像相对于内边距框来定位。

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

content-box
背景图像相对于内容框来定位。
border-box
(默认)背景被裁剪到边框盒。

padding-box
背景被裁剪到内边距框。

content-box
背景被裁剪到内容框。
scroll  默认值。背景图像会随着页面其余部分的滚动而移动。
fixed   当页面的其余部分滚动时,背景图像不会移动。
url('URL')  指向图像的路径。
none    默认值。不显示背景图像。

颜色

<color>
三种方式描述颜色

  • 关键字: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默认父元素字体大小的倍数,
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 中的 <pre> 标签。
nowrap  文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列,但是正常地进行换行。
pre-line    合并空白符序列,但是保留换行符。
  • direction
    属性规定文本的方向 / 书写方向
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。

问题

  • 首行字母大写的长宽过大,布局变形
    解答:利用伪元素 first-letter 针对整体第一行的首字母进行处理
/* 使每段开头的第一个字母变红变大 */

p::first-letter {  /* 使用:first来兼容IE8- */
  color: red; 
  font-size: 130%; 
}

查看链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,065评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,102评论 0 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,315评论 0 3
  • 亲,我的女儿今天妈妈给你写这封信,是希望你以后,能时刻运用自己的思想去做事,无论是上学还是在社会上做事。 你长大了...
    宛若骄阳阅读 232评论 0 0