网页编程和设计 CSS3(二)

简介: 网页编程和设计 CSS3(二)

5.2background-image

设置元素的背景图像

元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
}

5.3background-repeat

该属性设置如何平铺背景图像

说明
repeat 默认值
repeat-x 只向水平方向平铺
repeat-y 只向垂直方向平铺
no-repeat 不平铺
.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
}

5.4background-size

该属性设置背景图像的大小

说明
length 设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
percentage 计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

5.5background-position

说明
left top 左上角
left center 左 中
left bottom 左 下
right top 右上角
right center 右 中
right bottom 右 下
center top 中 上
center center 中 中
center bottom 中 下
x% y% 第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100% 。如果只指定了一个值,其他值默认是50%。默认是0% 0%
xpos ypos 单位是像素
.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

六、文本属性

6.1text-align

指定元素文本的水平对齐方式

描述
left 文本居左排列,默认值
right 把文本排列到右边
center 把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

6.2text-decoration

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等

描述
underline 定义下划线
overline 定义上划线
line-through 定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

6.3text-transform

text-transform 属性控制文本的大小写

描述
captialize 定义每个单词开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

6.4text-indent

text-indent 属性规定文本块中首行文本的缩进

p{
    text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数,将第一行左缩进

七、表格属性

使用 CSS 可以使 HTML 表格更美观

7.1border

指定CSS表格边框,使用border属性

table, td { 
  border: 1px solid black; 
}

7.2border-collapse

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。实际上就是将双边框变为单边框。

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

7.3width、height

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

7.4text-align

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式,向左,右,或中心

td { text-align:right; }

7.5padding

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性。就是文字和上下左右边框之间的间隙大小。

td { padding:15px; }

7.6color、background-color

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

八、盒子模型

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

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:

外边距(margin),边框(border),内边距(padding),和实际内容(content)

  1. Margin(外边距) - 两个元素之间的距离,外边距是透明的(两个值:第一个值上下,第二个值左右)
  2. Border(边框) - 围绕在内边距和内容外的边框
  3. Padding(内边距) - 设置内容和边框之间的距离(两个值:第一个值上下,第二个值左右)
  4. Content(内容) - 盒子的内容,显示文本和图像

如果把盒子模型看作是一个生活中的快递,那么内容部分等同于你买的实物,内边距等同于快递盒子中的泡沫,边框等同于快递盒子,外边距等同于两个快递盒子之间的距离

div{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid red;
  margin: 10px;
  background: green;
}
<div></div>

九、弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display属性的值为 flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

温馨提示

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
<style>
  .flex-container {
    display: flex;  //设置容器为弹性布局
    width: 400px;
    height: 250px;
    background-color: lightgrey;
   }
  .flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
   }
</style>

 

温馨提示

默认弹性盒里内容横向摆放

9.1父元素上的属性

9.1.1display 属性

display:flex;开启弹性盒

display:flex;属性设置后子元素默认水平排列

9.1.2flex-direction属性

flex-direction 属性指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse
  1. row:横向从左到右排列(左对齐),默认的排列方式
  2. row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面
  3. column:纵向排列
  4. column-reverse:反转纵向排列,从后往前排,最后一项排在最上面
.flex-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

9.1.3justify-content 属性

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐

justify-content: flex-start | flex-end | center
  1. flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放
  2. flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放
  3. center 弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)
.flex-container {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

相关实践学习
利用大模型大规模分发技术,实现AIGC在线应用秒级弹性
通过ECI的数据缓存技术实现大模型的快速分发,将模型与应用解耦,敏捷部署,实现秒级在线弹性启动。
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
相关文章
|
5天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
16 1
|
9天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
10天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
11天前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
10 1
|
11天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
11天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
11天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
11天前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
|
11天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
11天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。