一、实验目标
本实验目标为掌握css样式的定义方法及使用，熟练应用css和html标签进行页面设计和布局。支撑专业核心能力的培养。
二、实验要求
- 掌握内联样式、嵌入样式、外部样式
- 掌握通用选择器、类型选择器、类选择器、Id选择器的使用
- 掌握盒子模型
- 掌握div+css布局
三、实验内容
CSS内联样式、嵌入样式、外部样式定义与使用；
通用选择器、类型选择器、类选择器、Id选择器的使用；
Css盒子模型样式；
Div+css布局；
四、主要仪器设备
硬件： PC电脑
软件： Visual Studio Code/WebStorm/HBuilder
五、考核方式及要求
提交实验报告、源代码
六、实验内容和步骤
使用DIV+CSS布局完成对一个手机网页的布局
1、用前端开发环境创建main.html，样式表采用外部链入CSS文件
2、设置视口属性，在head中添加标记
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
3、使用div+CSS完成布局；距离单位根据设计图测量值换算成rem，较窄的border仍保持使用px，rem即元素px值相对于rootFontSize px值的比值，换算公式：
rootFontSize = 100
rem距离 = 元素px距离 / rootFontSize
使用JavaScript动态设置HTML文档rootFontSize，假设设计图的rootFontSize为100，若真实屏幕宽度与设计文档不同，则执行以下代码进行换算，以保证网页在不同尺寸屏幕中都能最大限度的还原设计图的尺寸比例。
<script type="text/javascript">
function setRootFontSize(){
var rootHtml = document.documentElement;
var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
rootHtml.style.fontSize = rem + "px";
}
setRootFontSize(); //网页首次载入时执行一次
window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行
window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行
</script>
4、网页的头部和底部（选做）分别固定显示在屏幕顶部和底部，将样式表position属性的值设为fixed，top属性设为0px即置顶，bottom属性设为0px即置底。
页码标题、文本框、注册按钮的宽度和网页总体宽度为自适应，其他所有宽度均设为固定长度；颜色和网页布局时涉及的各个尺寸需要自己测量和换算。
5、文本框和密码框中文字的颜色为黑色，设计图中显示的是默认的占位符的颜色，将文本框的placeholder属性值设置为图中的文字即可看到效果。
代码
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript">
function setRootFontSize(){
var rootHtml = document.documentElement;
var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
rootHtml.style.fontSize = rem + "px";
}
setRootFontSize(); //网页首次载入时执行一次
window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行
window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行
function post_message(){
var post=document.getElementById("post");
var receive=document.getElementById("receive");
var error=document.getElementById("errorArea");
var tel=document.getElementById("tel")
var rgx=new RegExp("^1[3|4|5|7|9][0-9]{9}$")
if(tel.value==""){
error.innerText="*电话号码不能为空";
error.style.display="block";
}
else if(!rgx.test(tel.value)){
error.innerText="*手机号不正确";
error.style.display="block";
}
else if(rgx.test(tel.value)==true){
post.style.display="none";
receive.style.display="block";
}
else{
post.style.display="block";
receive.style.display="none";
}
}
function regist(){
var error=document.getElementById("errorArea");
var user=document.getElementById("user");
var tel=document.getElementById("tel");
var reg=new RegExp("^1[3|4|5|7|8][0-9]{9}$")
var password=document.getElementById("password");
var ensure_password=document.getElementById("ensure_password");
var receive=document.getElementById("receive");
if(user.value== ""){
error.innerText="*用户名不能为空";
error.style.display="block";
}
else if(tel.value==""){
error.innerText="*电话号码不能为空";
error.style.display="block";
}
else if(!reg.test(tel.value)){
error.innerText="*手机号不正确";
error.style.display="block";
}
else if(receive.value!=123456){
error.innerText="验证码错误";
error.style.display="block";
}
else if(password.value==""){
error.innerText="*密码不能为空";
error.style.display="block";
}
else if(ensure_password.value==""){
error.innerText="*确认密码不能为空";
error.style.display="block";
}
else if(password.value!=ensure_password.value){
error.innerText="两次输入密码不一致";
error.style.display="block";
}
else if(receive.value==""){
error.innerText="请输入验证码";
error.style.display="block";
}
else{
error.innerText="已提交注册信息";
error.style.display="block";
window.location.href="demo03.html"
}
}
function hide(){
var error=document.getElementById("errorArea");
error.style.display="none";
}
function repeat(){
var error=document.getElementById("errorArea");
var post=document.getElementById("post");
var receive=document.getElementById("receive");
error.style.display="none";
post.style.display="block";
receive.style.display="none";
receive.value="";
}
</script>
<title>实验二</title>
<link rel="stylesheet" href="demo02.css">
</head>
<body>
<div id="header">
<div class="header_left"></div><!---->
<div class="header_right"></div>
<div class="header_center">用户注册</div>
</div>
<div id="content">
<div class="content_left">用户名</div>
<div class="content_body"><input type="text" placeholder="请输入用户名" id="user" οnchange="hide()"></div>
</div>
<div id="content2">
<div class="content2_left">手机号</div>
<div class="content2_right">
<input id="post" type="button" value="发送验证码" οnclick="post_message()" οnchange="hide()">
<input id="receive" type="number" placeholder="请输入验证码" style="display: none;" >
</div>
<div class="content2_body"><input type="tel" placeholder="请输入手机号" id="tel" οnchange="repeat()"></div>
</div>
<div id="content_password">
<div class="password_left">密码</div>
<div class="password_right"><input type="password" id="password" οnchange="hide()"></div>
</div>
<div id="content_ensure">
<div class="ensure_left">确认密码</div>
<div class="ensure_right"><input type="password" id="ensure_password" οnchange="hide()"></div>
</div>
<div id="errorArea" style="display: none;">异常显示区域</div>
<div class="button"><input type="button" value="注册" οnclick="regist()"></div>
<div id="content_select">
<div class="select_left"><input type="button" value="已有账号"></div>
<div class="select_right"><input type="button" value="更换手机号"></div>
</div>
<div id="bottom">
<div class="bottom_left">
<img src="img/main_home2.png" class="picture">
<p>首页</p>
</div>
<div class="bottom_right">
<p>设置</p>
</div>
</div>
</body>
</html>
css样式表
body{
margin: 0rem;
}
#header{
background-color: #e66c06;
}
.header_left{
width: 1.04rem;
height: 1.32rem;
float: left;
background-image: url("img/sub_back.png");
background-size: .55rem .55rem;
background-repeat: no-repeat;
background-position: .45rem .36rem;
}
.header_center{
height: .57rem;
line-height: .57rem;
margin: 0rem 1.04rem 0rem 1.04rem;
text-align: center;
font-size: .57rem;
padding: .37rem 0rem .38rem 0rem;
color: #ffffff;
}
.header_right{
width: 1.04rem;
height: 1.32rem;
float:right;
background-image: url("img/sub_more.png");
background-size: .55rem .55rem;
background-repeat: no-repeat;
background-position: 0rem .36rem;
}
.content_left,.content2_left,.password_left,.ensure_left{
width: 2.18rem;
height: .47rem;
line-height: .47rem;
color: #5f5f5f;
font-size: .47rem;
text-align: left;
float: left;
padding: .62rem 0rem 0rem .36rem;
clear: both;
/* background-color: antiquewhite; */
}
.content_body,.password_right,.ensure_right{
height: .47rem;
line-height: .47rem;
padding: .63rem 0rem 0rem 2.64rem;
/* background-color: #5f5f5f; */
}
.content_body input,.password_right input,.ensure_right input{
font-size: .47rem;
line-height: .47rem;
width: 7.64rem;
border-left: 0rem;
border-right: 0rem;
border-top: 0rem;
outline: none;
color: black;
}
.content2_body{
padding: .64rem 4.12rem 0rem 2.64rem;
}
.content2_body input{
width: 3.82rem;
font-size: .47rem;
line-height: .47rem;
border-left: 0rem;
border-right: 0rem;
border-top: 0rem;
outline: none;
/* color: #a1a1a1; */
}
.content2_right{
/* padding-top: .64rem;
padding-right: 2.07rem; */
float: right;
}
#post{
background:white;
width:2.15rem;
height:0.48rem;
font-size: .38rem;
padding-top:0rem;
border-left: 0rem;
border-right: 0rem;
border-top: 0rem;
border-bottom: 0rem;
outline: none;
color:#e66c06;
margin-top: .64rem;
margin-right: 2.07rem;
}
#receive{
width:2.73rem;
height:0.76rem;
font-size: .38rem;
line-height: .38rem;
padding-top:0.21rem;
padding-bottom: .2rem;
color:#a1a1a1;
margin-top: .42rem;
margin-right: 1.43rem;
text-align: center;
}
.button{
height: 1.12rem;
/* padding: .32rem 0rem .28rem; */
background-color: #e66c06;
color: #ffffff;
text-align: center;
margin: .41rem .4rem 0rem .41rem;
}
.button input{
font-size: .52rem;
line-height: .52rem;
background-color: #e66c06;
color: #ffffff;
border-left: 0rem;
border-right: 0rem;
border-top: 0rem;
border-bottom: 0rem;
outline: none;
padding: .32rem 0rem .28rem 0rem;
}
.select_left{
margin: .31rem 0rem 0rem .4rem;
float: left;
}
.select_right{
margin: .31rem .4rem 0rem 0rem;
float: right;
}
.select_left input,.select_right input{
font-size: .3rem;
line-height: .3rem;
border-left: 0rem;
border-right: 0rem;
border-top: 0rem;
border-bottom: 0rem;
outline: none;
background-color: #ffffff;
}
#bottom{
width: 100%;
background-color: #e66c06;
position: fixed;
bottom: 0rem;
margin: 0rem;
clear: both;
}
.bottom_left{
height: 1.46rem;
float: left;
background-color: #ffffff;
width: 1.19rem;
margin: 0rem 0rem .2rem .28rem;
}
.picture{
position: relative;
width: 0.64rem;
padding: .17rem .29rem .5rem .26rem;
}
.bottom_left p{
position: absolute;
font-size: .32rem;
color: #e66c06;
top: .64rem;
left: .52rem;
}
.bottom_right{
height: 1.46rem;
width: 1.26rem;
background-image: url("img/main_config1.png");
background-size: .64rem .64rem;
background-repeat: no-repeat;
float: right;
background-position: .0rem .17rem;
}
.bottom_right p{
height: .32rem;
font-size: .32rem;
line-height: .32rem;
color: #ffffff;
padding: 1.0rem 0rem .27rem 0rem;
margin: 0rem;
}
#errorArea{
height: .39rem;
font-size: .39rem;
line-height: .39rem;
text-align: center;
margin: .49rem 0rem .41rem 0rem;
color: red;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
