排查错误

Chrome浏览器的审查功能。

错误1：选择器写错了，压根没有选择上；

如果写了一个错误的选择器，

  1. <style type="text/css">
  2. 	dvi p{
  3. 		color:red;
  4. 	}
  5. </style>

Chrome审查一下，就能看见没有任何选择器选择上这个元素：

错误的写class：

  1. <div calss="haha">
  2. 	<p>文字</p>
  3. </div>

上面一个选择器后面有多余的东西，所以就干扰了下一个选择器：

  1. body{
  2. 	background-color: pink;
  3. }}
  4. div p{
  5. 	color:red;
  6. }

家谱顺序错误，也是选择不上的。Chrome浏览器底部，是选中的元素的家谱：

错误2：选择上了，但是属性写错了；

博雅互动作业

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. 	<title>博雅互动</title>
  6. 	<style type="text/css">
  7. 		*{
  8. 			margin: 0;
  9. 			padding: 0;
  10. 		}
  11. 		/*公共类，原子类*/
  12. 		.inner_c{
  13. 			width: 1000px;
  14. 			margin: 0 auto;
  15. 		}
  16. 		.cl{
  17. 			clear: both;
  18. 		}
  19. 		.nomargin{
  20. 			margin: 0 !important;
  21. 		}
  22. 		body{
  23. 			height: 4444px;
  24. 			font-size: 14px;
  25. 			font-family: "Arial","Microsoft Yahei","SimSun";
  26. 		}
  27. 		.header{
  28. 			/*标准流中的块级元素不写宽度自动撑满，所以可以不写width*/
  29. 			/*也可以写上width:100%;更清晰一些。*/
  30. 			width: 100%;
  31. 			height: 58px;
  32. 			background-color: #191D3A;
  33. 		}
  34. 		.header .logo{
  35. 			/*浮动的盒子会自动收缩，就像一个橡皮筋套住了它，收缩到最小*/
  36. 			/*儿子多宽，它就多宽*/
  37. 			float: left;
  38. 			padding: 10px 0px 0px 20px;
  39. 		}
  40.  		.header .logo h1{
  41.  			width: 158px;
  42.  			height: 37px;
  43.  			background: url(images/logo.png);
  44.  			text-indent: -999em;
  45.  			overflow: hidden;
  46.  		}
  47.  		.header .logo h1 a{
  48.  			display: block;
  49.  			height: 37px;
  50.  		}
  51.  		.header .nav{
  52.  			float: left;
  53.  			width: 603px;
  54.  			height: 58px;
  55.  			margin-left: 47px;
  56.  		}
  57.  		.header .nav ul{
  58.  			list-style: none;
  59.  		}
  60.  		.header .nav ul li{
  61.  			float: left;
  62.  			width: 85px;
  63.  			border-right: 1px solid #252947;
  64.  		}
  65.  		.header .nav ul li.first{
  66.  			border-left: 1px solid #252947;
  67.  		}
  68.  		.header .nav ul li a{
  69.  			display: block;
  70.  			width: 85px;
  71.  			height: 58px;
  72.  			text-align: center;
  73.  			line-height: 58px;
  74.  			text-decoration: none;
  75.  			color:#818496;
  76.  		}
  77.  		.header .nav ul li.current a{
  78.  			background-color: #252947;
  79.  			color:white;
  80.  		}
  81.  		.header .nav ul li a:hover{
  82.  			color:white;
  83.  		}
  84.  		.header .joinus{
  85.  			float: left;
  86.  			margin-left: 52px;
  87.  			padding-top: 12px;
  88.  		}
  89.  		.header .joinus a{
  90.  			display: block;
  91.  			width: 98px;
  92.  			height: 32px;
  93.  			background-color: #38B774;
  94.  			border: 1px solid #3ACA7A;
  95.  			text-align: center;
  96.  			line-height: 32px;
  97.  			text-decoration: none;
  98.  			color:white;
  99.  			/*圆角*/
  100.  			border-radius: 3px;
  101.  		}
  102.  		.header .joinus a:hover{
  103.  			background-color: orange;
  104.  			border-color: yellow;
  105.  		}
  107.  		.banner{
  108.  			width: 100%;
  109.  			height: 567px;
  110.  			position: relative;
  111.  		}
  112.  		.banner .banner1{
  113.  			height: 567px;
  114.  			background: #5EC4EA url(images/banner1.jpg) no-repeat center top;
  115.  		}
  116.  		.banner .circles{
  117.  			position: absolute;
  118.  			width: 94px;
  119.  			height: 13px;
  120.  			left: 50%;
  121.  			bottom: 19px;
  122.  			margin-left: -47px;
  123.  		}
  124.  		.banner .circles ol{
  125.  			list-style: none;
  126.  		}
  127. 		.banner .circles ol li{
  128. 			float: left;
  129. 			width: 12px;
  130. 			height: 12px;
  131. 			margin-right: 15px;
  132. 			background: url(images/icons.png) no-repeat -1px -3px;
  133. 		}
  134. 		.banner .circles ol li.cur{
  135. 			background-position: -13px -3px;
  136. 		}
  137.  		.product{
  138.  			padding-top: 50px;
  139.  			height: 229px;
  140.  			border-bottom: 1px solid #DBE1E7;
  141.  			position: relative;
  142.  		}
  143.  		.product ul{
  144.  			list-style: none;
  145.  		}
  146.  		.product ul li{
  147.  			float: left;
  148.  			width: 218px;
  149.  			margin-right: 43px;
  150.  		}
  151.  		.product ul li.last{
  152.  			width: 217px;
  153.  			overflow: hidden;
  154.  		}
  155.  		.product ul li a{
  156. 			text-decoration: none;
  157. 			display: block;
  158. 			padding-bottom: 12px;
  159.  		}
  160.  		.product ul li a:hover{
  161.  			background-color: #38B774;
  162.  		}
  163.  		.product ul li span{
  164.  			/*转成块之后，就能用text-align:center;来居中内部文字了*/
  165. 			display: block;
  166. 			text-align: center;
  167.  		}
  168.  		.product ul li span.chinese{
  169.  			line-height: 40px;
  170.  			color:#444866;
  171.  			font-weight: bold;
  172.  		}
  173.  		.product ul li span.english{
  174.  			font-size: 12px;
  175.  			line-height: 12px;
  176.  			color:#38B774;
  177.  		}
  178.  		.product ul li a:hover span.chinese{
  179.  			color:white;
  180.  		}
  181.  		.product ul li a:hover span.english{
  182.  			color:white;
  183.  		}
  184.  		.product ul li span.english b{
  185.  			font-weight: normal;
  186.  			padding-right: 11px;
  187.  			background: url(images/arrow.png) no-repeat right center;
  188.  		}
  189.  		.product ul li a:hover span.english b{
  190.  			background-image: url(images/arrow2.png);
  191.  		}
  193.  		.product .circles{
  194.  			position: absolute;
  195.  			bottom: -6px;
  196.  			left: 50%;
  197.  			width: 117px;
  198.  			height: 12px;
  199.  			background-color: white;
  200.  			margin-left: -59px;
  201.  		}
  202.  		.product ol{
  203.  			padding-left: 17px;
  204.  			list-style: none;
  205.  		}
  206.  		.product .circles ol li{
  207.  			float: left;
  208.  			width: 12px;
  209.  			height: 12px;
  210.  			background:url(images/icons.png) no-repeat -1px -15px;
  211.  			margin-right: 14px;
  212.  		}
  213.  		.product .circles ol li.cur{
  214.  			background-position: -13px -15px;
  215.  		}
  216. 	</style>
  217. </head>
  218. <body>
  219. 	<!-- 网页头部 -->
  220. 	<div class="header">
  221. 		<div class="inner_c">
  222. 			<div class="logo">
  223. 				<h1><a href="">博雅互动-最专业的游戏公司</a></h1>
  224. 			</div>
  225. 			<div class="nav">
  226. 				<ul>
  227. 					<li class="first current"><a href="">首页</a></li>
  228. 					<li><a href="">博雅游戏</a></li>
  229. 					<li><a href="">博雅新闻</a></li>
  230. 					<li><a href="">关于我们</a></li>
  231. 					<li><a href="">客服中心</a></li>
  232. 					<li><a href="">投资者关系</a></li>
  233. 					<li><a href="">校园大使</a></li>
  234. 				</ul>
  235. 			</div>
  236. 			<div class="joinus">
  237. 				<a href="">加入我们</a>
  238. 			</div>
  239. 		</div>
  240. 	</div>
  242. 	<div class="cl"></div>
  244. 	<!-- banner -->
  245. 	<div class="banner">
  246. 		<div class="banner1"></div>
  247. 		<div class="circles">
  248. 			<ol>
  249. 				<li class="cur"></li>
  250. 				<li></li>
  251. 				<li></li>
  252. 				<li class="nomargin"></li>
  253. 			</ol>
  254. 		</div>
  255. 	</div>
  257. 	<div class="cl"></div>
  259. 	<!-- 产品 -->
  260. 	<div class="product inner_c">
  261. 		<ul>
  263. 			<li>
  264. 				<a href="">
  265. 					<img src="images/pro1.png" alt="" />
  266. 					<span class="chinese">四川麻将</span>
  267. 					<span class="english">
  268. 						<b>
  269. 							SICHUAN MAHJONG
  270. 						</b>
  271. 					</span>
  272. 				</a>
  273. 			</li>
  274. 			<li>
  275. 				<a href="">
  276. 					<img src="images/pro2.png" alt="" />
  277. 					<span class="chinese">四川麻将</span>
  278. 					<span class="english">
  279. 						<b>SICHUAN</b>
  280. 					</span>
  281. 				</a>
  282. 			</li>
  283. 			<li>
  284. 				<a href="">
  285. 					<img src="images/pro3.png" alt="" />
  286. 					<span class="chinese">四川麻将</span>
  287. 					<span class="english">
  288. 						<b>SICHUAN MAHJONG</b>
  289. 					</span>
  290. 				</a>
  291. 			</li>
  292. 			<li class="last nomargin">
  293. 				<a href="">
  294. 					<img src="images/pro4.png" alt="" />
  295. 					<span class="chinese">四川麻将</span>
  296. 					<span class="english">
  297. 						<b>SICHUAN MAHJONG</b>
  298. 					</span>
  299. 				</a>
  300. 			</li>
  301. 		</ul>
  302. 		<div class="circles">
  303. 			<ol>
  304. 				<li class="cur"></li>
  305. 				<li></li>
  306. 				<li></li>
  307. 				<li class="nomargin"></li>
  308. 			</ol>
  309. 		</div>
  311. 	</div>
  312. </body>
  313. </html>

