哈尔滨营销型网站制作,百度自动点击器下载,惠州市+网站开发公司,郑州信盈达嵌入式培训CSS
布局方式
• 表格布局
• 元素定位
• 浮动布局#xff08;注意浮动的负效应#xff09;
• flex布局
• grid布局#xff08;感兴趣的可以看下菜鸟教程#xff09; 居中设置
元素水平居中
• 设置宽度后#xff0c;margin设置为auto
• 父容器设置text-alig…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系统默认是96dpiApple系统默认是72dpi。
em(相对长度单位相对于当前对象内文本的字体尺寸)是一个相对长度单位最初是指字母M的宽度故名em。现指的是字符宽度的倍数用法类似百分比如0.8em, 1.2em,2em等。通常1em16px。 \1. body选择器中声明Font-size62.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 选择器以 “#” 来定义。
/*idpara1*/#para1
{text-align:center;color:red;
}class 选择器
class 选择器用于描述一组元素的样式class 选择器有别于id选择器class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中类选择器以一个点 . 号显示
/*所有拥有 center 类的 HTML 元素均为居中。*/
.center {text-align:center;}/*所有的 p 元素使用 classcenter 让该元素的文本居中*/
p.center {text-align:center;}/*多个 class 选择器可以使用空格分开*/
.center { text-align:center; } .color { color:#ff0000; }CSS样式
插入样式表的方法有三种:
外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)
外部样式表
head link relstylesheet typetext/css hrefmystyle.css /head内部样式表
head style hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/back40.gif);} /style /head内联样式
p stylecolor: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) 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 属性的五个值
staticrelativefixedabsolutesticky
元素可以使用的顶部底部左侧和右侧属性定位。然而这些属性无法工作除非是先设定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 langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleLogin/title
link relstylesheet href../css/LoginStyle.css
/head
body!-- 容器作用#container --
div classcontainer iddiv_login div classsms-loginh2手机短信登录/h2div classform-groupinput typetel placeholder请输入账号/手机号 required/divdiv classform-groupinput typetext placeholder请输入密码 required/divdiv classcheckbox-groupinput typecheckbox requiredlabel我已阅读并同意相关条款和隐私政策/label/divbutton classbtn typesubmit注册登录/button/divdiv classdivider/div!-- 分隔线 --div classqr-loginh2扫码登录/h2div classdescription使用 微信/支付宝 扫码登录/divdiv classqr-code!-- 在实际项目中这里的src应该指向生成的QR码的URL --img srchttps://tc-md.oss-cn-hangzhou.aliyuncs.com/wujie/image-20240318181543023.png altQR Code/div/divscript// 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[typetext],
input[typetel] {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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCoffee Shop/titlelink relstylesheet href../css/CoffeeStyle.css
/head
body!-- 容器作用#container --div idcontainer!-- 页头部分#header放置logo、标题等信息 --div idheaderh1Jay17s Coffee Shop/h1/div!-- 页面主题部分#main放置页面主要信息此处为左右结构 --div idmain!-- 右边内容信息.mainbar --!-- div.mainbarp{coming soon}(ulli{item$}*10)img[srcimages/coffee.jpg]p{Road 23......} --div classmainbarimg src../../../images/coffee.jpg altpcoming soon/pulliitem1/liliitem2/liliitem3/liliitem4/liliitem5/liliitem6/liliitem7/liliitem8/liliitem9/liliitem10/li/ulpRoad 23....../p/div!-- 左边导航栏信息.sidebar --!-- div.sidebarul(lia{menu$})*5 --div classsidebarullia hrefmenu1/a/lilia hrefmenu2/a/lilia hrefmenu3/a/lilia hrefmenu4/a/lilia hrefmenu5/a/li/ul/div/div!-- 页面底部信息#footer放置版权管理员信息等 --!-- div#footerp{copyrightcopy;}a[herfmailto:JiangShiQiproton.me]{JiangShiQiproton.me} --div idfooterpcopyrightcopy;/pa href herfmailto:JiangShiQiproton.meJiangShiQiproton.me/a/div/div/body
/htmlcss
/* 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-boxwidth 和 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、完成后在实验报告的小结部分总结
1Bootstrap响应式框架的特点 响应式布局Bootstrap使用基于百分比的栅格系统允许开发者创建响应式布局这意味着您的网站能够自动调整大小以适应不同的屏幕尺寸和设备包括手机、平板电脑和桌面计算机。 移动设备优先Bootstrap的设计理念是移动设备优先。这意味着它在设计时首先考虑的是小屏幕设备然后才是大屏幕设备。这一点在其栅格系统、断点和容器等方面都有体现。 预定义的样式Bootstrap提供了大量预定义的CSS样式和组件包括按钮、导航条、模态框、卡片等使得开发者可以快速构建界面而无需从头开始。 可定制性尽管Bootstrap提供了大量的预设样式但它也允许开发者通过定制Sass变量和Less变量来调整这些样式以满足特定的设计需求。 JavaScript插件Bootstrap包含了多个基于jQuery的JavaScript插件如轮播图、折叠组件和下拉菜单等这些插件可以增强网站的交互性和功能性。 可访问性Bootstrap遵循WAI-ARIA标准提高了网站的可访问性使其更加友好地支持屏幕阅读器和其他辅助技术。 兼容性Bootstrap旨在确保在各种浏览器和操作系统上提供一致的视觉和功能体验包括对老旧浏览器的支持。 社区和资源作为一个广受欢迎的框架Bootstrap有着庞大的用户和开发者社区提供了丰富的学习资源、第三方插件和预制组件。
2框架开发和自己开发CSS的区别分析下两种开发模式的优劣。
【使用Bootstrap框架】
优点
快速开发Bootstrap提供了大量预定义的样式和组件使得开发者可以快速搭建页面布局和界面加速开发过程。响应式设计Bootstrap内置的栅格系统简化了响应式设计的实现确保网站能在不同设备上良好展示。一致性使用Bootstrap可以确保跨浏览器和设备的一致性减少了兼容性测试的工作量。社区支持Bootstrap拥有庞大的社区提供大量的教程、问题解答和第三方插件便于学习和解决开发中的问题。易于定制通过Sass或Less变量可以轻松定制Bootstrap的样式以符合品牌或设计要求。
缺点
样式统一使用Bootstrap开发的网站可能会与其他使用Bootstrap的网站外观相似缺乏独特性。过重的文件完整的Bootstrap包含大量的CSS和JavaScript可能会增加页面的加载时间尤其是在未使用其全部功能的情况下。学习曲线虽然Bootstrap简化了开发但初学者需要投入时间学习其类名、组件和插件的使用。
【自行开发CSS】
优点
定制性完全控制样式可以创建独特且完全符合需求的设计。轻量级只需编写所需的CSS避免了额外的加载时间使得页面更快地加载。深入学习自行编写CSS可以加深对CSS和设计原则的理解提高前端开发技能。
缺点
开发时间长从零开始创建布局和样式通常需要更多的时间和努力。响应式设计挑战开发者需要自行实现响应式设计这可能会增加开发的复杂性和工作量。兼容性问题确保样式在所有浏览器和设备上一致性可能需要大量的测试和调试。维护难度随着项目的扩展自定义CSS的维护可能会变得更加困难。
