Вход на сайт
Недвижимость 02.05.2024
1620 просмотров
Перейти к просмотру всей ветки
Назад
в ответ uscheswoi_82 02.05.24 12:57, Последний раз изменено 05.05.24 18:36 (uscheswoi_82)
Всем привет!
Давайте продолжим делать наш сайт. Сейчас займёмся подборкой цветов, лейаутом, веб дизайном и вёрсткой:
1. Вот код index.html:
<!DOCTYPE html>
<html>
<head>
<title>Портал недвижимости</title>
<link type="text/css" rel="stylesheet" href="main.css">
<link type="text/css" rel="stylesheet" href="menu.css">
<link type="text/css" rel="stylesheet" href="componentsui.css">
<link type="text/css" rel="stylesheet" href="panelsui.css">
<link type="text/css" rel="stylesheet" href="image.css">
<script src="image.js"></script>
</head>
<body>
<div id="content">
<div>
<br>
<br>
<br>
<br>
<nav>
<ul id="menu">
<li class="sel"><a href="aa.php">Главная</a></li>
<li><a href="aa.php">О нас</a></li>
</ul>
</nav>
<br>
<div id="search">aa
<input type="text" class="field" disabled value="заблокировано">
<br><br>
<input type="text" class="field" placeholder="AAA">
<br><br>
<select class="cbo">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<select class="cbo">
<option selected value="1">Январь</option>
<option value="2">Февраль</option>
</select>
<select class="cbo">
<option selected value="1">1980</option>
<option value="2">1981</option>
</select>
<br><br>
<input type="checkbox" class="chkbox" placeholder="AAA">
<br><br>
<input type="submit" class="btn" value="OK">
<br><br>
<input type="submit" class="btn" disabled value="Нет!">
<br><br><span class="error">Ошибка!</span>
</div>
<br>
<br>
<div id="login">
<label for="usrname">Имя пользователя:</label><br>
<input class="field" name="usrname" id="usrname" type="text">
<br><br>
<label for="pswd">Пароль:</label><br>
<input class="field" name="pswd" id="pswd" type="text">
<br><br>
<div style="float:right;"><a href="registrate.php" class="lnk">Регистрация</a></div><br>
<div style="float:right;"><a href="recovery.php" class="lnk">Забыл пароль</a></div><br>
<div style="float:right;"><input type="submit" class="btn" value="Вход"></div>
<br>
<br>
</div>
<br>
<br>
<img id="image" class="img" src="DSCI3748.JPG" width="300px" height="auto">
<br>
<img class="thunb thunb_sel" src="DSCI3748_thunb.JPG" onclick="on_click(this, 'image','DSCI3748.JPG', 'thunb', 'thunb thunb_sel');">
<img class="thunb" src="DSCI3749_thunb.JPG" onclick="on_click(this, 'image','DSCI3749.JPG', 'thunb', 'thunb thunb_sel');">
<img class="thunb" src="DSCI3750_thunb.JPG" onclick="on_click(this, 'image','DSCI3750.JPG', 'thunb', 'thunb thunb_sel');">
</div>
<br><br>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Площадь:</td>
<td>120кв.м</td>
</tr>
<tr>
<td>Кол-во комнат:</td>
<td>3</td>
</tr>
</table>
</div>
</body>
</html>
2. Это css:
main.css:
* { padding:0; margin:0; }
body { background-color:#EBD234; color:#333; }
#content { margin-left:auto; margin-right:auto; margin-top:0px; width:70%; min-height:1024px; background-color:#FFF; box-shadow:0px 0px 7px #999; }
.lnk { color:#000; text-decoration:none; }
.lnk:hover { color:#000; text-decoration:underline; }
.lnk:visited { color:#000; text-decoration:none; }
menu.css:
nav { padding:0; margin:0; background-color:#000; color:#FFF;}
#menu { list-style-type:none; margin:0; padding:0; overflow:hidden; }
#menu li { float:left; }
#menu .sel { background-color:#333; color:#FFF; text-shadow:0px 0px 7px #FFF; font-weight:bold; }
#menu li a { font-size:20px; display:block; text-align:center; padding:20px; text-decoration:none; color:#FFF; }
panelsui.css:
#login { box-shadow:0px 0px 7px #999; margin-left:auto; margin-right:auto; width:180px; min-height:120px; border-radius:5px; padding:15px 15px; }
#search { box-shadow:0px 0px 7px #999; margin-left:auto; margin-right:auto; width:400px; min-height:150px; border-radius:5px; padding:5px 5px; }
image.css:
.img { box-shadow:0px 0px 3px #EEE; padding:5px 5px; border:1px solid #EEE; }
.thunb { width:70px; height:auto; padding:5px 5px; border:1px solid #EEE; }
.thunb_sel { border:1px solid #000; opacity:0.3; }
3. Javascript image.js:
function on_click(parent, id, src, cls, cls_sel) {
document.getElementById(id).src = src;
var el = document.getElementsByClassName(cls);
for(var i=0; i<el.length; i++) el<i>.setAttribute('class', cls);
parent.setAttribute('class', cls + ' ' + cls_sel);
}4. А вот и результат, это я лишь тестирую:
Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение
Дневник тяжелобольного инвалида
Дневник тяжелобольного инвалида