第四周总结（css，bootstrap）

第四周总结（前端）

css边框
a.css圆角边框
border-radius 属性被用于创建圆角

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border: 2px solid #a1a1a1;padding: 10px 40px;background: #dddddd;width: 300px;border-radius: 25px;}</style>
</head><body><div>朱一龙</div>
</body></html>

b.css盒子阴影
box-shadow 属性被用来添加阴影

c.css边界图片
border-image 属性允许你指定一个图片作为边框

css渐变
可以让你在两个或多个指定的颜色之间显示平稳的过渡。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 200px;width: 200px;background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));}</style>
</head><body><div><h1>朱一龙</h1></div>
</body></html>

css2D转换
a.translate（）方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 200px;width: 200px;background-image: linear-gradient(to right, rgba(255, 0, 0), rgba(29, 231, 73));}.i {transform: translate(50px, 100px);}</style>
</head><body><div>朱一龙</div><div class="i">朱一龙</div>
</body></html>

其中translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

b.rotate（）方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 200px;width: 200px;background-image: linear-gradient(to right, rgba(255, 0, 0), rgba(29, 231, 73));}.i {transform: rotate(30deg);}</style>
</head><body><div>朱一龙</div><div class="i">朱一龙</div>
</body></html>

其中rotate值（30deg）元素顺时针旋转30度。

c.scale（）方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 100px;width: 100px;background-color: aquamarine;margin: 30px;border: 1px solid black;}.i {transform: scale(2, 3);}</style>
</head><body><div>朱一龙</div><div class="i">朱一龙</div>
</body></html>

其中scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

d.skew（）方法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 100px;width: 100px;background-color: chocolate;margin: 30px;border: 1px solid skyblue;}.i {transform: skew(30deg, 20deg);}</style>
</head><body><div>朱一龙</div><div class="i">朱一龙</div>
</body></html>

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

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

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

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex-container {display: flex;height: 300px;width: 300px;background-color: chocolate;margin: 30px;}.flex-item {width: 50px;height: 50px;background-image: linear-gradient(to right, red, green);margin: 10px;}</style>
</head><body><div class="flex-container"><div class="flex-item">朱一龙</div><div class="flex-item">朱一龙</div><div class="flex-item">朱一龙</div><div class="flex-item">朱一龙</div></div>
</body></html>

添加direction: rtl;弹性子盒子的排列方式也会改变

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

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

c.justify-content
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center | space-between | space-around

c.align-items
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

d.flex-wrap
flex-wrap 属性用于指定弹性盒子的子元素换行方式。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

e.align-content
align-content 属性用于修改 flex-wrap 属性的行为，设置各个行的对齐

align-content: flex-start | flex-end | center | space-between | space-around | stretch

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

bootstrap网格系统
行必须放置在 .container class 内。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

基本的网格结构

<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div>      </div><div class="row">...</div>
</div>
<div class="container">....

a.偏移列
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

b.嵌套列
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12。

c.列排序
改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

bootstrap排版

a.内联子标题
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本。

b.引导主体副本
为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本。

c.缩写
。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

.initialism可以显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

d.地址
使用 <address> 标签，您可以在网页上显示联系信息。使用 <br> 标签来为封闭的地址文本添加换行。

e.引用
可以在任意的 HTML 文本旁使用默认的 <blockquote>
添加一个 <small> 标签来标识引用的来源，可以使用 class .pull-right 向右对齐引用。

bootstrap列表组
向元素<ul>添加class.list-group
向元素<li>添加class.list-group-item

向列表组添加徽章（自动定位到右边）:
向<li>元素中添加<span class="badge">

向列表组添加链接：
用<a>代替<li>元素

bootstrap多媒体对象
在 <div> 元素上添加 .media 类来创建一个多媒体对象。

使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。

文本内容放在 class=“media-body” 的 div 中，图片左对齐则放在 class=“media-body” 之前，图片右对齐则放在 class=“media-body” 之后。

此外，你还可以使用 .media-heading 类来设置标题。

bootstrap面板
a.面板标题
使用 .panel-heading class 可以很简单地向面板添加标题容器。
使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

b.面板脚注
可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可

c.带语境色彩的面板
使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

d.带表格的面板
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

e.带列表组的面板
通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组

第四周总结（css，bootstrap）相关推荐

城市能源管理系统、实时监测、运行监测、负荷效应、预警管理、设备管理、设备入库、设备安装、设备检修、设备报废、设备查询、控制策略、系统集成、HTML/CSS/Bootstrap/jQuery/JS
源码类别: 后台模板文件大小: 3074 KB 城市能源管理系统响应式HTML模板前端技术: HTML/CSS/Bootstrap/jQuery/JS 适用范围:PC端,前端页面展示文件类型: ...
GET /static/css/bootstrap.min.js.map HTTP/1.1“ 404GET /static/css/bootstrap.min.css.map HTTP/1.1“404
目录 1.看大伙的办法大部分偶数让我进行以下操作 2.我的最后的解决办法 2.1 bootstrap.min.js.map 2.2 bootstrap.min.css.map 最后: GET /sta ...
DevTools 无法加载源映射：无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404，net::ERR_HTT
DevTools 无法加载源映射: 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTT ...
初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
html div阴影四周均匀css写法 html div 圆角幅度写法
html div阴影四周均匀css写法 html div 圆角幅度写法 border-radius: 10px
css – Bootstrap 4中的class =“mb-0”是什么意思？
<p class="mb-0">Lorem ipsum</p> 问:什么是mb-0? 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类.它们 ...
html/css/Bootstrap/Font Awesome
目录基础概念属性:每个标签有诸多属性,可以直接写在标签内部,用于指定内容样式/功能样式属性响应式设计Bootstrap 图标库Font Awesome 基础概念标签:使用标签指定功能,标签下 ...
DevTools 无法加载源映射：无法加载http://localhost:8081/statics/css/bootstrap.min.css.map 的内容:HTTP 错误: 状态代码 404，
DevTools 无法加载源映射: 无法加载http://localhost:8081/statics/css/bootstrap.min.css.map 的内容:HTTP 错误: 状态代码 404, ...
django运行后浏览器警告：DevTools 无法加载 SourceMap：无法加载 http://127.0.0.1:800/skins/css/bootstrap.min.css.map:
使用uwsgi启动Django项目后,出现了报错:DevTools 无法加载 SourceMap: 无法加载 http://127.0.0.1:800/skins/css/bootstrap.min. ...

第四周总结（css，bootstrap）

第四周总结（前端）

第四周总结（css，bootstrap）相关推荐

最新文章

热门文章