（讲解7）页面布局

最新推荐文章于 2023-09-03 18:16:08 发布

我还能再写两行

最新推荐文章于 2023-09-03 18:16:08 发布

阅读量162

点赞数

分类专栏： 1+x

本文链接：https://blog.csdn.net/weixin_45929422/article/details/103300588

版权

1+x 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>页面布局</title>
	<meta charset="utf-8">
	<style>
	*{margin:0;padding:0}
	li{list-style:none}
	.clear::after{content:"";display:block;width:0;height:0;clear: both;}
	.header,.nav,.banner,.con,.footer{width:100%;height:auto;margin:10px auto;}
	
	.main,.banner{width:1000px;margin:0 auto;border:1px solid red}
	
	.header .main>div{float:left}
	</style>
</head>
<body>
	<div class="header">
		<div class="main clear">
			<div class="logol">logo</div>
			<div class="search">search</div>
			<div class="tel">tel</div>
		</div>
	</div>
	<div class="nav">
		<div class="main">
			<ul>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>

			</ul>
		</div>
	</div>
	<div class="banner">banner</div>
	<div class="con">
		<div class="main">neirong</div>
	</div>
	<div class="footer">
		<div class="main">footer</div>
	</div>
<!--


布局思路：
	从整体到局部
	从外向里
	从上至下
	从左至右


样式编写顺序：
	1.定位（float position left right bottom top z-index）
	2.宽、高、边距
	3.文字样式
	4.背景样式
	5.过渡 动画

样式书写规范：
	1. 0.5可以写.5，0可以省略
	2. 对于可以简写的属性尽量简写 background margin padding border
	3. 给子元素添加样式前写父级类名
	4. 布局是尽量使用类，不要使用id

问题：
	1.乱码问题  编码
	2.样式引入无效问题（属性丢失，路径错误）
	3.清除浮动问题
	4.定位乱的问题---找绝对定位的父级添加相对定位
	5.a标签鼠标经过无效问题--a:link  a:visited  a:hover  a:active 


兼容性问题(CSS HACK)
	概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号
	CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
		1、属性级Hack：
			IE6能识别下划线“_”和星号“*”，
			IE7能识别星号“*”，但不能识别下划线”_ ”，
			而firefox两个都不能认识。
		2、选择符级Hack：
			IE6能识别*html .class{}，
			IE7能识别*+html .class{}或者*:first-child+html .class{}。
		3、IE条件注释Hack：
			IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
			针对所有IE：&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;，
			针对IE6及以下版本：&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;，
			这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
-->
</body>
</html>