Создать квадратики - HTML и CSS

Оксана33 · 02.09.2016, 14:57

помогите пожалуйста проверить код - правильно ли выполнен или есть более эффективные варианты?

для списка нужно дописать СSS код для квадратов 3х3 по 150рх на расстоянии 10рх.

Код:

<html>

<head>
	<title>Squares</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>

	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

</body>

</html>

и сss:

Код:

body{width:700px;}

ul{padding-left: 100px;}


li {
	margin:5px;
	float:left;
	width:150px;
	height:150px;
	background:green;
	list-style-type: none; 
}

Serge_Bliznykov · 02.09.2016, 16:17

Оксана, а что означает "для квадратов 3х3" ?
у меня получается такая раскладка:
squares_css.png

p.s. потестировать ваш код могу, а вот подсказать вряд ли что-то смогу,
для меня дизайн вообще и CSS, в частности, это тайна...

Оксана33 · 02.09.2016, 16:25

я жутко извиняюсь, у меня в сss был padding-left: 100px и я его удалила

Serge_Bliznykov · 02.09.2016, 16:46

да, теперь нормально, вот теперь похоже на 3X3

Оксана33 · 02.09.2016, 16:50

так как решение - нормально?

Naive · 02.09.2016, 17:38

Цитата:

Сообщение от Оксана33

так как решение - нормально?

Смотря для чего.
В общем виде, задача выполнена? — да, значит все в порядке.

Если это тестовое задание а-ля на должность верстальщика, то я бы добавил clear: left; для псевдо-элемента ::after, чтобы ul натянулся на итемы.
Еще бы добавил несколько вариантов выполнения, чтобы показать уровень скила:
- inline-block
- flex
- grid
- columns
- display: table, если можно менять разметку
добавил бы абсолютно безумных вещей (главное написать, что это баловство и в реальном проекте от тебя такого не увидят):
- display: table если нельзя менять разметку

- linear-gradient
- position: absolute; + смещение через nth-child
- анимация на смещение с паузой

(или без, но со step-функцией)
- box-shadow
- хак для inline + hasLayout
- можно повеселиться с трехмеркой

фантазия

Оксана33 · 02.09.2016, 19:16

cпасибо) я новичек и мне нужно знать пока что только на этом этапе

хотя мысль с inline-block была, но так и не сообразила как его применить

а за clear:left спасибо, хорошая идея, поскольку знала только clear:both

Naive · 02.09.2016, 21:36

Как не новичок новичку, я бы посоветовал покурить в сторону потока элементов на странице. Это базовый принцип отображения браузерами контента. Понимание этого даст понятие как и в каком случае лучше сверстать. Есть лекции на тему в WebStandartDays и в ШРИ Яндекса.
Обтекание (float) довольно капризное свойство и может доставить много проблем, когда не знаешь как оно работает. Понимание потока многое объяснит в этом случае.

Это как в математике в школе, тебя там по заученной формуле учат решать квадратные уравнения (называя их тричлен, не объясняя поему так), а чуть сложнее задачи по этой формуле не решаются и ты уходишь в тупик. А вот когда ты начинаешь понимать, что такое этот самый тричлен, что из себя представляют эти уравнения, и "нахер мне это все надо!?", то приходит осознание, как решить любое равенство/неравенство, почему оно так, как это работает. Тебе уже нафиг не надо хранить в памяти эту самую формулу, ты сам ее выведешь, потому что знаешь как это работает.

То же самое с версткой, когда понимаешь как вся эта фигня работает, ты уже быстро пробежавшись по коду и в результате (отрендеренная страница) увидев косяк, можешь знать где что поправить.

