个人中心
gpt4 book ai didi

html - 网站布局在放大和更改分辨率时调整大小

转载 作者：行者123 更新时间：2023-11-28 05:59:17 25 4
gpt4 key购买 nike 

<html>
<style>
body { background-color:#F1EEF2; }
header { 
width:800px; 
margin-left:auto;	
margin-right:auto;
}
layout {
min-width: 100%;
min-height: 100%;
}
nav.header {
width:800px; 
height:40px; 
background-color:#000000;
color:#fef8f0; 
}
nav.footer {
width:800px; 
height:30px; 
color:#fef8f0; 
}

footer { 
width:800px; 
height:80px; 
background:url(images/footer_beans.png) no-repeat #000000;
margin-left:auto;	
margin-right:auto;
}

span {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size:11px;  
font-weight:bold; 
color:#c29a5f;
}
p.s1 {
font-family: sans-serif; 
font-size:15px; 
color:#ffffff;
margin:0px;
padding:10px 24px 0;
}
p.s2 {
font-family: sans-serif; 
font-size:15px; 
color:#000000;
margin:0px;
padding:12px 10px 15px 12px;
}
ul.header {
width:500px; 
margin:0;
padding:0;
padding-top:13px;
float:right; 
list-style-type:none; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size:11px;	
font-weight:bold;
}
ul.footer {
width:500px; 
float:right; 
list-style-type:none; 
margin: 0;
padding:0;
padding-top:47px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size:12px;	
font-weight:bold;
}
li {
float:left;
font-size:11px;	
font-weight:bold; 
margin:0;
}
a {
padding:8px;
color:#fef8f0; 
text-decoration:none;
}
section {
width:800px; 
margin:0 auto;
}
article { 
width:800px; 
height:600px;
}
#left, #right {
	background: #000000;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
		#left { left: 265; }
		#right { right: 265; }
		
#hm_topleft {width:434px; height:300px; float:left;}

#hm_topright {width:366px; height:300px; float:left; background:#570401;  margin=0; overflow=hidden;}

#hm_content {width:800px; height:300px; margin:auto; float:left; background-color:#000000;}

#hm_contentbox {width:760px; height:130px; margin:25px; background:#F1EEF2; border:3px solid #000000;}
</style>
<div id="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset=iso-8859-1>
<title>MAJID JORDAN - Home</title>
</head>
<body>
<header>
<nav class="header";>
  <ul class="header">
  <li><a href="#">Home</a>|</li>
  <li><a href="#">Members</a>|</li>
  <li><a href="#">Albums</a>|</li>
  <li><a href="#">Gigs & Tours</a>|</li>
  <li><a href="#">Gallery</a></li>
  </ul>
</nav>
</header>
<section  style="width:800px; margin:0 auto;">
<article style=" width:800px; height:600px; ">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\logo.jpg" width="200" height="170" alt="MAJID JORDAN"/>
<div
   style="
      padding: 10px;
      top: 10;
      right: 480;
      position: absolute;
      z-index: 1;
      visibility: show;
	  font-size:35px;">
<h1><center><font face="verdana"><strong>MAJID JORDAN</font></center</strong><h1>
</div>
<div id="hm_contentbox">
<p class="s2">Majid Jordan is a Canadian R&B duo, composed of singer Majid Al Maskati and producer Jordan Ullman. They are signed to OVO Sound, the record label co-founded by rapper Drake, producer Noah "40" Shebib and Oliver El-Khatib.
Jordan, originally from Toronto, and Majid, arriving in Toronto by way of Bahrain, met as students at the University of Toronto in 2011. Working between Ullman's dorm room and his parents' basement, they launched their first joint EP titled Afterhours on SoundCloud under their previous name Good People.</p>
</div>
<div
style="
position: absolute;
top: 390px;
right: 285px;
border: 3px solid black;">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\home.jpg" width="400" height="300" alt="MAJID JORDAN"/>
</div>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:400;left:300;"><strong>
Members
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:480;left:300;"><strong>
Albums & Songs
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:560;left:300;"><strong>
Gigs & Tours
</button></strong>
<button style="border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:640;left:300;"><strong>
Gallery
</button></strong>

<footer style="position:absolute;top:710;>
<nav class="footer">
<ul class="footer">
<li class="hf1"><a>Members </a>|</li>
<li class="hf1"><a>Albums & Songs </a>|</li>
<li class="hf1"><a>Gigs & Tours </a>|</li>
<li class="hf1"><a>Gallery</a></li>
</ul>
</nav>
</footer>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>

在 html 方面，我是一个极端的初学者，我正在我选择的乐队上创建一个小网站，它在我用来创建网站的计算机上看起来非常好，但在另一台具有不同的分辨率，整个布局困惑，对象重叠等。

任何帮助将不胜感激，就像我说的，我对这门语言很陌生，如果您需要更多信息，我会尽力帮助您。

最佳答案

您当然可以编写自己的解决方案，但这就像重新发明轮子，对于初学者来说真的很困难。最常见的解决方案是使用 CSS 和/或 JS 框架，例如 bootstrap 或 angularmaterial。这不仅会为您提供工具，使您的网站能够毫不费力地做出响应，而且还会有一些很酷的设计机会。您也不必担心被限制，因为您可以用自己的 css 代码“覆盖”框架中的一些东西。
对于一些教育你可以看这里:
http://getbootstrap.com/ ->获取 Bootstrap(免费)
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ -> 一些解释以了解您可以做什么
http://www.w3schools.com/bootstrap/default.asp -> 一个写得很好的初学者友好的 Bootstrap 教程

如果您还不相信，请查看:
http://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
如果您需要更多建议或有关特定问题的更多详细信息，请与我联系。

关于html - 网站布局在放大和更改分辨率时调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36860274/

25 4 0
文章推荐： c++ - 为节点分配指针地址
文章推荐： ios - 使 UILabel 很好地适合 Collection View Cell
文章推荐： c++ - 即使使用 "new"关键字，二进制搜索树插入也不会在堆上创建数据
文章推荐： javascript - ToolbarAndroid 中的下拉图标 + 捕获标题点击事件 + 搜索输入(原生 react )
行者123
个人简介

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

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