body {
    font-family: Arial, sans-serif;
    margin: 0;  /* 去掉默认的边距 */
    padding: 0;
	/* display: flex;  /*  使用Flexbox布局 */
     justify-content: center;  /* 水平居中 */
     align-items: center;  /* 垂直居中 */
     height: 100vh;  /* 设置高度为视口高度 */
     background-color: #f0f0f0;  /* 设置背景颜色 */
}
header, nav, section, footer {
    padding: 6px;
    text-align: center;
}
header {
    background-color: #4CAF50;
    color: white;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 10px;
}
section {
    background-color: #f4f4f4;
}
footer {
    background-color: #333; 
	                /* 
	                    background-color背景颜色,颜色的表示方法有三种：单词、rgb表示法、十六进制表示法,
	                    1.用英语单词来表述的颜色，都是简单颜色（如：red）。
					    
						2. 用rgb方法来表示
                        红色：background-color: rgb(255,0,0);rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。用逗号隔开。r、g、b的值，每个值的取值范围0~255，一共256个值。
                        常见的几个基础色，要知道是怎么表示的：
                       绿色background-color: rgb(0,255,0);蓝色background-color: rgb(0,0,255);黑色background-color: rgb(0,0,0);白色background-color: rgb(255,255,255);
                       颜色可以叠加，比如黄色就是红色和绿色的叠加 background-color: rgb(255,255,0);就是红、绿、蓝三种颜色的不同比例叠加background-color: rgb(111,222,123);
					   
					   3. 十六进制表示法
                       用#开头的值，都是16进制的。background-color: #ff0000;16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

                       十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
                      红色background-color: #f00;黑色background-color: #000;白色background-color: #fff;灰background-color: #333;深灰background-color: #222;浅灰background-color: #ccc;
                       
                 */
    color: white; /*字体颜色 */
}
.container {
    width: 100%;  /* 容器宽度为100% */
}

.responsive-image {
    width: 100%;  /* 图片宽度为容器的100% */
    height: auto;  /* 高度自动，根据宽度调整 */
    display: block;  /* 去掉下边距 */
}

#clock {

    font-size: 2em;

    text-align: center;

    margin-top:1%;
	/* 时间字体 大小等设置 */
}


.container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
	/* 容器设置 */
}

h2 {
    margin-bottom: 20px;
	
}
 
.form-group {
    margin-bottom: 15px;
	
}
 
 /* 输入框表格设置 */
label { /*表格的设置及位置排列 */
   /* display: block; /*块级元素 独占一行 */
   
         /* 1.1、块级元素特点
		    a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。

            b. block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占一行。

            c. block元素可以设置margin和padding属性。

            1.2、常用的块状元素有
                <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form> 
		 */		
   /* display: inline; /* 块容器 内联元素不会独占一行，多个内联元素可以排列在同一行 */
   
         /*  2.2、常用的内联元素有
             <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>（表示计算机源代码或者其他机器可以阅读的文本内容）

            常用的内联块状元素有：

             <img>、<input>

             图片是内联元素，同时是替换元素，替换元素是可以设置宽高的

            3、display:none
             将元素的显示设为无，即在网页中不占任何的位置。

              3.1、display:none和visible:hidden都能把网页上某个元素隐藏起来。

               3.2、display:none与visibility: hidden的区分

                 display:none ---不为被隐藏的元素保留其物理空间，即该元素在页面上彻底消失，通俗来说就是看不见也摸不到。即将元素的显示设为无，即在网页中不占任何的位置。

                 visibility: hidden--- 使元素在网页上不可见，但该元素在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。即将元素隐藏，但是在网页中该占的位置还是占着。

                4、总结
                 4.1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

                 4.2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；

                 行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

                 4.3、例如：<a> 标签元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。又比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。
*/

   
    display: inline-block; /*块容器 既有内联元素的特性（同一行显示），又有块级元素的特性（可以设置宽高和边距）*/
	
	margin-bottom: 5px;
	/* 4 个单独边的属性分别是：

        margin-top：用于设置元素的上外边距，即元素顶部与其上面元素的距离。

        margin-right：用于设置元素的右外边距，即元素右侧与其右侧元素的距离。

        margin-bottom：用于设置元素的下外边距，即元素底部与其下面元素的距离。

        margin-left：用于设置元素的左外边距，即元素左侧与其左侧元素的距离。

        这些单独的边属性可以分别控制元素的上、右、下、左四个方向的外边距，使得页面布局更加灵活。
     4 种类型：

        长度值：如像素（px）、厘米（cm）、毫米（mm）、百分比（%）等，用于指定具体的距离或比例。

        负值：可以使用负值来调整元素的位置，使其与其他元素重叠或产生间距。

        auto：表示由浏览器自动计算外边距，通常用于水平居中布局。这意味着元素一定要指定的宽度且制是块元素，而剩余空间会在左右边界之间平均分配，从而实现了水平居中的效果。

        inherit：表示继承父元素的 margin 值。


*/

}
/* 输入框设置 */
input[type="text"], input[type="email"], input[type="password"] {
    width: 10%; /* 输入框宽度 */
    padding: 8px; /* 输入框高度 */
    box-sizing: border-box; /* Ensures padding is included in width 确保宽度中包含衬垫*/
	
}


  /* 以下是按钮设置 */

 
 button {
    /* width: 100%; */
     /* padding: 10px;
    background-color: #333; /* 按钮框 灰色 */
    border: none;
    color: red;/* 按钮字体颜色 红色*/
    cursor: pointer;
	transition: background-color 0.3s ease;
}
  /* 以下 按钮设置 暂时不用 
  button {
    background-color: #ccc;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease; /*当鼠标悬停在按钮上时，按钮背景色由#ccc变为#333。transition属性用于添加过渡效果，使颜色变化更加平滑。
}
*/
 
 /* 按钮hover样式 */
button:hover {
	background-color: #ccc;  /* 浅灰色 on hover */
	/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  /* 在hover状态下为按钮添加阴影，可以使其看起来更加立体*/
    transform: scale(1.1); /* transform属性来改变按钮的大小。scale(1.1)表示按钮在hover状态下放大10%。 */

}



a {
    text-decoration: none;  /* 超链接去掉下划线 */
}