- 17, May 2024
- #1
Поэтому я пытался изучить более эффективные методы и принципы кодирования веб-сайтов. Я много читал и экспериментировал, и у меня есть новая страница, работающая так, как я понимаю, для адаптивной страницы.
В любом случае, единственная проблема, с которой я столкнулся (насколько я могу судить), заключается в том, что я не могу найти метод, который изменит размер большего изображения до размера, доступного для просмотра на мобильном телефоне с помощью CSS.
Если я использую изображение меньшего размера, которое будет работать на моем мобильном телефоне, то для настольного компьютера оно будет слишком маленьким. Я просто не знаю, как это исправить, и ничего из того, что я читал за последние несколько дней, похоже, не работает.
Я пробовал разные вещи с CSS.
Я не знаю, имеет ли это отношение к Скрытая информация :: Авторизуйтесь для просмотра »
. HTML
В любом случае, единственная проблема, с которой я столкнулся (насколько я могу судить), заключается в том, что я не могу найти метод, который изменит размер большего изображения до размера, доступного для просмотра на мобильном телефоне с помощью CSS.
Если я использую изображение меньшего размера, которое будет работать на моем мобильном телефоне, то для настольного компьютера оно будет слишком маленьким. Я просто не знаю, как это исправить, и ничего из того, что я читал за последние несколько дней, похоже, не работает.
Я пробовал разные вещи с CSS.
Я не знаю, имеет ли это отношение к Скрытая информация :: Авторизуйтесь для просмотра »
. HTML
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
/* fix for HDX displays like the Kindle Fire HDX */
@media
(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
(min-resolution:172dpi) and (min-width:1600px)
{
html { font-size:200%; }
}
body {
min-width:55em; /* for pre CSS3 capable browsers */
font:normal 85%/150% arial,helvetica,sans-serif;
color:#FFF;
background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}
.heightWrapper {
background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}
h1 {
padding-left:2em;
font-size:100%; /* prevent FF reverse inheritance bug */
color: #FFF;
}
h1 a {
position:relative; /* so we can absolute position span over this */
display:block;
padding:40px 0;
/* 40px top + 40px bottom + 64px line-height == image height */
text-decoration:none;
font:bold 60px/64px arial,helvetica,sans-serif;
color:#22B6FA;
}
h1 span {
position:absolute;
top:0;
left:0;
width: 1275px;
height: 141px;
background:url(images/header.jpg) center left no-repeat;
border-bottom: 1px solid #22B6FA;
}
h2 {
padding-bottom:1.33em;
font:bold 175%/145% arial,helvetica,sans-serif;
}
#contentWrapper {
width:100%;
float:left;
}
#content {
padding:2em 0 1em 2em;
margin-right:26em; /* postitive of #extras negative margin */
}
#extras {
float:left;
width:22em;
padding:2em 2em 1em;
margin-left:-26em; /* width plus padding */
/*
negative margin nulls width in flow, pops it up over
#contentWrapper
*/
}
h3 {
padding-bottom: 1em;
text-align: center;
font:bold 150%/130% arial,helvetica,sans-serif;
color: #fff;
}
#product img {
max-width: 100%;
display: block;
margin-bottom: 1em;
}
#productInfo {
float: right;
width: 17em;
padding: 2em 4em 3em 3em;
}
.retail-price {
color: #fff;
margin-bottom: 1.5em;
}
.price {
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 2em;
text-align: center;
color: #000;
padding-bottom: 1em;
}
p {
max-width:56em; /* prevent long lines from being hard to follow */
margin:0 auto;
padding: 2em 2em 0 2em;
font-size: 1.25em;
color: #000;
}
.testimonial {
text-align:left;
max-width:100%;
margin-bottom:10em;
padding: 1em;
font-size: 1em;
line-height: 1.25em;
color: #fff;
}
small {
margin-left: 1.5em;
font-size: 1em;
color: #000;
}
#footer {
padding: 3em;
text-align:center;
color: #000;
}
@media (max-width:50em) {
body {
min-width:192px; /* CSS3 possible, so let it go narrower */
}
#contentWrapper,
#extras {
float:none;
width:auto;
}
#content,
#extras {
margin:0;
padding:1em 0.5em 0;
}
h2 {
font:bold 2.5em arial,helvetica,sans-serif;
padding-bottom:0.66em;
color: #22B6FA;
}
h3 {
color: #000;
}
.testimonial {
padding-top:1em;
color: #000;
border-top:2px solid #22B6FA;
}
#product img {
display:inline-block;
max-width:49%;
}
}
@media (max-width:660px) {
h1 {
text-align:center;
padding:0;
}
h1 a {
padding:0.33em 0.167em;
font:bold 300%/150% arial,helvetica,sans-serif;
}
h1 span {
display:none;
}
#product img {
display:block;
max-width:100%;
}
}
@media (max-width:340px) {
#products {
width:auto;
margin:0 auto;
-webkit-box-sizing:padding-box;
box-sizing:padding-box;
}
}
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" > <title> "Death Stalker" Fantasy Knife | CoolFantasyKnives.com </title> </head><body> <h1> <a href="/"> Cool Fantasy Knives <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="content"> <img src="/images/death_stalker_fantasy_knife.jpg"> <div id="productInfo"> <h2>"Death Stalker" Fantasy Knife</h2> <span class="retail-price">Item #: 002_mc2079</span><br><br> <span class="retail-price">Retail Price: $78.49</span><br><br> <span class="price">Your Price:<br>$59.73</span><br><br> <form target="paypal" action="[URL='https://lumtu.com/yti/YzJJzY3JodHRwczovL3BheXBhbC5jb20vY2dpLWJpbi93ZW39i']https://www.paypal.com/cgi-bin/webscr[/URL]" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="SGEAVGR55XKCC"> <input type="image" src="[URL='https://lumtu.com/yti/acmmcaWZodHRwczovL3BheXBhbG9iamVjdHMuY29tL2VuX1VTL2kvYnRuL2J0bl9jYXJ0X0xHLx0X']https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif[/URL]" border="0" name="submit" alt="PayPal — более безопасный и простой способ оплаты онлайн!"> <img alt="" border="0" src="[URL='https://lumtu.com/yti/acmmcaWZodHRwczovL3BheXBhbG9iamVjdHMuY29tL2VuX1VTL2kvc2NyL3BpeGVsLVGe']https://www.paypalobjects.com/en_US/i/scr/pixel.gif[/URL]" alt="пиксель" width="1" height="1"> </form> </div> <p> The "Death Stalker" fantasy knife has a whopping 14.5" overall length.
It features two full tang black stainless steel blades that form the sides and claws.
You will appreciate the metal tail with stainless steel stinger blade as well as the rubber coated handle and metal forearm plate.
A beautiful wood display stand is also included with this attention-grabbing fantasy knife.
</p> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <div class="testimonial"> <h3>Testimonials</h3> How many times have you said to yourself, "Conan The Barbarian invited me to pillage with him, but I have absolutely NOTHING to wear!" Well not any more! With the Scorpion Blade Arm Gauntlet, you will gain the admiration of your fellow death-stalkers, even if you wear little else.
Its many claws and pincers are eager to do your bidding, dispatching justice across the barren wasteland, collecting the skulls of your enemies.
I got mine, and right away took it to the priestess to be cursed with the blood of eleven slave virgins, so that none may ever take it from me. It has since become the best extension to my already muscle-bound arm I've ever had! And I wore The Gauntlet Of True Terror for 3 years!! In closing, woe-betide! anyone who comes ill prepared for battle.
But with this accessory, you'll make the other barbarians feel under-dressed! And the price won't sting your wallet.<br> <small>By: Joseph A.</small> <!-- .testimonial --></div> <!-- #extras --></div> <!-- .heightWrapper --></div> <div id="footer"> <hr> © 2016 • CoolFantasyKnives • All Rights Reserved <!-- #footer --></div> </body></html> 
![[империя Технологий] Sunbrilliant Video. Чакра Свадхистана](/assets/images/icons/forum3.png){kind=icon}
