VScode
呵呵
H5C3
讲过了
label标签
meta 元语言
charset 字符集
新增语义化标签
-
header
— 头部标签 -
nav
— 导航标签 -
article
— 内容标签 -
section
— 块级标签 -
aside
— 侧边栏标签 -
footer
— 尾部标签
新增音频标签
<body>
<!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
Input’s type
<form action="">
邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br />
手机号码<input type="tel" name="" id=""> <input type="submit" value="提交"><br /><br />
网址<input type="url" name="" id=""> <input type="submit" value="提交"><br /><br />
数字<input type="number" name="" id=""> <input type="submit" value="提交"><br /><br />
搜索框<input type="search" name="" id=""> <input type="submit" value="提交"><br /><br />
拖动滑块<input type="range" name="" id=""> <input type="submit" value="提交"><br /><br />
时间<input type="time" name="" id=""> <input type="submit" value="提交"><br /><br />
日期<input type="date" name="" id=""> <input type="submit" value="提交"><br /><br />
日期时间<input type="datetime" name="" id=""> <input type="submit" value="提交"><br /><br />
几年几月<input type="month" name="" id=""> <input type="submit" value="提交"><br /><br />
几年几周<input type="week" name="" id=""> <input type="submit" value="提交"><br /><br />
</form>
新增特性
required 要求文本框内容不能为空
autofocus 自动聚焦属性,页面加载完成,光标自动定位到这里
autocomplete = on 记录以前的输入记录,然后进行快速输入。需要在表单内加上name属性
multiple 多选文件提交
结构性伪类选择器—nth-child(n)与nth-last-child(n)
无论计算式如何,n都从零开始计算
计算结果小于等于0,则无效,大于被使用对象的最大值,无效。
nth-last-child(n)从最后一个开始,倒着数数。
nth-child和nth-of-type 的区别
-
代码演示
<style> div :nth-child(1) { background-color: lightblue; } div :nth-child(2) { background-color: lightpink; } div span:nth-of-type(2) { background-color: lightseagreen; } div span:nth-of-type(3) { background-color: #fff; } </style>
-
区别
nth-child
选择父元素里面的第几个子元素,不管是第几个类型nt-of-type
选择指定类型的元素
伪类选择器
结构伪类选择器
属性选择器
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准[编程接口)
阴影
可以同时写两个,中间逗号隔开
如果px只写了两个,那么代表x和y的数据,省略了模糊程度和宽度。
e.g. box-shadow: 0 1px #5670a4 inset, 0 0 10px 5px rgba(0, 0, 0, .1);
这里写了内外两个阴影,内阴影x=0,y=1,模糊和宽度都为0,相当于没有左右下,只有上边框,宽度1px;外阴影严格套在边框上没有偏移,模糊10,宽度5,透明度.3。
第三课 2D转换
1.transform
不脱标,不影响其他盒子。
transition 过渡效果。实现基础动画效果,鼠标放上去开始动。
1.1translate
transform:translate(x,y)或者分开写
transform:translataX(n);
transform:translataY(n);
如果写成transform:translataX(%50);那么移动的是盒子自身的宽度或者高度决定。
定位配合转换让盒子在盒子里垂直水平都居中。
translate(-50%,-50%);
对行内元素translate 无效。
1.2rotate
rotate(45deg);//顺时针旋转45度
案例:字体图标的小三角
实现方法:正方形边框,隐藏一半,留下来的一半就是三角形,然后旋转一定角度,实现效果。
如果要做动画,鼠标放上之后实现,那么添加
div:hover {
transform:rotate(225deg);
transition:all 0.6s ;
}
转换旋转中心点
transform-origin:(left bottm);
缩放scale
transform:scale(x,y);
x and y 没有单位。直接是倍数。
如果只有一个数字那就是xy同时变换同样倍数。
scale优势:
1不影响其他盒子
2可以设置旋转中心点。
可以用于放大缩小图片
2D旋转会改变坐标轴,所以transform综合写法要先写位移再写旋转等其他属性。
动画
1定义2调用
1用keyframes定义动画类似定义类选择器
@keyframes move { //move为动画名称
0% {//开始状态
transform:translateX(0px);
}
100% {//结束状态
transform:translateX(1000px);
}
}
2调用
2.1animation-name:move;
2.2animation-duration:15s;
opacity:0.5???value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
第四课 3D
第四课 3D
3D位移和3D旋转
主要知识点
1、3D位移:translate3d(x,y,z)
2、3D旋转:rotate3d(x,y,z)
3、透视:perspective
4、3D呈现:transform-style
1、3D移动translate3d(x,y,z)
比2D多一个移动方向Z,
transform:translateX(npx);沿着x轴移动n个px;
transform:translateX(100px) translateY(100px);
综合写法。
transform:translate3d(100px,100px,100px);
3d要小写xyz不可省略。
2透视
透视写在被观察元素的父盒子上
透视越小,出来的效果越大。透视距离单位:PX, 模拟眼睛与屏幕的距离。
2、3D旋转:rotate3d(x,y,z)
左手准则判断旋转方式,是从上面向里转还是从下面向里转
4、3D呈现:transform-style
transform-style:flat 默认子元素不开启3d旋转效果。
transform-style:preserve-3d;子元素开启3d立体空间 效果。 写给父级,作用在子集上。
第五课 移动布局
视口
浏览器显示内容的屏幕区域,分为布局视口视觉视口和理想视口。
用理想视口
写入
<meta name="viewport" content = "width = device-width, user-scalable =0 initial-scale = 1.0,maximum-scale = 1.0,minium-scale = 1.0">
物理像素比
PC端口 1PX 就等于 物理上的1PX
DPR dpr 设备像素比 device pixel ratio
DP device pixel
DIP device indepent pixel 设备独立像素 即 逻辑像素
PPI pixels per inch 每英寸像素取值 即 像素密度
移动端存在物理像素比的关系
IPH8 物理像素比为2
Apple提出了单位pt(点),Android提出了单位dp(图形的单位)和sp(字体的单位)。
background-size 背景拉伸
7.13 响应式页面
content-box;传统盒子模型
border-box;c3盒子模型
-webkit-tap-heightlight-color:transprant;
去掉ios默认按钮输入框外观:
-webkit-appearance:none;
禁用长按弹出菜单:
img ,a {
-webkit-touch-callout:none;
}
移动端常见布局
1 移动端单独制作
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
2 响应式
- 媒体查询
- bootstarp
流式布局:
流式布局,就是百分比布局,也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
出现行内块的时候,一般会出现
vertical-aline:middle; 图片和文字居中对齐
CSS初始化
使用normalize.css
二倍精灵图
二倍图
分辨率100×100
直接给盒子赋值 width:50px; height:50px;
然后给background-size:50px 50px;
不是给图,是给放图片的盒子。
放在fw里面等比例缩放然后在放新测量数据
css3 盒子模型
原始盒子模型:
width=content ,真实宽度为: width+border+padding
boxsizing:border-box :
width=content+padding+border 真实宽度为: width
background-size 背景缩放
单位可以跟百分比,比例相对父盒子来说
可以放盒子
cover 高度和宽度等比例拉伸,要把整个盒子给盖住,图片变形不变形无所谓
contain 高度和宽度等比例拉伸,当高度或者宽度完全铺满就不再进行拉伸
特殊样式清除
1点击高亮背景清除
-webkit-tap-hightlight-color:transparent;
2移动端浏览器在ios上给按钮和输入添加自定义输入框样式
-webkit-appearance:none;
3禁用长按页面时弹出右键菜单
img,a { -webkit-touch-callout:none;}
0. 移 动 端 开 发 选 择 综 述
1 单独开发移动端页面(主流)
1.1 流式布局
1.2 flex伸缩布局
1.3 less+rem+媒体查询布局
1.4 混合布局
2 响应式页面兼容移动端(其次)
2.1 媒体查询
2.2 Bootstrap
A. 流 式 布 局/ 百分比布局
百分比布局 非固定像素布局 把盒子宽度设置为百分比 根据屏幕宽度来进行伸缩。
设定最大最小值 max-width min-width
A.1.移 动 首 页 项 目
各种居中看这里
1.父亲给了高度孩子浮动的时候就不会有清除浮动的问题了。
2.图片水平居中,给图片放一个盒子,然后盒子写 text-align:center;
3.图片垂直居中,盒子写 line-height;
4.图片如果没有和文字对齐,图片文字对齐:vertical-align:middle;
5.外边距合并:给父盒子添加overflow:hidden; 子盒添加margin-top会把父盒子带下来。
6.二倍精灵图缩放做法:“先在fireworks里面把图片等比例缩放为原来一半,然后 再去测量坐标,最后写background-size缩放整个精灵图的一半。”
7.加了固定定位的盒子要给宽度,可以给百分比。
8.子盒子写100%,就是和父盒子一样宽,如果父盒子有宽度那就和父盒子一样宽。
9.border-ridus可以按每个角来写 1px 2px 3px 4px
10.如果一个盒子里面全部都是图片然后上边出现了一个空白,像是margin,那是因为图片与文字基线对齐模式有问题,把图片的vertical-align改为:vertical-align:top; / vertical-align:middle; 即可取出空白缝隙。
11.a是行内元素,写了宽度要给转换成块级元素,但是写了浮动就不用了。
12.缩放图片,宽高写给装图片的盒子,不是给图片?待验证
13.nth-child(n):括号中的 n从零开始计算,但是nth-child是从1开始算,遇到0自动停止。所以可以用(-n+3)这样的结构实现选择出前三个子元素。
14.
B.F l e x 布 局 / 弹性 / 伸缩 / 自适应
flex布局 与 传统布局
1.传统布局:兼容性好,布局繁琐(浮动占不占位置,要不要清除浮动等),局限性高不能很好适配移动端
2.flex弹性布局:伸缩,自适应, 操作简单布局简单,pc端支持较差ie11或更低版本不支持。
转换为flex布局,只需要在父盒子css中写上
display:flex;
没有浮动自然不需要清除浮动。
flex:1 平均分配在一行上。
任何容器都可以指定为flex布局
设置为flex布局后float clear vertical-align 失效
flex直接垂直居中了,vertical-align失效。
采用flex布局的元素称为flex容器,
子元素称为flex item flex项目。
父元素添加display:flex;
1.flex父项添加属性:
flex-direction:设置主轴方向
默认主轴x方向,默认侧轴y
写谁,谁就是主轴,元素跟着主轴来排列
row 从左到右
row-reverse 从右到左
column 以y为主轴 从上到下
column-reverse
justify-content:
定义项目在 主轴 上排列方式
justify v.证明…正确(或正当、有理); 对…作出解释; 为…辩解(或辩护); 调整 使全行排满; 使每行排齐; 使齐行;
flex-start:从头部开始
flex-end:正序排列,但是贴着尾部开始
center:沿着主轴居中对齐 ,以前需要套父盒子再父盒子maigin0auto
如果是x做主轴那就是水平居中,如果是y那就是垂直居中
space-around:平分剩余空间 around 围绕; 环绕;
space-between:首尾两个盒子先贴边,剩下的盒子再平分剩余空间
flex-wrap:
项目超出容器范围,则自动调整项目宽度,以适应容器。
flex布局中默认不换行 nowrap。
flex-wrap:wrap;
align-items
align:校准使成一线,排整齐,使一致。
item:项目 子项目
设置 侧轴 上子元素排列方式(单行)
flex-start flex-end
center 居中显示
stretch 拉伸 拉到和父盒子一样宽度或者高度
属性有:上对齐下对齐居中和拉伸
align-content
多行(有换行情况才是多行)有用,单行没用。
属性有:上对齐、下对齐、居中、拉伸、平均分配剩余空间等。
align-item适用于单行。
stretch:默认值,拉伸
center
flex-start
flex-end
space-between 前后第一个盒子紧贴边框然后剩下的平分空间
space-around 平均分
initial 默认
inherit 继承
flex-flow
属性是 flex-direction 和 flex-wrap 属性的复合属性
设置主轴和是否换行
2.flex子项属性
flex属性定义子项分配剩余空间,用flex来表示占多少份。
.item {
flex:<number>;
} //写在子盒子的属性里面
number可以是数字,1,2等。也可以是百分比如:20%。
align-self 控制子项自己在侧轴的排列方式
允许单项和其他项目不同。
order定义排列顺,数值越小,越是靠前
已经有定位的条件下,maigin:0 auto 无效
加了绝对定位直接有大小,不需要在写display:block;
::before 是行内元素没有高度。
需要转换为display:block;
B.1 小 案 例
1.加定位之后,想把盒子挪回去:
transform:translateX(-50%);
2.去除 a标签中的 文字的下划线
a {
text-decoration:none;
}
3.css3 盒子模型,高度算上了边框在内,所以内部文字想要垂直居中,line-height的值要写为:总高度减去上下边框高度的值。
5.多个相似结构但是名字不同的板块统一写样式:class ^=“local-nav-icon”
其中,类名相同部分为local-nav-icon ,不同部分为后面的 icon1,icon2.
6.父盒子给了border-ridus,但是子盒子没给,导致圆角失败,可以给父盒子添加overflow:hidden;来解决。
7.文字阴影 text-shadow :1px 1px rgba(0,0,0,.2);
8.背景渐变色:背景渐变色
1线性2非线性
语法:background:linear-gradient(起始方向,颜色1,颜色2,。。。);
e.g. : background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue);
9.flex可以写百分比,相对父亲的百分比。
10.text-indent 首行缩进 赋值-999 再给盒子overflow:hidden SEO 优化
C. R E M 适 配 布 局 与 L E S S
新问题:
以往方案,字体不能随着界面大小变化。
流式布局和flex布局主要针对宽度,高度如何设置?
怎样唐屏幕发生变化时候元素的高度和宽度等比例缩放?
1.rem是一个单位
root em 是一个相对单位 类似于em em是父元素字体大小,rem是相对于html元素的文字大小
2.媒体查询
Media Query css3新语法 根据不同尺寸屏幕设置不同样式。
写法:
@media mediatype and|not|only (media feature) {
css-code;
}
e.g.
@media screen and (max-width:800px){
//小于等于 800px 的可以用
body {
background-color:pink;
}
}
小技巧:F12调试模式下拖动窗口会在右上角显示当前分辨率
3.引入资源
针对不同媒体,引入不同资源 ,调用不同css样式,称为引入资源
媒体查询最好方法从小到大来写。
语法规范:
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:320px)">
font-size 可以写0.5rem。
href是Hypertext Reference的缩写。意思是指定超链接目标的URL
4.less
css弊端:
1.需要书写大量看似没有逻辑代码,冗余度太高
2.不方便维护扩展,不利于复用。
3.不能计算
4.非前端工程师,缺少经验,难以写出组织子良好易于维护的css代码
less是什么?
一门css扩展语言,也成为css预处理器。css有多种预处理器。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
新建less文件,扩展名.less。安装node.js npm-install
1.less变量
1.1 定义粉色变量
@color:pink;//@变量名:值;
body {
background-color:@color;
}
1.2 定义字体大小
@font14:14px;
body {
background-color:@color;
font-size:@font14;
}
不能数字开头,不能包含特殊字符,区分大小写.
less包含一套自定义语法和一个解析器,less编译之后能生成css文件,引入html
使用vscode插件Easy Less
easy less插件,把less文件编译为css文件
2.嵌套
less中 ,直接写嵌套。
.header {
width:100px;
a {
color:red;
}
}
a是header的后代,直接把a写在header里面。
.nav {
.logo {
}
}
3.伪类选择器
&指定样式为本身的样式,不是后代的样式。
如果不加&符号,less默认写的内容是加空格的,这样就不是子代的特性。
.nav {
&:hover {
color:blue;
}
}
生成的css为
.nav:hover{
color:blue;
}
如果有伪类、交集选择器、伪元素选择器,内层选择器前面要加&。
4.less运算
less中,任何数字颜色变量都可以参与运算,less提供四则运算
@border:5px +5;
div {
width:200px - 50;
height:200px * 2;
border:@border solid red;
}
运算符前后要加空格
如果只有一个数字有单位,则以这个单位为准。
如果有两个单位,以前面的单位为准。
补充:交集并集选择器
1、交集选择器
交集选择器就是在两个标签相交的部分,也就是交集进行修改格式。
对于交集选择器,可以与id和class共同使用。
格式:
标签1标签2
{ 属性;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>交集选择器与并集选择器</title>
<style>
p.p1 {
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p class="p1">我是段落</p>
<p class="p2">我是段落</p>
</body>
</html>
2、并集选择器
与交集选择器不同,并集选择器是对两个标签同时进行修改样式。
并集选择器同样可以与id和class同时使用。
格式:
标签1,标签2
{ 属性;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>交集选择器与并集选择器</title>
<style>
h2,p{
color: red;
}
</style>
</head>
<body>
<h2>我是标题</h2>
<p>我是段落</p>
</body>
</html>
5.REM适配方案
不同页面像素不同,宽度不同,一份设计稿需要对应多个设备,那就需要自适应。不可能一个个手工修改宽度,所以需要REM统一单位,rem = font-size。统一单位之后,想要页面自动适应设备,需要媒体查询,查询完了根据不同页面大小修改对应font-size,font-size = 页面宽度 / 份数,修改了font-size就相当于修改了rem,字体大小就可以随着变动。查询完毕不同页面适配不同大小,手工一个个计算太麻烦,所以需要LESS自动计算。
html {
font-size:50px; //初始化定义html页面的font-size
}
@no:15; //no = number 表示页面被平均分的份数
@media screen and (min-width:320px) {
html {
font-size:320px / @no ;
}
}
动态标签设置font-size大小:
例如,设计稿750px,把设计稿子划分为15等分,每一份作为html字体大小,这是50px,在适配320屏幕时候,字体大小为320/15份, 就是21.33px。这样实现了文字大小的自动转换。
C.1 小 案 例(方 案 一)
如果在网页端打开,在less最上面写
html {
font-size:50px;
}
在首页的index.less中写内容的时候,把common.less导入
@import “common.css”;
导入,把一个样式文件引入另一个文件中。
盒子里有图片,图片要做成链接,选取的结构是:
.ad {
display:flex; //父盒子设定flex伸缩布局
a { //a 是子盒子,做出链接效果,只有一个a ,所以flex1
flex:1; //这样a盒子完全填充父ad盒子
img {
width:100%;
//img盒子100%填充父盒子a 实现img与ad盒子适配
}
}
}
C.2 小 案 例 (方 案 二)
使用淘宝前端团队的flexiable.js
.js称为库文件,引入方法:
<script src = "js/flexible.js"></script>//写在index.html中
使用flexible.js只需要提前设置好html文字大小
VScode插件,px转rem插件 cssrem ,不用less 自动转。
这个插件默认html文字大小 cssroot 16px,但是默认字体大小不一定,需要根据设计图来走,所以修改方法:
点击vscode下方齿轮打开设置,搜索cssroot,在右侧修改。改完之后重启vscode。即可在书写px单位时候下方出现自动转换的数值。
D.响应式布局 与 栅 格 系 统
响应式布局:根据不同屏幕大小更改布局,以前的方案只是改变比例大小,不改变布局。
Responsive Web Design = RWD,Adaptive Web Design = AWD
超小屏幕(手机)<768 :设置宽度100%
小屏幕(平板)768~992 :设置宽度750px
中等屏幕(桌面显示器)992~1200 :设置宽度970px
宽屏 1200+:宽度设置1170px
查询媒体,手动改变页面盒子排列。
相应式开发原理:媒体查询,针对不同宽度设备改变布局和样式的设置,适配不同屏幕。
BOOTSTRAP
bootstrap来自推特,响应式布局,移动设备优先的web项目。
暂时只考虑样式库。
控制权在框架本身所以要按照框架所规定的规范进行开发
使用四步曲:
1.创建文件夹结构
2.创建html骨架结构
3.引入相关文件
4.写入内容
Bootstrap 提供了两种container,响应式布局需要一个父容器,在不同屏幕下改变容器大小。
1.container
响应式布局容器固定宽度 ,区分大中小屏幕,自动修改宽度
2.container-fluid
流式布局 百分百宽度,占据全部视口,适合单独开发移动端。
如何让网页中的图片随网页窗口的大小自动缩放
width:100%;
height:100%;
如果是背景图的话
background-size:cover
background-size: cover;
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
格栅系统
基本用法
给页面分成很多个格栅,然后不同板块对于数量的格栅,页面大小变化的时候,框架修改格栅宽高,从而修改内容宽高,实现自适应。
行(row)要放进container布局容器里面,
实现列的平均划分,要给列添加类前缀,
大于12的列会被当做一个整体另起一横行进行显示,
可以为同一个列指定多个设备类名,以划分不同份数,
每一列默认有左右15px的panding。
bootstrap 盒子排列在一行上,是通过添加浮动实现的。
占比是通过赋值给width百分比实现。
例子:
<div class ="container">
<div class = "row">
四个盒子排列在一行,大屏幕中,每个占3,共计12.
<div class = "col-lg-3">1</div>
<div class = "col-lg-3">2</div>
<div class = "col-lg-3">3</div>
<div class = "col-lg-3">4</div>
</div>
<div class = "row">
四个盒子排列在一行,中等屏幕中,每个占4,共计12.
<div class = "col-md-4">1</div>
<div class = "col-md-4">2</div>
可以复写
<div class = "col-md-4 col-sm-6">3</div>
</div>
</div>
列嵌套
不同列之间如果给margin值,一行将排列不下,可以大盒子套小盒子,大盒子给padding(相对于小盒子),从而实现大盒子之间的空隙。
列内再嵌套列:
<div class = "container">
<div class = "row">
<div class = "col-md-4"> <!--第 1 列-->
<div class = "row"> <!--列 1 内嵌套的新的行 -->
<div class = "col-md-6">
第一列里面嵌套的第1小列
</div>
<div class = "col-md-6">
第一列里面嵌套的第2小列
</div>
</div>
</div>
<div class = "col-md-4">2</div> <!--第 2 列-->
<div class = "col-md-4">3</div> <!--第 3 列-->
</div>
</div>
在列内嵌套列如果直接写,会有一个padding 所以在多加一个row这样就没有padding。
列偏移
.col-md-offset -n 向右偏移n份
相当于给右侧盒子添加外边距margin,系统自动计算。
列排序
push 和pull 都是以浏览器右侧为准
响应式工具
加快对设备友好的页面开发工作,利用媒体查询,并使用这个工具可以方便针对不同页面展示或者隐藏内容。
隐藏
.hidden-屏幕缩写,遇到那个屏幕就隐藏这个盒子,如:
.hidden-xs 超小屏幕下隐藏
注意,对应屏幕隐藏,超过和不足都不隐藏。
展示
.visible-屏幕大小;
D.1 小 项 目
技术选型
方案:响应式页面开发方案
技术:Bootstrap框架
设计图:1280px设计尺寸
需求分析
大屏与中屏一个样,直接布局一样的
小屏幕布局发生变化,为小屏幕改变布局
超小屏幕单独布局
策略:先布局md以上pc端布局。然后根据需求修改小和超小屏幕布局。
设计过程
1.修改屏幕尺寸
默认尺寸1170
修改为需求尺寸1280,采用媒体查询
@media screen and (min-width:1280) {
.container {
width:1280px;
}
}
2.设定标签 (h5新增标签)
设定为,左侧header 中间 artical 右侧aside
图片需要随着列宽自动变化,如果父盒子可以自动变化,那就给img添加属性width:100%;
清除a样式
清除li样式
清除搜索框边框样式
添加Bootstrap提供的字体图标
在参考文档中找到字体图标,复制名称,添加给目标标签类名。
Bootstrap清除浮动
框架已经写好,直接在类名中写 class = “clearfix”;
选择一种技术作为主要技术,其他技术作为辅助,混合技术开发。