个人网站建设规划书大连开发区邮编

当前位置： 首页 > news >正文

个人网站建设规划书,大连开发区邮编,wordpress 多条件查询数据库,湖北十大建筑公司排名移动应用开发实验室web组大一下期末考核题解 jarringslee 文章目录 移动应用开发实验室web组大一下期末考核题解简答题1.为什么要清除浮动#xff0c;清除浮动的方法有哪些#xff1f;2.怎么实现左边宽度固定右边宽度自适应的布局#xff1f;3.讲讲flex:1#xff1b;4.怎么…移动应用开发实验室web组大一下期末考核题解 jarringslee 文章目录 移动应用开发实验室web组大一下期末考核题解简答题1.为什么要清除浮动清除浮动的方法有哪些2.怎么实现左边宽度固定右边宽度自适应的布局3.讲讲flex:14.怎么实现移动端适配不同设备 实践题5.网页布局6.动画制作7.动画制作8.动画制作 简答题 1.为什么要清除浮动清除浮动的方法有哪些 浮动是可以让块元素水平排列的属性在网页开发中很常用但是浮动最大特点就是浮动的元素会脱标脱离标准流的控制不再占用标准流的位置。如果下面有标准流元素就会重叠上来。而且如果某个父级元素的子级元素是浮动元素若父级元素高度为0即产生塌陷问题也会脱标下面的元素会重叠上来影响布局效果。 所以在实际开发过程当中我们一般都会清除浮动。下面是几种常见的清除浮动的方法 额外标签法 在父元素内容的最后添加一个空的块级元素如div或p设置CSS属性clear:both / left / right 专门用来清除浮动的属性分别是清除所有 / 左侧 / 右侧浮动的属性直接用both就行 .clear{clear: both;}div classbox1div classdd111/divdiv classdd222/divdiv classclear/div /div 单伪元素法 利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。 .clearfix:after{content:;display:block;height: 0;clear:both;visibility: hidden;} .clearfix{ zoom: 1;}常用双伪元素法 在父元素中加上类选择器clearfix既清除浮动影响也解决了塌陷问题。早期被用作图文混排。 .clearfix::before, /*before元素解决外边界塌陷问题 */ .clearfix:after{content:;display:table; }
.clearfix::after{ /after元素清除浮动影响/clear:both; }overflow 父元素添加css属性overflow:hidden / auto / scroll任一即可 添加overflow属性命令浏览器检查父级元素的尺寸触发 BFC块级格式化上下文从而让浮动元素参与父元素高度计算避免高度塌陷。但它也会隐藏溢出内容。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标。但是有一个小缺点上面也提到了就是这个方法无法处理溢出问题。
我的答案 浮动的元素会脱标即文档流中不再保留该元素的位置下面的元素会重叠上来影响布局效果。 清除方法 额外标签法给包含浮动的子元素的父元素最下方添加空的块级元素用来占位单伪元素法利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。代码在上面双伪元素法与单伪元素法相比既清除浮动影响也解决了塌陷问题。代码在上面overflow父元素添加属性overflow:hidden / auto / scroll任一即可添加overflow属性命令浏览器检查父级元素的尺寸。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标但是无法处理溢出问题。 2.怎么实现左边宽度固定右边宽度自适应的布局 左边固定宽度比较简单关键在于右边实现自适应布局。我的想法是让右边元素的宽度根据浏览器视口变化自动调整可以用比例单位或者自适应方式实现。 首先在我们所学的基础布局中flex布局有自动占满剩余空间的功能。我们可以不设置右边元素的宽度这样浏览器就会自动占满剩余空间。 示例 /用flex布局实现左边固定右边自适应/ style.container {display: flex;}.left {width: 200px;background-color: lightgray;}.right {flex: 1;background-color: lightblue;} /stylediv classcontainerdiv classleft左边/divdiv classright右边/div /div其次因为移动端布局中我们经常需要解决视口大小不一的问题所以在移动端布局中也有很多种布局方式可以实现宽度自适应的布局。下面是几种可以解决该问题的常见的移动端布局模式 rem单位remroot em的基准是相对于html元素的字体大小父元素是html。比如根元素html设置font-size为12px非根元素设置width为2em则表示24px。通过这种方式可以根据浏览器窗口的比例控制元素的宽和高从而达到自适应的布局。 示例 /用rem单位实现左边固定右边自适应/ stylehtml {font-size: 16px; /* 1rem 16px /}.container {display: flex;}.left {width: 2.5rem; / 相当于 40px */background-color: lightgray;}.right {flex: 1;background-color: lightblue;} /stylediv classcontainerdiv classleft左边/divdiv classright右边/div /div响应式布局媒体查询media 可以针对不同的屏幕尺寸设置不同的样式当重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面同样也能达到我们的目的。 示例 /用响应式布局实现左边固定右边自适应/ style.container {display: flex;}.left {width: 30%;background-color: lightgray;}.right {width: 70%;background-color: lightblue;}/* 小屏幕下左右变上下 */media screen and (max-width: 600px) {.container {flex-direction: column;}.left, .right {width: 100%;}} /stylediv classcontainerdiv classleft左边/divdiv classright右边/div /div视口标签这也是响应式布局的基础。meta nameviewport标签可以控制页面在移动端的缩放行为。 示例 /用视口标签实现左边固定右边自适应/ head meta nameviewport contentwidthdevice-width, initial-scale1.0 /headstyle.container {display: flex;}.left {width: 80px;background-color: lightgray;}.right {flex: 1; /* 或者 width: calc(100% - 80px); /background-color: lightblue;} /stylediv classcontainerdiv classleft左边/divdiv classright右边/div /div我的答案 Flex布局父元素设置 display: flex左边设定固定宽度右边设置 flex: 1自动填充剩余空间。 rem单位布局通过 html 设置 font-size左边用 rem 表示固定宽度右边仍使用 flex: 1 自适应。 响应式布局媒体查询使用百分比宽度配合 media 实现不同屏幕下的适配如在窄屏幕下变为上下排列。 视口标签在 HTML 中加入 meta nameviewport确保页面在移动端正确缩放配合其他布局单位实现完整的移动端适配。 3.讲讲flex:1 简单考察了众多flex属性中的一个基础的小问题比较简单也没什么可细说的。要是硬扣的话flex: 1;是 flex-grow, flex-shrink, flex-basis 的简写形式等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;它的意思是先不占据固定空间basis为0然后按照份数比例去平分剩余空间。 但是这道题考察重点是理解这个数字——代表子元素所占剩余空间的比例。 我的答案 Flex布局中flex属性一般用于项目子元素中代表该元素占剩余空间的份数比例。如某个父元素的三个子元素flex值分别为1、2、3那么这三个子元素所占父元素剩余空间比例为1:2:3。 4.怎么实现移动端适配不同设备 移动端设备尺寸各不相同我们要通过响应式设计让网页在不同设备上都能保持合理的排版和布局不会出现错位、溢出、字体过大或过小等问题。 使用 Flex 或 Grid 布局flex或grid 布局可以让元素自动换行、自动拉伸适合各种尺寸的屏幕减少死板的固定宽度。设置视口标签在 head 里添加视口标签告诉浏览器要以设备的宽度进行渲染而不是默认的 980px。使用响应式媒体查询media根据不同的屏幕宽度设置不同的样式比如小屏幕使用更小的字号、布局改为上下排列等。使用视口单位vw、vhvw 表示视口宽度的百分比vh 表示视口高度的百分比常用于字体、图片、间距等的自适应。使用百分比单位比如用 width: 50%可以让元素根据父元素的大小自动调整避免固定像素在小屏幕上溢出。 我的答案 使用 flex 或 grid 布局自动适配不同宽度设置视口标签 meta viewport使用媒体查询 media使用视口单位vw、vh用百分比单位代替固定像素。 实践题 5.网页布局 考察了传统的网页布局html和css的基本功。主要考察点有 块级元素的布局和浮动盒子模型中内外边距的布局多行文字溢出部分用省略号代替盒子模型的修饰属性如圆角border-radius、阴影box-shadow。 元素排布比较简单我们思路也比较清晰明了。 我的制作采用宽度适应页面的方式即三个大盒子的宽度设置为0。我们也可以让总体布局有一个具体宽度并居中只需设置类选择器.w { width: 1200px; margin: auto;}并添加到三个大盒子的class中即可。 首先是三个大盒子header、body、和footer来进行整体排布。 header中我们主要使用div标签包裹左边的文字并让它左浮动用无序列表需要清除基本样式来写右侧的导航栏其中总列表ul需要右浮动分条li需要改变显示模式为行内快模式。 body中我们用刚才考察到的flex:1;来布局三个小盒子每个小盒子例有四个小盒子一个灰色纯色盒子、一个标题、一个内容、一个结尾信息设置好他们的字体大小、内外边距、排布位置让他们自然垂直排列即可。 footer就简单了。设置盒子和居中的文字即可。 另外body的布局的第一个盒子中还有一个重点多行文字溢出部分用省略号代替我认为这是这道题最难的点。因为我没写出来。。这里扯出来重点讲讲 单行文本溢出显示省略号 强制让文本在一行内显示 white-space:nowrap;默认为normal自动换行 超出部分隐藏 overflow:hidden; 文字省略号代替超出部分 text-overflow:ellipsis;(默认为normal自动换行) 多行文本溢出显示省略号 多行文本溢出显示省略号有较大兼容性问题适合于WebKit浏览器或移动端移动端大部分是WebKit内核。同时也需要严格控制盒子的宽度 超出部分隐藏 overflow:hidden; 使用WebKit的弹性盒子模型 display: -webkit-box; 限制在一个块元素显示的文本的行数为n行 -webkit-line-clamp: (数字无单位); 设置子元素的排列方式为垂直排列 -webkit-box-orient: vertical; 我的代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第五题/titlestyle{margin: 0;padding: 0;box-sizing: border-box;}a{/* color: #fff; /text-decoration: none;}li{list-style: none;}.head{/ width: 1600px; /height: 100px;border-radius: 20px;background-color: rgb(54, 54, 54);}.headleft{margin-left: 40px;float: left;color: #fff;font-size: 30px;line-height: 100px;}.headright{float:right;}.headright ul li{display: inline-block;color: #fff;font-size: 30px;line-height: 100px;margin: 0 20px;}.headright ul li a{color: #fff;}.headright ul li a:hover{color: aqua;}.body{display: flex;height: 500px;/ background-color: pink; /padding: 30px 20px;}.content{flex:1;height: 440px;background-color: #fff;margin: 0 20px;border-radius: 15px;box-shadow: 3px 3px 1px 1px rgba(0,0,0,0.3);padding-top: 20px;}.grey{height: 200px;background-color: grey;margin: 0 20px;border-radius: 20px;}.body .content h2{margin-left: 20px;margin-top: 20px;font-size: 35px;}.body .content .p1{margin:0 20px ;margin-top: 5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.body .content .p2{ margin:0 20px ;font-size: 16px;margin-top: 30px;color: grey;}.foot{margin-top: 30px;height: 60px;border-radius: 20px;background-color: rgb(166, 166, 166);text-align: center;line-height: 60px;font-size: 20px;color: rgb(62, 61, 61);}/style /head bodydiv classheaddiv classheadleft考核/divdiv classheadrightullia href首页/a/lilia href文章/a/lilia href关于我们/a/li/ul/div/divdiv classbodydiv classcontentdiv classgrey/divh2标题1/h2p classp1这是一段摘要内容。描述当前简要的信息。这是一段摘要内容这是一段摘要内容。描述当前简要的信息。这是一段摘要内容这是一段摘要内容。描述当前简要的信息。这是一段摘要内容/pp classp2发布于 2025-6-1·阅读123/p/divdiv classcontentdiv classgrey/divh2标题2/h2p classp1这是一段摘要内容。描述当前简要的信息。这是一段摘要内容/pp classp2发布于 2025-6-1·阅读123/p/divdiv classcontentdiv classgrey/divh2标题3/h2p classp1这是一段摘要内容。描述当前简要的信息。这是一段摘要内容/pp classp2发布于 2025-6-1·阅读123/p/div/divdiv classfootWeb第一次方向考核/div /body /html效果展示 6.动画制作 鼠标悬停在盒子上盒子中的数字就会从1快速上移至数字9鼠标移开后又会以同样的方式回到数字1。很简单的一个内容上移的视觉效果的制作。 我的思路是在页面中竖直排布1到9并给它们设置一个长度和宽度只能包裹住数字1的盒子并用overflow隐藏其他部分。在鼠标悬停时我们设置2D效果translate让盒子竖直上移一段距离使盒子可视区域刚好包裹住数字9并在盒子中设置动画效果动画属性就一个可以写height也可以写all时间无所谓动画方式就是默认的ease。 我的代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第六题/titlestyle.maindiv{font-size:50px;text-align: center;}.main{/ margin: 300px auto; /overflow: hidden;width: 60px;height: 80px;background-color: rgb(62, 255, 75);border-radius: 15px; }.in{transition: all 2s ease-in-out;}.main:hover .in{transform: translate(0,-580px);}/style /head bodydiv classmaindiv classindiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/divdiv9/div/div/div /body /html效果展示 7.动画制作 屏幕中央有一排竖条在按规律持续缩放形成波纹的效果。 我们在屏幕中央摆放一排竖条设置好宽高、边距和颜色、圆角等属性然后给他们添加动画效果 我们发现所有竖条的缩放大小和周期完全相同只是运动状态在时间上不同。我们可以先统一给它们设置缩放动画再安排不同的延迟开始时间来达到此效果。 这里我们用keyframes来制作动画在50%中间时刻设置竖直方向的缩放比例开始和结束都是不变竖直方向缩放比例为1。 我的代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第七题/titlestyle.main{margin: 200px auto;/ background-color: pink; /width: 80px;height: 130px;}.main div{float: left;margin-left: 2px;height: 80px;width: 8px;border-radius: 3px;background-color: red;}.line1{ animation: move 1.75s linear 0s infinite;}.line2{animation: move 1.75s linear .25s infinite;}.line3{animation: move 1.75s linear .5s infinite;}.line4{animation: move 1.75s linear .75s infinite;}.line5{animation: move 1.75s linear 1s infinite;}.line6{animation: move 1.75s linear 1.25s infinite;}.line7{animation: move 1.75s linear 1.5s infinite;}.line8{animation: move 1.75s linear 1.75s infinite;}keyframes move {0%{transform: scaleY(0.08);}50%{transform: scaleY(1);}100%{transform: scaleY(0.08);} }/style /head bodydiv classmaindiv classline1/divdiv classline2/divdiv classline3/divdiv classline4/divdiv classline5/divdiv classline6/divdiv classline7/divdiv classline8/div/div /body /html效果展示 8.动画制作 和上一道题的大方向基本相同给盒子中水平排列的条状子元素添加不同的动画效果并形成动态几何图形。 这道题可以有很多种方法让子元素形成那样的运动规律在这里我使用了最原始的办法用keyframes设置不同的关键帧、元素状态来模拟爱心的变化。 首先做好准备工作写好标题、放好包着动画的大盒子设置好宽高和边距。 我们可以看到动画的开始和末尾都是一排完全相同的点状所以我们先设置好0%和100%的状态。 再看每个子元素自身的运动状态都是运动到自身最长的长度再回去。所以我们可以设置中间的状态暂时无法确定具体时间为其最终形态。由于以始末状态为基准的话子元素最终形态的向上和向下伸长的长度不同我们在这里可以提前测量好最终长度再设置margin-top值把它下压到相应的位置来模拟上下伸长长度不同的效果。 题目中是九个子元素但是是轴对称图形所以一共有5种不同程度的最终形态我们只需要做出五个关键帧动画再设置不同的延迟时间即可。 我们接下来观察整体运动规律。所有的子元素依次变换到最大形态等到最后一个子元素完成后再又依次返回到起始状态。有两个需要解决的问题。首先模拟依次开始动画状态我们在元素内声明动画的时候依次设置间隔时间相同的延迟开始时间即可其次第一个子元素会等到最后一个子元素变成最大形态之后才开始缩小我们其实可以看做在一个完整的动画过程中有四个部分第一部分是动画伸长第二部分是伸长后保持状态等待后面子元素全部达到最大状态的时间第三部分是动画缩短第四部分依旧是保持状态等待其他子元素复原。这四个状态我们可以全部设置在关键帧中并通过计算来控制总时间和延迟时间。 我的代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第八题/titlestyle{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: rgb(47, 47, 47);}.title{height: 80px;margin: 0 auto;padding-top: 50px;color: aqua;font-size: 10px;text-align: center;}.main{margin: 10px auto;width: 90px;height: 200px;}div[class^line]{float: left;margin-left: 5px;width: 5px;border-radius: 40px;margin-top: 35px;height: 5px;}.line1{background-color: red;animation: move1 7s linear 0s infinite;}.line2{background-color: aqua;animation: move2 7s linear .25s infinite;}.line3{background-color:peachpuff ;animation: move3 7s linear .5s infinite;}.line4{background-color: pink;animation: move4 7s linear .75s infinite;}.line5{background-color: yellow;animation: move5 7s linear 1s infinite;}.line6{background-color: pink;animation: move4 7s linear 1.25s infinite;}.line7{background-color:peachpuff ;animation: move3 7s linear 1.5s infinite;}.line8{background-color: aqua;animation: move2 7s linear 1.75s infinite;}.line9{background-color: red;animation: move1 7s linear 2s infinite;} keyframes move1{0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 22px;height:20px;}}keyframes move2 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 10px;height: 45px;}}keyframes move3 {0%, 70%, 100%{margin-top: 35px;height: 5px;;}15%, 55%{margin-top: 5px;height: 60px;}}keyframes move4 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 10px;height: 60px;}}keyframes move5 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 15px;height: 65px;}}/style /headbodydiv classtitle爱心怦怦跳/divdiv classmaindiv classline1/divdiv classline2/divdiv classline3/divdiv classline4/divdiv classline5/divdiv classline6/divdiv classline7/divdiv classline8/divdiv classline9/div/div /body /html效果展示