Разогнался я тут... Но все равно еще нафигачу:
Когда нас в универе учат кодить, нам сперва пихают тонны теории, что такое ООП, принцыпы ООП, код-стайл, разделение кода. А только потом сажают за клавиатуру.
Верстке так не учат, там вам говорят, напиши background: green и фон будет зеленым, никакой теории. Теории того, как потом все, что вы там понаписали будет читать браузер.
В итоге получается, есть толпа людей, которые просто не представляют что они делают, они видят задачу как что-то похожее на то, что было на курсах. И выполняют эту задачу "по формуле". А потом с удивлениям видят, что большая часть сайта "поехала".
Когда я знаю, что в мой код (верстку) кто-то может влезть, я пишу "железобетонную верстку", так чтобы моя часть не поплыла. Я не люблю этого делать, это занимает лишнее время моей работы, это излишне нагружает ресурсы браузера. Но я вынужден это делать, потому что если кто-то просто вставит float внутрь статьи, а вокруг нее не будет hasLayout, то все остальное поедет.

Реально разогнался, извините)

Alex11223 · 02.09.2016, 21:50

Цитата:

Сообщение от Naive

Когда нас в универе учат кодить, нам сперва пихают тонны теории, что такое ООП, принцыпы ООП, код-стайл, разделение кода. А только потом сажают за клавиатуру.

Это где?

Ни разу не встречал.

Да и какое ООП, разделение и код стайл до умения хоть как-то кодить.

Naive · 03.09.2016, 01:21

Цитата:

Сообщение от Alex11223

Это где?

УГТУ, ныне УРФУ.

Цитата:

Сообщение от Alex11223

Ни разу не встречал.

Могу только посочувствовать, у меня на всем пути были прекраснейшие преподаватели.

Цитата:

Сообщение от Alex11223

Да и какое ООП, разделение и код стайл до умения хоть как-то кодить.

"хоть как-то кодить" я научился еще в 5 классе, в 8 классе я на паскале на спор написал змейку за урок.
И когда я пришел в УПИ (ну, свой универ), я реально не втыкал нафиг мне это самое ООП. Потому что шахматы я мог написать на паскале хоть в 1 строку. Преподы от меня стрелялись. Но был один препод, который объяснил смысл ООП. И когда я написал таки шахматы на ООП, я понял кайф). Красивый код я тогда не писал, но этот препод объяснил, как сделать "красиво", чтобы мог мой код читать любой человек и ему было комфортно это делать.
Сейчас я работаю в команде из 12 программистов, и их код читать весь прекрасно. Но у нас есть куски, написанные несколько лет назад, и я плачу кровавыми слезами, когда надо в него лезть.
В бщем, спасибо вам, Михаил Исаакович Альперин, за наше счастливае детство то, что научили меня программировать.
ps. Хотя код-стайлу, действительно меня научили не в универе, там получился симбиоз из моей первой работы, там меня натаскивали одновременно мой коллега и начальник, но еще я этого подчерпнул читая исходники jQuery и блог Джона Резига (рекомендую кстать, это чувак, который jQuery написал сам один). Единственное что я не смог принять из его код-стайла, это запятая в начале строки

02.09.2016, 14:57	#1
Оксана33 Форумчанин Регистрация: 24.11.2014 Сообщений: 156	Создать квадратики помогите пожалуйста проверить код - правильно ли выполнен или есть более эффективные варианты? для списка нужно дописать СSS код для квадратов 3х3 по 150рх на расстоянии 10рх. Код: `<html> <head> <title>Squares</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>` и сss: Код: `body{width:700px;} ul{padding-left: 100px;} li { margin:5px; float:left; width:150px; height:150px; background:green; list-style-type: none; }` Знание надмевает, а любовь назидает Последний раз редактировалось Оксана33; 02.09.2016 в 16:36.

02.09.2016, 16:25	#3
Оксана33 Форумчанин Регистрация: 24.11.2014 Сообщений: 156	я жутко извиняюсь, у меня в сss был padding-left: 100px и я его удалила Знание надмевает, а любовь назидает Последний раз редактировалось Оксана33; 02.09.2016 в 16:34.