版心：就是网页中间居中的部分。

响应式的网站responsive web design，就是网页随着用户屏幕的大小不同，有不同尺寸的版心。

我们现在做的网站，版心都是固定的：1200px、1100px、1000px、980px、970px

padding这个东西，是不能够挤背景图片的，因为padding区域也能有背景，背景图也能渲染在padding里。

到底用<img src=”” />插入， 还是backgrond:url(); ， 要看这个图片是内容的一部分还是杂碎、起装饰作用的图片。

定位

CSS中重要的东西就三个：盒模型、浮动、定位。这三个技术，就是负责网页的布局的。

其余的技术，都是杂碎：background、文字、颜色表示法……

1.相对定位

position:relative;相对自己进行微调

相对定位就是相对自己原来的位置，进行位置移动。移动的时候需要使用定位值。

top：正数向下移动

bottom： 正数向上移动

left：正数向右移动

right：正数向左移动

可以任意组合，从top、bottom中选择一个，然后从left、right中选择一个

  1. top:10px;
  2. left:20px;

等价于

  1. bottom:-10px;
  2. right:-20px;

相对定位不脱标，老家留坑，形影分离。

相对定位这个东西，因为在老家留坑，所以用处不大：

1） 微调元素

2） 下午我们介绍的“子绝父相”

