Хотя IE6 был проигнорирован, за исключением некоторых требовательных требований, IE8, браузер IE8, который поставляется с Win7, все еще необходимо поддерживать.
Основным преимуществом этого метода является то, что я лично считаю, что это меньше подготовки и не нужно искать большое количество картинок, чтобы сделать материалы в Интернете. Вам просто нужно подготовить начальную загрузку, jquery и photoshop. Как настроить Bootstrap и jQuery, вы можете обратиться к «Bootstrap, чтобы написать диалоговое окно, которое можно закрыть на текущей веб -странице, которую можно закрыть» (нажмите, чтобы открыть ссылку)
Когда его попросили написать веб -сайт, вы часто будете беспокоиться, как макет его. На самом деле, это не сложно. Если вы можете пользоваться начальной загрузкой и иметь определенный метод, вы все равно можете быстро и легко справиться с домашними заданиями, чтобы справиться с обычными потребностями.
Хотя шаблоны страниц давно ищут в Интернете, ключом является возможность понять процесс создания этих шаблонов страниц.
После загрузки этих шаблонов несовместимо с браузером и не будет изменен, это будет большой проблемой.
1. Основные цели
Используйте Bootstrapv3 для создания следующей страницы:
Домашняя страница показана выше. Во -первых, в заголовке висят навигация на этом сайте, который остается, в среднем, правом и раскрывающемся меню. Суть здесь - это группа кнопок, и компонент навигационной панели, предоставленный Bootstrap, не может быть использован, поскольку этот компонент навигационной панели не совместим с IE8. Для получения подробной информации см. Статью «Как решить дефекты навигационной навигационной навигационной базы в IE8» (нажмите, чтобы открыть ссылку)
После этого под гигантским экраном есть три столбца и две соответствующие кнопки. Здесь вы можете разместить наиболее важные части веб -сайта и, наконец, как обычно, информацию об авторском праве.
Внутренняя страница выглядит так:
Это также верхняя навигационная панель, за которой следует заголовок и содержание этой внутренней страницы. Название внутренней страницы по сути является гигантским экраном, но он просто меньше, чем размер домашней страницы.
Следующим является информация об авторском праве.
2. Процесс производства
1. Сначала откройте Photoshop и создайте новое изображение 1024x1. Ширина максимально широкая. Просто постарайтесь быть как можно более широким. Изображение 1. Цвет переднего плана темно -зеленый R: 0 G: 140 B: 0, цвет фона - светло -зеленый R: 100 G: 200 B: 100. Используйте инструмент градиента, чтобы вытащить следующее изображение. Независимо от того, как вы его тянете, вы можете потянуть его влево и вправо, а в середине и обеих сторонах в зависимости от ваших личных предпочтений:
Это единственное изображение, которое нам нужно подготовить. Вы можете закрыть Photoshop, отбросить его в сторону и сохранить это изображение в папке проекта сайта. Это изображение составляет всего около 6K и вообще не влияет на загрузку.
2. Домашняя страница
Конкретный код заключается в следующем, а затем код объясняется один за другим:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <название> unt witch witch </title> <meta name = "Viewport" content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src = "js/bootstrap.js"> </script> <style type = "text/css"> H1, H2, H3, H4, H5 {font-family: «Microsoft Yahei Ui», «Microsoft Yahei», «Helvetica neue», Helvetica, arial, Hiragino gbina », Hirenans», Hirenans », Hirenans», Hirenans », Hirenans», Hirenans »,« Hiren ». «Wenquanyi Micro hei», Sans-Serif; } </style> </head> <body> <div style="position: abstracted; top: 0; left: 0; width: 100%;"> <div> <div> <button type="button"> Left </button> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> </div> <div style="background-image: URL (Images /bg.jpg); <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href = "#" role = "button"> кнопка </a> <a href = "#" rol = "Кнопка"> Кнопка </a> </p> </div> </div> </p> <p> <p> <p> href = "#" role = "button"> кнопка </a> <a href = "#" rol = "button"> кнопка </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <p> href = "#"#"rol =" h3>> <p> ... ROLE = "Кнопка"> Кнопка </a> </p> </div> </div> </div> <div> <div style = "text-align: center"> Информация об авторском праве </div> </div> </div> </body> </html>(1) <голова> часть
<Head> <!-Кодирование веб-сайта, заголовок, адаптивный экран и т. Д.-> <Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt out названный документ </title> <meta name = "viewport" content = "width = device-width, начальная шкала = 1.0, пользовательский сбалв = no"! be used--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <!--This is the only css style that we need to define ourselves to solve the bug in the win7 system that Microsoft's black font cannot be displayed normally, but the Song font is displayed--> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head>(2) Навигационная планка
Поскольку навигационная панель, предоставленная Bootstrap, не применима, нам пришлось использовать группу кнопок, предоставленную Bootstrap, чтобы написать навигационную панель сами
<!-Во-первых, навигационная панель должна быть подвешена в главе веб-страницы-> <div style = "Положение: Аннотация; Верх: 0; слева: 0; ширина: 100%;"> <!-Определите группу кнопок-> <div> <viv> <!-Написание гиперссылки для одной кнопки в панели навигации, то есть кнопка без сменного меню. Он должен использовать тег A, а затем добавить стиль класса, а не тег кнопки, предоставленный официальным веб-сайтом-> <a href = "#"> слева </a> </div> <div> <a href = "#"> middle </a> </div> <div> <a href = "#"> справа </a> </div> <! data-toggle = "Выпадающий"> выпадающий в сторону <pran> </span> </button> <ul rol = "menu"> <li> <a href = "#"> раскрывающаяся ссылка </a> </li> <li> <a href = "#"> раскрывающаяся ссылка </a> </li> </ul> </div> </div> </div> </a> </li> </ul> </div> </div>
Измените BTN-Success в атрибуте класса на BTN-Primary, BTN-Danger и т. Д. Может изменить цвет этой кнопки!
(3) Гигантская часть экрана
Гигантский экран написан следующим образом. Ключ должен представить фон, который мы только что нарисовали в Photoshop.
Причина, по которой я должен добавить здесь так много, <br> Введите, заключается в том, что я хочу увеличить размер этого гигантского экрана
<div style = "founal-image: url (images /bg.jpg); /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> < /div>
(4) Раздел столбца
Здесь организация Bootstrap's Grid используется для печати трех столбцов
Для получения подробной информации вы можете ссылаться на статью «Bootstrap», которая автоматически адаптируется к системе сетки Bootstrap Mobile Phone. Разделите 12 сетей всей веб -страницы на 3 части, и каждая 4 сетка - это правильно. Каждый столбец представляет собой панель без головки панели, с большим заголовком H3 внутри, а затем текстом абзаца P и двумя кнопками.
Стоит отметить, что эти вещи должны быть помещены в контейнер, в противном случае эти три вещи заполнят всю страницу:
<div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href = "#" "rol =" button "> кнопка </a> <a href ="#"rol ="> кнопка </a> </p> </div> </div> </div> <div> <div> <div> <d Div> <h3> colund2 </h3> <p> ... </p> <p> <p> <p> href = "/" "/" "/" "/h3 </h3> <p> ... </p> <p> <p> <pre> <h3>". <a href = "#" rol = "кнопка"> кнопка </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) Часть информации об авторском праве
Нечего сказать, просто панель
<div> <div style = "text-align: center"> Информация об авторском праве </div> </div>
3. Внутренняя страница
Если вы знаете, как сделать домашнюю страницу, то идея внутренней страницы будет точно такой же. Я больше не буду повторять это. Точно так же код выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <название> unt witch witch </title> <meta name = "Viewport" content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src = "js/bootstrap.js"> </script> <style type = "text/css"> H1, H2, H3, H4, H5 {font-family: «Microsoft Yahei Ui», «Microsoft Yahei», «Helvetica neue», Helvetica, arial, Hiragino gbina », Hirenans», Hirenans », Hirenans», Hirenans », Hirenans», Hirenans »,« Hiren ». «Wenquanyi Micro hei», Sans-Serif; } </style> </head> <body> <div style = "Положение: Absolute; Top: 0; слева: 0; ширина: 100%;"> <Div> <a href = "#"> слева </a> </div> <div> <a href = "#"> Middle </a> </div> <Div> <a href = "#"> right </a> </div> </div> <- Div> <Div> <Div> <Div> <Div> <Div> <- Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> </div> </div> <- Div> < -href = "#" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> </div> <div style="background-image: URL (Images/bg.jpg);Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.