Куда заливать свои файлы

Привет всем! Кто сталкивался с проблемой где можно бесплатно хранить Ваши файлы и не только хранить, но и чтобы посетители могли кликнуть по ссылке прямо из поста и скачать файл
Дать возможность скачать файл по прямой ссылке, оказывается можно с помощьюGoogle Сайтов. Для этого нам нужно создать свой сайт или выбрать уже готовый. Как сделать так, чтобы посетители могли кликнуть по ссылке прямо из поста и скачать файл.Заходим в свой аккаунт на Google. Находим ссылку на сайты и кликаем по ней.
На следущей странице заполняем название сайта,дизайн и другие настройки можно сделать и позже, обратите внимание на пункт Дополнительные параметры – Общий доступ.
Обязательно выберите - Этот сайт может просматривать любой пользователь. Если не сделать эту настройку, ваши файлы не будут доступны для скачивания. Кстати там можно выбрать готовый сайт. Если Вы не хотите ломать голуву, советую выбрать из предложенных вариантов.


После заполнения,жмем кнопку Создать сайт. 
Нажмите кнопку - Ещё. Выпадет меню: выбираем пункт Управление сайтом. Попадаем на страницу Управление сайтом. Нажимаем пункт: Приложения

Дальше жмем на кнопку Загрузить и загружаем файл с компьютера.
Когда загрузите файл. Жмем правой кнопкой мыши по ссылке загрузить. И выбираем пункт Копировать ссылку.Но эту ссылку пока нельзя вставлять в блог. Её необходимо немного отредактировать.


https://sites.google.com/site/help/ cmotrim tyt.rar?attredirects=0&d=1
У этой ссылки необходимо удалить все, что находится после знака вопроса. Ссылка должна заканчиваться строго на типе файла, в данном случае так:

https://sites.google.com/site/ help/ cmotrim tyt.rar .rar
Вот такую ссылку можно вставлять в блог. 

источник

CSS - как сделать вертикальное меню?

Продолжаем изучать CSS, и сегодня мы будем рассматривать пример создания вертикального выпадающего меню или по-другому его еще называют меню «аккордеон». Меню будем делать на чистом CSS без использования JavaScript, хотя если использовать JS, меню получится намного лучше, но в этом уроке мы изучаем CSS.

Примечание! Если Вы до этого не встречались с технологией CSS (Cascading Style Sheets), то для освоения данного урока сначала прочитайте статью Основы CSS для начинающих.

Важно! Пример ниже, тестировался и точно работает, со всеми эффектами, в браузерах:

• Google – Chrome (всех последних версий);
• Mozilla Firefox  (всех последних версий);
• Opera 12.00.

Некоторые эффекты не работают:

• Internet Explorer (версии 6-9);
• Opera (ниже 11 версии).

Меню вообще не работает:

• Internet Explorer (ниже 6 версии).

Ну что давайте приступим, сразу скажу, что меню делается не сложно, да и получилось оно достаточно простое, сейчас Вы все сами увидите.

Для начала посмотрим на то, что мы попытаемся сделать в конечном итоге:

Меню 1

Меню 2

Меню 3

Меню 4

В сегодняшнем уроке мы рассмотрим и научимся использовать следующие:

• селекторы идентификаторов и классов;
• селекторы потомков;
• селекторы дочерних элементов;
• селекторы псевдоклассов;
• свойства (например: margin, cursor, overflow, width, height, text-align, background, color);
• проприетарные CSS-свойства (transition, border-radius и linear-gradient);
• рассмотрим один css хак (для IE);
• секцию expression;
• использование комментариев, обозначаются /*Текст комментария*/.

Для того чтобы все было понятней, весь код я подробно комментирую, каждый селектор и каждое свойство. Чтобы у Вас все работало, скопируйте весь код и создайте файл с расширением html и вставьте этот код туда. Советую использовать при редактировании, для удобства, текстовый редактор NotePad++ и в нем поставьте синтаксис CSS, после чего у Вас все комментарии станут подсвечиваться, если они Вам не потребуются, то просто удалите их.

Исходный код выпадающего меню на CSS

