0

整个下午（或晚上/早上/晚上）。关于我的一个项目，我正在朝着正确的方向努力。此布局适用于 tumblr（不是公司的实际页面，所以请不要对我大喊大叫），这是我设法编写的第一个代码。问题是，在制作之后，我注意到它是多么……糟糕。我使用了太多的填充、边距和其他可以删减的废话。

我非常想尝试重写代码，使用百分比、rems/ems、vh/vw 等，同时仍然保持布局/设计 100% 完整。然而，问题是我不知道如何开始，确切地说，或者什至剪掉什么，同时仍然保持间距等完整。例如，假设我想完全消除我的帖子容器（ .pc ）的像素测量，我如何确保它保持在相同的位置（至少在共享我相同视口测量的屏幕上）与这些边距，同时使用说，百分比？我如何以百分比甚至 vw/vh 开始测量 div 容器？

请知道，我并不是要让别人为我做这件事，或者类似的事情。我只是想在我可以开始的正确方向上轻推一下。这是我的代码：https ://pastebin.com/q5cFtVQP和一个片段：

<!DOCTYPE html>
<html>
<head>
 
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
 
<!-- BROWSER TITLE -->
<title> .</title>
<!-- END OF BROWSER TITLE -->
 
<!-- BROWSER ICON -->
<link rel="shortcut icon" href="https://66.media.tumblr.com/e948812964cb16505f4cd4f894344288/672e88b582120b94-84/s540x810/9301ad0a7a1dc0235256ca2aa89738258b0383a5.png">
<!-- END OF BROWSER ICON -->
 
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,900,700,700italic,500italic,500' rel='stylesheet' type='text/css'>
<!-- END OF FONTS -->
 
<style type="text/css">
 
/* PULSE ANIMATION */
.pulsate { -webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.5; }
   
@-webkit-keyframes pulsate { 0% { opacity: 0.5; }
50% { opacity: 1.0;}
100% { opacity: 0.5; } }
/* END OF PULSE ANIMATION */
 
/* FOLLOW BUTTONS */
.iframe-controls--desktop { position:fixed;
top:0px;
right:0px;
z-index:214748364789123456789;
-filter:invert(100%);
-webkit-filter:invert(100%);  
-webkit-transform:scale(0.6,0.6);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin:100% 0%;
-ms-transform:scale(0.6,0.6);
transform:scale(0.6,0.6);
 transform-origin:100% 0%; }
/* END OF FOLLOW BUTTONS */
 
