文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

好程序员HTML5培训教程-html和css的使用方法以及样式

2023-06-05 02:25

关注

好程序员HTML5培训教程-html和css的使用方法以及样式,很好的基础知识系列,内容都是干货知识点,适合收藏下来!

布局步骤
第一步: 清除默认样式
第二步: 划分模块
第三步: 设置模块的大小以及位置
第四步: 划分下一级模块
html和css
引入网页头像
<link rel="shortcut icon" href="img/...ico">
css样式表的引入方式

css样式表的引入方式
1、外链式

<link href="" rel="stylesheet">

嵌入式

<style></style>

行内样式

<div style="width:200px;height:200pxs;"></div>

  1. @import url('')

文件命名以及变量命名

命名规范
1、严格区分大小写
2、可以采用字母数字下划线$,数字不开头
3、命名语义化
4、可以采用驼峰命名法
清除默认样式

清楚边距

*{

    margin: ;

    padding: ;

    list-style: none;

}

a标签清楚下划线和颜色

a{

    color: black;

    text-decoration: none;

}

css中颜色的表示方式

css中颜色的表示方式:
1.预定义的颜色【关键字颜色】 red pink blue yellow
2.#6位数的色值 #00-00-00 红绿蓝
3.rgb(红,绿,蓝) :rgb([0-255],[0-255],[0-255])
4.rgba(red,green,blue,透明度) :rgba([0-255],[0-255],[0-255],[0-1])

0-1: 0全透明,1不透明

html中的标签和属性
html:
标签:
按照语法分类:

单标签:只有开始标签

     meta  img a

双标签:有开始标签和结束标签

    <html></html>

属性的语法

语法:

  属性名 = "属性值"

  属性名 = "属性值1 属性值2"

注意:

标签名和属性名之间要有空格

多个属性之间要有空格

多个属性值之间要有空格

开始标签  标签名后有空格


按照标签在页面中的呈现效果分类:

