CSS 学习笔记总结

CSS

布局方式

• 表格布局

• 元素定位

• 浮动布局（注意浮动的负效应）

• flex布局

• grid布局（感兴趣的可以看下菜鸟教程）

居中设置

元素水平居中

• 设置宽度后，margin设置为auto

• 父容器设置text-align为center

• 若为子元素，设置绝对定位后，设置left为50%和transform的x方向平移-50 %

• 设置为flexbox后设置主轴的对齐方式为center

元素垂直居中

• 设置为flexbox后设置交叉轴的对齐方式为center

• 若为子元素，设置绝对定位后，设置top为50%和transform的y方向平移-50%

• 设置display为table-cell，再设置vertical-align属性为middle

CSS常用单位

px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化。图像长度单位，如果px要换算成物理长度，需要指定精度：DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
\1. body选择器中声明Font-size=62.5%；
\2. 将你的原来的px数值除以10，然后换上em作为单位；
\3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
rem与em的区别：使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
响应式设计时推荐用rem

响应式设计

Bootstrap框架

总结

选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

/*id="para1"*/

#para1
{
    text-align:center;
    color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

/*所有拥有 center 类的 HTML 元素均为居中。*/
.center {text-align:center;}

/*所有的 p 元素使用 class="center" 让该元素的文本居中*/
p.center {text-align:center;}

/*多个 class 选择器可以使用空格分开*/
.center { text-align:center; } .color { color:#ff0000; }

CSS样式

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

内部样式表

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 

例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {    color:red;    text-align:left;    font-size:8pt; }

而内部样式表拥有针对 h3 选择器的两个属性：
h3 {    text-align:right;    font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red; text-align:right; font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

【CSS 属性】

【背景属性】
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。


【文本属性】
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写 
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距


【字体属性】
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。


【列表属性】
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。


【边框属性】
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	设置圆角的边框。


【轮廓属性】
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度


【边距属性】
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。


【填充属性】
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充


【尺寸属性】
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。


【定位属性】
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip	剪辑一个绝对定位的元素
cursor	显示光标移动到指定的类型
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移
overflow    设置当元素的内容溢出其区域时发生的事情
overflow-y  指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x  指定如何处理右边/左边边缘的内容溢出元素的内容区域
position	指定元素的定位类型
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
z-index	设置元素的堆叠顺序


【浮动属性】
clear	指定不允许元素周围有浮动元素
float	指定一个盒子（元素）是否可以浮动

CSS 盒模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

CSS box-model

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

选择器

1、分组选择器

在样式表中有很多具有相同样式的元素。

h1 {    color:green; } h2 {    color:green; } p {    color:green; }

/*为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：*/

h1,h2,p {    color:green; }

2、嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

p {    
    color:blue;    
    text-align:center; 
} 

.marked {    
    background-color:red; 
} 

.marked p {    
    color:white; 
} 

p.marked{    
    text-decoration:underline; 
}

CSS 定位(Position)

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

1、static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

div.static {    position: static;    border: 3px solid #73AD21; }

2、fixed 定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

p.pos_fixed {    position:fixed;    top:30px;    right:5px; }

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

3、relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left {    position:relative;    left:-20px; } h2.pos_right {    position:relative;    left:20px; }

移动相对定位元素，但它原本所占的空间不会改变。

h2.pos_top {    position:relative;    top:-50px; }

4、absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2 {    position:absolute;    left:100px;    top:150px; }

absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

5、sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

div.sticky {    position: -webkit-sticky; /* Safari */    position: sticky;    top: 0;    background-color: green;    border: 2px solid #4CAF50; }

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img {    position:absolute;    left:0px;    top:0px;    z-index:-1; }

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

CSS 布局 - 水平 & 垂直对齐

元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

div 元素是居中的

.center {    
    margin: auto;    
    width: 50%;   
    border: 3px solid green;  
    padding: 10px; 
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

文本居中对齐

.center {  
    text-align: center;  
    border: 3px solid green; 
}

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {    
    display: block;  
    margin: auto;   
    width: 40%;
}

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {    
    position: absolute;  
    right: 0px;  
    width: 300px;  
    border: 3px solid #73AD21;   
    padding: 10px; 
}

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是

）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

body {   
    margin: 0;  
    padding: 0; 
}  
.container {  
    position: relative;   
    width: 100%; 
}  
.right {   
    position: absolute;  
    right: 0px;    
    width: 300px;   
    background-color: #b0e0e6; 
}

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

.right {   
    float: right;    
    width: 300px;  
    border: 3px solid #73AD21;   
    padding: 10px; }

当像这样对齐元素时，对元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {   
    overflow: auto; 
}

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

body {   
    margin: 0;  
    padding: 0;
}  
.right { 
    float: right;   
    width: 300px;   
    background-color: #b0e0e6; 
}

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

.center {   
    padding: 70px 0;  
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {    
    padding: 70px 0;   
    border: 3px solid green;   
    text-align: center; 
}

垂直居中 - 使用 line-height

.center {   
    line-height: 200px;  
    height: 200px; 
    border: 3px solid green;  
    text-align: center; 
}  
/* 如果文本有多行，添加以下代码: */ 
.center p {   
    line-height: 1.5;  
    display: inline-block;    
    vertical-align: middle; 
}

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

.center {  
    height: 200px; 
    position: relative;  
    border: 3px solid green;  
}  

.center p {  
    margin: 0;   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%, -50%); 
}

学习小记

1、明确课程评价方案

2、HTML标记复习

3、Emmet 快速生成HTML标记复习

4、CSS基础

CSS选择器分类：标记、类、ID、派生

选择器优先级：ID>类>标记

5、页面布局基础

6、标准盒模型

7、语义化标记

语义化标记是一种在编写HTML代码时使用能够准确描述内容和结构的标签的实践。它的核心目的是使网页的内容结构清晰、易于理解，不仅仅是对人类阅读者友好，也便于搜索引擎和其他技术（如屏幕阅读器）的解析和索引。

为什么语义化标记重要

提高可访问性：语义化标记帮助辅助技术（如屏幕阅读器）更好地解读页面内容，从而提高网站的可访问性。
搜索引擎优化（SEO）：搜索引擎能够更好地理解标记的语义，有助于提高页面的搜索排名。
维护和可扩展性：语义清晰的代码更易于维护和更新。
跨设备兼容性：语义化标记有助于内容在不同设备和浏览器上保持一致的表现。

常见的语义化标签

<header>：定义页面或页面内某个区域的头部。
<nav>：定义导航链接的部分。
<main>：定义文档的主体内容。每个页面应该只有一个<main>元素。
<article>：定义独立的、自成一体的内容块，如博客帖子或新闻文章。
<section>：定义文档中的一个区段或节，通常包含一个标题。
<aside>：定义与页面内容稍微分离的内容，如侧边栏、广告栏等。
<footer>：定义页面或页面内某个区域的底部。
<h1>到<h6>：定义标题。<h1>表示最高级别的标题，<h6>表示最低级别。
<figure>和<figcaption>：分别用于包含媒体内容（如图像、图表、代码片段等）及其标题。
<mark>：用于高亮显示文本。
<time>：表示日期或时间。

语义化标记的最佳实践

使用合适的标签：根据内容的性质选择最合适的标签。例如，不要用<div>来代替<button>。
避免过度使用非语义标签：尽量减少<div>和<span>的使用，除非没有更合适的语义化标签。
结构清晰：保持HTML结构的逻辑性和清晰性，有助于读者和机器更好地理解内容。
标题层次分明：正确使用<h1>到<h6>标签来定义标题的层次结构。
使用HTML5结构元素：利用HTML5引入的结构元素（如<header>、<footer>、<article>等）来组织内容。

CSS练习

1、参照慕课首页3.2.1的演示视频完成咖啡屋界面的CSS练习，完成后截屏保存到实验报告；

预期

前期设计

前期设计实现

/* 1、文本颜色：#330000 */
/* 2、英文文字字体：Verdana */
/* 3、网页背景色：#ffffcc */
*{
  margin: 0; /*去除所有元素的外间距*/
}
body{
  color: #330000;
  font-family: Verdana;
  background-color: #ffffcc;
}

/* 4、头部和页脚区域背景色：#ccaa66 */
#header,#footer{
  background: #ccaa66;
}

/* 5、左边导航列背景色：#E8D882 */
.sidebar{
  background: #E8D882;
}

/* 6、右边主要内容列背景色：#f1e8b0*/
.mainbar{
  background: #f1e8b0;
}

/* 7、超链接去除下划线，页脚的邮箱超链接除外*/
a{
  text-decoration: none;
}
#footer a{
  text-decoration: underline;
}

效果：

排版改变为左右浮动

/* 5、左边导航列背景色：#E8D882 */
.sidebar{
  background: #E8D882;
  width:23%;
  float:left;
}

/* 6、右边主要内容列背景色：#f1e8b0*/
.mainbar{
  background: #f1e8b0;
  width:74%;
  float:right;
}

/* 7、超链接去除下划线，页脚的邮箱超链接除外*/
#footer{
  clear:both;  /*取消浮动带来的影响*/
}
a{
  text-decoration: none;
}
#footer a{
  text-decoration: underline;
}

效果：

左右等高实现：

/* 5、左边导航列背景色：#E8D882 */
#main{
  background: #E8D882;
  /*border:3px solid #000;*/
  overflow: hidden;
}
.sidebar{
  background: #E8D882;
  width:23%;
  float:left;
}

整个页面垂直和水平居中：

/* 4、头部和页脚区域背景色：#ccaa66 */
#container{
  width:70%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(-50%);
}
#header,#footer{
  background: #ccaa66;
}