02.09.2016, 16:50	#5
Оксана33 Форумчанин Регистрация: 24.11.2014 Сообщений: 156	так как решение - нормально? Знание надмевает, а любовь назидает

02.09.2016, 19:16	#7
Оксана33 Форумчанин Регистрация: 24.11.2014 Сообщений: 156	cпасибо) я новичек и мне нужно знать пока что только на этом этапе хотя мысль с inline-block была, но так и не сообразила как его применить а за clear:left спасибо, хорошая идея, поскольку знала только clear:both Знание надмевает, а любовь назидает Последний раз редактировалось Оксана33; 02.09.2016 в 19:30.

02.09.2016, 21:36	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Как не новичок новичку, я бы посоветовал покурить в сторону потока элементов на странице. Это базовый принцип отображения браузерами контента. Понимание этого даст понятие как и в каком случае лучше сверстать. Есть лекции на тему в WebStandartDays и в ШРИ Яндекса. Обтекание (float) довольно капризное свойство и может доставить много проблем, когда не знаешь как оно работает. Понимание потока многое объяснит в этом случае. Это как в математике в школе, тебя там по заученной формуле учат решать квадратные уравнения (называя их тричлен, не объясняя поему так), а чуть сложнее задачи по этой формуле не решаются и ты уходишь в тупик. А вот когда ты начинаешь понимать, что такое этот самый тричлен, что из себя представляют эти уравнения, и "нахер мне это все надо!?", то приходит осознание, как решить любое равенство/неравенство, почему оно так, как это работает. Тебе уже нафиг не надо хранить в памяти эту самую формулу, ты сам ее выведешь, потому что знаешь как это работает. То же самое с версткой, когда понимаешь как вся эта фигня работает, ты уже быстро пробежавшись по коду и в результате (отрендеренная страница) увидев косяк, можешь знать где что поправить. Разогнался я тут... Но все равно еще нафигачу: Когда нас в универе учат кодить, нам сперва пихают тонны теории, что такое ООП, принцыпы ООП, код-стайл, разделение кода. А только потом сажают за клавиатуру. Верстке так не учат, там вам говорят, напиши background: green и фон будет зеленым, никакой теории. Теории того, как потом все, что вы там понаписали будет читать браузер. В итоге получается, есть толпа людей, которые просто не представляют что они делают, они видят задачу как что-то похожее на то, что было на курсах. И выполняют эту задачу "по формуле". А потом с удивлениям видят, что большая часть сайта "поехала". Когда я знаю, что в мой код (верстку) кто-то может влезть, я пишу "железобетонную верстку", так чтобы моя часть не поплыла. Я не люблю этого делать, это занимает лишнее время моей работы, это излишне нагружает ресурсы браузера. Но я вынужден это делать, потому что если кто-то просто вставит float внутрь статьи, а вокруг нее не будет hasLayout, то все остальное поедет. Реально разогнался, извините) Alar, верни репу!

02.09.2016, 16:17	#2
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	Оксана, а что означает "для квадратов 3х3" ? у меня получается такая раскладка: squares_css.png p.s. потестировать ваш код могу, а вот подсказать вряд ли что-то смогу, для меня дизайн вообще и CSS, в частности, это тайна...

02.09.2016, 16:46	#4
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	да, теперь нормально, вот теперь похоже на 3X3

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Не работает WideCharToString - вместо букв квадратики	calypso	Общие вопросы Delphi	7	01.08.2013 12:35
Квадратики вместо текста в Word	GreenPeace	Microsoft Office Word	1	07.06.2013 00:03
Pascal, графика, квадратики	Zo_0m	Помощь студентам	0	09.04.2012 16:12
квадратики вместо переноса строки	Fok	Работа с сетью в Delphi	4	15.11.2010 00:30
Текстуры в старых играх распадаются на квадратики	ArtInt	Свободное общение	5	11.05.2010 16:19