行内元素

    行内元素定义:在一行内显示,只能设置左右间距,不可以设置上下间距。

    举例:span del i em b strong a(title="鼠标移入时显示的文字";target=" "(新窗口打开的位置          _self:在本窗口打开;_blank:在新窗口打开) ...

块元素

    块元素定义:可以设置宽高,独占一行。

    举例:div 标签 列表标签 段落标签 ...

行内块元素

    行内块元素定义:可以设置宽高,在一行显示。

    举例:img 【title="鼠标移入时显示的文字" 】 表单控件

元素的转换

块元素:    display:block;

行内块元素:display:inline-block;

行内元素:  display:inline;

元素的级别

块元素 > 行内块元素 > 行内元素

元素嵌套规范

同一级别可以相互嵌套

级别高的元素可以嵌套级别低的元素

段落标签只能嵌套行内元素

a标签不可以嵌套a标签;p不能嵌套p

盒子模型及其问题

四部构成:

margin  外间距 盒子与盒子之间的距离

border  边框

padding 内填充(内间距) 边框与内容之间的距离。

content 内容

margin-top margin-right margin-bottom margin-left

margin: 50px;  上 右 下 左

margin: 50px 100px;  上下    左右

    margin:0 auto;  auto自动

margin: 50px 100px 150px; 上 左右 下

margin: 50px 100px 150px 200px;  上 右 下 左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width:上边框的宽度


padding:设置方法同margin

content: ;

width :  数值  百分比 auto

height:  数值  百分比 auto


盒子模型的问题:

大部分元素的marginpadding默认为,但有一部分的marginpadding不为,例如body  标签(h2-h7)(ul ol  il等列表标签)  段落标签

想领的两个块元素的margin会重合,值会取最大值

margin可以为[负数]   ,padding不可以设置[负数]。

行内元素margin只有左右,没有上下

如果(1)发生嵌套关系的元素,(2)父元素没有上边框,(3)上padding ,(4)父元素与子元素之间没有别的内容,此时子元素margin-top就会作用到父元素身上 

margin-top的解决方式:

用父元素的padding-top代替子元素的margin-top;

给父元素添加overflow:hidden;

宽高的设置和计算

height:auto / 百分比 / px; 
width:auto / 百分比 / px; 
height:auto; 参照与父元素
width:auto;参照与内容
box-sizing:border-box; 将边框算入盒子内;

一个元素实际的宽高
实际宽度 = border-left + padding-left + width +paddint-right + border-right;
实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;
浮动

作用:让块元素横排排列
样式: float:left;从左往右排列

float:right;从右往左排列

原理:让元素脱离文档流,让元素从文档层浮动到浮动层。
引发的问题:父元素不设置高度,子元素都浮动,浮动的子元素撑不开父元素。(浮动的元素脱离文档流)

*解决方式一:给父元素添加  overflow:hidden;(超出部分隐藏)

*解决方式二:在父元素内容最后添加拥有清除浮动属性的元素。

            clearright/left/both ;  别的浮动对它的影响清除掉

        例:

            .box:after{

                content: "";

                display:block;

                width: 0;

                height: 0;

                clear:both;

            }

*解决方式三:父元素能设置高度的尽量设置高度

浮动之后的块元素参照内容:属性值 auto
定位

定位的元素脱离文档层,到达定位层
定位的元素会多出5个样式:

top right bottom left z-index:999

上    右    下    左    层级(层级越高,离用户越近)【只能在有定位属性的元素上才能用】

层级:
z-index:整数;
定位的几种方式:
1.相对定位:

相对于自身来定位,在文档层中保留原来的位置

用法:

     position:relative;

绝对定位:

相对于最近的 定位的 祖先元素 来定位,完全脱离文档流(其他顶替其位置)

用法:

     position:absolute;

    +方向值

固定定位:

相对于浏览器的四条边,完全脱离文档流

用法:

    position:fixed;

top与bottom同时定义,那个样式会作用到元素身上的判断关系:

   top的权重比bottom的权重大

   left的权重比right的权重大

元素作用时:

如果是

    position:relative;

    left:;

    margin:;

    先作用margin,在作用relative;

如果是

    position:absolute;

    left:;

    margin:;

    先作用absolute,在作用margin;

定位元素的居中方式:
方法一:

水平居中:

    position:absolute;

    left:50%;

    margin-left:-自身长度的一半;

垂直居中:

    position:absolute;

    top:50%;

    margin-top:-自身长度的一半;

绝对居中:

    position:absolute;

    left:50%;

    top:50%;

    margin-left:-自身长度的一半;

    margin-top:-自身长度的一半;

方法二:

水平居中:

    position:absolute;

    left:;

    right

2D和3D

2D和3D属性:
1.平移样式

transform:translate(x,y);  向上为负, 向下为正

    transform:translateX(100px);

transformrotate(180deg)   ;  (1turn)转一圈

平移  transform:translate()   例子:translatexytranslateX()

旋转  transform:rotate()   例子rotate(180deg)顺时针   -180deg  逆时针

    transformrotate()空格translate();

       transform-origin:px px;变换的中心点;

        left center

缩放  transform:scale()     例子:scale(2)  放大为原来的2倍  scale(0.n)缩小为原                                        来的0.n   scalemn)  xmyn