效果：

标题和页脚文字居中，高度加大：

/* 4、头部和页脚区域背景色：#ccaa66 */
#container{
  width:70%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(-50%);
}
#header,#footer{
  background: #ccaa66;
}
#header{
  height:100px;
  text-align: center;
}
#header h1{
  position:relative;
  top:50%;
  transform:translateY(-50%);
}


/* 7、超链接去除下划线，页脚的邮箱超链接除外*/
#footer{
  clear:both;  /*取消浮动带来的影响*/
  height:70px;
  text-align: center;
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: center; /* 水平居中对齐子元素 */
}

效果：

调整图片大小和位置：

/* 6、右边主要内容列背景色：#f1e8b0*/
.mainbar{
  background: #f1e8b0;
  width:74%;
  float:right;
}

.mainbar img{
  width:30%;
  float:right;
  position: relative;
  left: -200px;
  top:-150px;
}

效果：

去掉ul的列表符：

/* 1、文本颜色：#330000 */
/* 2、英文文字字体：Verdana */
/* 3、网页背景色：#ffffcc */
*{
  margin: 0; /*去除所有元素的外间距*/
}
body{
  color: #330000;
  font-family: Verdana;
  background-color: #ffffcc;
}
.sidebar ul{
  list-style: none;
}

效果：