微调元素：

2.绝对定位

position: absolute;

绝对定位的元素，脱离标准文档流。用top、bottom、left、right来进行定位。参考的是页面的左上角。

1.定位参考点

我们现在来研究，定位的参考原点到底是哪里？

如果用top值定位，那么参考点就是页面的左上角或者右上角，而不是浏览器窗口的。

如果用bottom进行定位，就是浏览器首屏的左下角在页面中的位置。

面试题：

2.祖先盒子当参考点

子绝父相：

  1. <div>  →  相对定位
  2. 	<p></p>  → 绝对定位
  3. </div>

此时这个p就是以div的边框内侧为参考点进行定位。

一个盒子可以以某一个祖先盒子作为定位参考点，离自己最近的、已经定位了的祖先盒子。

要记住，祖先盒子不一定只有相对定位才能成为参考点，而是什么定位都行。比如，相对定位、绝对定位、固定定位。

除了“子绝父相”之外，“子绝父绝”也是一个典型的定位模型；“子绝父固”也是一个典型的定位模型。

祖先中离自己最近的、已经定位的元素：

  1. <div class="box1">  → 没有定位
  2. 	<div class="box2">   → 相对定位
  3. 		<div class="box3">   → 绝对定位
  4. 			<div class="box4">   → 没有定位
  5. 				<p></p>
  6. 			</div>
  7. 		</div>
  8. 	</div>
  9. </div>

