文章目录
盒子模型及页面布局
一.页面元素的分类
- 父级元素
- 子元素
1.元素类型z
1.block:
块元素 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。可以设置宽高;
设置margin和padding都有效;
可以自动换行;
多个块状,默认排列从上到下。
2.inline:元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。
inline-block: 将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。
display:inline-block;
对于行内元素和块级元素,其特点如下:
-
行内元素
-
设置宽高无效;
-
可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;
-
不会自动换行;
-
-
块级元素
-
可以设置宽高;
-
设置margin和padding都有效;
-
可以自动换行;
-
多个块状,默认排列从上到下。
-
二.盒子模型
1.介绍
为了实现页面布局,将内容标签在页面防止在特定的位置展示的
2.盒子模型构成
盒子的大小=border大小+padding+内部长宽
3.设计盒子
border:宽度 样式 颜色;
border-color;边框颜色
border-style; 边框样式:solid实线,dotted点状线,dashed虚线
border-width:边框宽度
border-radius:圆角处理
#只设置一边的边框属性
border-left-color;
border-left-style;
border-left-width:
#边距属性
margin: 200px 300px; #设置上下外边距为200px,左右外边距为300px
margin-top: 检索或设置对象顶边的外延边距
margin-right: 检索或设置对象右边的外延边距
margin-bottom: 检索或设置对象下边的外延边距
margin-left: 检索或设置对象左边的外延边距
margin: 200px 300px 400px 500px; #设置上外边距为200px,右外边距为300px,下外边距为400px,左外边距为500px
# 外边距居中:1. 元素必须是块元素 2. 盒子必须指定了宽度
padding:设置内边距
padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top: 检索或设置对象顶边的内部边距
padding-right: 检索或设置对象右边的内部边距
padding-bottom: 检索或设置对象下边的内部边距
padding-left: 检索或设置对象左边的内部边距
#注意:
内部元素中有height或width设置,padding撑开大盒子
#解决办法:
通过内部元素设定外边距解决
如果有两个外边距相重叠,只走边距距离大的边距,并不是累加的过程
float:浮动
position: 页面定位
absolute 绝对路径
fixed: 适配浏览器窗口
4.案例:页面编写2048页面布局
5.案例:编写页面导航栏
6.网站页面布局
- top:网站标题,网站导航
- banner:专题介绍画面
- main:页面主题内容
- footer:友情链接,网站备案信息
四.JS-javascript
1.介绍
mozilla浏览器公司 动态交互功能 火狐
2.js功能
行为标准
支持浏览器实现和用户的动态交互
3.js常用功能
BOM型 #通过js控制浏览器来帮你做一些效果,比如alert BOM:浏览器对象模型
DOM型 #通过js控制所有的html标签,实现动态样式效果 DOM:文档对象模型
4.实现场景
1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)
5.html代码引用js
<script></script>
方式1: script标签内写代码
<script>
//alert('hello,my girl') #这个是浏览器窗口一打开咱们这个文件,就弹出一个窗口
</script>
方式2:外部文件引入
<script src="myscript.js"></script>
方式3:外部网址引入
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
6.js的基础功能介绍
# html文档的输出
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p><a href='#'>这是一个段落。</a></p>");
</script>
# 捕捉单击事件
<button onclick="alert('欢迎!')">点我!</button>
# DOM修改文本属性
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
# DOM修改一个图片大小
<script>
function changeImage()
{
element=document.getElementById('myimage');
element.width += 10 ;
}
</script>
<img id="myimage" src="./1.jpg" width="100" height="180">
<button onclick="changeImage()">+</button>
# JS实现页面跳转
<script>
function zhuce(){
alert('准备跳转');
window.location.href="2048.html";
}
</script>
<button onclick="zhuce()">注册</button>