WEB前端实训(Day03)

阅读数: 次 2020-09-02

A.m.

任务八：利用HTML5制作移动端页面

本任务主要是利用 HTML5 + CSS + Javascript 技术共同完成一份适应移动端显示的页面，从构建HTML结构、设置CSS样式到脚本特效。

在站点目录下新建文件index.html，编辑内容如下：

此时页面效果如下：

在css文件夹下新建style.css，编辑内容如下：

* {
	padding: 0;
	margin: 0;
}

html {
	height: 100%; /* 设定自适应 */
}

body {
	color: #ff0;
	background: url(../images/sky.jpg) center center;
	background-size: cover; /* 保持图片比例,使背景图缩放可以完全覆盖整个浏览器区域 */
}

#box {
	position: absolute;
	width: 100%;
	top: 50%; /* 绝对定位,向下移动50% */
	transform: translateY(-50%);
	text-align: center;
}

h1 {
	margin-bottom: 20px;
	font-size: 54px;
	text-transform: uppercase; /* 把小写字符转化成大写 */
}

p {
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 40px;
	font-size: 21px;
}

a {
	padding: 10px 100px;
	text-decoration: none;
	font-size: 18px;
	color: #ff0;
	border: 1px solid #ff0;
	border-radius: 3px;
}

本案例中与用户交互就是当用户单击按钮链接时，改变按钮的背景色和字体等样式。那么需要先获取到该按钮元素，再设置其单击事件触发一个匿名函数。在该函数中实现改变按钮的字体颜色等样式。在js文件夹下新建submit.js，编辑内容如下：

var reg = document.getElementById("submit");
reg.onclick = function(){
	reg.innerHTML = "海软欢迎您";
	reg.style.background = "#2481f2";
	reg.style.borderColor = "#fff";
	reg.style.color = "#fff";
}

浏览网页，在不同分辨率下或自行拖动大小进行测试。

注1：在浏览器测试时，当处于Nexus5X (width×height===412×732)时，有显示问题；

注2：在浏览器测试时，拖动浏览器边界至页面宽度和高度为412和732时，没有问题。