web 实验2

最新推荐文章于 2023-08-04 08:54:39 发布
最新推荐文章于 2023-08-04 08:54:39 发布
阅读量170 收藏
点赞数
文章标签： 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cillin9/article/details/130311093
版权

《CSS样式及页面布局》实验指导

一、实验目标

本实验目标为掌握css样式的定义方法及使用，熟练应用css和html标签进行页面设计和布局。支撑专业核心能力的培养。

二、实验要求

  1. 掌握内联样式、嵌入样式、外部样式
  2. 掌握通用选择器、类型选择器、类选择器、Id选择器的使用
  3. 掌握盒子模型
  4. 掌握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属性值设置为图中的文字即可看到效果。

七、实验结果

1、编写实验报告：

实验报告中写上网页制作的步骤，并附上重要步骤及结果的截图。

2、提交实验结果： 

序号

文件名

说明

1

main.html

手机网页文件

2

main.css

CSS样式表

2

main_config1.png

3

main_config2.png

4

main_home1.png

5

main_home2.png

6

sub_back.png

7

sub_more.png

8

实验2报告.docx

实验报告

将HTML文件、CSS文件和图片打包，与报告文件分开上传，报告文件不要压缩

html：

<!DOCTYPE html>
<html lang="en" style="font-size:200px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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>   
    <title>实验2</title>
    <link rel="stylesheet" href="./02.css">
    
</head>
<body>
    <div id="header">
        <div class="header-left">&nbsp;</div>
        <div class="header-right">&nbsp;</div>
        <div class="header-center">用户注册</div>
    </div>
    <div id="area1">
        <div class="area1-left">用户名</div>
        <div class="area1-center"><input type="text" placeholder="请输入用户名" class="yonghuming" ></div>
    </div>
    <div id="area2">
        <div class="area2-left">手机号</div>
        <div class="area2-center"><input type="text" placeholder="请输入手机号" class="shoujihao" ></div>
        <div class="area2-right">发送验证码</div>
    </div>
    <div id="password">
        <div class="password-left">密码</div>
        <div class="password-center"><input type="text" class="mima" ></div>
    </div>
    <div id="check_the_password">
        <div class="check_the_password-left">确认密码</div>
        <div class="check_the_password-center"><input type="text" class="querenmima" ></div>
    </div>
    <div id="zhuce">注册</div>
    <div id="other">
        <div class="other-left">已有账号</div>
        <div class="other-right">更换手机号</div>
    </div>
    <div id="dxt">
        <div id="bottompicture">
            <div class="bottompicture-left">&nbsp;</div>
            <div class="bottompicture-right">&nbsp;</div>
        </div>
        <div id="bottomwriting">
            <div class="bottomwriting-left">首页</div>
            <div class="bottomwriting-right">设置</div>
        </div>
        <div id="supplyment">&nbsp;</div>
    </div>
</body>
</html>

