Главная Регистрация RSS
Приветствую Вас, Гость
 
 МАСТЕР НА ВСЁ СЕЛО металлоконструкции, электросварка
✆ (044)360-31-73
НОВОСТИ


Баллоны  50 л. пропановые
Б/У
В селе Крушинка (цена 250 грн.)
тел: 044 360 3173

Баллоны  40 л. кислородные
с кислородом
В селе Крушинка (цена 400 грн.)
тел: 044 360 3173

Статистика
 
Онлайн всего: 1
Гостей: 1
Пользователей: 0
 
Доска почета


  Поделись с другом

Сделаю на заказ.
Конные сани, двуколки. Материал обшивки саней влагостойкая лакированная фанера ФСФ4. Образцы изделий российского мастера Казенкина М.П.

Вывески
Сделаю на заказ ▲

Козырьки
Сделаю на заказ ▲

Мостик садовый
Сделаю на заказ ▲

Бытовки
Сделаю на заказ ▲

Светлая память
 30. 08. 2010

29 августа 8.30 утра перестало биться сердце духовного пастыря, прекрасного человека простой и широкой души, настоятеля Крестовоздвиженского храма с. Крушинка, игумена Серапиона. Подробнее...
Главная » 2013 » Май » 23 » Как записать простую дробь в ХТМЛ
16:04
Как записать простую дробь в ХТМЛ
Как записать  формулу с простой дробью на сайте? 
Я нашел два способа.
  1. Записать дробь в Word и вырезать, сохранив файл, как картинку типа png.
  2. Записать дробь online используя html и CSS.
С удовольствием отдаю найденный скрипт и для наглядности - пример 
Это простой расчет тепловой мощности котла  для частного дома общей площадью 200м²
 
 
 
200м²
  10
 = 20 + 
 20 
  5 
 = 24КВт; 
 
Вот этот ужос - для верстки формулы на странице:
(изменяйте по-вкусу)
Код разметки
 
<div class="div_s"> 
<div><br></div>
<div class="div_s_cont" style="top:-18px;"><br>
<div id="fraction_cont">
<div id="fraction">
<div id="numerator">200м² </div><!--всё на уровне числителя-->
<div id="denominator">&nbsp;&nbsp;10</div><!--всё на уровне знаменателя-->
</div></div>
<div style="float:left;">&nbsp;=&nbsp;20 +&nbsp;</div><!--всё на уровне черты дроби--> 
<div id="fraction_cont">
<div id="fraction">
<div id="numerator">&nbsp;20&nbsp;</div>
<div id="denominator">&nbsp;&nbsp;5&nbsp;</div>
</div></div> 
<div style="float:left;">&nbsp;=&nbsp;<span style="color: rgb(255, 0, 0);">24КВт;</span>  </div></div>
</div><div>
 
А вот этот ужос - стили,  для верстки формулы на странице: 
(изменяйте по-вкусу)
Код стилей
 
/*-------------- ДРОБИ -------------*/
<style>
.div_s{
  width:200px;  
 /*--- border-radius:8px;
  border:1px solid #ABADB3;  убрал рамку, с ней долго возиться---*/
  display:block;  
  font-family:inherit;
  font-size:12px;
  font-weight:normal;
  padding:0px;
  margin-top: 0px;
  }
/* --- это заглавие на рамке, типа <fieldset/> , я убрал.
.div_s_header{
  position:relative;
  top:-20px;
  left:20px;
  color:#73A100;
  font-size:12px;
  font-family:inherit;
  background-color:white;
  padding:0px;
---*/
.div_s_cont{
  position:relative;
  /*---  top:-11px; позиция формулы если в рамке---*/
    left:100%;
    margin-left:-180px;/*---позиция от края---*/
   /*---  width:250px;  если в рамке---*/  
  text-align:left;
}
.div_s_cont_text{
  font-size:10px;
  color:#ABADB3;  
}
 
.answer_s{
  color:#03F;
}
 
#fraction_cont { /*---результат---*/
     position:relative;
   float:left;
   top:-8px;
     
}
#fraction { /*---настроить положение чисел по отношению к дроби---*/
    width: 35px;
    text-align: left;
}
 
#fraction #numerator {
  width:45px; /*---настроить положение чисел по отношению к дроби---*/
  vertical-align: bottom;
  border-bottom: 1px solid #666; /*---черта дроби---*/
  padding:0px;
}
 
#fraction #denominator {
    vertical-align: top;
}  
 
</style>
  /*----------- the and ----------*/
 
 
Просмотров: 1434 | Добавил: Дора | Теги: Записать простую дробь в ХТМЛ | Рейтинг: 5.0/1
Всего комментариев: 1
avatar
1
Для одной формулы, это слишком хлопотный способ. И еще здесь нельзя настроить длину линии дроби, она в стиле "бордер". Для одной формулы легче делать картинку.
avatar

© 2017
 
 
главная