Pagalba su HTML ir CSS

Gruodžio 18, 2016

Sveiki,

Darau HTML ir CSS kursinį darbą. Deja, nesiseka taip kaip tikėjausi.

Užduotys, kurių man trūksta:

1. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta; (raudonas blokas)

2. Blokas apsisuka pagal X ašį 360 laipsnių (flip); (mėlynas blokas)

HTML kodas:

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">

	<title>
	Kursinis darbas
	</title>

	<link rel="stylesheet" href="stylesheet.css" type="text/css">

	<meta name="viewport" content="width=device-width" content="initial-scale=1">
</head>

<body>
	<div class="zydra"></div>
	<div class="zalia"></div>
	<div class="geltona"></div>
	<div class="melyna"></div>
	<div class="oranzine"></div>
	<div class="ruda"></div>
	<div id="balta" class="balta" onmouseover="pirmaT()" onmouseout="pirmaN()" ><span id="pirma">Tekstas</span></div>
	<div class="raudona"></div>
	<div class="juoda"></div>

	<script>
		function pirmaT(){
			document.getElementById("pirma").style.color = "white";
			document.getElementById("balta").style.backgroundColor = "black";
		}

		function pirmaN(){
			document.getElementById("trecia").style.color = "black";
			document.getElementById("balta").style.backgroundColor = "white";
		}

	</script>
</body>
</html>

CSS kodas:

body{
margin:0;
max-width:1680px;
height:100vh;
}

.zydra{
background-color: #00BFFF;
width:30%;
height:50%;
float: left;
}

.zalia{
background-color: #228B22;
width: 70%;
height: 10%;
float: left;
}

.geltona{
background-color: #FFFF00;
width: 35%;
height: 10%;
float: right;
}

.melyna{
background-color: #000080;
width: 35%;
height: 10%;
float: left;
}


.oranzine{
background-color: #FFA500;
width: 70%;
height: 30%;
float: left;
}

.ruda{
background-color: #8B4513;
width: 15%;
height: 40%;
float: left;
}

.raudona{
background-color: #FF0000;
width: 35%;
height: 40%;
float: left;
}

.balta{
background-color: white;
width: 50%;
height: 40%;
float: right;
text-align: center;
}

.juoda{
background-color: black;
width: 100%;
height: 10%;
float: left;
}

@media only screen and (max-width: 768px) and (max-height: 1024px){

body{
	margin:0;
	max-width: 768px;
	max-height: 1024px;
}

.zydra{
	background-color: #00BFFF;
	width: 50%;
	height: 50%;
	float: left;
}

.zalia{
	background-color: #228B22;
	width: 50%;
	height: 10%;
	float: right;
}

.melyna{
	background-color: #000080;
	width: 50%;
	height: 10%;
	float: right;
}

.geltona{
	display: none;
}

.oranzine{
	background-color: #FFA500;
	width: 50%;
	height: 30%;
	float: right;
}

.ruda{
	display: none;
}

.raudona{
	background-color: #FF0000;
	width: 40%;
	height: 40%;
	float: left;
}

.balta{
	background-color: white;
	width: 60%;
	height: 40%;
	float: right;
	text-align: center;

}

.juoda{
	background-color: black;
	width: 100%;
	height: 10%;
	float: left;
}


}

Žiūriu įvairius tutorial, tačiau neišeina, o galbūt ne visai suprantu. Svarbiau būtų suprasti, kaip kas vyksta, o ne kad būtų tiesiog padarytą. Jei kas pagelbėtų būčiau labai dėkingas!

Gruodžio 18, 2016

Ieškoks transform css tutorial.

Esmė čia tokia:

1. Elementas ęsantis ramybės būsenoje su nurodyta jo pozicija, turi turėti transition property.

2. Tas pats elementas tik jau "onmouseover" keičia savo pozicija ir čia suveikia CSS transform pvz: transform: translatex(100px);

Taigi jei elementas esantis ramybės būsenoje turėjo posicija 0, tai užvedus jis pavažiuoja pagal X ašį 100px.

Šiam darbui tau reikės suprasti dar kaip veikia relative ir absolute pozicionavimas elementu.

Redagavo Gruodžio 18, 2016 Prodev

Prisijungti

Pagalba su HTML ir CSS

Rekomenduojami pranešimai

altenis 73

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prodev 57

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Dabar naršo 0 narių

Prisijunk prie bendruomenės dabar!

Naujausios temos

Karštos temos

Veiklos srautas

Skelbimai