Adobe XD 响应 html
Adobe XD to responsive html
我正在做一个项目，我收到了 Adobe Xd 格式的所有设计。我通常从事后端部分以及数据库和服务器部署。但是这里我也需要在设计部分下功夫。
我使用了 adobe Xd webexport 插件并将设计转换为 html 格式。但真正的问题出现在手机和平板电脑的响应部分。
我响应这些 html 页面的快速解决方案是什么？
这是我在 adobe Xd 中使用 webexport 转换后收到的示例代码 html。
非常感谢对此事的一些想法。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1 Landing Page</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: ID1_Landing_Page;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#ID1_Landing_Page {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(252,248,238,1);
overflow: hidden;
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#Screen_Shot_2020-10-26_at_3244 {
position: absolute;
width: 399px;
height: 155px;
left: 33px;
top: 37px;
overflow: visible;
}
#Home {
left: 620px;
top: 86px;
position: absolute;
overflow: visible;
width: 65px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(115,147,97,1);
}
#Products {
left: 768px;
top: 86px;
position: absolute;
overflow: visible;
width: 94px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 16_Products_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Companies {
left: 947px;
top: 86px;
position: absolute;
overflow: visible;
width: 118px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 19_Companies_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#LoginSignup {
left: 1457px;
top: 88px;
position: absolute;
overflow: visible;
width: 140px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 3_User_Log_In.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#About_us {
left: 1148px;
top: 88px;
position: absolute;
overflow: visible;
width: 96px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 32_About_Us.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Blog {
left: 1326px;
top: 88px;
position: absolute;
overflow: visible;
width: 48px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 29_Blog.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Ellipse_62 {
fill: rgba(115,147,97,1);
}
.Ellipse_62 {
position: absolute;
overflow: visible;
width: 13px;
height: 13px;
left: 646px;
top: 124px;
}
#Component_10__1 {
position: absolute;
width: 222px;
height: 33px;
left: 1664px;
top: 86px;
overflow: visible;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 31_Search_Page.html;
cursor: pointer;
}
#Rectangle_1 {
fill: rgba(255,255,255,1);
stroke: rgba(45,93,19,0.565);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 222px;
height: 33px;
left: 0px;
top: 0px;
}
#loupe {
position: absolute;
width: 17px;
height: 17px;
left: 13px;
top: 8px;
overflow: visible;
}
#Group_24 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Group_23 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_87 {
fill: rgba(45,93,19,1);
}
.Path_87 {
overflow: visible;
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Group_26 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 11.656px;
top: 11.656px;
overflow: visible;
}
#Group_25 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_88 {
fill: rgba(45,93,19,1);
}
.Path_88 {
overflow: visible;
position: absolute;
width: 5.346px;
height: 5.344px;
left: -0.002px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Search {
left: 40px;
top: 6px;
position: absolute;
overflow: visible;
width: 53px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112,112,112,1);
}
#Welcome__To_Captivist {
left: 128px;
top: 400px;
position: absolute;
overflow: visible;
width: 482px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81,141,27,1);
}
#Were_here_to_help_you_make_mor {
left: 128px;
top: 625px;
position: absolute;
overflow: visible;
width: 545px;
height: 121px;
line-height: 40px;
margin-top: -5px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45,93,19,1);
}
#E28094PngtreeE28094world20food {
position: absolute;
width: 957.689px;
height: 722.28px;
left: 863px;
top: 202px;
overflow: visible;
}
#Line_1 {
fill: transparent;
stroke: rgba(45,93,19,0.275);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_1 {
overflow: visible;
position: absolute;
width: 1293px;
height: 1px;
left: 593.5px;
top: 163.5px;
transform: matrix(1,0,0,1,0,0);
}
</style>
</head>
<body>
<div id="ID1_Landing_Page">
<img id="Screen_Shot_2020-10-26_at_3244" src="Screen_Shot_2020-10-26_at_3244.png" srcset="Screen_Shot_2020-10-26_at_3244.png 1x, Screen_Shot_2020-10-26_at_3244@2x.png 2x">
<div id="Home">
<span>Home</span>
</div>
<div onclick="application.goToTargetView(event)" id="Products">
<span>Products</span>
</div>
<div onclick="application.goToTargetView(event)" id="Companies">
<span>Companies</span>
</div>
<div onclick="application.goToTargetView(event)" id="LoginSignup">
<span>Login/Signup</span>
</div>
<div onclick="application.goToTargetView(event)" id="About_us">
<span>About us</span>
</div>
<div onclick="application.goToTargetView(event)" id="Blog">
<span>Blog</span>
</div>
<svg class="Ellipse_62">
<ellipse id="Ellipse_62" rx="6.5" ry="6.5" cx="6.5" cy="6.5">
</ellipse>
</svg>
<div onclick="application.goToTargetView(event)" id="Component_10__1" class="Component_10___1">
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="16.5" ry="16.5" x="0" y="0" width="222" height="33">
</rect>
</svg>
<div id="loupe">
<div id="Group_24">
<div id="Group_23">
<svg class="Path_87" viewBox="0 0 14.973 14.973">
<path id="Path_87" d="M 7.48643970489502 0 C 3.35852837562561 0 0 3.35852837562561 0 7.48643970489502 C 0 11.61458301544189 3.35852837562561 14.97287940979004 7.48643970489502 14.97287940979004 C 11.61458301544189 14.97287940979004 14.97287940979004 11.61458301544189 14.97287940979004 7.48643970489502 C 14.97287940979004 3.35852837562561 11.61458206176758 0 7.48643970489502 0 Z M 7.48643970489502 13.59079933166504 C 4.120539665222168 13.59079933166504 1.382112741470337 10.85237216949463 1.382112741470337 7.486472606658936 C 1.382112741470337 4.120572566986084 4.120539665222168 1.382112860679626 7.48643970489502 1.382112860679626 C 10.85233783721924 1.382112860679626 13.59076690673828 4.120539665222168 13.59076690673828 7.48643970489502 C 13.59076690673828 10.85233783721924 10.85233783721924 13.59079933166504 7.48643970489502 13.59079933166504 Z">
</path>
</svg>
</div>
</div>
<div id="Group_26">
<div id="Group_25">
<svg class="Path_88" viewBox="351.046 351.046 5.344 5.344">
<path id="Path_88" d="M 356.1875 355.2103271484375 L 352.2254333496094 351.2482604980469 C 351.9554748535156 350.9783020019531 351.5182495117188 350.9783020019531 351.2482604980469 351.2482604980469 C 350.9783020019531 351.5180053710938 350.9783020019531 351.9556884765625 351.2482604980469 352.2254333496094 L 355.2103271484375 356.1875 C 355.3453063964844 356.3224792480469 355.5220031738281 356.3899841308594 355.6989135742188 356.3899841308594 C 355.8755798339844 356.3899841308594 356.052490234375 356.3224792480469 356.1875 356.1875 C 356.4574890136719 355.9177551269531 356.4574890136719 355.4800720214844 356.1875 355.2103271484375 Z">
</path>
</svg>
</div>
</div>
</div>
<div id="Search">
<span>Search</span>
</div>
</div>
<div id="Welcome__To_Captivist">
<span>Welcome <br/>To Captivist</span>
</div>
<div id="Were_here_to_help_you_make_mor">
<span>We’re here to help you make more informed decisions about consumer decisions.</span>
</div>
<img id="E28094PngtreeE28094world20food" src="E28094PngtreeE28094world20food.png" srcset="E28094PngtreeE28094world20food.png 1x, E28094PngtreeE28094world20food@2x.png 2x">
<svg class="Line_1" viewBox="0 0 1293 1">
<path id="Line_1" d="M 1293 0 L 0 0">
</path>
</svg>
</div>
</body>
</html>
我会建议您学习一些前端技术，例如 html、CSS 和 bootstrap，因为它确实对您有帮助。
你可以使用我的这个小作品，也许稍后我会更新它
<script>
let menuToggle = document.getElementById("toggle-menu");
let x = document.getElementByClassName("navbar navbar-tab");
let y = document.getElementByClassName("searchForm");
function toggleBar(){
x.style.display = "block";
y.style.display = "block";
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgba(252, 248, 238, 1);
font-size: 14px;
font-family: " Lato", sans-serif;
}
#main-header {
width: 100%;
height: 80px;
}
.container-fluid {
max-width: 1300px;
margin: auto;
padding: 0 25px;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
margin-top: 35px;
}
.logo {
position: absolute;
left: 60px;
}
.logo .navbar-brand {
width: 150px;
max-height: 60px;
}
.img-fluid {
width: 100% !important;
}
.navbar .toggle-bar {
width: 60px;
height: 60px;
flex: 1;
text-align: right;
display: none;
margin-right: 30px;
}
.navbar .toggle-bar .fa-bars {
font-size: 20px;
color: rgba(81, 141, 27, 1);
}
.navbar-tab {
flex: 1;
text-align: right;
list-style-type: none;
}
.navbar-tab::before {
content: "";
position: absolute;
height: 1px;
background-color: rgba(46, 107, 13, 0.275);
width: 65%;
margin-top: 50px;
}
.navbar-tab .nav-item {
display: inline-block;
margin-right: 30px;
}
.navbar-tab .nav-item .nav-link {
text-decoration: none;
color: rgba(112, 112, 112, 1);
font-size: 18px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
}
.navbar-tab .nav-item.active .nav-link {
color: rgba(115, 147, 97, 1);
}
.active::before {
content: "";
border-radius: 50%;
padding: 4px;
position: absolute;
top: 87px;
background: rgba(115, 147, 97, 1);
margin-left: 24px;
}
.searchForm input {
border: 1px solid rgba(45, 93, 19, 0.565);
border-radius: 50px;
width: 222px;
height: 33px;
padding-left: 30px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112, 112, 112, 1);
}
.searchForm input:focus {
outline: none;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: 55px;
right: 20em;
width: 33px;
height: 33px;
}
.searchForm .btn-search .fa-search {
font-family: Lato;
font-size: 14px;
font-weight: normal;
font-style: normal;
color: rgba(45, 93, 19, 0.565);
}
.container {
max-width: 1080px;
margin: auto;
padding: 0px 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.hero .hero-text {
position: relative;
top: 120px;
}
.hero .hero-text h2 {
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81, 141, 27, 1);
margin-left: -20px;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45, 93, 19, 1);
}
@media only screen and (max-width: 1024px) {
.navbar .toggle-bar {
display: block;
}
.navbar .navbar-tab,
.searchForm {
position: absolute;
top: 120px;
right: 70px;
display: none;
}
.searchForm input {
margin-top: -10px;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: -9px;
right: 190px;
width: 33px;
height: 33px;
}
.navbar-tab::before {
width: 100%;
}
.active::before {
top: 25px;
}
.hero .hero-text {
left: 50px;
}
}
/* media query for less than 600 */
@media only screen and (max-width: 600px) {
.navbar {
margin-top: 20px;
}
.logo {
left: 20px;
top: 30px;
}
.navbar .toggle-bar {
margin-right: 0px;
color: rgba(81, 141, 27, 1);
}
.row {
text-align: center;
}
.col-2,
.col-3,
.col-4 {
flex-basis: 600px;
}
.hero .hero-text {
text-align: center;
left: 0;
top: 80px;
}
.hero .hero-text h2 {
font-weight: bold;
font-size: 40px;
color: rgba(81, 141, 27, 1);
text-align: center;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(45, 93, 19, 1);
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing page 1</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- <link rel="stylesheet" href="./css/style.css" /> -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<header id="main-header">
<div class="container-fluid">
<nav class="navbar">
<div class="logo">
<a href="/index.html" class="navbar-brand"
><img src="./images/logo.png" alt="logo" class="img-fluid"
/></a>
</div>
<a href="" class="toggle-bar" onclick="toggleBar()" id="toggle-menu">
<i class="fa fa-bars"></i>
</a>
<ul class="navbar-tab" >
<li class="nav-item active">
<a href="./index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="./product.html" class="nav-link">products</a>
</li>
<li class="nav-item">
<a href="./companies.html" class="nav-link">companies</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">about us</a>
</li>
<li class="nav-item">
<a href="./blog.html" class="nav-link">blog</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">Login/Signup</a>
</li>
</ul>
<form action="" class="searchForm">
<input type="search" name="" id="" placeholder="Search" />
<button class="btn-search">
<span class="fa fa-search"></span>
</button>
</form>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="row">
<div class="col-2">
<div class="hero-text">
<h2>Welcome <br>To Captivist</h2>
<p>We’re here to help you make more informed decisions about consumer decisions.</p>
</div>
</div>
<div class="col-2">
<img src="" class="img-fluid">
</div>
</div>
</div>
</section>
</body>
</html>
所有元素都以绝对显示属性值定位。这会使您的内容变得僵化，无法适应您浏览设备的当前视口。这意味着此代码几乎不可能更改为响应式代码。
您可以尝试使用 Desech Studio 导入具有相对布局的 html/css。缺点是需要进一步调整代码来设置边距。
学习一点 html/css 的建议很好，尽管 Bootstrap 并不是真正需要的。您可以只使用 css 网格来定位元素，而无需 bootstrap 带来的额外负担。
我正在做一个项目，我收到了 Adobe Xd 格式的所有设计。我通常从事后端部分以及数据库和服务器部署。但是这里我也需要在设计部分下功夫。
我使用了 adobe Xd webexport 插件并将设计转换为 html 格式。但真正的问题出现在手机和平板电脑的响应部分。
我响应这些 html 页面的快速解决方案是什么？
这是我在 adobe Xd 中使用 webexport 转换后收到的示例代码 html。 非常感谢对此事的一些想法。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1 Landing Page</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: ID1_Landing_Page;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#ID1_Landing_Page {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(252,248,238,1);
overflow: hidden;
--web-view-name: 1 Landing Page;
--web-view-id: ID1_Landing_Page;
--web-scale-to-fit: true;
--web-scale-to-fit-type: fit;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#Screen_Shot_2020-10-26_at_3244 {
position: absolute;
width: 399px;
height: 155px;
left: 33px;
top: 37px;
overflow: visible;
}
#Home {
left: 620px;
top: 86px;
position: absolute;
overflow: visible;
width: 65px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(115,147,97,1);
}
#Products {
left: 768px;
top: 86px;
position: absolute;
overflow: visible;
width: 94px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 16_Products_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Companies {
left: 947px;
top: 86px;
position: absolute;
overflow: visible;
width: 118px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 19_Companies_Drop_Down.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#LoginSignup {
left: 1457px;
top: 88px;
position: absolute;
overflow: visible;
width: 140px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 3_User_Log_In.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#About_us {
left: 1148px;
top: 88px;
position: absolute;
overflow: visible;
width: 96px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 32_About_Us.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Blog {
left: 1326px;
top: 88px;
position: absolute;
overflow: visible;
width: 48px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 29_Blog.html;
cursor: pointer;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(112,112,112,1);
}
#Ellipse_62 {
fill: rgba(115,147,97,1);
}
.Ellipse_62 {
position: absolute;
overflow: visible;
width: 13px;
height: 13px;
left: 646px;
top: 124px;
}
#Component_10__1 {
position: absolute;
width: 222px;
height: 33px;
left: 1664px;
top: 86px;
overflow: visible;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: 31_Search_Page.html;
cursor: pointer;
}
#Rectangle_1 {
fill: rgba(255,255,255,1);
stroke: rgba(45,93,19,0.565);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 222px;
height: 33px;
left: 0px;
top: 0px;
}
#loupe {
position: absolute;
width: 17px;
height: 17px;
left: 13px;
top: 8px;
overflow: visible;
}
#Group_24 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Group_23 {
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_87 {
fill: rgba(45,93,19,1);
}
.Path_87 {
overflow: visible;
position: absolute;
width: 14.973px;
height: 14.973px;
left: 0px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Group_26 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 11.656px;
top: 11.656px;
overflow: visible;
}
#Group_25 {
position: absolute;
width: 5.344px;
height: 5.344px;
left: 0px;
top: 0px;
overflow: visible;
}
#Path_88 {
fill: rgba(45,93,19,1);
}
.Path_88 {
overflow: visible;
position: absolute;
width: 5.346px;
height: 5.344px;
left: -0.002px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
#Search {
left: 40px;
top: 6px;
position: absolute;
overflow: visible;
width: 53px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112,112,112,1);
}
#Welcome__To_Captivist {
left: 128px;
top: 400px;
position: absolute;
overflow: visible;
width: 482px;
white-space: nowrap;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81,141,27,1);
}
#Were_here_to_help_you_make_mor {
left: 128px;
top: 625px;
position: absolute;
overflow: visible;
width: 545px;
height: 121px;
line-height: 40px;
margin-top: -5px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45,93,19,1);
}
#E28094PngtreeE28094world20food {
position: absolute;
width: 957.689px;
height: 722.28px;
left: 863px;
top: 202px;
overflow: visible;
}
#Line_1 {
fill: transparent;
stroke: rgba(45,93,19,0.275);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_1 {
overflow: visible;
position: absolute;
width: 1293px;
height: 1px;
left: 593.5px;
top: 163.5px;
transform: matrix(1,0,0,1,0,0);
}
</style>
</head>
<body>
<div id="ID1_Landing_Page">
<img id="Screen_Shot_2020-10-26_at_3244" src="Screen_Shot_2020-10-26_at_3244.png" srcset="Screen_Shot_2020-10-26_at_3244.png 1x, Screen_Shot_2020-10-26_at_3244@2x.png 2x">
<div id="Home">
<span>Home</span>
</div>
<div onclick="application.goToTargetView(event)" id="Products">
<span>Products</span>
</div>
<div onclick="application.goToTargetView(event)" id="Companies">
<span>Companies</span>
</div>
<div onclick="application.goToTargetView(event)" id="LoginSignup">
<span>Login/Signup</span>
</div>
<div onclick="application.goToTargetView(event)" id="About_us">
<span>About us</span>
</div>
<div onclick="application.goToTargetView(event)" id="Blog">
<span>Blog</span>
</div>
<svg class="Ellipse_62">
<ellipse id="Ellipse_62" rx="6.5" ry="6.5" cx="6.5" cy="6.5">
</ellipse>
</svg>
<div onclick="application.goToTargetView(event)" id="Component_10__1" class="Component_10___1">
<svg class="Rectangle_1">
<rect id="Rectangle_1" rx="16.5" ry="16.5" x="0" y="0" width="222" height="33">
</rect>
</svg>
<div id="loupe">
<div id="Group_24">
<div id="Group_23">
<svg class="Path_87" viewBox="0 0 14.973 14.973">
<path id="Path_87" d="M 7.48643970489502 0 C 3.35852837562561 0 0 3.35852837562561 0 7.48643970489502 C 0 11.61458301544189 3.35852837562561 14.97287940979004 7.48643970489502 14.97287940979004 C 11.61458301544189 14.97287940979004 14.97287940979004 11.61458301544189 14.97287940979004 7.48643970489502 C 14.97287940979004 3.35852837562561 11.61458206176758 0 7.48643970489502 0 Z M 7.48643970489502 13.59079933166504 C 4.120539665222168 13.59079933166504 1.382112741470337 10.85237216949463 1.382112741470337 7.486472606658936 C 1.382112741470337 4.120572566986084 4.120539665222168 1.382112860679626 7.48643970489502 1.382112860679626 C 10.85233783721924 1.382112860679626 13.59076690673828 4.120539665222168 13.59076690673828 7.48643970489502 C 13.59076690673828 10.85233783721924 10.85233783721924 13.59079933166504 7.48643970489502 13.59079933166504 Z">
</path>
</svg>
</div>
</div>
<div id="Group_26">
<div id="Group_25">
<svg class="Path_88" viewBox="351.046 351.046 5.344 5.344">
<path id="Path_88" d="M 356.1875 355.2103271484375 L 352.2254333496094 351.2482604980469 C 351.9554748535156 350.9783020019531 351.5182495117188 350.9783020019531 351.2482604980469 351.2482604980469 C 350.9783020019531 351.5180053710938 350.9783020019531 351.9556884765625 351.2482604980469 352.2254333496094 L 355.2103271484375 356.1875 C 355.3453063964844 356.3224792480469 355.5220031738281 356.3899841308594 355.6989135742188 356.3899841308594 C 355.8755798339844 356.3899841308594 356.052490234375 356.3224792480469 356.1875 356.1875 C 356.4574890136719 355.9177551269531 356.4574890136719 355.4800720214844 356.1875 355.2103271484375 Z">
</path>
</svg>
</div>
</div>
</div>
<div id="Search">
<span>Search</span>
</div>
</div>
<div id="Welcome__To_Captivist">
<span>Welcome <br/>To Captivist</span>
</div>
<div id="Were_here_to_help_you_make_mor">
<span>We’re here to help you make more informed decisions about consumer decisions.</span>
</div>
<img id="E28094PngtreeE28094world20food" src="E28094PngtreeE28094world20food.png" srcset="E28094PngtreeE28094world20food.png 1x, E28094PngtreeE28094world20food@2x.png 2x">
<svg class="Line_1" viewBox="0 0 1293 1">
<path id="Line_1" d="M 1293 0 L 0 0">
</path>
</svg>
</div>
</body>
</html>
我会建议您学习一些前端技术，例如 html、CSS 和 bootstrap，因为它确实对您有帮助。
你可以使用我的这个小作品，也许稍后我会更新它
<script>
let menuToggle = document.getElementById("toggle-menu");
let x = document.getElementByClassName("navbar navbar-tab");
let y = document.getElementByClassName("searchForm");
function toggleBar(){
x.style.display = "block";
y.style.display = "block";
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgba(252, 248, 238, 1);
font-size: 14px;
font-family: " Lato", sans-serif;
}
#main-header {
width: 100%;
height: 80px;
}
.container-fluid {
max-width: 1300px;
margin: auto;
padding: 0 25px;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
margin-top: 35px;
}
.logo {
position: absolute;
left: 60px;
}
.logo .navbar-brand {
width: 150px;
max-height: 60px;
}
.img-fluid {
width: 100% !important;
}
.navbar .toggle-bar {
width: 60px;
height: 60px;
flex: 1;
text-align: right;
display: none;
margin-right: 30px;
}
.navbar .toggle-bar .fa-bars {
font-size: 20px;
color: rgba(81, 141, 27, 1);
}
.navbar-tab {
flex: 1;
text-align: right;
list-style-type: none;
}
.navbar-tab::before {
content: "";
position: absolute;
height: 1px;
background-color: rgba(46, 107, 13, 0.275);
width: 65%;
margin-top: 50px;
}
.navbar-tab .nav-item {
display: inline-block;
margin-right: 30px;
}
.navbar-tab .nav-item .nav-link {
text-decoration: none;
color: rgba(112, 112, 112, 1);
font-size: 18px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
}
.navbar-tab .nav-item.active .nav-link {
color: rgba(115, 147, 97, 1);
}
.active::before {
content: "";
border-radius: 50%;
padding: 4px;
position: absolute;
top: 87px;
background: rgba(115, 147, 97, 1);
margin-left: 24px;
}
.searchForm input {
border: 1px solid rgba(45, 93, 19, 0.565);
border-radius: 50px;
width: 222px;
height: 33px;
padding-left: 30px;
text-align: left;
font-family: Lato;
font-style: normal;
font-weight: lighter;
font-size: 18px;
color: rgba(112, 112, 112, 1);
}
.searchForm input:focus {
outline: none;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: 55px;
right: 20em;
width: 33px;
height: 33px;
}
.searchForm .btn-search .fa-search {
font-family: Lato;
font-size: 14px;
font-weight: normal;
font-style: normal;
color: rgba(45, 93, 19, 0.565);
}
.container {
max-width: 1080px;
margin: auto;
padding: 0px 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.hero .hero-text {
position: relative;
top: 120px;
}
.hero .hero-text h2 {
font-style: normal;
font-weight: normal;
font-size: 90px;
color: rgba(81, 141, 27, 1);
margin-left: -20px;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(45, 93, 19, 1);
}
@media only screen and (max-width: 1024px) {
.navbar .toggle-bar {
display: block;
}
.navbar .navbar-tab,
.searchForm {
position: absolute;
top: 120px;
right: 70px;
display: none;
}
.searchForm input {
margin-top: -10px;
}
.searchForm .btn-search {
background: transparent;
border: none;
position: absolute;
top: -9px;
right: 190px;
width: 33px;
height: 33px;
}
.navbar-tab::before {
width: 100%;
}
.active::before {
top: 25px;
}
.hero .hero-text {
left: 50px;
}
}
/* media query for less than 600 */
@media only screen and (max-width: 600px) {
.navbar {
margin-top: 20px;
}
.logo {
left: 20px;
top: 30px;
}
.navbar .toggle-bar {
margin-right: 0px;
color: rgba(81, 141, 27, 1);
}
.row {
text-align: center;
}
.col-2,
.col-3,
.col-4 {
flex-basis: 600px;
}
.hero .hero-text {
text-align: center;
left: 0;
top: 80px;
}
.hero .hero-text h2 {
font-weight: bold;
font-size: 40px;
color: rgba(81, 141, 27, 1);
text-align: center;
}
.hero .hero-text p {
line-height: 40px;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(45, 93, 19, 1);
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing page 1</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- <link rel="stylesheet" href="./css/style.css" /> -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<header id="main-header">
<div class="container-fluid">
<nav class="navbar">
<div class="logo">
<a href="/index.html" class="navbar-brand"
><img src="./images/logo.png" alt="logo" class="img-fluid"
/></a>
</div>
<a href="" class="toggle-bar" onclick="toggleBar()" id="toggle-menu">
<i class="fa fa-bars"></i>
</a>
<ul class="navbar-tab" >
<li class="nav-item active">
<a href="./index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="./product.html" class="nav-link">products</a>
</li>
<li class="nav-item">
<a href="./companies.html" class="nav-link">companies</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">about us</a>
</li>
<li class="nav-item">
<a href="./blog.html" class="nav-link">blog</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link">Login/Signup</a>
</li>
</ul>
<form action="" class="searchForm">
<input type="search" name="" id="" placeholder="Search" />
<button class="btn-search">
<span class="fa fa-search"></span>
</button>
</form>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="row">
<div class="col-2">
<div class="hero-text">
<h2>Welcome <br>To Captivist</h2>
<p>We’re here to help you make more informed decisions about consumer decisions.</p>
</div>
</div>
<div class="col-2">
<img src="" class="img-fluid">
</div>
</div>
</div>
</section>
</body>
</html>
所有元素都以绝对显示属性值定位。这会使您的内容变得僵化，无法适应您浏览设备的当前视口。这意味着此代码几乎不可能更改为响应式代码。
您可以尝试使用 Desech Studio 导入具有相对布局的 html/css。缺点是需要进一步调整代码来设置边距。
学习一点 html/css 的建议很好，尽管 Bootstrap 并不是真正需要的。您可以只使用 css 网格来定位元素，而无需 bootstrap 带来的额外负担。