最后一步，添加边框：

/* 1、文本颜色：#330000 */
/* 2、英文文字字体：Verdana */
/* 3、网页背景色：#ffffcc */
*{
  margin: 0; /*去除所有元素的外间距*/
}
body{
  color: #330000;
  font-family: Verdana;
  background-color: #ffffcc;
}
.sidebar ul{
  list-style: none;
}

/* 4、头部和页脚区域背景色：#ccaa66 */
#container{
  width:70%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1px solid #000;
}
#header,#footer{
  background: #ccaa66;
}
#header{
  height:100px;
  text-align: center;
}
#header h1{ /*垂直居中要针对元素设置*/
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

/* 5、左边导航列背景色：#E8D882 */
#main{
  background: #E8D882;
  /*border:3px solid #000;*/
  overflow: hidden;
}
.sidebar{
  background: #E8D882;
  width:23%;
  float:left;
}

/* 6、右边主要内容列背景色：#f1e8b0*/
.mainbar{
  background: #f1e8b0;
  width:74%;
  float:right;
  border-left: 1px solid #000;
}

.mainbar img{
  width:30%;
  float:right;
  position: relative;
  left: -200px;
  top:-150px;
}

/* 7、超链接去除下划线，页脚的邮箱超链接除外*/
#footer{
  clear:both;  /*取消浮动带来的影响*/
  height:70px;
  text-align: center;
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: center; /* 水平居中对齐子元素 */
  border-top: 1px solid #000;
}

