baidu_ife_小薇学院总结（三）

发表于 | 分类于 |

Task5:零基础HTML及CSS编码（二）

1.两栏布局（左边自适应，右边固定）

1
2
3
4
5
6
7
8
9
10
11
12
#parent {
    position: relative;
}
#left {
    margin-right:220px; 
}
#right {
    position: absolute; 
    right:0; 
    top:0;
    width: 200px;
}

2.出现水平滚动条

p标签是块状元素，默认是父容器宽度的100%，所以是定宽块状元素
右边固定盒子内部p元素，宽度为父元素宽度，右移40%后，在右边外面了。
解决：

  1. 修改p标签
  2. 在p中添加margin-right: 40%;将宽度减小
  3. 在body添加overflow-x:hidden;

Task6:通过HTML及CSS模拟报纸排版

1.行距、段落间距和首行缩进

1
示例：<p style="line-height:130%;margin:9px;text-indent:2em">文字内容</p>

说明：
line-height是行间距属性，margin是段落间距属性；
text-indent 的作用使得容器内首行缩进一定单位，上面的2em表示首行缩进2个汉字

2.字体加粗，倾斜

font-style: oblique; /倾斜字体/
font-weight: bold; /加粗/
text-align：justify ; /实现两端对齐文本效果/
font-size:12px/24px 黑体;/12px/24px指的是字体的宽度高度单位是像素/
text-decoration: underline; /下划线/

3.CSS实现三角形图标

如果我们要做倒立三角形、向右的、或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。例如：

1
2
3
4
5
6
7
{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}