day15--JavaScript
Posted (野生程序员)
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了day15--JavaScript相关的知识,希望对你有一定的参考价值。
上节作业回顾
<style></style>代表的是CSS样式
<script></script>代表的是javascript样式
1、CSS重用
<style>
.c1{
}
.c2{
}
<div class="c1 c2"></div>
2、自适应和改变大小变形
左右滚动条的出现
宽度,百分比(全部使用百分比就会变形)
页面最外层:像素的宽度(改变页面大小,自动出现滚动条)
<form> action="http://www.alex.com" method="GET" enctype="multi图片提交必须">
<input type="text" name="q" />
<input type="text" name="b" />
<input type="submit" />
</form>
GET:http://www.alex.com?q=用户输入
GET:http://www.alex.com?q=用户输入&b=用户输入
图片提交必须有enctype属性
CSS补充
position: 返回顶部,顶部菜单不动
position:
fixed固定在某处位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ width:70px; height:50px; background-color:black; color:white; line-height:50px; position:fixed; #固定在某处,下面是设置固定的地方 bottom:20px; right:10px; } </style> <!-- position属性的fixed代表固定在某处,定义position后,有四个属性,top,left,right,bottom,距离屏幕的四个位置 --> </head> <body> <div class="c">返回顶部</div> <div style="height:5000px;background-color:aliceblue;"></div> <!-- 两个块级标签,层叠的形式,要想实现放置底部的效果,要实现网页分层的效果 --> </body> </html>
首行固定,漂浮在网页顶端,两层网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--position属性的fixed是固定网页,margin-top属性是自动让标签距屏幕的距离,fixed固定屏幕,固定了标签,不会动的 --> <title>Title</title> <style> .c1{ background-color:black; height:30px; color:white; position:fixed; left:0; right:0; top:0; } .c2{ background-color:pink; height:5000px; margin-top:31px; } </style> </head> <body> <div class="c1">顶部网页</div> <div class="c2">下面网页的信息</div> <div>草,怎么看不见华伦</div> <div>我擦,真的看不见呀,你妈妈的</div> </body> </html>
上面HTML代码中,position属性中的fixed是固定网页,而margin-top是让<div>标签距屏幕的距离,不会固定,是相对屏幕顶部位置。
以上是关于day15--JavaScript的主要内容,如果未能解决你的问题,请参考以下文章