CSS设计彻底研究-读书笔记

最新推荐文章于 2022-07-27 09:42:55 发布

九九九角银

最新推荐文章于 2022-07-27 09:42:55 发布

阅读量251

点赞数

分类专栏： CSS 文章标签： CSS 读书笔记

本文链接：https://blog.csdn.net/weixin_39918105/article/details/100107535

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一章：

选择器：

选择器优先级：

两个类别选择器时候，第一个大于第二个。

行内样式>ID选择器>类别选择器>标记选择器

第二章：“CSS禅意花园”作品

主要在于欣赏其作品。

第三章：深入理解盒子模型

所有的页面中的元素都可以看成一个盒子。

一.盒子的属性：

简单来说，content就是画的本身，padding是画面与画框之间的空白，boder就是画框，margin就是画与画之间的距离。

content（实际内容）

盒子的内容，显示文本和图像。我们给元素设置的width和height其实是content的宽高，

如果指定高度大于显示内容所需高度，多余的高度会产生类似内边距一样的效果；如果指定高度小于显示内容所需高度，会出现滚动条。如果元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性。

border（边框）

元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成。

padding（内边距）

清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。

margin（外边距）

在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景（padding所带的是本身的背景而非父元素）。margin经常取负值实现定位的作用。

外边距有一个合并问题，经常使人们混淆，简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3.51.盒子间的关系

htmL与DOM

3.5.2.标准的文档流

1.块级元素

、

2.行内元素、

在DOM角度来讲，两者没有什么大的区别，都是DOM树上的有个节点。

而在CSS中，块级元素拥有自己的区域，而行内元素没有。

3.5.3. div与span标记

div是块级元素是行内元素

eg：三张图片

1.div标记的三张图片会分在三行来显示，包围div的元素会自动换行

而 span 它会在同一行上显示出来

2.div里可以有span，反过来却不行。

3.6.1 实验1—行内元素之间的水平margin

当两个行内元素紧邻时，它们的之间的距离的是

=第一个元素的margin-right+第二个margin-left

3.6.2 实验2—块级元素之间的竖立margin

当两个块级元素之间距离不是等于的margin-top+margin-bottom

=两者中较大者的margin

（这种现象叫做 margin的“塌陷”现象。较小的margin塌陷到了较大的margin中。）

3.6.3 实验3—嵌套盒子之间的margin（父子关系）

上面的两种关系是行内元素间隔和块级元素间隔，还有一种位置关系，它就是父子关系。

3.6.4 实验4-----将margin设置为负数

当margin为负数时候，会将设为负数的块向反方向移动。（当是父子的关系的时候，子margin可以脱离的父块中分离）

第四章：盒子的浮动与定位

浮动：float 默认为none

当box1 设置 float：left的时候，box1脱离了标准流

标准流中的box2的左边框会与box1的左边框重合，但是box2的内容会围绕着box1排列。

clear属性消除浮动

clear： left/right/both（两边）

注意：

一个div 的范围是由它里面的标准流决定的，与里面的浮动内容无关，eg：例如当文字段落被删除后，父DIV缩成了一条，是由于 padding

和border构成的

这时候可以在多增加一个子的div ，这里必须要指定其父div

.father .clear

{

margin:0;

padding:0;

border:0;

clear:bothl;

}

4.2 盒子的定位

position ：

static：默认属性，按照标准流进行布局。

relative：相对定位。

absolute：绝对定位

fixed：固定定位，与绝对定位类似。

relative：相对定位。

a.当div里只有一个块的时候，

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置

2.使用相对定位的盒子仍在标准流中，它对父块没有任何影响。

b.当div里有两个子块：

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置

2.使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子都没有任何影响。

absolute：绝对定位

1.使用绝对定位的盒子以他的”最近“的一个”已经定位“的”祖先元素“为基础进行偏移，如果没有已经定位的祖先元素，则会以浏览器窗口为基准进行偏移。

2.绝对顶的框从标准流中脱离，他对其他兄弟盒子的定位没有影响，其他盒子就好像觉得它没有存在过一样。

fixed：固定定位，与绝对定位类似。

拖动浏览器窗口滚动条时，将元素保持相对于浏览器窗口不变的位置。

4.3 z-index空间位置。

值越大越上面

4.4 盒子的display属性

display属性可以把块级的变为行内属性，

可以把行内元素变成块级，

可以把盒子消失。

第五章 : 文字与图像

5.1.1准备网页（略）

5.1.2 设置字体

font-family

5.1.3 文字大小

font-size

1.px

2.em和ex

3.百分比

5.1.4 行高

line-height： 18px；

这行表示使用Arial字体，大小为12像素，行高为18像素

font：12px/18px Arial；

