zoukankan      html  css  js  c++  java
  • 08_CSS入门和高级技巧(6)

    排查错误

    Chrome浏览器的审查功能。
    错误1:选择器写错了,压根没有选择上;
    如果写了一个错误的选择器,

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

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

    错误的写class:

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

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

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

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

     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{
    			 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*/
    			/*也可以写上100%;更清晰一些。*/
    			 100%;
    			height: 58px;
    			background-color: #191D3A;
    		}
    		.header .logo{
    			/*浮动的盒子会自动收缩,就像一个橡皮筋套住了它,收缩到最小*/
    			/*儿子多宽,它就多宽*/
    			float: left;
    			padding: 10px 0px 0px 20px;
    		}
     		.header .logo h1{
     			 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;
     			 603px;
     			height: 58px;
     			margin-left: 47px;
     		}
     		.header .nav ul{
     			list-style: none;
     		}
     		.header .nav ul li{
     			float: left;
     			 85px;
     			border-right: 1px solid #252947;
     		}
     		.header .nav ul li.first{
     			border-left: 1px solid #252947;
     		}
     		.header .nav ul li a{
     			display: block;
     			 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;
     			 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{
     			 100%;
     			height: 567px;
     			position: relative;
     		}
     		.banner .banner1{
     			height: 567px;
     			background: #5EC4EA url(images/banner1.jpg) no-repeat center top;
     		}
     		.banner .circles{
     			position: absolute;
     			 94px;
     			height: 13px;
     			left: 50%;
     			bottom: 19px;
     			margin-left: -47px;
     		}
     		.banner .circles ol{
     			list-style: none;
     		}
    		.banner .circles ol li{
    			float: left;
    			 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;
     			 218px;
     			margin-right: 43px;
     		}
     		.product ul li.last{
     			 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%;
     			 117px;
     			height: 12px;
     			background-color: white;
     			margin-left: -59px;
     		}
     		.product ol{
     			padding-left: 17px;
     			list-style: none;
     		}
     		.product .circles ol li{
     			float: left;
     			 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;相对自己进行微调
    position:relative

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

    top:正数向下移动

    bottom: 正数向上移动

    left:正数向右移动

    right:正数向左移动

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

    top:10px;
    left:20px;
    

    等价于

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

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

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

    1) 微调元素
    2) 下午我们介绍的“子绝父相”

    微调元素:
    微调元素

    2.绝对定位

    position: absolute;

    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不一样。

    所以要往回拉一半的自己宽度。
    left:50%

    <style type="text/css">
    	div{
    		 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{
    			 310px;
    			height: 220px;
    			border: 1px solid gray;
    			position: relative;
    		}
    
    		span.left_btn{
    			position: absolute;
    			background:url(images/icon_v9.png) no-repeat 0 0px;
    			 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;
    			 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;

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

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

    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>
    
    
  • 相关阅读:
    POWERDESIGNER中显示样式设置
    DatagridView 最后编辑状态数据无法自动提交的问题
    oracle 10G以上版本 树形查询新加的几个功能
    net farmework 4安装不了 原因是 HRESULT 0xc8000222
    npoi 导出
    oracle rowtype
    fiddler https
    一次linux站点安装经验
    小米手机安装https证书报错:无法安装该证书 因为无法读取该证书文件
    日志系统
  • 原文地址:https://www.cnblogs.com/shy-kevin/p/11369602.html
Copyright © 2011-2022 走看看