[上海|结业弟子]JS-赵朋|2019年09月21日的日报-技能树.IT修真院

发表于： 2019-09-21 23:10:40

1 968

遇到问题:滚动轴，应该在主体的高度滚动，实际却与header产生重叠

解决：为header添加z-index属性

CSS z-index 属性

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

属性值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

<style>

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

</body>

遇到问题，头部按钮无法水平居中，计算外边距把右边角标宽度排除在外，使整个按钮框看起来整体偏左

解决办法为角标设置绝对定位脱离文档流，使外边距计算作用于整个父元素

遇到问题，角标太大

解决，用zoom：0.9；缩放

然后为按钮设置百分比属性，使其能根据屏幕自适应

根据上述学到的东西为导航栏插入角标

.ioc_2{

position:absolute;

right:10px;

top:19px;

background-image:url("8.png");

width:20px;

height:10px;

background-position: -136px -98px;

}

边框简写

右边边框样式border-right：1px soild red；

宽度，样式，颜色，中间用空格隔开

footer部分的三个按钮

遇到问题,设置宽高填充背景颜色,无效

遇到问题,图片插入,无效

解决,代码不规范造成的,

左右盒子分别设置右左%外边距,使之可以自适应屏幕宽度

.footer_left{

margin-right:20%;/*以中间盒子为目标,设置外边距*/

background-color:rgb(248,250,251);

}

.footer_center{

width: 70px;

height: 70px;

border-radius:50%;

background-color:rgb(95,192,205);

}

.footer_right{

margin-left:20%;/*以中间盒子为目标,设置外边距*/

background-color:rgb(248,250,251);

}

主体main部分

边框样式简写顺序:粗细样式颜色;

中间用空格隔开

文字强行一行出现省略号

text-overflow 属性

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

默认值：	clip
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

CSS overflow 属性

属性定义及使用说明

overflow属性指定如果内容溢出一个元素的框，会发生什么。

默认值：	visible
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS white-space 属性

属性定义及使用说明

white-space属性指定元素内的空白怎样处理。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.whiteSpace="pre"

属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

文本溢出text-overflow:ellipsis

它需要和 display、 -webkit-box-orient 和 overflow 结合使用：

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

根据学到的知识为文本添加溢出的内容修剪用省略号表示

.m_txt_2{

margin-left:64px;

font-size:20px;

font-weight: 600;

letter-spacing:2px;

white-space: nowrap;/*文本不会换行*/

overflow: hidden;/*溢出文本会被修剪,且修剪内容不可见*/

text-overflow: ellipsis;/*修剪文本用省略号代替*/

}

遇到问题,右边文本自动换行

解决;添加white-space: nowrap;/*文本不会换行*/

遇到问题;模拟下拉菜单,紧贴导航栏文本

解决,为模拟下拉菜单设置外边距为10px

遇到问题,按钮点击之后会出边框

解决,为边框按钮添加outline:none;属性

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

所有CSS 轮廓（outline）属性

属性	说明	值	CSS
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit	2
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置轮廓的宽度	thin medium thick length inherit	2