也可以用相对比例作为行高的数值，例如：

font：12px/1.5 Arial；

5.1.5 文字颜色与背景颜色

5.1.6 文字加粗、倾斜与大小写

font-weight ：normal  
font-weight ：bold      // 加粗

倾斜：

font-style：normal；

font-style：oblique；//意大利体

font-style：italic；  //倾斜

大小写：

text-transform：capitalize；	//单词首字母戴大写
text-transform：uppercase；    //全部大写	
text-transform：lowercase；   //全部小写

5.1.7文字的装饰效果

text-decoration：underline；  //下划线
text-decoration：overline；  //顶划线
text-decoration：line-through；  //删除线
text-decoration：blink；        //闪烁

也可以把三种属性值用空格一起写

5.1.8 文字的水平对齐方式和段首缩进设置

水平对齐方式：

text-align：center； /left /right

段首缩进设置：

ext-indent：2em；

5.1.9 文字布局

5.20 CSS图像样式

1.背景：

background-image：url（）；

2.控制图像平铺方向：

background-repeat：

3.同时设置背景图和颜色

background-color：；

5.2.4 投影

第六章链接与导航

链接：

6.1.1动态超链接

<a href="地址">链接名字</a> 
去下划线
a{
    text-decoration ：none；  /*去掉下划线*/
 }

制作动态链接效果的：

a:active是超级链接的初始状态

a:hover是把鼠标放上去时的状况

a:link 是鼠标点击时

a:visited是访问过后的情况

6.2 项目列表

项目列表主要通过

或者< ol>

<ul>
	<li>XXX</li>
	<li>XXX</li>
	<li>XXX</li>
</ul>

可以在CSS中设置其样式，例如

font-size、color、list-style-type等等

6.3 简单的导航菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #dee0ff;
			}
			#navigation
			{
				width: 150px;
				font-family: arial;
				font-size: 14px;
				text-align: right;
			
			}
			#navigation ul
			{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			#navigation li
			{
				border-bottom: 1px solid #9f9fed;
			}
			#navigation li a
			{
				display: block;
				height: 1em;
				padding: 5px 5px 5px 0.5em;
				text-decoration: none;
				border-left: 12px solid #151571; /*左边的粗边*/
				border-right: 1px solid #151571; /*左边的阴影*/
			}
			#navigation li a:link, #navigation li a:visited{
				background-color: #1136c1;
				color: #ffffff;
			}
			
			#navigation li a:hover
			{
				background-color: #002099;  /*鼠标经过时*/
				color: #ffff00;             /*改变背景*/
				border-left: 12px solid yellow;  /*改变文字颜色*/
			}
		</style>
	</head>
	
	<body>
		<div id="navigation">
<ul>
	    <li><a href="#">HOME</a></li>
		<li><a href="#">Contact us</a></li>
		<li><a href="#">Web Dev</a></li>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Map</a></li>
</ul>
		</div>
	</body>
</html>

【注意】

display：block；语句，通过该语句把超链接设置为块元素，当鼠标指针进入该块的任何部分都会被激活。

修改两处

1.把width: 150px; 放到 #navigation li a 中

这样，这个列表就没有了宽度限制了，同时还保证了每个列表项的宽度都是150px

2.在 #navigation li 中加入

	float: left;

也就是使各个列表项变为向左浮动，这样它们就会依次排列，直到浏览器容纳不了，再这行排列。

第七章竖直排列的导航菜单

7.1双竖线菜单

7.1.1 HTML 框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">

		</style>
	</head>
	
	<body>
		<div id="menu">
<ul>
	    <li><a href="#">HOME</a></li>
		<li><a href="#">Contact us</a></li>
		<li><a href="#">Web Dev</a></li>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Map</a></li>
</ul>
		</div>
	</body>
</html>

通过的对比发现，第一个菜单项与最后一个菜单项的上下高度高于其他菜单项之间的高度，原因在于，它们的高度等于第一个菜单项的margin+menu的padding的高度。

所以要除去多余的margin，则可以通过把最后一个和第一个加上ID 区分开来与其他的菜单项。

#menu a#Frist, #menu a#last
{
	margin: 0px;
}

可以用伪类代替

#menu a:first-child, #menu a:last-child
{
	margin: 0px;
}

