为了账号安全,请及时绑定邮箱和手机立即绑定

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
高手真多呀
想不明白 那些说发音的怎么想的
我觉得应该还是790 110+13+17+650=790
我想起了当初给我们示范讲幼儿园课程的老师,简直一模一样 0.0
从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。
那个胆小如鼠的小女孩以及了不起的盖茨比该出场了
book和profile图都挂了,可以行找图片替换测试就可以了
.content{background:#eff9f9;padding:44px 15px 15px;}

border:4px solid #badbdb;}

.profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;}

.book{background:url(../images/t_book.gif) no-repeat #eff9f9;}

.book img{border:1px solid #b1adaa;margin:10px 8px;

}
1.定义一个内部样式text=css

2.插入图片 设定上下边距 左右边距 用margin,并且设置边框(粗细 格式 颜色-不可少 空壳 )

讲了盒子3D

3.为实现包裹层 加一个模块div 设置边框的粗细 格式和颜色

4.为背景图片book加一个样式,插入book,设置no repeat 再通过样式追加的方式加到content的盒子里去。

在本例中是div class="content "变成div class="content book"

5.背景被图片覆盖了 怎么办 设置盒子的内容即content的padding。微调。

6.初始化。
W3C盒子模型,建议说加border的童鞋好好看看。
定义和用法

width 属性设置元素的宽度。
说明

这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。

把你们想要看的发过来了。 width是不包括 margin,padding,border的 !! 只是内容宽度
absolute 绝对定位:完全从文档流拖出来,随即拥有偏移属性和z-index属性,未设置偏移量时会在初始位置。然后使用left/right/top/bottom属性相对于其“最接近的一个具有定位属性的父包含块”进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。
relative 相对定位:首先按float方式一样浮动起来,通过left/right/top/bottom属性确定元素在“正常文档流”中偏移位置,覆盖下面的元素,不会影响底层元素的位置。
课程须知
1.一定要对HTML+CSS相关标签有所掌握;2.对网页布局知识有简单的了解
老师告诉你能学到什么?
1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局;2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消