第四次网页前端学习笔记（css）

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一.css的属性

         是否重复: 1.repeat-x在x轴重复;2.repeat-y在y轴重复;3.no-repeat;不重复

【1】背景颜色

实例及运行效果：

#div1 {
				width: 500px;
				height: 400px;
				/* 背景颜色 */
				background-color: antiquewhite;

 

【2】背景图片：

实例及运行效果：

/* 背景图片 */
						background-image:url(./img/xiao.jpg) ;
<div id="div1">
				hello,我是小粉；
			</div>

 

【3】是否重复： 1.repeat-x在x轴重复;2.repeat-y在y轴重复;3.no-repeat;不重复

实例：

background-repeat: repeat-x;

 【4】字体颜色，文本修饰，对齐方式：

实例：

#div2{
						/* 字体颜色 */ 
						 color: #00FFFF;
						 /* 对齐方式 left  center right*/
						text-align: center;
						/* 文本修饰 */
						text-decoration: line-through overline underline;
			}

 4.1去除文本效果  去除超链接的下滑线

a{
				/*去除文本效果  去除超链接的下滑线*/
				text-decoration: none;
			}

【5】网页文本对齐方式：left向左对齐，right向右对齐，center居中对齐，justify两端对齐

#p1{
				/* 对齐方式：left，right，center，justify两端对齐*/
				text-align: justify;
			}
<p  id="p1">
			As for energy, solar power has to be a priority, in addition to carrying some of the nuclear batteries already 
				in use for small devices. With a monthly cycle of day and night on the moon, 
				we could build mirrors around the protrusions of the ring to reflect sunlight,
				shine it on to the permanent shadow of the crater, or illuminate it, or heat it, 
				or generate electricity. Carrying solar panels to the moon in large numbers is not practical.
			    The lunar soil is 45% silicon dioxide, which can be extracted to make solar panels.
			</p>

【6】display属性:none：隐藏元素；block：显示元素 

h2{
				/* display属性:none：隐藏元素；block：显示元素*/
				display: none;
			}

【7】浮动

实例及运行效果： 

#d1{
				width: 100px;
				height: 100px;
				background-color: #AA007F;
				/* 浮动，左浮动*/
				float:left;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: #ff55ff;
				/* 浮动，左浮动*/
				float:left;
			}
<!--浮动-->
			<div id="d1"></div>
			<div id="d2"></div>
			

未加浮动： 

 加上左浮动

二.css盒子模型 

 

 

 

 

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

实例及运行效果：

<style type="text/css">
		#d1 {
			width: 100px;
			height: 100px;
			background-color: #FAEBD7;
			/* 设置边框 */
			border: #FF55FF 5px outset;
			/* 设置内边距 */
			padding: 15px;
			padding-left: 20px;
			padding: 10px 20px;
			/* 设置外边距 */
			margin-top: 100px;
			
			
		}</style>
<div id="d1"></div>

 

三 .基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单

<style>
.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);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
[mycode3]
[mycode3 type="html"]
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

四.导航栏 

垂直 实例

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;
}

水平实例 

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;
}

 

五.网页布局

 

 

* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

更多细节内容戳下列网址了解：

下拉菜单：CSS 下拉菜单 | 菜鸟教程 (runoob.com)

导航栏：CSS 导航栏 | 菜鸟教程 (runoob.com)

网页布局设置：CSS 网页布局 | 菜鸟教程 (runoob.com)