双竖线菜单完整代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu
{
	width:120px;         /*设置#menu*/
	background: #CCCCCC;  /*背景颜色*/
	font-family: arial;   
	font-size: 14px;
	padding: 8px;	 /*设置内边距*/
	margin: 0 auto;   /*设置水平居中*/
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	display: block;  /*设置为块级元素*/
	background-color: #fff; /*背景色为白色*/
	padding: 4px 8px;  /*内边距上下4  左右8px*/
	color: #000;
	text-decoration: none;
	margin: 8px 0;  /*把每个菜单项分开*/
	/*设置左右边框*/
	border-left: 8px solid #9ab;
	border-right: 8px solid #9ab;
}
#menu a#Frist, #menu a#last
{
	margin: 0px;
}
/*#menu a:first-child, #menu a:last-child
{
	margin: 0px;
}*/
	#menu a:hover
	{
		color: #f00;
		border-left: 8px solid #000;
		border-right: 8px solid #000;
	}
		</style>
	</head>
	
	<body>
		<div id="menu">

	  <a href="#" id="Frist">HOME</a>
		<a href="#">Contact us</a>
		<a href="#">Web Dev</a>
		<a href="#">Web Design</a>
		<a href="#" id="last">Map</a>

		</div>
	</body>
</html>

7.2双斜角横线菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu
{
	width:120px;         /*设置#menu*/
	margin: 0 auto;   /*设置水平居中*/
	font-family: arial;   
	font-size: 14px;
	border: solid 1px #aaa;
	

}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	display: block;  /*设置为块级元素*/
    text-decoration: none;
    color: #000;
    line-height: 1.4em;   /*高度*/
    border: 0.5em solid #fff;  /*与背景色一致*/
	
}

	#menu a:hover
	{
		color: #fff;
		background-color: #aaa;
		border-color: #ddd #aaa;
	}
		</style>
	</head>
	
	<body>
		<div id="menu">

	  <a href="#" id="Frist">HOME</a>
		<a href="#">Contact us</a>
		<a href="#">Web Dev</a>
		<a href="#">Web Design</a>
		<a href="#" id="last">Map</a>

		</div>
	</body>
</html>

7.3 立体菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu
{
	font-family: arial;   
	font-size: 14px;
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	text-decoration: none;
	text-align: center;
	color: #fff;
	display: block;  /*设置为块级元素*/
	width: 10em;
	padding: 0.25em;  /*内边距*/
	margin: 0.5em auto;  /*菜单项之间间隔0.5em，并水平居中*/
    background-color: #8ab;  /*背景颜色*/
    border-color: #def #678 #345 #cde; /*边框颜色突起的效果*/
    border: 2px solid #fff;  /*边框粗细2px*/
   position: relative;    /*使用相对定位*/
	
}
	#menu a:hover
	{
		top: 2px;
		left: 2px;	
		border-color: #345 #cde #def #678;  /*边框颜色显示凹陷效果*/
	}
		</style>
	</head>
	
	<body>
		<div id="menu">

	  <a href="#" id="Frist">HOME</a>
		<a href="#">Contact us</a>
		<a href="#">Web Dev</a>
		<a href="#">Web Design</a>
		<a href="#" id="last">Map</a>
		</div>
	</body>
</html>

7.4 箭头菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu
{
	font-family: arial;   
	font-size: 16px;
	width: 140px;
	margin: 0 auto;
	border: solid 1px #ccc;
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	text-decoration: none;
	text-align: center;   /*文字居中对齐*/
	color: #c00;
	display: block;  /*设置为块级元素*/
	padding: 4px;  /*内边距*/
    background-color: #fff;  /*背景颜色*/
    border: 1px solid #fff;  /*边框粗细2px*/
    position: relative;    /*使用相对定位*/
	width: 130px;  
	/*这里的130是经过计算得出的，外面的#menu容器的宽度为140px，
	这里希望它里面的a元素的边框加上padding的总宽度刚好等于140px
	已经知道 设定边框的像素为1px padding为4px 
	所以 a的总宽度为  140-2*1-2*4 = 130 px*/
}
	#menu a:hover
	{	
		border-color: #c00;  /*鼠标经过时候，出现红色的边框*/
	}
	#menu a:hover span
	{
		display:block;  
		position: absolute; /*使用绝对定位*/
		height:0;
		width: 0;
		overflow: hidden; /*防止箭头的溢出*/
		border: solid 8px #fff; /*设置默认的边框样式*/
		top: 4px;      /*竖直方向的定位*/
	}
	#menu a:hover span.left
	{
		border-left-color: #c00;  /*左边角*/
		left: 8px;
	}	
	#menu a:hover span.right
	{
		border-right-color: #c00; /*右边角*/
		right: 8px;
	}	
		</style>
	</head>
	
	<body>
		<div id="menu">

	    <a href="#">
	  		<span class="left"></span>	
			  HOME
	  		<span class="right"></span>
	    </a>
		<a href="#">
			<span class="left"></span>	
			Contact us  
			<span class="right"></span>
		</a>
		<a href="#">
			<span class="left"></span>	
			Web Dev
		    <span class="right"></span>
		    
		</a>
		<a href="#">
			<span class="left"></span>	
			Web Design
			<span class="right"></span>
		</a>
		<a href="#">
			<span class="left"></span>	
			Map
			<span class="right"></span>	
		</a>
		</div>
	</body>