<style> /*для элемента с идентификаторов mymenu*/ #mymenu { width: 150px; /*ширина основного блока*/ margin: 0 auto; /*отступ от каждого края, так мы выровняли наше меню по центру*/ } /*для элемента с классом mydiv, у которого в потомках есть идентификаторов mymenu*/ #mymenu .mydiv { width: 150px;/*ширина всего меню*/ transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 15px;/*округления уголков рамки*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; } /*для элемента h3, у которого в потомках есть класс mydiv*/ .mydiv h3{ cursor:pointer; margin: 0 0 0 0;/*величина отступа от каждого края*/ text-align: center; color:white; border-radius: 15px;/*округления уголков заголовка*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; background: #4EAEC1; /*цвет фона для параграфа*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #21cbed 0%, #055261 44%, #086a7d 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /*IE10+ */ background: -ms-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /* W3C */ background: linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#21cbed', endColorstr='#086a7d',GradientType=0 ); } /*для элемента p, у которого в потомках есть идентификаторов mymenu*/ #mymenu p { text-align: center;/*выравнивание по центру*/ margin: 0 0 0 0;/*величина отступа от каждого края*/ height: 0px;/*выставляем высоту для параграфа, чтобы по умолчанию он был скрыт*/ overflow: hidden;/*скрываем переполнение контента*/ transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 15px;/*округления уголков параграфа*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; background: #21cbed; /*цвет фона для параграфа*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #4EAEC1 0%, #188499 44%, #065868 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* IE10+ */ background: -ms-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* W3C */ background: linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 ); } /*для элемента p с псевдоклассов :hover(срабатывает при наведении) у которого в потомках есть идентификаторов mymenu*/ #mymenu p:hover { background: #4ee1fe;/*цвет фона для параграфа при наведении*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #4ee1fe 0%, #11b4d4 44%, #06a2c1 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* IE10+ */ background: -ms-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* W3C */ background: linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); cursor:pointer;/*изменяем курсор*/ } /*для элемента p, который является дочерним элементом элемента div с псевдоклассом :hover (будет срабатывать при наведении), у которого в потомках есть идентификаторов mymenu*/ #mymenu div:hover > p { height: 25px;/*при наведении на блок с заголовком, высота параграфа становится 25 пикселей, это как раз и есть эффект появления подменю*/ } /*далее идет примочка для Internet Explorer, другие браузеры ее не видят, так называемый хак для IE*/ * html #mymenu .mydiv { filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 ); height: 20px;/*начальная высота блока*/ overflow: hidden; /*скрываем переполнение контента*/ forIE: expression(/*секция expression - вставляем javascript код, для выставления нового класса*/ onmouseover = function() {this.className += ' hover'}, onmouseout = function() {this.className = this.className.replace('hover', '')} ); } /*для только что созданного нового класса .hover*/ * html #mymenu .mydiv.hover { height: auto;/*выставляем высоту для нашего блока с параграфами в авто, для того чтобы было динамическое меню, т.е. при добавлении новых пунктов меню блок сам будет подгонять свой размер по данным внутри себя*/ } /*для элемента a(ссылки), у которого в потомках есть элемент p, в свою очередь, у которого в потомках есть идентификаторов mymenu, поставим цвет белый, т.е. цвет ссылки*/ #mymenu p a { color:white; } </style> <div id="mymenu"> <div class="mydiv"> <h3 > Меню 1</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> </div> <div class="mydiv"> <h3> Меню 2</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> </div> <div class="mydiv"> <h3> Меню 3</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> <p> <a href = "#">Подменю4</a></p> </div> <div class="mydiv"> <h3> Меню 4</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> <p> <a href = "#">Подменю4</a></p> <p> <a href = "#">Подменю5</a></p> </div> </div>

источник

Похожие статьи:

Как создать снимок системы в Linux Mint? Создание резервной копии системы и ее восстановление (714 Hits)

Как скачать все фото из Инстаграм на компьютер? (1021 Hits)

Как вывести значения столбца в строке через запятую на T-SQL? Microsoft SQL Server (890 Hits)

Как сделать скриншот экрана в Linux? (1386 Hits)

Fedora Media Writer - как создать загрузочную флешку с Linux Fedora? (1411 Hits)

Эффектные вкладки (табы) для сайта