/* SELECTION */
::selection { background:#ff40f3; }
::-moz-selection { background:#ff40f3; }
/* END OF SELECTION */
 
/* SCROLLBAR */
::-webkit-scrollbar-thumb { background:#ff62f5;
border-radius:25px;linear-gradient(to bottom, #b1e0f5 , #ffc4f6);
width:8px;
height:5px; }
 
::-webkit-scrollbar { background:#292929;
border-radius:25px;
height:5px;
width:8px; }
/* END OF SCROLLBAR */
 
/* EMBEDS */
embed, object, video { max-width: 200px; }
 
img { max-width:180px;
height:auto;
width:auto; }
/* END OF EMBEDS */
 
/* BLOG STYLINGS */
html { background-color:#e6eaeb;
color:#e6eaeb;
font-family:'Roboto', sans-serif;
font-size:11px;
text-align:left;
word-spacing:3px;
text-transform:uppercase; }
 
.tc a:hover, .nav a:hover, .pagc a:hover,#mybtn:hover { cursor: pointer;
color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
 
.posts a:hover, .pnc a:hover { color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
 
.divider { border-top: 6px solid #02afff;
border-radius:5px;
margin:auto;
width:80%; }
 
pre, small, sup, sub { font-size:1rem;
font-family:'Roboto', sans-serif; }
 
blockquote { border-left:4px solid;
color:#ff62f5;
padding-left:5px;
margin-left:3px;
width:94%; }
       
blockquote p { font-family:'Roboto', sans-serif;
color:#efefef; }
       
blockquote blockquote { margin-left:1px; }
 
h3 { text-transform:uppercase;
color:#ff62f5;
text-align:center;
font-family:'Bowlby One', cursive;
font-size:1.5rem;
letter-spacing:1px; }
 
h1, h2 { color:#02afff;
text-decoration:none;
line-height:25px;
padding-bottom:2px;
font-family:'Bowlby One', cursive;
text-align:center;
text-transform:uppercase;
font-size:2rem;
margin-top:10px;
margin-right:15px;
background-color:#313131;
box-shadow: 0 -4px #ff62f5 inset; }
 
p { font-family:'Roboto', sans-serif; }
       
b, strong { color:#02afff; }
       
i { color:#ff62f5;
font-style:normal; }
/* END OF BLOG STYLINGS */
 
/* READ MORE BUTTON */
#more { color:#e6eaeb;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
padding:2px;
background-color:#ff62f5;
border-radius:25px; }
 
#more:hover { color:#02afff;
cursor: pointer; }
/* END OF READ MORE BUTTON */
 
/* SCROLL TO TOP BUTTON */
#stt { position: fixed; /* Fixed/sticky position */
z-index:99999999999999;
display: none; /* Hidden by default */
top:613px; /* Place the button at the bottom of the page */
left:1029px; /* Place the button 30px from the right */
border: none; /* Remove borders */
outline: none; /* Remove outline */
font-family:'Bowlby One', cursive;
background-color: #02afff; /* Set a background color */
color:#e6eaeb;
cursor: pointer; /* Add a mouse pointer on hover */
padding:6px;
border-radius:15px; /* Rounded corners */
text-transform:uppercase;
text-align:center;
font-size:1rem; /* Increase font size */ }
/* END OF SCROLL TO TOP BUTTON */
 
/* PERMALINK PAGE */
.permc { margin-top:5px;
margin-left:18px;
left:368px;
width:387px;
max-height:220px;
background-color:#252525;
overflow-x:hidden;
border-left:25px solid #ff62f5; }
 
.permc p, .permc a { color:#ff62f5;
margin:0 auto;
margin-top:0px;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase; }
 
.permc img.avatar { display:none; }
 
.permc li { list-style-type:none;
margin:0;
padding:0; }
/* END OF PERMALINK PAGE */
 
/* MAIN TITLE */
.mtc { margin-top:45px;
margin-bottom:45px;
position:absolute;
z-index:1;
left:385px;
width:648px;
height:96px;
background-color:#252525;
border-left:25px solid #ff62f5;
padding:0 -15px -40px 0;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }
 
.mt { font-family: 'Bowlby One', cursive;
color:#e6eaeb;
text-indent:20px;
font-size:5.9rem;
text-shadow:3px 5px 1px #6bb6fa; }
/* END OF MAIN TITLE */
 
/* POSTS */
.pc { position:absolute;
padding-top:98px;
padding-bottom:6px;
top:14px;
left:368px;
width:445px;
min-height:450px;
margin-bottom:15px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }
 
.posts { width:375px;
font-weight:900;
max-height:350px;
min-height:150px;
margin-top:5px;
margin-left:18px;
padding-left:10px;
left:368px;
background-color:#252525;
overflow-x:hidden;
overflow-y:auto;
border-left:25px solid #ff62f5; }
 
.posts a { text-decoration:none;
box-shadow:0 -4px #ff62f5 inset;
font-family: 'Bowlby One', cursive;
color:#02afff;
padding-bottom:5px;
font-size:1rem; }
/* END OF POSTS */
 
/* POST TITLE */
.ptc { width:375px;
margin-top:5px;
margin-left:18px;
padding-left:10px;
left:368px;
background-color:#252525;
border-left:25px solid #ff62f5; }
 
.pt { color:#e6eaeb;
text-decoration:none;
line-height:35px;
padding-bottom:5px;
font-family:'Bowlby One', cursive;
text-align:center;
text-transform:uppercase;
font-size:2.8rem;
padding-top:5px;
margin-right:15px;
text-shadow:3px 3px 1px #6bb6fa }
/* END OF POST TITLE */
 
/* POST TAGS */
.tc { width:367px;
padding-left:10px;
padding-right:10px;
margin-left:18px;
margin-top:5px;
background-color:#252525;
border-left:25px solid #ff62f5; }
 
.tc a { color:#e6eaeb;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
margin-top:5px;
margin-bottom:5px;
padding:4px;
background-color:#02afff;
border-radius:25px; }
/* END OF POST TAGS */
 
/* NAVIGATION CONTAINER + NAVIGATION */
.navc { position:fixed;
top:547px;
left:818px;
width:242px;
min-height:32px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff; }
 
.nav { display:inline block;
width:67px;
float:left;
height:24px;
margin-top:4px;
margin-left:2px;
background-color:#252525;
border-left:10px solid #ff62f5; }
 
.nav a { text-decoration:none;
font-family: 'Bowlby One', cursive;
color:#e6eaeb;
text-align:center;
font-size:1.3rem;
margin-left:4px;
margin-top:3px;
text-shadow:2px 1px 1px #0081bd; }
/* END OF NAVIGATION */
 
/* PAGINATION */
.pagc { position:fixed;
top:613px;
left:818px;
max-width:148px;
height:15px;
padding:7px;
background-color:#02afff;
border-radius:25px; }
 
.pagc a { color:#e6eaeb;
font-size:.9rem;
text-decoration:none;
font-family: 'Bowlby One', cursive; }
/* END OF PAGINATION */
 
/* SIDEBAR 1 + CONTAINER */
.sbc1 { position:fixed;
top:155px;
left:818px;
width:242px;
height:327px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
overflow-y:auto;
z-index:1; }
 
.sb1 { margin-right:10px;
margin-left:10px;
font-weight:900; }
/* END OF SIDEBAR 1 + CONTAINER */
 
/* POSTNOTES */
.pnc { width:250px;
height:45px;
background-color:#252525;
padding-left:10px;
margin-left:18px;
line-height:2.8;
margin-top:35px;
border-left:25px solid #ff62f5; }
 
.pnc a { text-decoration:none;
color:#02afff;
font-family: 'Bowlby One', cursive;
font-size:.9rem;
display:inline-block;
text-transform:uppercase;
text-align:center;
box-shadow:0 -4px #ff62f5 inset; }
/* END OF POSTNOTES CONTAINER */
 
/* MODAL POPUP */
 
/* MODAL OPEN BUTTON */
#mybtn { width:242px;
position:fixed;
height:26px;
background-color:#02afff;
border:none;
top:516px;
left:818px;
font-size:1.6rem;
color:#e6eaeb;
font-family: 'Bowlby One', cursive; }
 
button:focus { outline: none; }
/* END OF MODAL OPEN BUTTON */
 
/* MODAL BOX */
.modal { display:none; /* Hidden by default */
position:fixed; /* Stay in place */
z-index:9999999999999999999; /* Sit on top */
padding-top:50px; /* Location of the box */
left:0;
top:0;
overflow-y:auto;
width:100%; /* Full width */
height:100%;
background-color:rgb(0,0,0); /* Fallback color */
background-color:rgba(0,0,0,0.95); /* Black w/ opacity */ }
/* END OF MODAL BOX */
 
/* MODAL CONTENT */
.modal-content { position: relative;
background-color: #313131;
margin:auto;
overflow-y:auto;
padding:0;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
width:680px;
max-height:85%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,1);
-webkit-animation-name:zoom;
-webkit-animation-duration:0.4s;
animation-name:zoom;
animation-duration: 0.4s }
 
.modal-body { padding: 5px 26px;
font-size:1rem;
font-weight:900;
color:#e6eaeb; }
/* END OF MODAL CONTENT */
 
/* MODAL ANIMATION */
@keyframes zoom {0% {transform: scale(1,1);}
50% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);} }
/* END OF MODAL ANIMATION */
 
/* MODAL CLOSE BUTTON */
.close { color:#e6eaeb;
width:85px;
text-decoration:none;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
margin:0 auto;
margin-top:2%;
padding:4px;
background-color:#02afff;
border-radius:25px; }
 
.close:hover { cursor: pointer;
color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;  }
/* END OF MODAL CLOSE BUTTON */
 
/* END OF MODAL POPUP */
 
/* SVG GRAPHICS */
/* BOTTOM WAVE */
#wave { position:fixed;
z-index:-100;
width:100%;
bottom:-3px;
background-repeat:repeat-x;
left: 0px;
right: 0px; }
/* END OF BOTTOM WAVE */
 
/* RIGHT BLOB */
#blob1 {position:fixed;
margin:auto;
left:860px;
top:80px;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
 
#blob1stroke {position:fixed;
margin:auto;
stroke:#ffa6f9;
stroke-width:1px;
transform:rotate(10deg);
left:860px;
top:80px;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
/* END OF RIGHT BLOB */
 
/* LEFT BLOB */
#blob2 { position:fixed;
margin:auto;
left:50px;
top:-80px;
z-index:-2;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
 
#blob2stroke { position:fixed;
margin:auto;
left:50px;
top:-80px;
z-index:-2;
stroke:#ffa6f9;
stroke-width:1px;
transform:rotate(10deg);
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
/* END OF LEFT BLOB */
 
</style>

（这是一个现场演示，如果重要的话：https ://kittycodes-preview.tumblr.com/ ）

任何帮助表示赞赏！（注意：在任何人想要指出“不正确”的布局之前；Tumblr 的“编码布局设置”非常不正统。css 和 html 一起使用，并为帖子等使用专有块，如果你尝试它实际上会看起来很糟糕自行部署代码）。

4

1 回答 1

0

我使用了太多的填充、边距和其他可以删减的废话。

为什么你认为填充和边距是无稽之谈？你指的“其他”废话是什么？我从来没有在某种程度上不使用填充和边距的 Web 应用程序中构建网站或视图。

我非常想尝试重写代码，使用百分比、rems/ems、vh/vw 等，同时仍然保持布局/设计 100% 完整。

这是因为您阅读了一篇文章说您应该使用这些单位吗？不同的单位在不同的情况下有用。

例如，假设我想完全消除我的帖子容器（ .pc ）的像素测量，我如何确保它保持在相同的位置（至少在共享我相同视口测量的屏幕上）与这些边距，同时使用说，百分比？

为什么需要消除像素测量？像素本身没有任何问题。这取决于情况以及您要完成的工作。

我如何以百分比甚至 vw/vh 开始测量 div 容器？

老实说，您似乎没有读过任何书，也没有付出太多努力来教育自己。这些都是您要问的非常基本的问题，您只需学习如何编写代码，就可以更轻松地自己找到答案。话虽如此，您以百分比衡量 div 的方式与以百分比衡量任何事物的方式相同...100% 是整体...50% 是一半...等等。

我可以理解为什么查看端口单位与百分比会引起一些混乱。

width: 100vw等于用户屏幕宽度的 100%。

width: 100%等于元素父级宽度的 100%。

我建议您从 w3schools.com 之类的地方开始，开始建立回答问题所需的基本知识基础。

于 2020-06-30T20:39:01.253 回答