- 15, May 2024
- #1
Deathshadow, если ты готов, мне наверняка понадобится твоя помощь.
Я пытаюсь создать базовый сайт электронной коммерции.
Я собрал это, пытаясь строго придерживаться того, чем вы пытались поделиться со мной до сих пор, но я столкнулся с парой препятствий, которые не могу решить. Вы можете увидеть сайт по адресу http://sharpstuff4guys.com
и мой HTML выглядит:
Вторая проблема заключается в том, что нижнее меню включает в себя и нижний колонтитул.
Готов поспорить, что я сделал какую-нибудь глупость, которую опытный глаз быстро заметит.
Поскольку я пытаюсь переучить все заново и добавить в смесь адаптивность, у меня вроде как получается, что эта штука работает в этом направлении, но у меня все еще есть пара проблемных мест.
Я пока не могу понять одну вещь: как
Если вам нечего делать или вам скучно до слез, я был бы признателен, если бы вы просмотрели мои коды и сообщили мне, уловил ли я ваши учения или нет, а также поделились своими советами о том, как их исправить.
Я собрал это, пытаясь строго придерживаться того, чем вы пытались поделиться со мной до сих пор, но я столкнулся с парой препятствий, которые не могу решить. Вы можете увидеть сайт по адресу http://sharpstuff4guys.com
и мой 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;
}
/* 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 {
background:#BFCDE4;
}
#contentWrapper {
margin: 0 auto;
width: 1148px;
}
#header {
width: 1148px;
height: 81px;
background: #0067A9 url(/images/header.jpg) no-repeat;
}
#shipping-bar {
width: 100%;
height: 53px;
margin-bottom: 2em;
background: #0000CD;
box-shadow: 0 5px 5px #888888;
}
#shipping-text {
padding-top: 0.4em;
text-align: center;
font-size: 1.75em;
text-decoration: none;
color: #FD9742;
text-shadow:
-2px 0 4px #000,
2px 0 4px #000,
0 -2px 4px #000,
0 2px 4px #000,
0 0 8px #000;
}
#content {
width: 100%;
height: auto;
background: #FFF;
}
#sidebar {
float: left;
width: 12em;
font-size: 1.1em;
line-height: 2em;
padding: 0.5em;
border: 1px solid #999;
background: #FFF;
}
#sidebar ul {
padding: 0.5em;
list-style: none;
}
#sidebar li {
list-style: none;
}
#sidebar a {
font-size: 1.1em;
line-height: 2.25em;
text-decoration: none;
}
h2 {
font-size: 1.65em;
margin: 0 0 -2em 0;
padding: 1em 0 0.5em 0;
}
#products {
float: right;
width: 53em;
padding: 1em;
background: #FFF;
}
#products ul {
list-style: none;
text-align: center;
padding-bottom: 1em;
}
#products li {
display:inline;
vertical-align:top;
}
#products a {
width:171px;
padding:1em;
display:inline-block;
vertical-align:top;
text-decoration:none;
color:#FFF;
-webkit-border-radius:1em;
border-radius:1em;
-webkit-transition:background 0.3s;
transition:background 0.3s;
}
#products a:hover {
background:#BFCDE4;
}
#products img {
display:block;
margin:1.5em auto 0.5em;
max-width:100%;
}
.product-title {
font-size: 1.1em;
font-weight: bold;
color: #0067A9;
}
.retail-price {
width: 100%;
margin-top: 0.75em;
font-size: 1em;
color: #999;
}
.price {
width: 100%;
margin-top: 0.25em;
font-size: 1.5em;
font-weight: bold;
color: #CC0000;
}
#description {
clear:both;
margin: 1.5em 0.5em 1.5em 0;
padding: 2em 1em 1em 1em;
}
#bottom-menu {
background: #0067A9;
border-width: 2px 0;
}
#bottom-menu ul {
list-style: none;
padding-top: 0.25em;
text-align: center;
}
#bottom-menu li {
display: inline;
vertical-align: bottom;
}
#bottom-menu a {
display: inline-block;
vertical-align: bottom;
margin-bottom: 0.25em;
padding: 0.5em 1em;
text-decoration:none;
font: bold 120%/120% arial,helvetica,sans-serif;
color: #FFF;
text-shadow:
1px 1px 2px #000,
-1px 1px 2px #000;
}
#bottom-menu a:hover {
color: #BFCDE4;
text-shadow:
0 0 2px #C60;
}
#footer {
clear:both;
text-align:center;
padding:1em;
color:#FFF;
height: 2em;
background: #0067A9;
}
@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 {
padding-bottom:0.66em;
}
.adverts {
padding-top:1em;
border-top:2px solid #400;
}
.adverts img {
display:inline-block;
max-width:49%;
}
#otherVideos {
padding:1em 0 0;
margin:0 0.5em;
}
#otherVideos a {
padding:0.5em;
}
}
@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;
}
.adverts img {
display:block;
max-width:100%;
}
}
@media (max-width:340px) {
#products a {
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="screen.css" media="screen,projection,tv" > <html> <head> <title>SharpStuff4Guys.com</title> </head> <body> <div id="contentWrapper"> <div id="header"></div> <div id="shipping-bar"> <div id="shipping-text"> FREE Shipping on all orders over $24.95 </div> </div> <div id="content"> <div id="sidebar"> <ul> <li> <a href=" / ">HOME</a> </li><li> <a href=" / ">SHIPPING</a> </li><li> <a href=" / ">RETURNS</a> </li><li> <a href=" / ">BACK ORDERS</a> </li><li> <a href=" / ">PRIVACY POLICY</a> </li><li> <a href=" / ">CONTACT US</a> </li> </ul> <h2>Categories</h2> <ul> <?php include("categories.php"); ?> </ul> </div><!-- #sidebar --> <div id="products"> <h2>FEATURED PRODUCTS</h2> <ul> <li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="Медно-пружинный вспомогательный нож" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.49 </div> <div class="price"> Your Price $17.92 </div> </a> </li><li> <a href=" / "> <img src="/images/vietnam_cap-1.jpg" alt="кепка ветерана Вьетнама" /> <div class="product-title"> Baseball Vietnam Veteran Cap w/ Adjustable Back </div> <div class="retail-price"> Retail Price: $9.99 </div> <div class="price"> Your Price<br /> $ 6.72 </div> </a> </li><li> <a href=" / "> <img src="/images/death_stalker.jpg" alt="сталкер смерти фэнтези нож" /> <div class="product-title"> "Death Stalker" Fantasy Knife w/ Display Stand </div> <div class="retail-price"> Retail Price: $78.49 </div> <div class="price"> Your Price $49.78 </div> </a> </li><li> <a href=" / "> <img src="/images/zombie_hack_set.jpg" alt="Биологически опасный зомби"Hack 'n' Slash" 4 Pc Set" /> <div class="product-title"> Biohazard Zombie "Hack 'n' Slash" 4 Pc Set </div> <div class="retail-price"> Retail Price: $109.99 </div> <div class="price"> Your Price $52.10 </div> </a> </li> </ul> <h2>NEW ARRIVALS</h2> <ul> <li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li> </ul> <h2>BEST SELLERS</h2> <ul> <li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li><li> <a href=" / "> <img src="/images/copper_knife.jpg" alt="" /> <div class="product-title"> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </div> <div class="retail-price"> Retail Price: $26.95 </div> <div class="price"> Your Price $7.99 </div> </a> </li> </ul> </div><!-- #products --> </div><!-- #content --> <div id="description"> If you are looking for a great place that offers a huge selection of knives, self defense products or collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking for fantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everything a guy could need to build an amazing collection and at very affordable prices.
Our selection of self-defense and security products, collectibles and survival gear has been hand-selected to satisfy the wants and needs of our customers.
Each item in our inventory meets our rigid standards for durability, functionality and ease-of-use.
Here at SharpStuff4Guys.com, we are building one of the most comprehensive selections of name-brand knives and combat accessories that grows every week.
Our inventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name a few.
We offer at discounted prices Uzi knives, Swiss Army knives and many more, so finding the right blade for your personal collection couldn't be easier.
In addition to our growing inventory of knives, SharpStuff4Guys.com's inventory includes tactical gear and militaria.
So whether you're looking a gift that will never be forgotten or adding to your own personal collection, you will be able to get what you need right here.
Because we live in such turbulent times, we have packed our inventory with an amazing selection of self-defense and security products that can protect you if the need ever arises.
Whether you're looking for a Mace pepper spray gun, a crime-stopping, 4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personnel and self-defense instructors use and recommend right here at SharpStuff4Guys.com.
We'd like to invite you to browse our ever growing selection of unique knives, discount tactical gear and everything else we offer.
At SharpStuff4Guys.com, we are quite proud of our selection, and hope you enjoy exploring our website for whatever it is you need.
</div><!-- #description --> <div id="bottom-menu"> <ul> <li><a href="/">HOME</a></li> <li><a href=" / ">SHIPPPING</a></li> <li><a href=" / ">RETURNS</a></li> <li><a href=" / ">BACK ORDERS</a></li> <li><a href=" / ">PRIVACY POLICY</a></li> <li><a href=" / ">Contact Us</a></li> </ul> </div><!-- #bottom-menu --> <div id="footer"> © 2016 SharpStuff4Guys.com </div> </div><!-- contentWrapper --> </body> </html> Вторая проблема заключается в том, что нижнее меню включает в себя и нижний колонтитул.
Готов поспорить, что я сделал какую-нибудь глупость, которую опытный глаз быстро заметит.
Поскольку я пытаюсь переучить все заново и добавить в смесь адаптивность, у меня вроде как получается, что эта штука работает в этом направлении, но у меня все еще есть пара проблемных мест.
Я пока не могу понять одну вещь: как
может использовать изображение логотипа и превращаться в текст при переходе с рабочего стола на мой мобильный телефон. Другая проблема — моя первая попытка создать боковую панель и изменить ее размер с рабочего стола на мобильный телефон.
И последнее: можно ли добавить на сайт адаптивную панель поиска, используя только HTML и CSS, или для этого также требуется JS? Я спрашиваю, потому что хотел бы добавить панель поиска на эту страницу и искал руководство, но все, что я нахожу, связано с JS. Я подумал, что сначала спрошу, чтобы не дублировать свои усилия без необходимости.
Если вам нечего делать или вам скучно до слез, я был бы признателен, если бы вы просмотрели мои коды и сообщили мне, уловил ли я ваши учения или нет, а также поделились своими советами о том, как их исправить.
проблемы с этим сайтом.
Мне нужно начать работу со следующей страницей этого сайта, поэтому я очень надеюсь, что уловил суть.
Большое большое спасибо . . .
![[Виктория Волевач] Всегда молода](/assets/images/icons/forum2.png){kind=icon}
![[Фишка] Кач для 90+](/assets/images/icons/forum6.png){kind=icon}