排查错误

Chrome浏览器的审查功能。

错误1:选择器写错了,压根没有选择上;

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

<style type="text/css">
dvi p{
color:red;
}
</style>

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

错误的写class:

<div calss="haha">
<p>文字</p>
</div>

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

body{
background-color: pink;
}}
div p{
color:red;
}

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

错误2:选择上了,但是属性写错了;

博雅互动作业

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>博雅互动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*公共类,原子类*/
.inner_c{
width: 1000px;
margin: 0 auto;
}
.cl{
clear: both;
}
.nomargin{
margin: 0 !important;
}
body{
height: 4444px;
font-size: 14px;
font-family: "Arial","Microsoft Yahei","SimSun";
}
.header{
/*标准流中的块级元素不写宽度自动撑满,所以可以不写width*/
/*也可以写上width:100%;更清晰一些。*/
width: 100%;
height: 58px;
background-color: #191D3A;
}
.header .logo{
/*浮动的盒子会自动收缩,就像一个橡皮筋套住了它,收缩到最小*/
/*儿子多宽,它就多宽*/
float: left;
padding: 10px 0px 0px 20px;
}
.header .logo h1{
width: 158px;
height: 37px;
background: url(images/logo.png);
text-indent: -999em;
overflow: hidden;
}
.header .logo h1 a{
display: block;
height: 37px;
}
.header .nav{
float: left;
width: 603px;
height: 58px;
margin-left: 47px;
}
.header .nav ul{
list-style: none;
}
.header .nav ul li{
float: left;
width: 85px;
border-right: 1px solid #252947;
}
.header .nav ul li.first{
border-left: 1px solid #252947;
}
.header .nav ul li a{
display: block;
width: 85px;
height: 58px;
text-align: center;
line-height: 58px;
text-decoration: none;
color:#818496;
}
.header .nav ul li.current a{
background-color: #252947;
color:white;
}
.header .nav ul li a:hover{
color:white;
}
.header .joinus{
float: left;
margin-left: 52px;
padding-top: 12px;
}
.header .joinus a{
display: block;
width: 98px;
height: 32px;
background-color: #38B774;
border: 1px solid #3ACA7A;
text-align: center;
line-height: 32px;
text-decoration: none;
color:white;
/*圆角*/
border-radius: 3px;
}
.header .joinus a:hover{
background-color: orange;
border-color: yellow;
} .banner{
width: 100%;
height: 567px;
position: relative;
}
.banner .banner1{
height: 567px;
background: #5EC4EA url(images/banner1.jpg) no-repeat center top;
}
.banner .circles{
position: absolute;
width: 94px;
height: 13px;
left: 50%;
bottom: 19px;
margin-left: -47px;
}
.banner .circles ol{
list-style: none;
}
.banner .circles ol li{
float: left;
width: 12px;
height: 12px;
margin-right: 15px;
background: url(images/icons.png) no-repeat -1px -3px;
}
.banner .circles ol li.cur{
background-position: -13px -3px;
}
.product{
padding-top: 50px;
height: 229px;
border-bottom: 1px solid #DBE1E7;
position: relative;
}
.product ul{
list-style: none;
}
.product ul li{
float: left;
width: 218px;
margin-right: 43px;
}
.product ul li.last{
width: 217px;
overflow: hidden;
}
.product ul li a{
text-decoration: none;
display: block;
padding-bottom: 12px;
}
.product ul li a:hover{
background-color: #38B774;
}
.product ul li span{
/*转成块之后,就能用text-align:center;来居中内部文字了*/
display: block;
text-align: center;
}
.product ul li span.chinese{
line-height: 40px;
color:#444866;
font-weight: bold;
}
.product ul li span.english{
font-size: 12px;
line-height: 12px;
color:#38B774;
}
.product ul li a:hover span.chinese{
color:white;
}
.product ul li a:hover span.english{
color:white;
}
.product ul li span.english b{
font-weight: normal;
padding-right: 11px;
background: url(images/arrow.png) no-repeat right center;
}
.product ul li a:hover span.english b{
background-image: url(images/arrow2.png);
} .product .circles{
position: absolute;
bottom: -6px;
left: 50%;
width: 117px;
height: 12px;
background-color: white;
margin-left: -59px;
}
.product ol{
padding-left: 17px;
list-style: none;
}
.product .circles ol li{
float: left;
width: 12px;
height: 12px;
background:url(images/icons.png) no-repeat -1px -15px;
margin-right: 14px;
}
.product .circles ol li.cur{
background-position: -13px -15px;
}
</style>
</head>
<body>
<!-- 网页头部 -->
<div class="header">
<div class="inner_c">
<div class="logo">
<h1><a href="">博雅互动-最专业的游戏公司</a></h1>
</div>
<div class="nav">
<ul>
<li class="first current"><a href="">首页</a></li>
<li><a href="">博雅游戏</a></li>
<li><a href="">博雅新闻</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">客服中心</a></li>
<li><a href="">投资者关系</a></li>
<li><a href="">校园大使</a></li>
</ul>
</div>
<div class="joinus">
<a href="">加入我们</a>
</div>
</div>
</div> <div class="cl"></div> <!-- banner -->
<div class="banner">
<div class="banner1"></div>
<div class="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li class="nomargin"></li>
</ol>
</div>
</div> <div class="cl"></div> <!-- 产品 -->
<div class="product inner_c">
<ul> <li>
<a href="">
<img src="images/pro1.png" alt="" />
<span class="chinese">四川麻将</span>
<span class="english">
<b>
SICHUAN MAHJONG
</b>
</span>
</a>
</li>
<li>
<a href="">
<img src="images/pro2.png" alt="" />
<span class="chinese">四川麻将</span>
<span class="english">
<b>SICHUAN</b>
</span>
</a>
</li>
<li>
<a href="">
<img src="images/pro3.png" alt="" />
<span class="chinese">四川麻将</span>
<span class="english">
<b>SICHUAN MAHJONG</b>
</span>
</a>
</li>
<li class="last nomargin">
<a href="">
<img src="images/pro4.png" alt="" />
<span class="chinese">四川麻将</span>
<span class="english">
<b>SICHUAN MAHJONG</b>
</span>
</a>
</li>
</ul>
<div class="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li class="nomargin"></li>
</ol>
</div> </div>
</body>
</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中选择一个