</html>

7.5 带说明的菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu
{
	font-family: arial;   
	font-size: 16px;
	width: 140px;
	margin: 0 ;/*菜单项之间间隔0.5em，并水平居中*/
	border: solid 1px #ccc;
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	text-decoration: none;
	text-align: center;   /*文字居中对齐*/
	color: #c00;
	display: block;  /*设置为块级元素*/
	padding: 4px;  /*内边距*/
    background-color: #fff;  /*背景颜色*/
    border: 1px solid #fff;  /*边框粗细2px*/
    position: relative;    /*使用相对定位*/
	width: 130px;  
	/*这里的130是经过计算得出的，外面的#menu容器的宽度为140px，
	这里希望它里面的a元素的边框加上padding的总宽度刚好等于140px
	已经知道 设定边框的像素为1px padding为4px 
	所以 a的总宽度为  140-2*1-2*4 = 130 px*/
}
	#menu a span
	{
		display:none;  /*把常态下所有span元素隐藏起来*/
	}
	#menu a:hover
	{	
		border-color: #c00;  /*鼠标经过时候，出现红色的边框*/
	}
	#menu a:hover span
	{
		display:block;  
		position: absolute; /*使用绝对定位*/
		height:0;
		width: 0;
		overflow: hidden; /*防止箭头的溢出*/
		border: solid 8px #fff; /*设置默认的边框样式*/
		top: 4px;      /*竖直方向的定位*/
	}
	#menu a:hover span.left
	{
		border-left-color: #c00;  /*左边角*/
		left: 8px;
	}	
	#menu a:hover span.right
	{
		border-right-color: #c00; /*右边角*/
		right: 8px;
	}
	#menu a:hover span.intro
	{
	color:#000;
	font-size: 12px;
	display: block;
	position: absolute; /*绝对定位，以a元素为定位基准*/
	left: 150px;
	top: 0px;
	width: 100px;
	height: auto;  /*使说明菜单元素高度适应文字的需要。如果没有，文字显示不完整*/
	padding: 5px;
	background-color: #eee;
	border: 1px solid #234;
	}	
		</style>
	</head>
	
	<body>
		<div id="menu">

	    <a href="#">
	  		<span class="left"></span>	
			  HOME
	  		<span class="right"></span>
	  		<span class="intro">这里说明Home菜单项</span>
	    </a>
		<a href="#">
			<span class="left"></span>	
			Contact us  
			<span class="right"></span>
			<span class="intro">这里说明Contact us 菜单项</span>
		</a>
		<a href="#">
			<span class="left"></span>	
			Web Dev
		    <span class="right"></span>
		    <span class="intro">这里说明Web Dev 菜单项</span>
		    
		</a>
		<a href="#">
			<span class="left"></span>	
			Web Design
			<span class="right"></span>
			<span class="intro">这里说明Web Design菜单项</span>
		</a>
		<a href="#">
			<span class="left"></span>	
			Map
			<span class="right"></span>
			<span class="intro">这里说明Map 菜单项</span>
		</a>
		</div>
	</body>
</html>

第八章水平导航菜单

8.1 自适应的水平菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu /*由于宽度会自动水平适应，所以这里 的menu容器不需要额外其他设置*/
{
	font-family: arial;   
	font-size: 14px;
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	display: block;  /*设置为块级元素*/
	color: #000;
	float: left;
	padding: 4px;
	text-decoration: none;
	margin: 4px;  /*把每个菜单项分开*/
	/*设置左右边框*/
	border-top: 8px solid #9ab;
	border-bottom: 8px solid #9ab;
	white-space: nowrap;  /*确保缩小屏幕的，确保单词之间的空白处不换行，避免了单词被拆开*/
}
	#menu a:hover
	{
		color: #f00;
		border-top: 8px solid #000;
		border-bottom: 8px solid #000;
	}
		</style>
	</head>
	
	<body>
		<div id="menu">

	  <a href="#" id="Frist">HOME</a>
		<a href="#">Contact us</a>
		<a href="#">Web Dev</a>
		<a href="#">Web Design</a>
		<a href="#" id="last">Map</a>

		</div>
	</body>
</html>

注意：

前面我们知道，菜单项的水平间隔是由左右margin决定的，所以这里左右的间隔为 4px+4px= 8px，而竖直方向上下间隔应该是取margin中最大值的一方，就是4px，而事实上，我们看到的其上下间距与左右间距一样，并没有发生所谓的“塌陷”。