斜切  transform:skew()      例子:skew(45peg)  左拉伸45°  skew(45pegm

     

  1. 过渡transition
         transition:all 0.5s;

全部 时间

过渡的属性样式: transition-property: , ;

可以为:属性的全部样式

过度的总时间: transition-duration:;
5.过渡的时间函数: transition-timing-function:;

    linear(匀速)   ease(开头结尾慢,中间快)

    cubic-bezier(1,0.07,0.54,0.21) 贝塞尔曲线

延迟 transition-delay:;

3d效果:和2d的一样transition,transform;

prespective:给父元素加prespective(灭点的值)

prespective-origin:x y;灭点的位置   调整观察的角度(大多数情况不设置)

transform:ratate3d(0-1的值,0-1的值,0-1的值,45deg)

    transform:ratateY(45deg)

transform:translate3d(0-1,0-1,px)


父元素:transform-style:preserve-3d;
动画

动画规则:

@keyframes 动画名(随便给){

    (动画规则)

    from{}

    to{}

}

@keyframes 动画名(随便给){

    (动画规则)

    0%{}

    50%{}

    100%{}

}

@keyframes animation1{

    from{

       background-color:red;

    }

    to{

       background-color:blue;

    }

}


挂载动画:将动画加到元素身上

.元素{

    animation:animation1 时间  步数 时间函数 延迟时间 次数 ;

}

挂载多个动画:

.元素{

    animation:animation1 时间,animation2 时间,animation1 时间;

     其他动画的相同的可以附件通过animation属性;

}

animation的样式
动画名:animation-name
时间: animation-duration 
步数:animation-steps:8;
时间函数:animation-timing-function
延迟: animation-delay
动画次数: animation-iteration-count:infinite(无限次)/2;
指定下一次动画是否逆向:animation-direction:alternate(逆向)/ normal(常规);
最后的状态:animation-fill-mode:backwards(默认(保持一开始的状态))/forwards(保持当前的状态);
状态即指定动画是否运动: animation-play-state: running(运行)/paused(静止);

元素分类

按照在页面中的呈现效果:
1.行内元素:在一行内显示 ,不可以设置宽高 :(存放文字)

span a b i strong del

行内块元素:在一行内显示,可以设置宽高:(有缝隙 不常用)

img 表单控件

块元素 :可以设置宽高,独占一行

div 标签(h2-h7) 列表标签(ul-li ol-li dl>dt+dd 段落标签 (p pre))

元素嵌套规范:

同一级别可以相互嵌套

级别高的可以嵌套级别低的元素

p标签只能嵌套行内元素

a链接不能相互嵌套

元素的转换:

块元素:display:block;

行内块元素:display:inline-block;

行内元素:display:inline

背景图片以及浏览器内核

背景图

先设大小,在引background;

background: url('路径') no-repeat left bottom/contain;

          //图片位置    禁止重复  位置(top bottom left right)

  1. 路径:background-image:url(“”),url(“”);加载多张背景图
  2. 背景图大小: background-size:100px auto,100px auto; 会重复
  3. 背景的图重复:

    background-repeat:no-repeat,repeat;(无重复)

    background-repeat:repeat-x(x方向重复)

  background-repeat:repeat-y(y方向重复)

  1. 背景图的位置:

background-position:x y;(数值 方位值(top/bottom left/rightcenter(可以省略)) )

  1. 背景开始渲染的位置: background-origin: ;

  padding-box;(默认)从padding位置开始渲染

  border-box;从边框的位置开始渲染

content-box;从内容的位置开始渲染

  1. 图片结束渲染的位置:background-clip: ;

padding-box;(默认)从padding位置结束渲染

border-box;从边框的位置结束渲染

content-box;从内容的位置结束渲染

  1. 使得背景图加载到浏览器中
         background-attachment: fixed;

可以简写:

background:空格隔开;

  1. 背景图渐变
         background: linear-gradiend(top,颜色1,颜色2,颜色n)

//渐变开始的方向(默认top) 类似25deg(25度)

浏览器内核//背景色渐变

 

    例子:background: linear-gradient(top,#3bbcff,#47eaff);   

 

    例子:background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

    例子:background: -moz-linear-gradient(top,#3bbcff,#47eaff);

    例子:background: -o-linear-gradient(top,#3bbcff,#47eaff);

    例子:background: -ms-linear-gradient(top,#3bbcff,#47eaff);


文件的读取方法路径

绝对路径:从盘符开始的一条完整路径
相对路径:两个文件的位置关系
边框的相关属性【圆角,边框形状】

border-radius:边框的半径 设置圆角 n%或者num像素
border-style:dotted solid double dashed;

  上边框是点状

  右边框是实线

  下边框是双线

  左边框是虚线

透明度

透明性的选择:(整个容器都变)
opacity:;0-1之间的值;
字体

font-family =“ 字体” //字体样式可以被继承
鼠标移入样式

span标签
cursor:pointer; 鼠标样式:手型
阴影

box-shadow:x轴偏移量 y轴偏移量 阴影的模糊程度 阴影的大小(和本身一样大小) 阴影的颜色;
引入字符图标

引入字符图标:
行内元素 随意 
span class=“iconfont 图标类名”
可调节样式: 同文字
文档流

文档流:

标准情况下 ,页面元素从左往右 从上往下 依次排列

flex布局(规范的设计稿)-弹性布局

容器(父元素)的属性:【display:flex;】

*flex-direction: 决定主轴方向。

    row 主轴在水平方向,从左向右(默认)。

    row-reverse 主轴在水平方向,从右向左

    column 主轴在垂直方向,从上到下

    column-reverse  主轴在垂直方向,从下到上

*flex-wrap: 决定项目换行

    wrap: 项目换行

    nowrap:  项目不换行(默认值)

    wrap-reverse: 项目换行且反转

*justify-content: 决定项目在主轴的对齐方式

    flex-start;主轴的起点

    flex-end;主轴的终点

    center;主轴的中心

    space-between;两端对齐

    space-around;项目两侧距离相等

*align-items:项目在交叉轴上的对齐方式(适用于一根轴线与多跟轴线)

    flex-start:交叉轴的起点

    flex-end:交叉轴的终点

    Center:交叉轴的中心

    baseline: 基线对齐(文本底部)

*align-content:定义项目在交叉轴上的对齐方式(仅适用于多根轴线)

    flex-start;交叉轴的起点

    flex-end;交叉轴的终点

    center;交叉轴的中心

    space-between;两端对齐

    space-around;两侧距离相等

子元素(项目)的属性:

*order:定义项目的排列顺序,数值越小,越靠前,默认值为(可以取负值)。

*flex-grow:定义项目的放大比例。默认值为,即使存在剩余空间,也不放大。

*flex-shrik:定义项目的缩小比例,默认值为1,空间不足,项目缩小;值为时,空间不足,项目也不缩小.

*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;

*align-self:定义单个项目在交叉轴的对齐方式.

    flex-start:交叉轴的起点

    flex-end:交叉轴的终点

    Center:交叉轴的中心

滚动条

overflow-x:auto;超出部分在x轴的表现形式。

auto:自动;(如果超出,就自动以滚动条的形式显示)

去滚动条: 加在具有overflow属性的元素身上

::-webkit-scrollbar{

    height:;

}

overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 描述 测试
visible 不裁剪内容,可能会显示在内容框之外。 测试
hidden 裁剪内容 - 不提供滚动机制。 测试
scroll 裁剪内容 - 提供滚动机制。 测试
auto 如果溢出框,则应该提供滚动机制。 测试
no-display 如果内容不适合内容框,则删除整个框。 测试
no-content 如果内容不适合内容框,则隐藏整个内容。 测试

轮播图

swiper(.js).com
表格

[行] [列]



table身上的属性

table身上的属性:

border:表格边框 cellspacing:单元格间的间距

cellpadding:单元格的内容与其边框的内边距

bgcolor:表格的背景颜色 background:表格的背景图片

width:表格宽度 height:表格高度

border-collaspe:collaspe:边框合并,不叠加 cellspacing::边框合并,但合并之后的边框宽度等于       前两个边框宽度之和

caption:表格

background:表格背景图

cellspacing:单元格之间的间隙宽度

align:表格的水平对齐方式,通常是left,center,right

表格的

<caption align="水平对齐方式" valign="与表格的相对位置"></caption>
单元格【tr】【td】

width:单元格宽度height:单元格高度
align:单元格内文本的对齐方式,通常是左,中,右 left,center,right
valign:单元格内文本的对齐方式,通常是上,中,下 top,middle,bottom
nowrap:在为设置单元格宽度时,当文本长度宽于单元格宽度,将要换行时,该标签会使其不换行

<tr align="center" valign="bottom">

    <td align="center" nowrap>手机空中免费充值</td>

    <td width="100px">IP卡</td>

    <td width="100px" bgcolor="#006400" valign="top">网游</td>

</tr>

表格的跨行与跨列【td】

rowspan:跨行标签,表示跨了多少行
colspan:跨列标签,表示跨了多少列













表格标签拓展及其属性

thead:定义表格的表头。 

tbody:定义表格主体(正文)。

tfoot:定义表格的页脚(脚注或表注)。

colgroup:标签用于对表格中的列进行组合,以便对其进行格式化。

注意:不管thead、tbody、tfoot的代码先后顺序如何,html显示时,始终是先显示thead,再显示tbody,最后显示tfoot。

<thead> 内部必须拥有 <tr> 标签!
2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
4、必须在 table 元素内部使用这些标签。
5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

《tr》<th></th>《/tr》 用法和td相似 知识自动将单元格内容以粗体显示

表单控件表单标签

<form action=" " method=" ">

    action:表单信息提交的位置;

    method:提交的方式

        get:地址栏,信息量少,安全性低

        post:信息量多,比较安全

输入文本【输入框】:

    用户名:<input type="text" placeholder="请输入用户名" maxlength="10" value=" "                name="username" class="">

        placeholder:默认提示文本;

        maxlength:规定输入的最大字符数

        name:本文本框的名字,与后台进行数据交互用

        class:定义本文本框的样式,相当于盒子

       placeholder下的缩进 

       text-indent:2em;缩进

输入密码【密码框】:

    密码:<input type="password" placeholder="请输入密码" maxlength="10" value=" "                  name="psw" class="">

单选按钮[name的值必须相同]:

    请选择你的性别:

    <label for="man">   [label实现点什么就选中  ,for中的值和id中的值相同]

    男:<input type="radio" name="sex" id="man" checked>  //checked默认选项

    </label>

    <label for="woman">

    女:<input type="radio" name="sex" id="woman">

    </label>

多选按钮[name的值必须相同]:

    请选择你喜欢的音乐:

    摇滚:<input type="checkbox" checked>

     摇滚:<input type="checkbox" checked>

     摇滚:<input type="checkbox" checked>

下拉列表【下拉框】:

    选择你的学历:

    <select name="" id="">

        <option value="">学士</option>

         <option value="">博士</option>

         <option value="">硕士</option>

    </select>

上传文件:

    选择你的照片:

    <input type="file">

留言文本空间:

    <textarea name="" id="" rows="" col="">

    </textarea>

用户是否允许重新设置textarea大小css属性:

    resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向      拖动

重置按钮:

    <input type="reset">

提交按钮:

    <input type="submit">

自定义按钮:

    <input type="button" value="按钮">

    <button>搜索</button>

颜色:

    <input type="color">

时间日期:

    年月:<input type="month">

    年周:<input type="week">

    时分:<input type="time">

    年月日:<input type="date">

    年月时分:<input type="datetime-local">

验证

    <input type="email">   邮箱验证

    <input type="tel" autofocus>   电话

autofocus 自动获取焦点   

</form>
文本模型
文本换行

使非中日韩文本换行
word-break: break-all ;
文本禁止换行

white-space:nowrap;
单行文本溢出部分以省略号显示

overflow: hidden;(放文本的容器)
text-overflow: ellipsis;
多行文本溢出

  1. 指定为弹性盒子
         display: -webkit-box;
  2. 在弹性盒模型中指定元素的排列顺序
         -webkit-box-orient: vertical;
  3. 指定文本显示(溢出)的行数;
         -webkit-line-clamp: 3;
  4. height要是line-height的倍数
         line-height: 70px;
  5. overflow:hidden;

音频视频标签
音频标签

<audio src="" controls loop autoplay></audio>

        controls 空间向用户显示:

        loop 循环播放

         autoplay当前页面加载完自动播放

视频标签

<video src="" controls loop autoplay></video>
H5语义化标签

<header>头部</header>
<nav>导航</nav>
<aside>侧导航<aside>
<section>页面中的某一部分</section>
<main>主体</main>
<footer>底部</footer>
meta标记【签】

name="关键字" cantent="内容"
<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件
bgsound标签

<bgsound src="路径" loop="播放次数">
body属性

  1. bgcolor:背景颜色
  2. background:背景图片
  3. text:文档中文字的颜色
  4. link:超链接的颜色
  5. alink:正在访问的超链接的颜色
  6. vlink:已访问过的超链接的颜色
  7. leftmargin/rightmargin/topmargin/bottommargin: 左/右/上/下边距的像素值

对文字操作的标签

  1. <p></p>开始一个新段落,可单可双

  2.      换行标签,单独标记
  3. <pre></pre>预格式化【敲什么样式,显示什么样式】
  4. <font></font> 用来设置文字的字体 大小 颜色 粗细等
  5. 文字样式标记[均成对出现]
         b 粗体 i 斜体 u 下划线 tt 等宽 
         sup 上标体 sub 下表体 strike 删除线 big 大号字样
         small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样

列表标签

  1. 符号列表
         <ul type="circlr(空心圆点)/disc(实心圆点)【默认】/square(实心方块)">

  <li>

<li>

</ul>

  1. 排序列表
         <ol type="1(数字) /a(a,b,c..)/ A(A,B,C...)/      i(i,ii,iii,...)/ I(I,II,III,...)">

  <li>

<li>

</ol>

a标签

<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开;_parent:在当前窗口的父窗口打开链接;_top:在整个浏览器窗口打开) ...
[字符实体]常用的转义字符
显示结果 描述 实体名称

空格

< 小于号

大于号 
& 和号 
" 引号 
' 撇号 (IE不支持)
¢ 分(cent) 
£ 镑(pound) 
¥ 元(yen) 
€ 欧元(euro) 
§ 小节 
© 版权(copyright) 
® 注册商标 
™ 商标 
× 乘号 
÷ 除号 
选择器
分类

css选择器
1.通用选择器:

*{}//选择所有的标签

群组选择器:

E1,E2,E3..{}//选择E1 E2 E3

标签选择器

标签名{}

类名选择器:

.类名{}

后代选择器

.E1 .E2{} //选择E1 的后代E2

交叉选择器

标签名.类名{}

id选择器
例如 创建id

<div id=“box”></div>

#id名{}  //选择页面中id为**的标签

伪类选择器:

鼠标移入状态

    Ehover{ }   E元素选择鼠标移入状态

    Ehover .子类{ }   选择e元素下鼠标移入时子类的变化  

获取焦点,用于表单的输入

    E: focus{

        outline: none;

     }

伪结构选择器:

E:first-child{}   作为子元素的第一个孩子的E标签

E:last-child{}   作为子元素的最后第一个孩子的E标签

E: nth-child(n){}  //作为子元素的第n个孩子的E标签

E: nth-last-child(n)   作为子元素的倒数第n个孩子的E标签

E:first-of-type{} 作为子元素的同类型的第一元素

E:last-of-type{} 作为子元素的同类型中的最后一个元素

E: nth-of-type(n)   作为子元素的同类型中的第n个元素

E: nth-last-of-type(n)  作为子元素的同类型中的倒数第n个元素

    (n)n可以以为num/even(偶数)/odd(奇数)/3n(3的倍数)

    例子:5.15/伪结构选择器

伪元素选择器:

::after{}   在元素之后加入一个

::before{

    content:“内容之前”;

    color:;

}      在元素之前

属于行内元素

::after{} ::before{}伪元素 content:""; 样式必须写

11.子类选择器

 相邻兄弟选择器

    E1+E2{}  选择E1的下一个兄弟元素E2(不能选中上一个兄弟元素)

        div.box>a+img   a和img统计

 子类选择器

    E1>E2{}  选择E1的子类元素E2

        例子:div.box>div.item{$}*20

            div.box>a>img

属性选择器

[属性名]{}   选择所有拥有属性为 属性名 的元素

[属性名=“value”]{}  选择拥有属性名的属性  且属性值为value

E[属性名=“value”]{}   选择拥有属性名的属性  且属性值为valueE元素

E[属性名~=“value”]{}    选择拥有属性名的属性  并且属性值一个或者多个,其中一个属性值为valueE元素

E[value^=“1”]{}    选择拥有 value的属性  并且属性值一个或者多个,其中一个属性值以 1 开头的E元素

E[value$=“1”]{}    选择拥有 value的属性  并且属性值一个或者多个,其中一个属性值以 1 结尾的E元素

E[value*=“1”]{}    选择拥有 value的属性  并且属性值一个或者多个,其中一个属性值包含 1 的E元素

             例子:属性选择器

选择器的优先级

宗旨:越具体的优先级越高
id (100 ) > class( 10 )> 标签名( 1)

.box .son{ } 10+10=20

abcde优先级(e为个位):

a:行内样式

b:id选择器

c:类名选择器 伪类选择器(:hover) 属性选择器 

d:标签选择器 伪元素选择器 (::after) 

e:通用选择器有一个

选择有中有一个abcde在其位置+1
移动端布局步骤

  1. 修改视口
         <meta name="viewport" content="width=device-width">


视口:视觉视口,布局视口,理想视口
em:当前字体的倍率 100px=10em
rem:html字体的倍率

移动端窗口  375*667

html{

    font-size:0.5rem;

}

.box{

    width: 750rem;   //375px=750rem*0.5px  ; 100px=1rem

     height: 1334rem;

}

  1. 引入rem.js
         <script src="路径"></script>
  2. 修改rem.js中设计稿的宽度
  3. 100px=1rem

 

未完待续,感谢关注好程序员前端教程分享!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