第四次网页前端培训笔记（Css常用属性）

一、Css常用属性

1.背景       

Css背景属性用于定义HTML元素的背景效果

background-color

设置元素的背景颜色

 background-image

设置元素的背景图像，默认情况下背景图像进行平铺，重复显示以覆盖整个元素实体。

background-repeat

  设置是否及如何重复背景图像

#div1{
				   width: 500px;
				   height: 400px;
				   /*背景颜色*/
				   background-coloR: aquamarine;
				   /*背景图片*/
				   background-image: url(img/peak-result.png);
				   /*是否重复*/
				   background-repeat: no-repeat;
			   }

 2.文本

color  颜色

text-align   文本对齐方式  left 、right 、center 、justify两端对齐

text-indent  首行缩进

text-decoration    去除文本效果

#div2{
				   /*字体颜色*/
				   color: aqua;
				   /*对齐方式  left center right*/
				   text-align: left;
				   /*首行缩进*/
				   text-indent: 2em;
				   /*文本修饰*/
				   text-decoration: line-through overline underline;
			   }
			   a{
				   /*去除文本效果*/
				   text-decoration: none;
			   }
			   #p1{
				   /*对齐方式 left right center justify两端对齐*/
				   text-align: justify;
			   }

display属性 

        none隐藏元素 block显示元素

 h2{
	display: none;
 }

浮动     

    float的属性 none 、left 、right

  #d1{
		 width: 100px;
		 height: 100px;
		 background-color: #7FFFD4;
		 /*浮动 左浮动*/
		 float: left;
	 }

 二、盒子属性

      border、padding、margin三个属性构成了盒子模型。

  1.border   边框

       设置所有的边框属性

1.  可同时设置边框的宽度，样式，颜色

  2.使用border-with、border-style、border-color单独设置3.

 3. border-style属性

none默认无值

4.border-collapse 

  设置是否将表格边框设置为单一边框

属性值：separate（默认单元格边框独立）、collapse（单元格边框合并）

table{
      border-collapse:collapse;
}

 5、padding 内边距

    设置元素所有内边距的宽度，或者设置各边上内边距的宽度
    单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
    默认按照上右下左的顺序设定

6、margin  外边距
     

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度
单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
   

 设置一个值:上右下左都一致
 设置两个值: 上下一致，左右一致
 设置三个值:上右下，左和右一致

#d1{
			width: 100px;
			height: 100px;
			background-color: #7FFFD4;
			/*设置边框*/
			border: #FFE4C4 5px outset;
			padding: 15px;
			padding-left: 30px;
			/*设置外边距*/
			margin-top: 100px;
			margin-left: 100px;
		}

三、导航栏  

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

• list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
• 移除浏览器的默认设置将边距和填充设置为0
• display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
• width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
• display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。
• float:left - 使用浮动块元素的幻灯片彼此相邻

/*先写出一个列表*/
<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;
}
/*只需要 <a>元素的样式，建立一个垂直的导航栏*/
a
{
    display:block;
    width:60px;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
/*在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中*/
li a.active {
    background-color: #4CAF50;
    color: white;
}


/*添加 border 属性来让导航栏有边框
添加text-align:center 样式来让链接居中
每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom
*/
ul {
    border: 1px solid #555;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
 

li {
    text-align: center;
    border-bottom: 1px solid #555;
}
 
li:last-child {
    border-bottom: none;
}
/*内联列表项*/
li
{
    display:inline;
}

 四、下拉菜单

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>

body默认边框8取消的方法

在项目的index.html文件的body标签上加上

style="margin: 0;"