其原因就在于：当盒子设置为浮动的时候，竖直方向的上下相邻的margin不会发生塌陷的现象，所以间距也为4+4 =8。

8.2 自适应的斜角水平菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#menu /*由于宽度会自动水平适应，所以这里 的menu容器不需要额外其他设置*/
{
	font-family: arial;   
	font-size: 14px;
}
#menu a, #menu a:visited /*设置菜单项样式*/ 
{
	display: block;  /*设置为块级元素*/
	color: #c00;
	float: left;
	position: relative; /*相对定位，用于设置斜角*/
	padding: 6px;
	text-decoration: none;
	margin: 1px 0 0 1px;  /*把每个菜单项分开*/
}
#menu a .corner
{
	position: absolute;
	height: 0;
	width: 0;
	overflow: hidden;
	border-bottom: solid 6px #c00;
	border-left: solid 6px #fff;
	top: 0;
	left: 0;
}
	#menu a:hover
	{
		background-color: #f90;
		color: #333;
    
	}
		#menu a:hover span.corner
	{
		border-bottom: solid 6px #f90;  
	}
		</style>
	</head>
	
	<body>
		<div id="menu">

	  <a href="#">
	  	<span class="corner"></span>
	  	HOME</a>
		<a href="#">
		<span class="corner"></span>
			Contact us</a>
		<a href="#">
		<span class="corner"></span>	
			Web Dev</a>
		<a href="#">
			<span class="corner"></span>
			Web Design</a>
		<a href="#">
			<span class="corner"></span>
			Map</a>

		</div>
	</body>
</html>

注意：

在**#menu a .corner** 中

top left都设置为0 是不可以省略的，如果省略这两个语句，斜角的效果就会显示放置在”内容“的左上角，而我们希望是放置在以边框为见的左上角

8.3应用滑动门技术的玻璃效果

百度

8.5不适用图像的圆角菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
    .item
    {	float: left;
    	width: 100px;
    	margin:0 -1px 0 0;
    	padding: 0;
    	font: 14px arial;
    	font-weight: bold;
    	
    }
    .item p
    {
    	padding: 0 0 2px 0;
    	margin: 0px;
    	text-align: center;
		background: #cc6;
		border:  solid 1px #000;
		border-top-width: 0;
    }
    .item div {
    	height: 1px;
    	overflow: hidden;
    	background: #cc6;
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    }
	.item .row1
	{
		margin: 0 5px;
		background: #000;
	}
	.item .row2
	{
		margin: 0 3px;
		border:  0 2px;
	}
		.item .row3
	{
		margin: 0 2px;
	
	}
		.item .row4
	{
		margin: 0 1px;
		 height:  2px;
	}
	ul
	{
		height: 26px;
		margin: 0;
		padding: 10px;
		list-style-type: none;
		background: #ddd;
	}
	.item a ,.item a:visited
	{
		color: #000;
		text-decoration: none;
	}
	.item a:hover p
	{
		background: #884;
		color: #FFFFFF;
	}
	.item a:hover
	{
		background: transparent;
	}
	.item a:hover .row2,
	.item a:hover .row3,
	.item a:hover .row4
	{
		background: #884;
	}
	</style>
	</head>
	<body>	
 <ul>
 	 <li class="item">
 	 	<a href="#">
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Home</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Contact Us</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Web Dev</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Map</p>
 	 	</a>     	 	
 	 </li>
 </ul>
     
	</body>
</html>

8.6会跳起的多彩菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
    .item
    {	float: left;
    	width: 100px;
    	margin:0 -1px 0 0;
    	padding: 0;
    	font: 14px arial;
    	font-weight: bold;
    	
    }
    .item p
    {
    	padding: 0 0 2px 0;
    	margin: 0px;
    	text-align: center;
		background: #cc6;
		border:  solid 1px #000;
		border-top-width: 0;
		
    }
    .item div {
    	height: 1px;
    	overflow: hidden;
    	background: #cc6;
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    }
	.item .row1
	{
		margin: 0 5px;
		background: #000;
	}
	.item .row2
	{
		margin: 0 3px;
		border:  0 2px;
	}
		.item .row3
	{
		margin: 0 2px;
	
	}
		.item .row4
	{
		margin: 0 1px;
		 height:  2px;
	}
	ul
	{
		height: 26px;
		margin: 0;
		padding: 10px;
		list-style-type: none;
		background: #ddd;
	}
	.item a ,.item a:visited
	{
		color: #000;
		text-decoration: none;
	}
	.item a:hover p
	{
		background: #884;
		color: #FFFFFF;
		padding-bottom: 12px;
	}
	.item a:hover
	{
		background: transparent;
	}
	.item a:hover .row2,
	.item a:hover .row3,
	.item a:hover .row4
	{
		background: #884;
	}
	.item .pad
	{
		height: 10px;
		border: 0;
		background: transparent;
	}
	.item a:hover .pad
	{
	 height: 0px;
	}
	</style>
	</head>
	<body>	
 <ul>
 	 <li class="item">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Home</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Contact Us</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Web Dev</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Map</p>
 	 	</a>     	 	
 	 </li>
 </ul>
     
	</body>