a{
  text-decoration: none;
}
#footer a{
  text-decoration: underline;
}

最终效果：

2、上一周登录界面HTML结构上加上CSS，按照蓝图完成登录界面，完成后截屏保存到实验报告；

预想：

实现效果：（真自己写还是得阉割不少）

实现代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="../css/LoginStyle.css">
</head>
<body>

<!-- 容器作用#container -->
<div class="container" id="div_login" >

  <div class="sms-login">
    <h2>手机短信登录</h2>

    <div class="form-group">
      <input type="tel" placeholder="请输入账号/手机号" required>
    </div>

    <div class="form-group">
      <input type="text" placeholder="请输入密码" required>
    </div>

    <div class="checkbox-group">
      <input type="checkbox" required>
      <label>我已阅读并同意相关条款和隐私政策</label>
    </div>
    
    <button class="btn" type="submit">注册登录</button>

  </div>

  <div class="divider"></div>
  <!-- 分隔线 -->

  <div class="qr-login">
    <h2>扫码登录</h2>
    <div class="description">使用 微信/支付宝 扫码登录</div>
    <div class="qr-code">
    <!-- 在实际项目中，这里的src应该指向生成的QR码的URL -->
    <img src="https://tc-md.oss-cn-hangzhou.aliyuncs.com/wujie/image-20240318181543023.png" alt="QR Code">
  </div>



</div>




<script>
  // Your JavaScript for form handling and QR code generation goes here
</script>
</body>
</html>

css

/*最外层div*/
#div_login {
  border: 3px solid #0cc60f ; /* 设置边框为2像素宽，颜色为黑色 */
  border-style:inset;    /*定义一个3D的嵌入边框。效果取决于边框的颜色值*/
  border-radius: 10px; /* 设置圆角的半径为10像素 */
  width: 60vw; /* 或根据实际情况调整 */
  height: 50vh; /*vh视图高度*/
  margin: auto;  /*水平居中*/
}

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-around; /* 两个子元素之间有间隔，也可以使用其他的对齐方式 */
  align-items: center; 
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 300px;

}



/*共用*/
.container h2 {
  text-align: center;
  margin-bottom: 20px;
}

/*分隔线*/
.divider {
  border-left: 1px solid #04fa1d; /* 分隔线颜色 */
  height: 100%; /* 或者一个具体的高度 */
  margin: 0 10px; /* 根据需要调整间隔 */
}

/*手机登录*/
.form-group {
  margin-bottom: 15px;
}
.checkbox-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.checkbox-group input {
  margin-right: 5px;
}
.checkbox-group label {
  margin: 0;
}


input[type="text"],
input[type="tel"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box; /* 加上这个属性，宽度才会正确计算 */
}


.btn {
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 5px;
  background-color: #14b629;
  color: white;
  cursor: pointer;
}
.btn:hover {
  background-color: #2aef62;
}


/*扫码登录*/
.qr-code {
  background-color: #fff;
  padding: 10px;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 8px;
}
/* 模拟QR码，实际项目中应使用真实的QR码图片 */
.qr-code img {
  width: 150px;
  height: 150px;
}

