四:day5

1)网页布局步骤细化
1、在“当前版面”分出几个相对独立的区块(区块只分两种情况:纵向与横向);
2、如果分出的是纵向区块,则每一个区块写出一个div就可以了。
3、如果分成的是横向区块,则:
a)同样每个区块首先写出一个div,且每个div都进行浮动(通常是一左一右,或两左一右,或一边倒);
b)设置各个div需要的宽度及相关区域(padding,border,margin),但总和不超过当前父盒子的宽度;
c)有必要也设置各自高度,以及颜色背景或边框,以出现明显的视觉效果,这样有助于排错;
d)使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子:
i.在父盒子内部最后位置添加一个用于清除浮动的空div(<div style=”clear:both”></div>),
ii.对父盒子使用overflow:hidden;
iii.对父盒子设置一个固定的高度——适用于内部盒子高度固定的情况。
4、在上述每个分出的区块中,又当做“当前版面”做同样的分析与设计(重复1-3步)

2)html样式清除(css初始化)
虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。

例:利用css设置的清除:
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
font-style:normal;
list-style-type:none;
}
3)样式分类
1,行内样式:
a)<标签名 其他标签属性……. style=”css属性1:值1;css属性2:值2; …… ” >内容部分</标签名>
b)只对当前标签有效:通常不推荐使用,或偶尔临时使用。
2,页内样式:
a)<style>
选择器1{ ….. }
选择器2{ ….. }
……
</style>
b)只对当前网页有效:常见。
3,外部样式:
a)css文件中:
选择器1{ ….. }
选择器2{ ….. }
……
b)网页文件中:
<link rel="stylesheet" type="text/css" href="css文件路径url" />
c)对所有引入该css的网页有效:常见。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 突然想起了一部电影 河东狮吼 哈哈,当初的天真…… 他会为我一边暂停一边认真的记下台词…… 告诉我 老婆我背下...
    李大女儿阅读 143评论 0 0