</html>

注意

这里的基于8.4的基础，如果没有添加pad 直接给p段落增加的padding-bottom 会因为的每个菜单项都是向左浮动排列的，这些盒子的都是根据上边缘对齐的，如果某个菜单项中p变高了，它会自然往下延伸，不能达到我们的希望的样子，所以我们的可以事先在每一个菜单项上面添加一个预留的高度，同时增加下面p段落的高度， background: transparent;把垫子的背景色调为透明，此时垫子还想不存在的一样。

当鼠标经过的时候，我们再把垫子的高度设为0px，P段落的padding-bottom变为12px 注意，这里为什么设置为12px 是由于之前的原本p段落的padding-bottom有2px，在加上垫子的高度10px 所以设置为 12px。

8.6.2 实现多彩效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
    .item
    {	float: left;
    	width: 100px;
    	margin:0 -1px 0 0;
    	padding: 0;
    	font: 14px arial;
    	font-weight: bold;
    	
    }
    .item p
    {
    	padding: 0 0 2px 0;
    	margin: 0px;
    	text-align: center;
		background: #cc6;
		border:  solid 1px #000;
		border-top-width: 0;
		
    }
    .item div {
    	height: 1px;
    	overflow: hidden;
    	background: #cc6;
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    }
	.item .row1
	{
		margin: 0 5px;
		background: #000;
	}
	.item .row2
	{
		margin: 0 3px;
		border:  0 2px;
	}
		.item .row3
	{
		margin: 0 2px;
	
	}
		.item .row4
	{
		margin: 0 1px;
		 height:  2px;
	}
	ul
	{
		height: 26px;
		margin: 0;
		padding: 10px;
		list-style-type: none;
		background: #ddd;
	}
	.item a ,.item a:visited
	{
		color: #000;
		text-decoration: none;
	}
	.item a:hover p
	{
		background: #884;
		
		padding-bottom: 12px;
	}
	.item a:hover
	{
		background: transparent;
	}
	.item a:hover .row2,
	.item a:hover .row3,
	.item a:hover .row4
	{
		background: #884;
	}
	.item .pad
	{
		height: 10px;
		border: 0;
		background: transparent;
	}
	.item a:hover .pad
	{
	 height: 0px;
	}
	.orange p,
	.orange .row2,
	.orange .row3,
	.orange .row4
	{
		background: #fa0;
	}
	.orange a:hover p,
	.orange a:hover  .row2,
	.orange a:hover .row3,
	.orange a:hover .row4
	{
		background: #fa0;
	}
	
		.yellow p,
	.yellow .row2,
	.yellow .row3,
	.yellow .row4
	{
		background: yellow;
	}
	.yellow a:hover p,
	.yellow a:hover  .row2,
	.yellow a:hover .row3,
	.yellow a:hover .row4
	{
		background: yellow;
	}
	.green p,
	.ogreen .row2,
	.green .row3,
	.green .row4
	{
		background: green;
	}
	.green a:hover p,
	.green a:hover  .row2,
	.green a:hover .row3,
	.green a:hover .row4
	{
		background: green;
	}
		.blue p,
	.blue .row2,
	.blue .row3,
	.blue .row4
	{
		background: blue;
	}
	.blue a:hover p,
	.blue a:hover  .row2,
	.blue a:hover .row3,
	.blue a:hover .row4
	{
		background: blue;
	}	
	</style>
	</head>
	<body>	
 <ul>
 	 <li class="item orange">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Home</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item yellow">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Contact Us</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item green">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Web Dev</p>
 	 	</a>
 	 	</li>
 	 	 <li class="item blue">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Map</p>
 	 	</a>     	 	
 	 </li>
 </ul>
     
	</body>
</html>

添加上面8.6.1的基础上修改

 	 <li class="item orange">
 	 	<a href="#">
 	 		<div class="pad"></div>
 	 		<div class="row1"></div><div class="row2"></div>
 	 		<div class="row3"></div><div class="row4"></div>
 	 		<p>Home</p>
 	 	</a>
 	 	</li>

css中添加：

.orange p,
.orange .row2,
.orange .row3,
.orange .row4
{
	background: #fa0;
}
.orange a:hover p,
.orange a:hover  .row2,
.orange a:hover .row3,
.orange a:hover .row4
{
	background: #fa0;
}

