第四次网页前端培训笔记

B站视频网址：（本次仅涉及P11-P12）​​​​​​【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com)

 下拉菜单： https://www.runoob.com/css/css-dropdowns.html

导航栏： https://www.runoob.com/css/css-navbar.html

网页布局设置： https://www.runoob.com/css/css-website-layout.html

一、CSS常用属性 

1.1 背景颜色、背景图片、是否重复

<style type="text/css">
			#div1{
				width:600px;
				height: 400px;
				/*背景颜色*/
				background-color: #EEE8AA;
				background-image: url(img/bd.png);
				/*是否重复*/
				background-repeat: no-repeat;
			}
		</style>

<!--
			背景
				背景颜色
				背景图片
				是否重复
		-->
		<div id="div1">
			Hello
		</div>

运行效果

1.2 字体属性、去除超链接下划线 

        #div2{
				/*字体颜色*/
				color:#0000FF;
				/*  对齐方式 left center right*/
				text-align: left;
				/*文本修饰 中划线 上划线 下划线*/
				text-decoration: line-through overline underline;
				/*首行缩进*/
				text-indent: 2em;
			}
			a{
				/*去除文本效果（去除超链接的下划线）*/
				text-decoration: none;
			}

        <div id="div2">
			Hello World
		</div>
		<a href="https://www.baidu.com/">百度</a>

 运行效果

 1.3 对齐方式

			#p1{
				/*对齐方式 left center right justify两端对齐*/
				text-align: justify;
			}

		<p id="p1">
			值justify可以使文本两端对齐。在两端对齐的文本行中，文本的左右两端都放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等（对最后一行无效）。
			对齐方式 left左 center right justify两端对齐 对齐方式 left center中 right justify两端对齐 对齐方式 left center right右 justify两端对齐
			值justify可以使文本两端对齐。在两端对齐的文本行中，文本的左右两端都放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等（对最后一行无效）。
		</p>

运行效果：

 1.4 display属性

/*display属性 none隐藏属性 block显示属性*/

1.5 浮动

			/* 浮动· */
			#d1{
				width: 100px;
				height:100px;
				background-color: #DA70D6;
				/*浮动：左浮动·*/
				float: left;
			}
			#d2{
				width: 100px;
				height:100px;
				background-color: indianred;
				/*浮动：左浮动·*/
				float: left;
			}

		<!--浮动-->
		<div id="d1"></div>
		<div id="d2"></div>

运行效果

 二、盒子模型

	<!--
			盒子模型
				padding 内边距
				border 边框
				margin 外边框
				
				border边框
					设置边框的颜色、样式、宽度
						border:颜色 样式 宽度
							例：border:red soild 1px
						单独设置边框的宽度、颜色、样式
							border-width
							border-color
							border-style
				border-collapse
					设置是否将表格边框折叠为单一边框
					属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）
				padding内边框
					设置元素所有内边距的宽度，或者设置各边上内边框的宽度
					单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
					默认按照上右下左的顺序设定
				margin外边距
					设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
					
				设置一个值：上右下左都一致
				设置两个值：上下一致、左右一致
				设置三个值：上右下，左和右一致
		-->

			#d1{
				width: 100px;
				height:100px;
				background-color: #DA70D6;
				/*浮动：左浮动·*/
				float: left;
				/*设置边框*/
				border: #008000 5px outset;
				/* 设置内边距 */
				/* padding: 15px; */
				/* padding-left: 20px; */
				padding: 10px 20px;
				/* 设置外边距 */
				/* margin-top: 100px;
				margin-left: 100px; */
				margin: auto auto;
			}

 运行效果