-3
바라기를 이것은 내게 맞는 서브입니다. 나는 HTML과 CSS에 비교적 익숙하지 않으며 내가 한 일을 비효율적이고 어리 석다라고 말할 수있다.HTML과 CSS가 없으므로 코드 최적화에 도움이 필요합니다. 또한 요소의 동적 크기 조정에 몇 가지 문제가 있습니다
누구든지 내 html과 css를 살펴보고 중복되거나 잘못된 방법을 최적화 할 시간이 있는지 궁금합니다. 예를 들어 내 CSS에서, 나는 동일한 속성 막대 글꼴 크기 및 스타일을 가진 3 개의 다른 ID를가집니다.
시간이 있다면 imageAlign 클래스의 이미지 (bb.png) 크기를 동적으로 조정할 수있는 도움을 받고 싶습니다. 휴대 기기에서 모든 것이 실제로 작은 이유를 파악하는 데 도움이됩니다. 중간에하지 잘 너무 작고 관점. 또한 파이어 폭스 바탕 화면은 이상하게 보이게 그러나 나는 순간이 너무 법석을 떨게 아닙니다.
감사합니다!
HTML
<body>
<div id="Absolute-Center">
<div id="drawbox">
<div class="imageAlign">
<img src="bb.png" width="280px" height="130px" alt="logo">
</div>
<div id="content1">
WHERE HOUSE MUSIC MEETS CHARITY
</div>
<div id="content2">
A series of dance parties that raise money for numerous worthy charities. We provide a good time and good music with all proceeds going towards helping those facing far tougher times.
</div>
<div id ="content3">
Full website coming soon. <br>
For information, updates and enquiries please check out our <a href ="https://www.facebook.com/XXXX"> Facebook</a> page or send us an <a href ="mailto:[email protected]"> email</a>.
</div>
</div>
</div>
</body>
CSS
html {
overflow: hidden;
}
/* Draw border */
#drawbox {
width: 85%;
padding-bottom: 10%;
margin-left: auto ;
margin-right: auto ;
border-image-slice: 70 64 51 45;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url(handdrawn_line.png);
/*
Make border here: www./developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator
*/
}
#Absolute-Center {
width: 50%;
height: 58%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 25%; right: 0;
}
#content1 {
font-family: Adam Warren pro, Helvetica, Arial, sans-serif;
width: 80% ;
margin-left: auto ;
margin-right: auto ;
text-align: center;
font-size: 1.5vw;
padding-bottom: 20%;
padding-top: 5%;
}
#content2 {
font-family: 'Kalam', cursive;
width: 80% ;
margin-left: auto ;
margin-right: auto ;
text-align: center;
font-size: 1.1vw;
padding-bottom: 10%;
}
#content3 {
font-family: 'Kalam', cursive;
width: 80% ;
margin-left: auto ;
margin-right: auto ;
text-align: center;
font-size: 0.9vw;
}
.imageAlign {
margin-top: 10%;
text-align: center;
}
몇 가지 사항이 있습니다. html 오버플로 숨겨진 장점은 무엇입니까? 그걸 없애 버려. vw를 글꼴 크기로 사용하면 글꼴 크기가 창 크기로 조정됩니다. 이것이 작은 장치에 작은 글꼴이있는 이유입니다. 대신 pt, px 또는 em을 사용하십시오. 이미지 크기를 조정하려면 CSS (예 : 100 %)를 사용하여 너비를 지정하십시오. 코드에 도움이 필요하면 바이올린을 사용하여 코드를 가져 오십시오. – Andi
이 질문은 http://codereview.stackexchange.com/에 속하기 때문에이 주제는 오프 주제입니다. – Turnip