第九章下拉菜单

HTML标记中， dl dt dd ，与ul li 非常类似，也用与列表结构，dl被称作“定义列表” ，在使用上相当于 ul；

而dt 和dd 分别称为“定义标题”和“定义描述”相当于li。

9.下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#menu{
				margin:0;
				padding: 0;
				width: 610px;
				list-style-type: none;
				font-family: arial;				
			}
			#menu li{
				float: left;
				width: 150px;
				padding: 0;
				margin: 0 1px 0 0;
			}
			/*下面对dl进行设置*/
			#menu li dl
			{
				margin: 0;
				padding: 0 0 10px 0;
				background:  #cb6;
			}
			/*设置菜单项dt*/
			#menu li dt
			{
				margin: 0;
				padding: 5px;
				text-align: center;
				border-bottom: 1px solid #b00;
				background: #ed8;
			}
			#menu li dt a ,#menu li dt a:visited
			{
				display: block;
				color: #333;
				text-decoration: none;
			}
			/*对子菜单dd进行设置*/
			#menu li dd
			{
				margin:  0;
				padding: 0;
				color: #fff;
				background: #47a;
			}
			#menu li dd.last
			{
				border-bottom: 1px solid #b00;  
				/*让最下面有一条暗红线*/
			}
			#menu li dd a, #menu li dd a:visited
			{
				display: block;
				color: #fff;
				text-decoration: none;
				padding: 4px 5px 4px 20px;
				background: #47a url(../img/三角.jpg) no-repeat 10px 10px;
			}
			#menu li dd
			{ /*隐藏子菜单项*/
				display: none;
			}
			#menu li:hover dd{
				display: block;
			}
			#menu li dd a:hover
			{
				background: #147;
				color: #9cf;
			}
		</style>
	</head>
	<body>
		<ul id="menu">
			<li>
				<dl>
				<dt><a href="#">Artech Studio</a></dt>
				<dd><a href="#">Web Dev</a></dd>
				<dd><a href="#">Web Design</a></dd>
				<dd><a href="#">Books</a></dd>
				<dd class="last"><a href="#">Contact Uss</a></dd>
				</dl>
			</li>
			<li>
				<dl>
				<dt><a href="#">Artech Store</a></dt>
				<dd><a href="#">Books</a></dd>
				<dd><a href="#">DVDs</a></dd>
				<dd><a href="#">Movies</a></dd>
				<dd class="last"><a href="#">Service</a></dd>
				</dl>
			</li>
			<li>
				<dl>
				<dt><a href="#">Artech Achi</a></dt>
				<dd><a href="#">Landscape</a></dd>
				<dd><a href="#">Plan</a></dd>
				<dd><a href="#">Design</a></dd>
				<dd class="last"><a href="#">Maps</a></dd>
				</dl>
			</li>
		</ul>
	</body>
</html>

实现主菜单项目不同颜色：

1.在每个dt中添加

<dt class="orange">

2.在CSS中

			/*设置颜色*/
			#menu li dt.orange
			{
				background: #fa5;
			}
			#menu li dt.blue
			{
				background: blue;
			}
			#menu li dt.green
			{
				background: greenyellow;
			}

3.删除主菜单项的共性背景颜色。

第十章表格

第十二章应用Spry制作高级网页组件

高级网页组件：Tab面板、伸缩面板、折叠面板等等

12.1 Tab菜单

		<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

		body
		{
		margin: 10px;}
		#content
		{
			border-left: 1px solid #11a3ff;
			border-right: 1px solid #11a3ff;
			border-bottom: 1px solid #11a3ff;
			padding: 5px;
			font-size: 12px;
		}
		/*设置tab的样式*/
		ul#tabnav
		{
			list-style-type: none;
			margin: 0;
			padding-left: 0px;
			padding-bottom: 23px;
			border-bottom: 1px solid #11a3ff;
			font:bold 12px verdana, arial;
		}
		ul#tabnav li{
			float:left;
			height:22px;
			background-color: #a3dbff;
			margin: 0px 3px 0px 0px;
			border: 1px solid #11a3ff;
		}
		ul#tabnav a:link, ul#tabnav a:visited
		{
			display: block;
			color: #006eb3;
			text-decoration: none;
			padding: 5px 10px 3px 10px;
			
		}
		ul#tabnav a:hover
		{
			background-color: #006eb3;
			color: #fff;
		}
		/*设置当前页的Tab样式*/
		body#home li.home,
		body#dev li.dev,
		body#design li.design,
		body#map li.map
		{
			border-bottom: 1px solid #fff; /*白色下边框，覆盖ul中的蓝色下边框*/
			color: #000;
			background-color: #fff;
		}
		body#home li.home a:link, body#home li.home a:visited,
		body#dev li.dev a:link, body#dev li.dev a:visited,
		body#design li.design a:link, body#design li.design a:visited,
		body#map li.map a:link, body#map li.map a:visited{
			color: #000;
			background-color: #fff;
		}
		body#home li.home a:hover, body#dev li.dev a:hover, 
		body#design li.design a:hover, body#map li.map a:hover
		{
			color: #006eb3;
			text-decoration: underline;
		}
	</style>
