昨天看了启明星的月考核题,用这个作为复习的入口,随后看了以前写的东西,很多都忘记了,借这次复习捡起来。1>html的定义是超文本标记语言,2>对大小写不敏感,3>标题有六种4>id选择器和class选择器的区别是:id选择器在文档中只能用一次,而class选择器能使用多次;id选择器不能用词列表法为一个元素同时设置多个样式,而class选择器可以;在层叠样式表中,id以“#”开始,而class以“.”开始;5>.<img>的’ ALT’属性作用:图片在无法正确显示的时候起到文本替代的作用,解释此图片的内容;6>有序列表的标签名称:ol,无序列表的标签名称:ul;7>(1)display:none 不显示元素(2)display:inline 内联元素 前后没有换(3)display:block 块级元素 前后有换行符 (4)display:inline-block 内联块级元素 8>如果元素没有已定位的父元素,那么它的位置将相对于body (关于绝对定位与相对定位的问题,在文章的最后我粘贴了我觉得网上解释的比较好解释)9>将<img>的透明度设置为80%的css代码:opacity:0.8;
随后做了一下大题,感觉收获还是蛮多的,主要是水平垂直居中吧,我觉得position这个方法很实用。这里有我昨天尝试的各种方法的部分代码,其实这题重点也是方格居中,其次就是怎样设置两个角上的四分之一圆的问题(其中一个角的radious的值等于正方形的边长,其余值为0)
(1)负外边距方式(宽高固定)
(2)margin方式,宽高固定
(3)transform方式(宽高无限制)
(4)left/top/right/bottom均为25%
(1)
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:50%;
top:50%;
margin:-100px 0 0 -200px;//为高宽的一半
}//这个方法需要提前知道元素的尺寸,否则margin的负值无法精确
(2)
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:0;top:0;right:0;bottom:0;
margin:auto;
}
(3)
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:50%;
top:50%;
transform:translate(-50%,-50%);//值表示相对于自身大小的偏移量
}
(4)
.container{
background-color:#ccc;
position:absolute;
height:200px;
width:400px;
left:25%;top::25%;right:25%;bottom::25%;
}
本来想把蜘蛛侠那个写一下的 时间原因还是看看自己以前写的 以及组内别人的作品再总结下容易忘记的那些小知识点吧,谁知道一个月不写后又忘了多少呢。
1.整个文档是在html下的head和body两个大部分,head一般有<meta charset="UTF-8">(设置编码格式);<title></title>;<link rel="stylesheet" type="text/css" href="" /> 分别含义是:链接外部样式表,样式表及类型,样式的位置。
2.href和src的区别:href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。 <link href="reset.css" rel=”stylesheet“/> 浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理;src是source的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如<script src="script.js"></script>当浏览器解析到该元素时,会暂停浏览器的渲染,知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之,src用于替换当前元素;href用于在当前文档和引用资源之间建立联系。
3.清除链接的下划线text-decoration: none;
4.清除列表前面的点list-style-type: none;
5.边界border-radius: 8px;//圆角
6.点击t里的连接,li颜色发生变化.t a:hover li {
background-color: #00b300;
}
7.background-size: cover;
9.这个针对列表以及链接,很实用
li {
list-style-type: none;
text-align: left;
}
a{
text-decoration: none;
color: black;
}
10水平行内居中text-align:center 块级元素margin:0 auto; 垂直居中line-height可以设置字行高
11.图片布满全屏
body{
width:100%;
hight:auto;
background:url() no-repeat;
background-size:100%//宽设为100% 高居中 背景size100%
}
12.图片四要素:src,width,hight,alt(提示词)
13.边框 尺寸
border:1px solid red;
14.通配符选择器*{
//可以设置页面上所有标签的属性
}
15.这是一个以前写的常规的表样式,
<form action="
<select name="" style="border: 1px #E0E0E0 solid;background-color: #cccccc;">
<option selected="">全部</option>//selected选择开始显示项
<option>新闻</option>
<option>产品</option>
</select>
<input type="text" placeholder="请输入关键字" style="border: 1px #E0E0E0 solid;" />
<button value="提交" type="submit">提交</button>
</form>
.leaderright1 select {
width: 84px;
height: 30px;
}
.leaderright1 input {
width: 168px;
height: 26px;
}
.leaderright1 button {
border: 0;
width: 60px;
height: 30px;
margin-top: 0;
background-color: red;
}//对botton,input,select样式设置
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的;position:relative不会隐式改变display的类型。