css：

        body{
            margin:0px;
        }
        #header{
            background: #e66d05;
            overflow: hidden;
            position: fixed;
            top: 0rem;
            width: 100%;
        }
        .header-left{
            float: left;
            width: 1.15rem;
            height: 1.32rem;
            background-image: url("img/sub_back.png");
            background-repeat: no-repeat;
            background-position: 0.46rem 0.37rem;/*left top*/
            background-size: 0.55rem  0.55rem;

        }
        .header-left img{
            width: 0.58rem;
            height: 0.55rem;
        }
        .header-center{
            color: #ffffff;
            font-size: 0.58rem;
            line-height: 0.58rem;
            padding: 0.37rem 0rem 0.37rem 0rem;
            text-align: center;
            margin: 0rem 1.15rem 0rem 1.15rem;
        }
        .header-right{
            float: right;
            width: 1.15rem;
            height: 1.32rem;
            background-image: url("img/sub_more.png");
            background-repeat: no-repeat;
            background-position: 0.1rem 0.37rem;/*left top*/
            background-size: 0.55rem  0.55rem;
        }
        #area1{
            width: 10.80rem;
            overflow: hidden;
        }
        .area1-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.62rem 0.76rem 0.13rem 0.47rem;
            margin-top: 1.32rem;
        }
        .area1-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.63rem 0rem 0rem 0rem;
            margin-top: 1.32rem;
        }
        .yonghuming{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #area2{
            width: 10.80rem;
            overflow: hidden;
        }
        .area2-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.76rem 0.13rem 0.47rem;
        }
        .area2-center{
            float: left;
            width: 4rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0rem;
        }
        .shoujihao{
            float:left;
            height: 0.45rem;
            width: 3.8rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        .area2-right{
            float: left;
            width: 3.5rem;
            font-size: 0.38rem;
            line-height: 0.38rem;
            color: #eb6d06;
            padding: 0.5rem 0rem 0.14rem 0.23rem;
        }
        #password{
            width: 10.80rem;
            overflow: hidden;
        }
        .password-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.76rem 0.13rem 0.47rem;
        }
        .password-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0.45rem;
        }
        .mima{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #check_the_password{
            width: 10.80rem;
            overflow: hidden;
        }
        .check_the_password-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.27rem 0.13rem 0.47rem;
        }
        .check_the_password-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0rem;
        }
        .querenmima{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #zhuce{
            font-size: 0.52rem;
            line-height: 0.52rem;
            text-align: center;
            color:#fffdff;
            background-color: #e66d05;
            padding: 0.32rem 0rem 0.28rem 0rem;
            margin: 0.68rem 0.4rem 0rem 0.40rem;
        }
        #other{
            width: 10.80rem;
            overflow: hidden;
            color: #5a5a5a;
        }
        .other-left{
            float: left;
            font-size: 0.33rem;
            padding: 0.31rem 0rem 0rem 0.48rem;
        }
        .other-right{
            float: right;
            font-size: 0.33rem;
            padding: 0.31rem 0.52rem 0rem 0rem;
        }
        #bottompicture{
            background-color: #e66d05;
            width: 10.80em;
            overflow: hidden;
            height: 0.76rem;
            
        }
        .bottompicture-left{
            float: left;
            width: 1rem;
            height: 0.76rem;
            background-image: url("img/main_home2.png");
            background-repeat: no-repeat;
            background-position: 0.23rem 0.16rem;
            background-size: 0.55rem  0.55rem;
            background-color: #ffffff;
            margin: 0rem 0rem 0rem 0.27rem;
        }
        .bottompicture-right{
            float: right;
            width: 0.8rem;
            height: 1rem;
            background-image: url("img/main_config1.png");
            background-repeat: no-repeat;
            background-position: 0.2rem 0.14rem;
            background-size: 0.55rem  0.55rem;
            margin: 0rem 0.27rem 0rem 0rem;
        }
        #bottomwriting{
            background-color: #e66d05;
            width: 10.80em;
            overflow: hidden;
        }
        .bottomwriting-left{
            float: left;
            width: 1rem;
            font-size: 0.31rem;
            line-height: 0.31rem;
            color: #e66d05;
            background-color: #ffffff;
            margin: 0rem 0rem 0rem 0.27rem;
            text-align: center;
            padding-bottom: 0.07rem;
        }
        .bottomwriting-right{
            float: right;
            color: #ffffff;
            width: 0.7rem;
            font-size: 0.31rem;
            line-height: 0.31rem;
            text-align: center;
            padding: 0rem 0.25rem 0rem 0rem;
        }
        #supplyment{
            background-color:#e66d05 ;
            height: 0.2rem;
        }
        #dxt{
            position: fixed;
            bottom: 0rem;
        }