Привет друзья! В данном посте хочу познакомить вас с довольно интересным решением размещения контента на своем сайте. Мы будем использовать окно с вкладками, которые будут переключаться и отображать свое содержимое каждой вкладки с плавным появлением.

Все это будет реализовано на чистом CSS3, ничего лишнего и громоздкого. Данный блок можно разместить в любой раздел страницы как в виде отдельного сообщения, так и в боковой колонке или в модальном окне.

Для реализации данной идеи нам нужны переменные, работать с которыми можно из языков программирования, к примеру JavaScript, но наша задача исключить их и не использовать коды JS.

CSS является описательным языком программирования и не имеет переменных. Что делать, спросите вы? Все просто, мы будем использовать флажки и переключатели, которые имеются в HTML. Читать далее...

Угловая лента на CSS

Привет друзья! Сегодня хочу показать, как можно сделать угловую ленточку на своем сайте или отдельном блоке. Наша ленточка будет реализована без использования различных скриптов или картинок, а  только средствами CSS и HTML. Мы с легкостью сможем менять надпись на ленте, цвет шрифта и цвет самой ленты.

Для начала нам понадобится html-разметка, которая будет выводить нашу ленту в окне браузера  и размещается данный код после открывающего или перед закрывающим тегом <body> </body>:

<div class=»wrap»>

            <div class=»wrap-ribbon»>

                        <div class=»ribbon»>НОВИНКА</div>

            </div>

</div>

Первый div задает отдельный блок, на котором будет расположена наша ленточка. Второй и третий – это расположение и сама лента соответственно.

Поместив данный код в коде нашей странице, мы увидим только надпись. Теперь нам нужно заняться стилями и для начала определим нашему основному блоку размеры, расположение и выделим его:

.wrap {

  margin: 50px auto;

  width: 480px;

  height: 300px;

  background: white;

  border: 1px solid #000;

  position: relative;

  z-index: 99;

}

Вот, что у вас должно получиться:

НОВИНКА

Если вам нужно расположить ленту непосредственно на странице вашего сайта, тогда нужно исключить данный div из разметки и оставить только div-ы с классами ribbon и wrap-ribbon.

Далее задаем стиль непосредственно нашей ленточке и поворачиваем ее на угол 45 градусов:

.ribbon {

            position: relative;

            width: 150px;

            background-color: #BFDC7A; /* цвет ленты */

            font: bold 16px Sans-Serif;

            color: #333;    /* цвет шрифта */

            text-align: center;

            text-shadow: 1px 1px 0px rgba(255,255,255,0.5);

            padding: 7px 0;

            top: 25px;

            left: -10px;

            -webkit-transform: rotate(45deg);

            -moz-transform:    rotate(45deg);

            -ms-transform:     rotate(45deg);

            -o-transform:      rotate(45deg);

}

Получаем вот такую картинку- повернутая лента с надписью:

НОВИНКА

Ну что, осталось самое малое: задаем расположение нашей ленты –двигаем вправо и обрезаем при помощи свойства overflow: hidden; все лишнее, чтобы не торчало за пределами блока:

.wrap-ribbon {

            width: 106px;

            height: 106px;

            overflow: hidden;

            position: absolute;

            top: 0;

            right: 0;

}

Вот и все. У вас должна отобразиться следующая картинка:

НОВИНКА

Иногда бывает необходимость сделать так, чтобы наша ленточка была одновременно ссылкой, которая будет вести на другую страницу. Для этого нам нудно немного изменить код разметки вот таким образом:

<div class=»wrap»>

            <div class=»wrap-ribbon»>

            <a href=»#» target=»_blank» style=»text-decoration: none;»>

                        <div class=»ribbon»>НОВИНКА</div>

            </a>

            </div>

</div>

Вместо # нужно вставить нужный адрес, по которому будет осуществляться переход. Свойство text-decoration: none; убирает подчеркивание надписи нашей ссылки.

Теперь вы можете использовать данную ленточку на своих ресурсах, надеюсь никаких трудностей не возникнет. Будут вопросы, пишите в комментариях под данной статьей.

источник

Еще один вариант закругления углов блоков

Закругленные углы блока популярнейшая вещь в современном веб-дизайне. Чтобы сотворить такое люди придумали довольно много способов. Вот один из них.

