题海让大学四年没有难题
白天模式登陆

题目详情

填空题 使用媒体查询和弹性盒子布局设计自适应导航,当小于800px时,内容为居中,当小于等于400px时,内容纵向排列,从上到下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: ( 1 );//去除项目列表符号 margin: 5px; text-align: center; } a{ text-decoration: none; color:white; text-align: right; } ul{ display: ( 2 );//设置容器布局方式 justify-content:( 3 ) ;//排列方式向行结束位置对齐 background-color: blue; } @media screen and (( 4 )){ //媒体查询小于800时 ul{ justify-content: space-between; } } @media screen and (max-width:400px){ ul{ flex-direction:( 5 ) ; //改变主轴方向为列方向 } } </style> </head> <body> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">学院概况</a></li> <li><a href="#">党的建设</a></li> <li><a href="#">教学系部</a></li> <li><a href="#">教学科研</a></li> <li><a href="#">学生工作</a></li> <li><a href="#">招生就业</a></li> </ul> </body> </html>

Bootstrap框架设计课程封面

学科：Bootstrap框架设计

时间：2024-01-08 13:34:47

相关题目

相关作业

题目1
填空题
HTML5文件读取接口,通过( )对象来读取本地存储的文件
题目2
填空题
使用媒体查询和弹性盒子布局设计自适应导航,当小于800px时,内容为居中,当小于等于400px时,内容纵向排列,从上到下. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } ul,li{ list-style: ( 1 );//去除项目列表符号 margin: 5px; text-align: center; } a{ text-decoration: none; color:white; text-align: right; } ul{ display: ( 2 );//设置容器布局方式 justify-content:( 3 ) ;//排列方式向行结束位置对齐 background-color: blue; } @media screen and (( 4 )){ //媒体查询小于800时 ul{ justify-content: space-between; } } @media screen and (max-width:400px){ ul{ flex-direction:( 5 ) ; //改变主轴方向为列方向 } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;学院概况&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;党的建设&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;教学系部&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;教学科研&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;学生工作&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;招生就业&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;
题目3
填空题
如果根元素的字体大小设置为16px,则3rem等于( )px
题目4
填空题
在拖曳操作中,图片和( )默认是可以拖曳的,它不需要添加draggable属性
题目5
填空题
( )是用固定的格子进行网页布局,是一种清晰、工整的设计风格
题目6
填空题
一个完整的拖曳效果是由( )和( )组成
题目7
填空题
利用栅格系统实现列的嵌套: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;./bootstrap-4.6.2-dist/css/bootstrap.min.css&quot;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;( 1 )&quot;&gt; //布局容器 &lt;div class=&quot;( 2 )&quot;&gt; //设置栅格系统的行 &lt;div class=&quot;col-md-4&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;( 3 )&quot;&gt;第一列&lt;/div&gt; &lt;div class=&quot;( 3 )&quot;&gt;第二列&lt;/div&gt;//在平板以上设备显示两列 &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-md-4&quot;&gt;第二列&lt;/div&gt; &lt;div class=&quot;col-md-4&quot;&gt;第三列&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
题目8
填空题
HTML5为window.navigator.onLine接口提供了( )事件,在用户网络连接时调用
题目9
填空题
Less变量的语法格式是_______变量名:值;
题目10
判断题
使用了媒体查询的页面,当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
A. 正确B. 错误
Copyright © 2022 津ICP备2021001502号