cillin9
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VScode使用心得
linlz58的博客
05-16 514
VScode使用随笔记
VSCode 开发配置，一文搞定（持续更新中...）
前端学习笔记
03-09 3264
明明很短的标签，一行就可以显示，但是格式化后却频频换行，看着是不是别扭，别着急，按照下面的配置，轻松搞定它。这种密密麻麻的下划线，看着是不是很难受？取消这个配置，即可隐藏它。选择需要的代码片段或者创建一个新的，这里以。
Web前端小白必看【网页开发工具/HTML常用标签】
weixin_73833411的博客
03-06 2230
包含vscode在前端网页开发部分的基本使用；以及前端Html常用的标签。
【CentOS Linux 7】实验5【安装VScode，并用VScode编写HTML网页】
upward
04-15 1817
在Linux系统[CentOS7]中，安装VScode，并在VScode上编写HTML网页。 附：实验目的、详细实验过程、实验心得。 【实验目的】 【实验步骤】 1)在VS code官网上，下载安装程序： 2)在Linux系统下，安装VS code软件： 3)在Linux系统下，启动VS code软件： 4)在Linux系统下，安装VS code软件需要的插件： 5)在VS code软件中，编写HTML页面： 6) 运行在VS code软件中编写的HTML页面： 【总结】
VScode页面开发
m0_74937538的博客
08-04 5343
当一个元素的宽度已知，并且希望它在其容器中水平居中对齐时，可以使用这个属性。11）overflow: hidden该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。13）text-overflow: ellipsis的意思就是在文本溢出容器时，使用省略号来表示溢出的部分。7)、input type="radio" 单选按钮，同组按钮内，name值保持一致，互斥，不能同时选中。9)sub下标/sup上标：上下标标签，加入（title=“*******”）链接可显示标签信息。
web实验2截图.docx
06-21
简单的控件应用，.net开发实例代码，包含常见的前端控件使用代码
23215120613王祉琪web实验2.zip
最新发布
05-21
在给定的压缩包文件"23215120613王祉琪web实验2.zip"中，只有一个子文件"23215120613王祉琪web实验2.html"。从这个文件名我们可以推测，这可能是一个与Web开发相关的实验作业或项目，由学生王祉琪完成，编号可能是...
web实验2 CSS基本语法.zip
06-27
实验内容：1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制；3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器...
web实验报告
06-16
在本“Web实验报告”中，我们探讨了Web开发的核心概念和技术，这是一份由合肥学院的学生精心编写的参考资料，旨在帮助学习者更好地理解和实践Web开发。这份报告涵盖了多个关键领域，包括HTML、CSS、JavaScript基础，...
web网站实验报告
11-26
实验目的及要求】 1. 架设web服务器的需求环境； 2. 创建网站的虚拟目录； 3. 创建web网站； 安全管理web网站
数据结构 实验报告01
zRNA__的博客
02-29 2056
一、实验目的和要求 完成尽可能多的数据排序，并显示运行时间。 二、实验环境 编译器：Vscode DevC++ 系统：Windows10 CPU：i5-8265U@1.60GHz 数据：int范围（排除桶排序，基数排序，计数排序） 三、实验内容 1. 选择合适的排序算法 2. 确定可排序数据长度最大值 3. 固定可排序数据内容 4. 显示运行时间 四、实验过程 4.1...
VS code使用心得
weixin_43946315的博客
09-30 481
字体 1）大小 默认14号字体太小了，可修改为18 文件—首选项—设置， 2）颜色分格 有没有觉得默认的颜色像毛毛虫，花花绿绿的，有点辣眼睛。 换个主题，直接在扩展中搜索你想要换的主题，下载安装。文件–首选项-颜色主题，点击你的主题 从这样 变成了这样，小清新起来了~ ...
一篇高级软件工程师的实验总结
weixin_52630329的博客
07-28 139
实验一:编程神器VSCode 在这次实验中,我学习到了如何使用VSCode来编程,体会到了VSCode的强大,学会了VSCode常用的快捷键,如Ctrl+Shift+P,Ctrl+Shift+X等,了解了VSCode的优秀特性: 1.简洁而聚焦的产品定位，专注于开发者最常用的功能。 2.进程隔离的插件模型，支持丰富插件的同时,保障了主程序的稳定。 3.UI渲染与业务逻辑隔离，获得一致的用户体验。 4.用LSP和DAP协议来进行代码理解与调试，做到了节制的设计,合理的抽象,周全的细节。 5.强大的
【编译原理】实验一：熟悉实验环境VSCode并完成正则表达式转换为NFA
LJR的博客
12-23 2300
vscode 编译原理 正则表达式 NFA DFA 非确定有穷自动机 Git Bash 克隆 自动化验证 编写一个FreeNFA函数，当在main函数的最后调用此函数时，可以将整个NFA的内存释放掉，从而避免内存泄露。 编写完代码之后可以对input2.txt到input5.txt中的算例进行一一验证，确保程序可以将所有形式的正则表达式转换为正确的NFA，并验证通过。 对文件中的正则表达式进行验证，并画出例7和例8的NFA状态图。 详细阅读re2post函数中的源代码，并尝试在源代码中添加注释。然后尝试为
计算机系统实验报告
m0_62466789的博客
03-08 573
一、WSL环境的安装 1.安装Windows Terminal 安装Windows Terminal可以使你的终端更加专业。在Windows Terminal里可以同时打开多个页面，同时可以调整字体的颜色和大小，视觉效果较Windows自带的终端更好。 2.激活Windows Subsystem for Linux(WSL) (1)激活WSL的功能 在具有管理员权限的PowerShell中输入一下命令来安装运行适用于Linux的Windows子系统（WSL）所需的全部内容 ..
《Go语言vscode环境配置》实验报告
weixin_37863947的博客
09-04 895
实验目的 基于云的服务计算的程序编写以GO语言较优，而上次实验中搭建私有云的Centos虚拟机和Windows系统需要配置相关go语言开发环境，此次实验即介绍如何在两个系统中搭建go语言环境 实验流程 安装Visual Code Studio 安装golang 安装git vscode安装go工具 实验内容 CentoS搭建GO语言环境 下载Visual Studio Code，命令行输入...
VSCode使用总结
DrGuCoding的博客
11-10 3671
VSCode使用总结
C# 第1次实验报告：熟悉Visual Studio环境
COCO56的博客
09-08 4172
文章目录一、 实验目的及要求二、实验内容（或实验原理、实验拓扑）三、实验设备与环境四、实验设计方案（包括实验步骤、设计思想、算法描述或开发流程等）五、实验结果（包括设计效果、测试数据、运行结果等）六、实验小结（包括收获、心得体会、注意事项、存在问题及解决办法、建议等）七、附录（包括作品、流程图、源程序及命令清单等） 一、 实验目的及要求 1．熟悉Visual Studio编译环境。 2．掌握创建控...
数据结构第一次上机实验报告
s_auer的博客
09-17 2042
数据结构顺序表上机作业报告

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值