</head>
 			
<body id="home">
	<ul id="tabnav">
		<li class="home"><a href="#">Home</a></li>
			<li class="dev"><a href="#">Web Dev</a></li>
				<li class="design"><a href="#">Web Design</a></li>
					<li class="map"><a href="#">Map</a></li>
	</ul>
	<div id="content">
		<ul id="list">
			<li>1.There are some good news.</li>
			<li>2.There are some good news.</li>
			<li>3.There are some good news.</li>
			<li>4.There are some good news.</li>
			<li>5.There are some good news.</li>
		</ul>
	</div>
</body>
</html>

14.固定矿都1-3-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body
			{
				font: 12px/18px arial;
				margin: 0;
			}
			#header, #footer
			{
				background: #99ccff;
				width: 760px;
				margin: 0 auto;
			}
			h2
			{
				margin: 0;
				padding: 20px;
			}
			p{
				padding:20px;
				text-indent:2em;
				margin: 0;
			}
			#container
			{
				position: relative;
				width: 760px;
				margin: 0 auto;
			}
			#navi
			{
				width: 200px;
				position: absolute;
				left: 0px;
				top: 0px;
				background: #99ffcc;
			}
			#content{
				margin-right: 200px;
				margin-left: 200px;
				background: #ffcc66;
			}
			#side
			{
				width: 200px;
				position: absolute;
				right: 0px;
				top: 0px;
				background: #cc99ff;
			}

		</style>
	</head>
	<body>
		<div id="header">
			<h2>Page Header</h2>
		</div>
		<div id="container">
			<div id="navi">
				<h2>Navi Bar</h2>
				<ul>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
				</ul>
			</div>
			<div id="content">
				<h2>Page Content</h2>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXX</p>
			</div>
			<div id="side">
				<h2>Side Bar</h2>
				<ul>
					<li>Web Dev</li>
					<li>Web Dev</li>
					<li>Web Dev</li>
					<li>Web Dev</li>
				</ul>
			</div>
			<div id="footer">
				<h2>Page Footers</h2>
			</div>
		</div>
	</body>
</html>

ood news.

4.There are some good news.
5.There are some good news.

14.固定矿都1-3-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body
			{
				font: 12px/18px arial;
				margin: 0;
			}
			#header, #footer
			{
				background: #99ccff;
				width: 760px;
				margin: 0 auto;
			}
			h2
			{
				margin: 0;
				padding: 20px;
			}
			p{
				padding:20px;
				text-indent:2em;
				margin: 0;
			}
			#container
			{
				position: relative;
				width: 760px;
				margin: 0 auto;
			}
			#navi
			{
				width: 200px;
				position: absolute;
				left: 0px;
				top: 0px;
				background: #99ffcc;
			}
			#content{
				margin-right: 200px;
				margin-left: 200px;
				background: #ffcc66;
			}
			#side
			{
				width: 200px;
				position: absolute;
				right: 0px;
				top: 0px;
				background: #cc99ff;
			}

		</style>
	</head>
	<body>
		<div id="header">
			<h2>Page Header</h2>
		</div>
		<div id="container">
			<div id="navi">
				<h2>Navi Bar</h2>
				<ul>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
					<li>Home</li>
				</ul>
			</div>
			<div id="content">
				<h2>Page Content</h2>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXX
					XXXXXXXXXXXXXXXXXXXXXXX</p>
			</div>
			<div id="side">
				<h2>Side Bar</h2>
				<ul>
					<li>Web Dev</li>
					<li>Web Dev</li>
					<li>Web Dev</li>
					<li>Web Dev</li>
				</ul>
			</div>
			<div id="footer">
				<h2>Page Footers</h2>
			</div>
		</div>
	</body>
</html>

九九九角银

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS设计彻底研究-读书笔记

第一章：选择器：选择器优先级：两个类别选择器时候，第一个大于第二个。行内样式>ID选择器>类别选择器>标记选择器第二章：“CSS禅意花园”作品主要在于欣赏其作品。第三章：深入理解盒子模型所有的页面中的元素都可以看成一个盒子。一.盒子的属性：简单来说，content就是画的本身，padding是画面与画框之间的空白，boder就是画框，margin就是画与画之...
复制链接

扫一扫