top:10px;
left:20px;

等价于

bottom:-10px;
right:-20px;

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

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

1) 微调元素

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

微调元素:

2.绝对定位

position: absolute;

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

1.定位参考点

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

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

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

面试题:

2.祖先盒子当参考点

子绝父相:

<div>  →  相对定位
<p></p> → 绝对定位
</div>

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

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

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

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

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

<div class="box1">  → 没有定位
<div class="box2"> → 相对定位
<div class="box3"> → 绝对定位
<div class="box4"> → 没有定位
<p></p>
</div>
</div>
</div>
</div>

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

绝对定位的元素,无视参考盒子的padding:

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

3.绝对定位元素的居中

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

position: absolute;
left:50%;
top: 0;

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

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

<style type="text/css">
div{
width: 600px;
height: 200px;
background-color: yellowgreen;
position: absolute;
left:50%;
top: 0;
margin-left: -300px;
}
</style>

4.应用

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

	<style type="text/css">
*{
margin:0;
padding: 0;
} .carouse1{
width: 310px;
height: 220px;
border: 1px solid gray;
position: relative;
} span.left_btn{
position: absolute;
background:url(images/icon_v9.png) no-repeat 0 0px;
width: 30px;
height: 35px;
top: 50%;
left: 10px;
margin-top: -17px;
cursor: pointer;
} span.right_btn{
position: absolute;
background:url(images/icon_v9.png) no-repeat 0 -44px;
width: 30px;
height: 35px;
top: 50%;
right: 10px;
margin-top: -17px;
cursor: pointer;
} </style> <div class="carouse1">
<img src="images/bidong.jpg" alt="" />
<span class="left_btn"></span>
<span class="right_btn"></span>
<p>花样秀性感!美女劈腿壁咚秀逆天好身材</p>
</div>

3.固定定位

position:fixed;

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

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

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

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

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

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

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

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

z-index属性

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

先说的默认的压盖顺序:

1) 定位了的能够压住没有定位的;

2) 如果都定位了,那么HTML顺序后面的能够压住前面的;

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

3压住2和1; 2压住1

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

z-index: 5;

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

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

<div class="linzhiying">   →  z-index:9;
<p class="kimi"></p> → z-index:100000;
</div> <div class="wangjianlin"> → z-index:10;
<p class="wangsicong"></p> → z-index:无论是多少肯定能压住kimi因为父亲z-index大
</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(50)多线程网络之GCD简单介绍(任务,队列)

    AJ分享,必须精品 GCD简单介绍 1.什么是GCD? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD的优势 GCD是苹果 ...

  2. Nginx+uWSGI+Python+Django构建必应高清壁纸站

    写在前面 做这个网站的初衷是因为,每次打开必应搜索搜东西的时候都会被上面的背景图片吸引,我想必应的壁纸应该是经过专业人员精选出来的,我甚至会翻看以前的历史图片,唯一美中不足的是必应的首页只能查看最多7 ...

  3. L24 word2vec

    词嵌入基础 我们在"循环神经网络的从零开始实现"一节中使用 one-hot 向量表示单词,虽然它们构造起来很容易,但通常并不是一个好选择.一个主要的原因是,one-hot 词向量无 ...

  4. Cobalt Strike系列教程第七章:提权与横向移动

    Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...

  5. 1327C - Game with Chips (构造)

    题目大意:一个n*m的棋盘上有k个棋子,k个棋子相互关联,可以一起向上向下向左向右,当碰到边界时,如果继续移动会发生越界,那么该棋子会保持不动,其余棋子继续移动.问能否在2*n*m的移动次数内,使各个 ...

  6. git分支,git commit,git流程

    1. git分支命令规范 1. Master 主分支 2. Dev 开发分支 3. Feature 功能分支(例如:feature-x) 4. Release 预发布分支(例如:release-1.2 ...

  7. redis: 配置文件详解(十一)

    #通用配置 bind 127.0.0.1 #绑定可访问的ip 默认本机访问,如果bind选项为空的话,那会接受所有来自于可用网络接口的连接,也可以绑定指定ip访问 protected-mode yes ...

  8. Nmap详细用法

    探测主机存活 (1)-sP :进行ping扫描 (2) -sn: ping探测扫描主机, 不进行端口扫描 (3)-sA     发送ACK探测存活 端口扫描 (1) -sS :半开放扫描 (2) sT ...

  9. 使用spring boot创建fat jar APP

    文章目录 介绍 build和run fat jar和 fat war 更多配置 介绍 在很久很很久以前,我们部署web程序的方式是怎么样的呢?配置好服务器,将自己写的应用程序打包成war包,扔进服务器 ...

  10. java 之 servlet简介

    Servlet 是什么? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间 ...