3、通过青蛙游戏（https://flexboxfroggy.com）来完成flexbox模型的属性学习，完成的最后一关截屏保存到实验报告中；

欢迎来到Flexbox Froggy，这是一个通过编写CSS代码来帮助Froggy和朋友的游戏!

justify-content 和 align-items 是两个用于控制 CSS Flexbox 布局的属性。

justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。
align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

这两个属性常用于网页设计中，以实现对齐和布局的灵活控制。

flex-start:项目在容器的左侧对齐。
flex-end:项目与容器的右侧对齐。
center:项目在容器的中心对齐。
space-between:项目之间以相等的间距显示。
space-around:以等距显示项目。
例如:justify-content: flex-end;会把青蛙移到右边。

\1.第一关

justify-content:flex-end;

右侧对齐就好

\2. 第二关

justify-content:center;

center:项目在容器的中心对齐

\3. 第三关

justify-content:space-around;

space-around:以等距显示项目。

\4. 第四关

justify-content:space-between;

space-between:项目之间以相等的间距显示。和第三关细节上略微区别，区别在边上留白与否。

\5. 第五关

align-items:flex-end;

flex-end:项目与容器的右侧对齐。

\6. 第六关

justify-content:center;
align-items:center;

justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。

align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

center:项目在容器的中心对齐。

7.第七关

justify-content:space-around;
align-items:flex-end;

justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。

align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

space-around:以等距显示项目。

flex-end:项目与容器的右侧对齐。

\8. 第八关

flex-direction:row-reverse;

flex-direction 是 CSS 中用于设置 Flexbox 容器主轴方向的属性。

row-reverse 是 CSS 中 flex-direction 属性的一个值，用于指定 Flexbox 容器中子项目的水平排列方向为从右到左，而不是默认的从左到右。

效果：

主轴方向：从右到左。
侧轴方向：与设置前相同（取决于 align-items 和 align-content 的值）。
子项目的排列顺序：从最后一个子项目开始，依次向前排列。

\9. 第九关

flex-direction:column;

column 的作用是：

将 Flexbox 容器的主轴方向设置为垂直方向（column）。
子项目从上到下排列，默认情况下，即从 Flexbox 容器的起始边（顶部）开始排列到结束边（底部）。

\10. 第十关

flex-direction:row-reverse;
justify-content:flex-end;

\11. 第十一关

flex-direction:column;
justify-content:flex-end;

\12. 第十二关

flex-direction:column-reverse;
justify-content:space-between;

\13. 第十三关

flex-direction:row-reverse;
align-items:flex-end;
justify-content:center;

\14. 第十四关

order: 1;

order: 1; 的作用是将具有该样式的元素在主轴方向上排在其他默认顺序之后

\15. 第十五关

order:-1;

提前排列，负数就行

\16. 第十六关

align-self:flex-end;

align-self 属性接受的值与 align-items 相同，包括：flex-start, flex-end, center, baseline 和 stretch。
当您在某个子项上设置 align-self: flex-end; 时，它将使该特定子项沿着容器的侧轴方向（垂直方向）的末端对齐，即靠近容器底部。

\17. 第十七关

order:1;
align-self:flex-end;

\18. 第十八关

flex-wrap:wrap;

flex-wrap 属性有以下几种取值：

nowrap：默认值。子项目不换行，所有子项目都尽可能地放在一行内，可能会导致溢出。
wrap：当子项目在主轴方向上无法放下时，子项目会换行放置，第一行在上方，第二行在下方，以此类推。
wrap-reverse：与 wrap 相似，但是换行后的行的排列顺序是反向的，即第一行在下方，第二行在上方，以此类推。

\19. 第十九关

flex-direction:column;
flex-wrap:wrap;

\20. 第二十关

flex-flow:column wrap;

和19关效果一样，只不过只能输入一句程序

\21. 第二十一关

align-content:flex-start;

flex-start：子项在交叉轴上的起始边对齐。

\22. 第二十二关

