Бисерные сказки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Бисерные сказки » Web Design » полезности

полезности

Страница: 1 2  

Сообщений 1 страница 20 из 22

1

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">

<title></title>
</head>
<body>

</body>
</html>

2

.clearfix:after{
    content:'';
    display:table;
    clear:both;}

3

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-weight: normal;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

4

@import url('reset.css');

5

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;

6

box-shadow:
-moz-box-shadow:
-webkit-box-shadow:
-o-box-shadow:
-ms-box-shadow:


-webkit-background-size: 100%;

-moz-background-size: 100%;

  -o-background-size: 100%;

   background-size: 100%;

7

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

8

@media screen and (max-width:992px)

@media screen and (max-width:768px)

@media screen and (max-width:480px)

@media screen and (max-width:321px)

9

/*992px------------------------------------------------*/
@media screen and (max-width:992px){
   
   
}

/*768px------------------------------------------------*/
@media screen and (max-width:768px){

}

/*480px------------------------------------------------*/
@media screen and (max-width:480px){

}

/*321px------------------------------------------------*/
@media screen and (max-width:321px){

}

10

https://speechpad.ru/

11

код адаптивной навигации бутстрап

Код:
<div class="container">
    <div class="row">
    	<h1>название сайта</h1>
    	<div class="navbar navbar-inverse">
        <div class="container">
        	<div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
            	<span class="sr-only">открыть навигацию</span>
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
            
            </button>
            <!--<a class="navbar-brand" href="#">название компаниии</a>-->
        	</div>
        	<div class="collapse navbar-collapse" id="responsive-menu">
            <ul class="nav navbar-nav">
            	<li><a href="#">Пункт 1</a></li>
            	<li><a href="#">Пункт 2</a></li>
            	<li><a href="#">Пункт 3</a></li>
            	<li><a href="#">Пункт 4</a></li>
            </ul>
        	</div>
        </div>
    	</div>
    
    </div>
	
	
	</div>

12

код выпадающего меню

Код:
              <li class="dropdown">
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Пункт 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                	<li><a href="#">Пункт 1</a></li>
                	<li><a href="#">Пункт 2</a></li>
                	<li><a href="#">Пункт 3</a></li>
                	<li class="divider"></li>
                	<li><a href="#">Пункт 4</a></li>
                    </ul>
            	</li>

<li class="divider"></li> - полоска разделитель. Обычно не нужна

13

код бутстраповского слайдера

Код:
<div id="carousel" class="carousel slide">
	<!--индикаторы слайдов-->
	<ol class="carousel-indicators">
    <li class="active" data-target="#carousel" data-slide-to="0"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
	</ol>
	<!-- слайды-->
	<div class="carousel-inner">
    <div class="item active">
    	<img src="img/1.jpg" alt="">
    	<div class="carousel-caption">
    	 <h3>первый слайд</h3>
    	 <p>описание первого слайда</p>
    	</div>
    </div>
    <div class="item">
    	<img src="img/2.jpg" alt="">
    	<div class="carousel-caption">
    	 <h3>второй слайд</h3>
    	 <p>описание второго слайда</p>
    	</div>
    </div>
    <div class="item">
    	<img src="img/3.jpg" alt="">
    	<div class="carousel-caption">
    	 <h3>третий слайд</h3>
    	 <p>описание третьего слайда</p>
    	</div>
    </div>
	
	</div>
	<!--Стрелки переключения слайдов-->
	<a href="#carousel" class="left carousel-control" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a href="#carousel" class="right carousel-control" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
	</a>
 </div>

14

код кнопки с выпадающим меню

Код:
<div class="btn-group ">
        	<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
            Выпадающее меню <span class="caret"></span>
        	</button>
        	<ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
        	</ul>
        </div>

15

код вкладок

Код:
<div class="tabs">
        	<ul class="nav nav-tabs">
            <li class="active"><a href="#tab-1" data-toggle="tab">Вкладка 1</a></li>
            <li><a href="#tab-2" data-toggle="tab">Вкладка 2</a></li>
            <li><a href="#tab-3" data-toggle="tab">Вкладка 3</a></li>
        	</ul>
        	<div class="tab-content">
            <div class="tab-pane active" id="tab-1">
            	<p>
                Параграф с текстом
            	</p>
            </div>
            <div class="tab-pane" id="tab-2">
            	<p>
                Параграф с котом
            	</p>
            </div>
            <div class="tab-pane" id="tab-3">
            	<p>
                Параграф с ежиком
            	</p>
            </div>
        	</div>
        </div>

16

код спойлера

Код:
<a href="#spoiler-1" data-toggle="collapse" class="btn btn-primary">Открыть спойлер</a>
        <div class="collapse" id="spoiler-1">
        	<div class="well">
            <p>Параграф с текстом</p>
        	</div>
        </div>

17

код аккордеона

Код:
<div id="accordion" class="panel-group">
        	<div class="panel panel-default">
            <div class="panel-heading">
            	<h4 class="panel-title">
                <a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Открыть 1-й слайд</a>
            	</h4>
            </div>
            <div id="collapse-1" class="panel-collapse collapse in">
            	<div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sit soluta atque debitis labore laudantium repellendus a modi odio vitae consequatur quam ad esse accusantium libero aperiam laboriosam adipisci eius.</p>
            	</div>
            </div>
        	</div>
        	<div class="panel panel-default">
        	<div class="panel-heading">
            	<h4 class="panel-title">
                <a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Открыть 2-й слайд</a>
            	</h4>
            </div>
            <div id="collapse-2" data-parent="#accordion" class="panel-collapse collapse ">
            	<div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sit soluta atque debitis labore laudantium repellendus a modi odio vitae consequatur quam ad esse accusantium libero aperiam laboriosam adipisci eius.</p>
            	</div>
            </div>
        	
        	</div>
        	<div class="panel panel-default">
        	
            <div class="panel-heading">
            	<h4 class="panel-title">
                <a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Открыть 3-й слайд</a>
            	</h4>
            </div>
            <div id="collapse-3" class="panel-collapse collapse ">
            	<div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sit soluta atque debitis labore laudantium repellendus a modi odio vitae consequatur quam ad esse accusantium libero aperiam laboriosam adipisci eius.</p>
            	</div>
            </div>
        	</div>
        </div

18

код модального окна

код самого окна

Код:
<div class="modal fade" id="modal-1">
    <div class="modal-dialog modal-sm">
    	<div class="modal-content ">
        <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">
            <i class="fa fa-close"></i>
        	</button>
        	<h4 class="modal-title">Название окна</h4>
        	
        </div>
        <div class="modal-body">
        	<p>Это модальное окно</p>
        </div>
        <div class="modal-footer">
        	<button class="btn btn-danger" type="button" data-dismiss="modal">Отмена</button>
        </div>
    	</div>
    </div>
	
	</div>

код кнопки окна

Код:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">Открыть модальное окно</button>

19

код формы входа

Код:
<form action="" class="navbar-form navbar-right">
            	<div class="form-group">
                <input type="text" class="form-control" placeholder="E-mail" value="">
                
            	</div>
            	<div class="form-group">
                <input type="password" class="form-control" placeholder="Пароль" value="">
            	</div>
            	<button type="submit"class="btn btn-primary">
                <i class="fa fa-sign-in"></i> ВОЙТИ
            	</button>
            </form>

20

основа странички с бутстрапом

Код:
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/font-awesome.css" rel="stylesheet">
	<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>
Страница: 1 2  

Вы здесь » Бисерные сказки » Web Design » полезности