个人中心
gpt4 book ai didi

html - 如何使此 html 代码和 css 出现在移动应用程序中？

转载 作者：太空宇宙 更新时间：2023-11-04 12:07:29 24 4
gpt4 key购买 nike

这是我开始的 html 和 css，抱歉编辑不当。我真的很想知道如何制作移动应用程序。**我应该添加什么代码才能拥有移动大小的应用程序在 web 中打开时我不需要调整它的大小？那我该怎么做才能让它在 css 中响应呢？谢谢**

@charset "utf-8";
body {
	width: 960px;
}
.wrapper{
	text-align: center;
	width: 99%;
	position: absolute;
}
.header{
	background-color: #ffffff;
}

.header img {
	width: 360px;
}

#nav {
	background-color: black;
	width: 100%;
	font-size: 1em;
	border-top-width: medium;
	border-top-style: groove;
	border-bottom-style: groove;
	border-bottom-width: medium;
}
#nav ul {
	list-style: none;
	display: block;
	font-size: larger;
}
#nav ul li {
  display: inline-block;
}
#nav ul {
  text-align: center;
}
#nav ul li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	text-transform: uppercase;
	position: relative;
}
#nav ul li a:hover {
	color: #1E5BD4;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#nav ul li a.active {
	text-decoration:underline;
	color: #EDF0BA;  
}
.how, .about{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	margin-left: 10%;
	margin-right: 10%;
	background-color: white;
	text-align: left;
	color: black;
}
.sectiontitle{
	text-align: center;
	color: black;
	text-shadow: 1px 1px 2px #767676;
}
.footer{
	background-color: black;
	width: 100%;
	border-style: groove hidden hidden;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 1em;
	color: #FFFFFF;
	font-variant: small-caps;
	vertical-align: middle;
}

.addnotes {
	float: left;
	padding-left: 2%;
	font-color: black;
}

.listnotes {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.listnotes li {
	background: url('noteicon.png') no-repeat;
	width: 220px;
	height: 135px;
	margin-left: 45%;
	padding-top: 5%;
	margin-bottom: 10px;
}

.noteTitle {	
	float: left;
	padding-left: 2%;
	color: black;
}

.createcontent {
	float: right;
	padding-right: 25%;
	width: 50%;
	margin: 0 auto;
}

.definition {
	padding-top: 10%;
}

.enumeration {
	padding-top: 15%;
}

#titletextbox {
    background: transparent;
    border: none;
	width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="wrapper">
  <div class="header" id="header">
    <div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div>
  </div>
  <div class="navigation" id="nav">
    <ul>
      <li><a href="index.html" class='active'><span>Home</span></a></li>
      <li><a href="notes.html"><span>Notes</span></a></li>
      <li><a href="exam.html"><span>Exams</span></a></li>
    </ul>
  </div>
  <span class="divider"></span>
  <div class="homecontent">
    <h2 class="sectiontitle">About Test Your Notes!:</h2>
    <section class="about">
    TestYourNotes is a web application that will surely help students 
	boost their scores for their quizzes and exams. 
	TestYourNotes lets users take down notes with two different categories, 
	namely, Definition of Terms and Enumeration. 
	After saving their notes, they can easily review their notes through 
	the view function and also make a mock test/questionnaire as a reviewer 
	using the notes they have created to test their understanding 
	about what they&#146ve taken down through the Generate exam function.
    </section>
    <h2 class="sectiontitle">How To Use:</h2>
    <section class="how">
    <h3>To write notes</h3>
	<ul>
		<li> Navigate to the NOTES page </li>
		<li> Click add + a note </li>
		<li> Edit title of the note on the left side of the page </li>
		<li> Add an item depending on the category you want to add (Definition of terms and/or Enumeration)</li>
		<li> If you choose to add an item for Definition of terms category, click add 
			 new item to define a term. Simply type the term you want to define and its definition.
			 After adding all the terms you want, click save. </li>
		<li> If you choose to add an item for Enumeration, click add new Enumeration of items
			 Simply type the classification of the items you will enumerate and type all the items
			 of that classification. To add a new item for that classification just click enter. 
			 After adding all the classification you want, click save. </li>
	</ul>
	<h3>To view notes</h3>
	<ul>
		<li>Click the view notes below the name and date of the notes you have saved.</li>
	</ul>
	<h3>To generate an exam for a note</h3>
	<ul>
		<li>Click the generate exam below the name and date of the notes you have saved.</li>
		<li>Upon clicking generate exam button, a dialog box will appear asking what
			you want to name your generated exam. Type the name you want and then 
			click generate</li>
	</ul>
	<h3>To answer an exam</h3>
	<ul>
		<li>Click the title of the exam you want to answer.</li>
		<li>After answering all the items simply click submit exam</li>
		<li>After clicking submit exam, your score will be shown immediately.</li>
	</ul>
    </section>
  </div>
  <div class="footer">
  	<h3 class="copyright">Copyright</h3>
  </div>
</div>
</body>
</html>

最佳答案

如果您想要一个移动应用程序，您需要使用适合您选择的操作系统/设备的编程语言来创建一个移动应用程序。然后，您可以使用 WebView 在应用程序中显示网络内容。看看用于移动应用程序开发的 ide 作为一个简单的开始。

要创建在移动设备上显示良好的响应式网站，请使用媒体查询。您可以在整个商店找到相关信息。只需做一个 search for css @media queries .

基本媒体查询的示例如下:

@media screen and (max-width:640px){
/* mobile devices with a max screen width of 640px */
p{color:#f00;}
}

关于html - 如何使此 html 代码和 css 出现在移动应用程序中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29269199/

24 4 0
文章推荐： javascript - jQuery addClass 不适用于页面加载
文章推荐： c++ - PPL - 许可证和链接信息
文章推荐： java - Jackson Deserializer 如何在考虑 @JsonFormat 注释的情况下递归地反序列化字段？
文章推荐： c++ - 文件系统::路径构造函数调用失败
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com