align-content:flex-end;

\23. 第二十三关

flex-direction:column-reverse;
align-content:center;

只有两句程序位置，一点点小复杂

先水平/垂直反转一下

再居中

\24. 第二十四关

flex-wrap:wrap-reverse;
flex-direction:column-reverse;
justify-content:center;
align-content:space-between;

或者

flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;

最复杂的一关

wrap-reverse 的作用如下：

当容器的主轴方向上没有足够的空间容纳所有子项目时，会进行换行。
与 wrap 相比，wrap-reverse 的区别在于换行后的子项目行的排列顺序是反向的，即第一行在最底部，第二行在第一行的上方，以此类推。
如果 Flexbox 容器的主轴方向是水平的，则换行后第一行在底部，依次向上排列；如果主轴方向是垂直的，则换行后第一行在最右侧，依次向左排列。

flex-direction:column-reverse;

按列排还是倒着的列

居中

space-between 值会使得子项在交叉轴上均匀分布，首行/列与容器的起始边对齐，末行/列与容器的结束边对齐，中间的行/列之间有相等的间距。（边上不留白）

4、在实验报告中总结CSS的语法特点，并且在记录实验中用到的CSS属性并给出作用解释。

看上面的总结

5、完成慕课首页3.4.5弹性布局练习；

原始效果（不区分视口）：

实现效果：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coffee Shop</title>
  <link rel="stylesheet" href="../css/CoffeeStyle.css">
</head>
<body>
  <!-- 容器作用#container -->
  <div id="container">


    <!-- 页头部分#header，放置logo、标题等信息 -->
    <div id="header">
      <h1>Jay17's Coffee Shop</h1>
    </div>

    <!-- 页面主题部分#main，放置页面主要信息，此处为左右结构 -->
    <div id="main">
      

      <!-- 右边内容信息.mainbar -->
      <!-- div.mainbar>p{coming soon}+(ul>li{item$}*10)+img[src="images/coffee.jpg"]+p{Road 23......} -->
      <div class="mainbar">
        <img src="../../../images/coffee.jpg" alt="">
        <p>coming soon</p>
        <ul>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
          <li>item5</li>
          <li>item6</li>
          <li>item7</li>
          <li>item8</li>
          <li>item9</li>
          <li>item10</li>
        </ul>
       
        <p>Road 23......</p>
      </div>



      <!-- 左边导航栏信息.sidebar -->
      <!-- div.sidebar>ul>(li>a{menu$})*5 -->
      <div class="sidebar">
        <ul>
          <li><a href="">menu1</a></li>
          <li><a href="">menu2</a></li>
          <li><a href="">menu3</a></li>
          <li><a href="">menu4</a></li>
          <li><a href="">menu5</a></li>
        </ul>
      </div>
    </div>

  
    <!-- 页面底部信息#footer，放置版权，管理员信息等 -->
    <!-- div#footer>p{copyright&copy;}+a[herf="mailto:JiangShiQi@proton.me"]{JiangShiQi@proton.me} -->
    <div id="footer">
      <p>copyright&copy;</p>
      <a href="" herf="mailto:JiangShiQi@proton.me">JiangShiQi@proton.me</a>
    </div>



  </div>



</body>
</html>

css

/* 1、文本颜色：#330000 */
/* 2、英文文字字体：Verdana */
/* 3、网页背景色：#ffffcc */
* {
  margin: 0; /*去除所有元素的外间距*/
  /*改变width计算为包含边框和内间距*/
  box-sizing: border-box;
}