所以p以.box3为参考点；.box3以box2为参考点。

绝对定位的元素，无视参考盒子的padding：

红色盒子top:0;left:0; 无视padding的。

3.绝对定位元素的居中

新说一个知识点，就是绝对定位盒子已经不属于标准文档流了，所以不能使用margin:0 auto；来居中了。那么绝对定位的盒子如何居中？

  1. position: absolute;
  2. left:50%;
  3. top: 0;

left:50%;指的是元素的左边线是50%的位置。这点和background-position不一样。

所以要往回拉一半的自己宽度。

  1. <style type="text/css">
  2. 	div{
  3. 		width: 600px;
  4. 		height: 200px;
  5. 		background-color: yellowgreen;
  6. 		position: absolute;
  7. 		left:50%;
  8. 		top: 0;
  9. 		margin-left: -300px;
  10. 	}
  11. </style>

4.应用

所有的压盖效果，想都别想，90%是绝对定位做的。

  1. 	<style type="text/css">
  2. 		*{
  3. 			margin:0;
  4. 			padding: 0;
  5. 		}
  7. 		.carouse1{
  8. 			width: 310px;
  9. 			height: 220px;
  10. 			border: 1px solid gray;
  11. 			position: relative;
  12. 		}
  14. 		span.left_btn{
  15. 			position: absolute;
  16. 			background:url(images/icon_v9.png) no-repeat 0 0px;
  17. 			width: 30px;
  18. 			height: 35px;
  19. 			top: 50%;
  20. 			left: 10px;
  21. 			margin-top: -17px;
  22. 			cursor: pointer;
  23. 		}
  25. 		span.right_btn{
  26. 			position: absolute;
  27. 			background:url(images/icon_v9.png) no-repeat 0 -44px;
  28. 			width: 30px;
  29. 			height: 35px;
  30. 			top: 50%;
  31. 			right: 10px;
  32. 			margin-top: -17px;
  33. 			cursor: pointer;
  34. 		}
  36. 	</style>
  38. 	<div class="carouse1">
  39. 		<img src="images/bidong.jpg" alt="" />
  40. 		<span class="left_btn"></span>
  41. 		<span class="right_btn"></span>
  42. 		<p>花样秀性感!美女劈腿壁咚秀逆天好身材</p>
  43. 	</div>

3.固定定位

position:fixed;

固定定位脱标，参考点是浏览器的角。

随着窗口的卷动，固定定位的元素不会在视口中消失。

固定定位的参考点一定是浏览器，我们无法让一个盒子当做fixed定位的参考点。

至此我们已经全部学习了脱标的3种方法：

浮动、绝对定位、固定定位

这三种脱标的方法，只能有一种作用在同一个元素身上。不存在一个元素同时浮动、同时绝对定位的情况。

我们给一个父亲overflow:hidden; 这个时候父亲就能认识浮动儿子的高度了，就能被儿子撑高了。

但是，绝对定位、固定定位的儿子，父亲永远不可能被他们撑高！

z-index属性

负责设置压盖顺序，谁压盖谁的问题。

先说的默认的压盖顺序：

1） 定位了的能够压住没有定位的；

2） 如果都定位了，那么HTML顺序后面的能够压住前面的；

  1. <div class="box1">1</div>  → 没有定位
  2. <div class="box2">2</div>  → 绝对定位
  3. <div class="box3">3</div>  → 相对定位

3压住2和1； 2压住1

z-index没有单位，数字大的能够压住数字小的。

z-index: 5;

只有定位了的元素才能写z-index值。标准流的元素不能写z-index值，浮动的元素不能写z-index。

从父现象：父亲怂了，儿子再牛逼也没用。

  1. <div class="linzhiying">   →  z-index:9;
  2. 	<p class="kimi"></p>  → z-index:100000;
  3. </div>
  5. <div class="wangjianlin">   → z-index:10;
  6. 	<p class="wangsicong"></p> → z-index:无论是多少肯定能压住kimi因为父亲z-index大
  7. </div>

