网页前端培训笔记4

资料来源

视频 

菜鸟

css常用属性设置

背景

网页前端培训笔记4

网页前端培训笔记4

    文本

 网页前端培训笔记4

 网页前端培训笔记4

 网页前端培训笔记4

 网页前端培训笔记4

         对齐方式

 网页前端培训笔记4

      display属性

 网页前端培训笔记4

     浮动 

 网页前端培训笔记4

 代码1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>常用属性</title>
		<style type="text/css"">
		#div1 {
			/*width: 5eepx;*/
			height: 622px;
			/*背景颜色*/
			background-color: #EEE8AA;
			/*背景图片 */
			background-image: ur1(img/ bd.png);
			/*是否重复*/
			background-repeat : no-repeat;
			}
		#div2 {
			*字体颜色*/
			color: #a83BFF;
			/*对齐方式 left center right*/
			text-align: left;
			/*文本修饰*/
			text-decoration: line-through overline uncerline ;
			/*首行缩进*/
			text-indent : 2em;
			  }
			a {
			/*去除文本效果〔去除超链接的下划线)*/
			text-decoration: none;
			  }
			#p1 {
			/*对齐方式.left- center-right-- justify两端对齐*/
			text-align:justify;
			}
			h2 {
			/*display属性 none隐藏元素 block显示元素*/
			display : none;
			}
			/*浮动*/
			#d1 {
				width: 100px;
				height: 100px;
				background-color: red;
				/*浮动*/
				float:left;
				}
			#d2 {   
				width : 100px;
				height: 100px;
				background-color: black;
				/*浮动*/
				float:left;
			}
			
			</style>
	</head>
	<body>
	    <!-- 
		背景
			背呈颜色
			背景图片是否重复 
		-->
	    <!-- 
			<div id="div1">
			Hello
			</div> 
		-->
		<hr>
		<!-- 文本 -->
	    <div id="div2">
			Hello world
		</div>
		<!-- 去除文本修饰 -->
		<a href=“”>百度</a>
		<hr>
		<p id="p1">
		值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父
		元素的内边界上。然后值justify可以使文本的两端都对齐。在两端对齐
		中,文本行的左右两端都放在父元素的内边界上。然后,值 justify 可以使文本的两
		端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,值 
		justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放
		在父元素的内边界上。然后,值justify可以使文本的两端都对齐。在两端对齐文本
		中,文本行的左右两端都放在父元素的内边界上。然后,值justify 可以使文本的
		两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后
		</p>
		<hr>
		<!-- display -->
		<h2>hello world</h2>
		<!-- 浮动 -->
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

 代码结果

网页前端培训笔记4

 盒子模型

网页前端培训笔记4

 border

 网页前端培训笔记4

 网页前端培训笔记4

 网页前端培训笔记4

 padding

 网页前端培训笔记4

 网页前端培训笔记4

margin 

 ​​​​​​​网页前端培训笔记4

 网页前端培训笔记4

 网页前端培训笔记4

代码 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style type="text/css">
		#d1 {
			width: 100px;
			height: 100px;
			background-color: #DA7BD6;
			
			/*设置边框*/
			border:red 5px outset;
			/*设置内边距*/
			/*padding: 15px;*/
		   /*padding-left: 2epx;*/
		   padding: 10px 2epx;
		   margin-top:100px;
		   margin-left:100px;
		   }
		</style>
	</head>
	<body>
		
		<!-- 
		盒子模型
			padding:内边距
			border  边框
			margin  外边距
			
			border  边框
			   设置边框的颜色、样式、宽度
				border:颜色 样式 宽度
			例: border : red soild 1px
				单独设置边框的宽度、颜色、样式
			/* border-width
			   border-style
			   border-colo 
			   border-collapse
					设置是否将表格边框折叠为单一边框
					属性值:separate(默认单元格边框独立)
					collapse (单元格边框合并)*/r
					/* padding内边距
						设置元素所有内边距的宽度,或者设置各边上内边距的宽度。
					   margin外边距
						设置元素所有外边距的宽度,或者设置各边上外边距的宽度。
					单独设置各边的内边距: padding-top、padding-left, padding-bottom、 padding-right默认按照上右下左的顺序设定
					设置1个值:上右下左都一致
					设置2个值:上下一致,左右一致
					设置3个值:上右下,左和右一致 */
			-->
			
			<div id="d1"></div>
	</body>
</html>
 

 代码结果

网页前端培训笔记4

 

CSS 导航栏


导航栏

熟练使用导航栏,对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。


导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义:

实例

<ul>

         <li><a href="#home">主页</a></li>

        <li><a href="#news">新闻</a> </li>

         <li><a href="#contact">联系</a></li>

        <li><a href="#about">关于</a></li>

</ul>

现在,让我们从列表中删除边距和填充:

实例

ul {

         list-style-type:

        none; margin: 0;

        padding: 0;

}

例子解析:

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。


垂直导航栏

上面的代码,我们只需要 <a>元素的样式,建立一个垂直的导航栏:

实例

a {

        display:block;

         width:60px;

}

示例说明:

  • display:block - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

注意: 请务必指定 <a>元素在垂直导航栏的的宽度。如果省略宽度,IE6可能产生意想不到的效果。


垂直导航条实例

创建一个简单的垂直导航条实例,在鼠标移动到选项时,修改背景颜色:

实例

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

}

li a { display: block;

color: #000;

padding: 8px 16px;

text-decoration: none; }

/*

鼠标移动到选项上修改背景颜色

*/

li a:hover {

background-color: #555;

color: white;

}


激活/当前导航条实例

在点击了选项后,我们可以添加 "active" 类来标准哪个选项被选中:

实例

li a.active { background-color: #4CAF50; color: white; }


创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框,可以在每个 <li> 元素上添加border-bottom :

实例

ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }


全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条,右边是可滚动的内容。

实例

ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */ position: fixed; overflow: auto; /* 如果导航栏选项多,允许滚动 */ }

注意: 该实例可以在移动备上使用。


水平导航栏

有两种方法创建横向导航栏。使用内联(inline)浮动(float)的列表项。

这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法。

内联列表项

建立一个横向导航栏的方法之一是指定元素, 上述代码是标准的内联:

实例

li { display:inline; 

实例解析:

  • display:inline; -默认情况下,<li>元素是块元素。在这里,我们删除换行符之前和之后每个列表项,以显示一行。

浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等,浮动 <li>元素,并指定为 <a>元素的宽度:

实例

li { float:left; } a { display:block; width:60px; }

实例解析:

  • float:left - 使用浮动块元素的幻灯片彼此相邻
  • display:block - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

水平导航条实例

创建一个水平导航条,在鼠标移动到选项后修改背景颜色。

实例

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /*鼠标移动到选项上修改背景颜色 */ li a:hover { background-color: #111; }

激活/当前导航条实例

在点击了选项后,我们可以添加 "active" 类来标准哪个选项被选中:

实例

.active { background-color: #4CAF50; }

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;):

实例

<ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li style="float:right"><a class="active" href="#about">关于</a></li> </ul>

添加分割线

<li> 通过 border-right 样式来添加分割线:

实例

/* 除了最后一个选项(last-child) 其他的都添加分割线 */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; 

固定导航条

可以设置页面的导航条固定在头部或者底部:

固定在头部

ul { position: fixed; top: 0; width: 100%; }

固定在底部

ul { position: fixed; bottom: 0; width: 100%; }

注意: 该实例可以在移动设备上使用。


灰色水平导航条

灰色水平导航条

ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }

上一篇:前端小项目 --- 学成在线(HTML + CSS)


下一篇:CSS学习笔记(三)