/* 当设备宽度小于等于768px时应用的样式 */
@media (max-width: 768px) {
  body {
    color: #330000;
    font-family: Verdana;
    background-color: #ffffcc;
  
    /*设置em基准字号*/
    font-size: 14px;
  
    /*控制页面内容水平和垂直居中*/
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .sidebar ul {
    list-style: none;
  }


  /* 在此处编写768px以下的布局样式 */

  /* 4、头部和页脚区域背景色：#ccaa66 */
  #container {
    display: flex;
    flex-direction: column; /* 设置为垂直排列 */
    border: 1px solid #000;
  }

  /* 5、左边导航列背景色：#E8D882 */
  #main {
    background: #e8d882;
    /*border:3px solid #000;*/
  }

  .sidebar {
    background: #e8d882;
    border-left: 1px solid #000;
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 设置为垂直排列 */
    align-items: space-around;
    justify-content: space-around;
    padding: 10px;

  }

  /* 6、右边主要内容列背景色：#f1e8b0*/
  .mainbar {
    background: #f1e8b0;
    border-left: 1px solid #000;
    padding: 10px;

    display: flex; /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    justify-content: center; /* 水平居中对齐子元素 */
    flex-direction: column; /* 设置为垂直排列 */
  }

  .mainbar img {
    width: 50%;
  }

  #header,
  #footer {
    background: #ccaa66;
    border: 1px solid #000;
  }

  #header {
    height: 100px;
    text-align: center;
    display: flex; /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    justify-content: center; /* 水平居中对齐子元素 */
  }

  /* 7、超链接去除下划线，页脚的邮箱超链接除外*/
  #footer {
    clear: both; /*取消浮动带来的影响*/
    height: 70px;
    text-align: center;
    display: flex; /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    justify-content: center; /* 水平居中对齐子元素 */
  }

  a {
    text-decoration: none;
  }

  #footer a {
    text-decoration: underline;
  }
}



/* 当设备宽度大于768px时应用的样式 */
@media (min-width: 769px) {
  /* 在此处编写768px以上的布局样式 */

  body {
    color: #330000;
    font-family: Verdana;
    background-color: #ffffcc;
  
    /*设置em基准字号*/
    font-size: 14px;
  
    /*控制页面内容水平和垂直居中*/
    position: absolute;
    width: 100%;
    height: 100%;
  
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .sidebar ul {
    list-style: none;
  }

  /* 4、头部和页脚区域背景色：#ccaa66 */
  #container {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 1px solid #000;
  }
  #header,
  #footer {
    background: #ccaa66;
  }
  #header {
    height: 100px;
    text-align: center;
  }
  #header h1 {
    /*垂直居中要针对元素设置*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 5、左边导航列背景色：#E8D882 */
  #main {
    background: #e8d882;
    /*border:3px solid #000;*/
    overflow: hidden; /*防止浮动的对象脱离组织*/
  }
  .sidebar {
    background: #e8d882;
    width: 23%;
    float: left;
    padding: 10px;
  }

  /* 6、右边主要内容列背景色：#f1e8b0*/
  .mainbar {
    background: #f1e8b0;
    width: 74%;
    float: right;
    padding: 10px;
    border-left: 1px solid #000;
  }

  .mainbar img{
    width:50%;
    float:right;
    position: relative;
    left: -50px;
    top:20px;
  }

  /* 7、超链接去除下划线，页脚的邮箱超链接除外*/
  #footer {
    clear: both; /*取消浮动带来的影响*/
    height: 70px;
    text-align: center;

    border-top: 1px solid #000;
  }

  a {
    text-decoration: none;
  }
  #footer a {
    text-decoration: underline;
  }
}

6、根据实验结果，在实验报告中总结标准盒模型和flexbox模型的常用属性及对应的属性值。

标准盒模型

尺寸属性

width和height
- 设置元素内容区域的宽度和高度。不包括边框、内填充和边距。

内填充（Padding）

padding
- 设置元素内容区域周围的内填充空间。可以设置四个方向的内填充：padding-top, padding-right, padding-bottom, padding-left，或者一次性设置所有四个方向的内填充。

边框（Border）

border-width
- 设置边框的宽度。可以分别设置四个方向的边框宽度。
border-style
- 设置边框的样式，如solid（实线）、dashed（虚线）、dotted（点线）等。
border-color
- 设置边框的颜色。
border
- 是border-width、border-style、border-color的简写属性。可以一次性设置边框的宽度、样式和颜色。

