Изменение внешнего вида элементов

maxdaddycool · June 25, 2016

Здравствуйте! Прошу помощи программистов! Я-самоучка, делаю потихоньку сайтик по монтажу натяжных потолков по шаблону. Необходимо сделать простенький калькулятор расчета стоимости. Нашел в интернете код, переделываю его под себя, как могу. Ни в какую не получается изменить вид окон ввода площади и вывода стоимости. Помогите пожалуйста сделать эти два окна более красивыми (на ваш взгляд). С помощью html-тегов изменить шрифт, цвет, фон и размер этих окон у меня никак не получается. Прошу помочь мне преодолеть эту мертвую точку!

Вот так выглядит калькулятор у меня на сайте:

А вот, собственно, его код:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<meta charset="utf-8">
	<style type="text/css">
	div.demo { padding: 10px !important; width: 400px; color:#FFFFFF; font-size: 19px;}
	.ui-widget{font-size: 1.5em !important;}
	</style>
	<script>
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 6,
			max: 30,
			value: 6,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				calc();
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	$("#amount").change(function(){
     $( "#slider-range-max" ).slider({value:$(this).val() });
});
	});
	function calc(par){
	amount = document.cl_form.amount.value;
 
	//var summ;
    switch (amount) {
  case '6': summ = 2850;
    break;
  case '7': summ = 3150;
    break;
  case '8': summ = 3288;
    break;
  case '9': summ = 3600;
    break;
  case '10': summ = 3850;
    break;
  case '11': summ = 4147;
    break;
  case '12': summ = 4380;
    break;
  case '13': summ = 4524;
    break;
  case '14': summ = 4774;
    break;
  case '15': summ = 4995;
    break;
  case '16': summ = 5232;
    break;
  case '17': summ = 5457;
    break;
  case '18': summ = 5670;
    break;
  case '19': summ = 5871;
    break;
  case '20': summ = 6100;
    break;
  case '21': summ = 6342;
    break;
  case '22': summ = 6622;
    break;
  case '23': summ = 6785;
    break;
  case '24': summ = 7008;
    break;
  case '25': summ = 7225;
    break;
  case '26': summ = 7410;
    break;
  case '27': summ = 7614;
    break;
  case '28': summ = 7896;
    break;
  case '29': summ = 8149;
    break;
  case '30': summ = 8400;
    break;	
  default: summ = "нет данных";
}
	document.cl_form.summ.value=summ;
	document.getElementById("amounttd").innerHTML=amount;
	document.getElementById("summ").innerHTML=summ;
	return false; 
	}
	</script>
</head>
<body>
<form name="cl_form">	
<div class="demo">

<p>
	<label for="amount">Площадь потолка, м2:</label>
	<input type="number" min="6" max="30" id="amount" onchange="calc(this.value);" style="border:0; color:#001AFF; font-weight:bold; width:30px;" />
</p>
<div id="slider-range-max"></div>
<p>
	<label for="summ">Стоимость, руб:</label>
	<input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="text";>
	</p>
<p>
	<table border="1" cellpadding="3" style="display: none">
		<tr>
			<td>
				Площадь, м2: <p id="amounttd">0</p>
			</td>
			<td>
				Стоимость, руб: <p id="summ">0</p>
			</td>
		<tr>
	</table>
</p>
</div>
</form>
</body>
</html>

Простите, если для опытных разработчиков вопрос покажется глупым!

wwt · June 25, 2016

свойства CSS для нужных тегов input

color font-size border border-radius padding background

maxdaddycool · June 26, 2016

Вы меня конечно извините, но я не особо понимаю, как работает CSS.
Может меня пальцем ткнуть, куда в моем коде засунуть строчки кода CSS? Ведь у меня, как я понимаю, HTML-код.
Свой сайт я сделал на Wix и туда есть возможность засунуть только HTML-код. Поэтому вопрос, можно ли как-то объединить, либо сделать все только средствами HTML?

Launder · June 26, 2016

26 минут назад, maxdaddycool сказал:

куда в моем коде засунуть строчки кода CSS?

В Вашем коде применяются глобальные стили.

Джулия · July 5, 2016

может,вам подойдёт такая стилизация http://codepen.io/JuliJulia/pen/vKkaZY

Sign In

Изменение внешнего вида элементов

Recommended Posts

maxdaddycool

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

maxdaddycool

Link to comment

Share on other sites

Launder

Link to comment

Share on other sites

Джулия

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information