08_CSS入门和高级技巧(6)的更多相关文章

  1. 03_CSS入门和高级技巧(1)

    上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...

  2. (Dos)/BAT命令入门与高级技巧详解（转）

    目录 第一章 批处理基础 第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设 ...

  3. 10_CSS入门和高级技巧(8)

    图片透明 先来复习一下盒子的透明问题: opacity:0.6; 介于0~1之间,为了让IE兼容,我们要使用IE自己的滤镜: filter:alpha(opacity=60); 盒子的透明,会让里面的 ...

  4. 07_CSS入门和高级技巧(5)

    超级链接美化 1.伪类 同一个超级链接,根据用户的点击情况,有自己样式: 超级链接根据用户点选情况,有4种状态: a:link 没有访问的超级链接 a:visited 已经访问的超级链接 a:hove ...

  5. 09_CSS入门和高级技巧(7)

    浏览器兼容问题 1.现在中国网民用什么浏览器? 中国流量最大的网站就是百度,百度在统计着每一个访问者的浏览器.地域.操作系统.分辨率等等信息. 百度流量研究院:http://tongji.baidu. ...

  6. 05_CSS入门和高级技巧(3)

    上节课复习 !important不能影响就近原则,远的标签如果加上!important也干不过近的标签! !important不能影响继承权重是0,通过继承的标签加上!important也干不过直接选 ...

  7. 06_CSS入门和高级技巧(4)

    复习 CSS : 负责样式层,层叠式样式表cascading style sheet.CSS2.1,最新版本CSS3. CSS选择器: 选择哪些元素加样式.基本选择3种:标签p.id选择器#id.cl ...

  8. 04_CSS入门和高级技巧(2)

    上节课复习 HTML表格,table.tr.td(th):thead.tbody:caption. 一定要会根据图形,来写表格: <table border="1"> ...

  9. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

随机推荐

  1. AJ学IOS 之微博项目实战(10)微博cell中图片的显示以及各种填充模式简介

    AJ分享,必须精品 :一效果 如果直接设置会有拉伸等等的状况,这里主要介绍图片显示的一些细节 二:代码 代码实现其实很简单,微博当中用了一个photos来存放九宫格这些图片,然后用了一个photo类来 ...

  2. AJ学IOS（25）UI之触摸事件

    AJ分享,必须精品 iOS中的事件 在用户使用app过程中,会产生各种各样的事件;iOS中的事件可以分为3大类型: 响应者对象–UIResponder 在iOS中不是任何对象都能处理事件,只有继承了U ...

  3. Linux 提高操作效率之 tab 命令补全

    最近在使用阿里云 ECS 时,发现 Centos 无法进行 tab 补全,特别影响操作效率,本文简单记录下 Linux 下的 tab 命令补全功能,希望对 Linux 初学者有所帮助. 安装 Linu ...

  4. App的数据如何用python抓取

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. App中的数据可以用网络爬虫抓取么 答案是完全肯定的:凡是可以看到的APP数 ...

  5. Alpha Release Note 12/15/2015

    内容提要: ******Personal Photo Experience可供您存放所有的私人照片,系统会自动整理内容,您可以借助搜索功能快速找到所需图片,同时过滤重复图片和低质量图片,给您全新的搜索 ...

  6. 通过Java + selenium +testNG + Page Objects 设计模式 实现页面UI的自动化

    Page Objects 设计模式 简单的讲,类似与Java面向对象编程,把每个页面都抽象为一个对象类,将页面元素的定位.业务逻辑操作分离开,然后我们可以通过testNG实现业务流程的控制 与 测试 ...

  7. HTML+CSS教程（一）简介及其基本标签的使用方法

    一.前端 HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQuer ...

  8. angularjs: draggable js

    var startX = 0, startY = 0, x = 0, y = 0, minDragRang = 50; var targetContainer = angular.element(do ...

  9. mysql5.7免安装版配置

    解压之后,新建一个my.ini 内容是: [mysql] # 设置mysql客户端默认字符集 default-character-set = utf8 [mysqld] #安装目录 basedir = ...

  10. 支持向量机SVM知识梳理和在sklearn库中的应用

    SVM发展史 线性SVM=线性分类器+最大间隔 间隔(margin):边界的活动范围.The margin of a linear classifier is defined as the width ...