В HTML пишем:

<div id="round-div"> <span class="tan-bg"> <b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b> </span> <h3> Заголовок</h3> <div class="inner-box"> Здесь текст </div> <b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b> </div>

В CSS пишем:

<style> h3 { margin: 0 0 10px 0; } .r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 { display: block; height: 1px; overflow: hidden; font-size:1px; } .r10 { margin: 0 10px; } .r9 { margin: 0 9px; } .r8 { margin: 0 8px; } .r7 { margin: 0 7px; } .r6 { margin: 0 6px; } .r5 { margin: 0 5px; } .r4 { margin: 0 4px; } .r3 { margin: 0 3px; } .r2 { margin: 0 2px; } .r1 { margin: 0 1px; } .inner-box {padding:0.7em 1em; } .inner-box { background-color: Antiquewhite; text-align : justify;} #round-div {width:400px; margin: 1em;} #round-div .tan-bg b, #round-div h3 {background-color: Tan; } #round-div h3 { padding:0.25em 0.75em 0.5em; margin-bottom:0; } #round-div .inner-box, #round-div b { background-color: Antiquewhite; </style>

Закругленные углы блока

Углы этого блока выглядят закругленными потому что я использовал свойства CSS, которые подглядел на одном из сайтов в Интернете, адрес которого давным давно утерян. Количество знаков, которые можно вставить в этот блок неограничено. То есть, это резиновый блок, его можно растянуть вдоль и поперек.

Работает во всех популярных браузерах.

Закругление углов таблиц и блоков без графики

Также без особых усилий можно сделать таблицу или блок с закруглёнными углами не прибегая к услугам графических редакторов, т.е. без графики. Правда, это работает не во всех браузерах. Лучший браузер всех времен (Internet Explorer) опять отличился, этот метод работает во всех популярных браузерах: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

В HTML пишем:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="round"> <tr> <td> <p> Текст </p> </td> </tr> </table> или <div id="round"> здесь много текста</div>

В CSS указываем цвет фона, цвет рамки, и т.д.

<style> #round { background-color: #f5f5f5; border: 1px solid #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style>

В результате получаем таблицу или блок с закругленными углами:

Углы этого блока (div'а) выглядят закругленными потому что мы использовали CSS3, который понимают все популярные браузеры: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

Закругление углов, три фоновых рисунка

Чтобы иметь возможность вставлять неограниченноо количество знаков и при этом таблица была с закругленными углами потребуется сделать три картинки.

В HTML пишем:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="table-round3"> <tr> <td class="top"></td> </tr> <tr> <td class="center"> <p> Текст </p> </td> </tr> <tr> <td class="bottom"></td> </tr> </table>

В CSS указываем размеры и адреса фоновых картинкок, размер и цвет шрифта:

<style> #table-round3 { margin : 0; padding : 0; width:600px; font:12px verdana, arial, helvetica, sans-serif; color : #866057; } .top { background : url('images/top.png') no-repeat; height : 10px; padding : 0; margin : 0; } .center { background : url('images/center.png') repeat-y; padding : 8px; margin : 0; } .bottom { background : url('images/bottom.png') no-repeat; height : 10px; padding : 0; margin : 0; } <style>

В результате получаем вот такую таблицу:

Углы этой таблицы выглядят закругленными потому что мы использовали три фоновых картинки. Количество знаков, которые можно вставить в эту таблицу неограничено, то есть в таблицу можно вставить сколько угодно текста.

Отступ текста справа и слева - padding

Зайдите редактирование шаблона "Страницы сайта", найдите строчку

<TD class=topBorder style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px;" vAlign=top width=600 colSpan=3 height="100%">

и замените на

<TD class=topBorder style="padding:15px;" vAlign=top width=600 colSpan=3 height="100%">

источник 

Как вставить баннер справа в шапке сайта?

В верхней части после кода первого баннера установите следующий код:
<div id="ban2"> здесь код вашего баннера</div>
в стили добавьте:
<style> #ban2 {float: right;top: -20px;position: relative;} </style>

test-01

000test000

<div class="code" style="box-sizing: border-box;"> <pre style="background-color: whitesmoke; border-radius: 4px; border: 2px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">000test000</pre> </div>