外边距（Margin）

margin
- 设置元素与其他元素之间的外部空间。可以设置四个方向的外边距：margin-top, margin-right, margin-bottom, margin-left，或者一次性设置所有四个方向的外边距。

盒模型布局属性

box-sizing
- 用来调整元素的盒模型布局方式。其值可以是：
  - content-box：默认值。width 和 height 只包括内容的宽和高，不包括边框、内填充和外边距。
  - border-box：width 和 height 包括内容、边框和内填充的宽和高，但不包括外边距。

flexbox模型

容器属性（父元素）

display
- flex：定义一个Flex容器。
- inline-flex：定义一个行内Flex容器。
flex-direction
- row：项目沿主轴水平排列，起点在左端。
- row-reverse：项目沿主轴水平排列，起点在右端。
- column：项目沿主轴垂直排列，起点在上沿。
- column-reverse：项目沿主轴垂直排列，起点在下沿。
flex-wrap
- nowrap：所有项目都在一行上。
- wrap：项目会换行排列。
- wrap-reverse：项目换行排列，但是第一行在容器的底部。
flex-flow
- 是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
justify-content
- flex-start：项目靠左对齐。
- flex-end：项目靠右对齐。
- center：项目居中对齐。
- space-between：项目之间的间隔相等。
- space-around：项目周围的间隔相等。
- space-evenly：项目和边缘间隔相等。
align-items
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline：项目的第一行文字的基线对齐。
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：在交叉轴方向上，项目之间的间隔相等。
- space-around：在交叉轴方向上，项目周围的间隔相等。
- stretch：项目拉伸填满交叉轴方向上的空间。

项目属性（子元素）

order
- <integer>：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
- <number>：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink
- <number>：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis
- <length> | auto：定义了在分配多余空间之前，项目占据的主轴空间（main size）。auto意味着项目的本来大小。
flex
- 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。它可以设置单个属性，如flex: 1，这是一个通用值，表示项目将等分剩余空间。
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。值同align-items。

7、学习Bootstrap中文网站bootstrap v3的中文版文档；

https://v3.bootcss.com/

8、根据慕课首页3.4.3的页面样例完成自定主题的网站首页；

一个style.css和index.html

用了bootstrap的导航条、巨幕、缩略图

9、完成后在实验报告的小结部分总结

（1）Bootstrap响应式框架的特点；

响应式布局：Bootstrap使用基于百分比的栅格系统，允许开发者创建响应式布局，这意味着您的网站能够自动调整大小以适应不同的屏幕尺寸和设备，包括手机、平板电脑和桌面计算机。
移动设备优先：Bootstrap的设计理念是移动设备优先。这意味着它在设计时首先考虑的是小屏幕设备，然后才是大屏幕设备。这一点在其栅格系统、断点和容器等方面都有体现。
预定义的样式：Bootstrap提供了大量预定义的CSS样式和组件，包括按钮、导航条、模态框、卡片等，使得开发者可以快速构建界面而无需从头开始。
可定制性：尽管Bootstrap提供了大量的预设样式，但它也允许开发者通过定制Sass变量和Less变量来调整这些样式以满足特定的设计需求。
JavaScript插件：Bootstrap包含了多个基于jQuery的JavaScript插件，如轮播图、折叠组件和下拉菜单等，这些插件可以增强网站的交互性和功能性。
可访问性：Bootstrap遵循WAI-ARIA标准，提高了网站的可访问性，使其更加友好地支持屏幕阅读器和其他辅助技术。
兼容性：Bootstrap旨在确保在各种浏览器和操作系统上提供一致的视觉和功能体验，包括对老旧浏览器的支持。
社区和资源：作为一个广受欢迎的框架，Bootstrap有着庞大的用户和开发者社区，提供了丰富的学习资源、第三方插件和预制组件。