Web Front-end
HTML Tutorial
[Bootstrap] An audience giant screen style page compatible with IE8, Google and other mainstream browsers_html/css_WEB-ITnose
[Bootstrap] An audience giant screen style page compatible with IE8, Google and other mainstream browsers_html/css_WEB-ITnose
Although IE6 can no longer be considered except for some demanding requirements, the browser IE8 that comes with WIN7 still needs to be supported.
The main advantage of this method in this article, personally, is that it requires less preparation. You don’t need to go online to find a lot of pictures as materials. You only need to prepare bootstrap, jquery and photoshop. How to configure bootstrap and jquery? Refer to "[Bootstrap] A dialog box that pops up on the current web page, which can be closed without jumping, and is not a pop-up window" (click to open the link)
When asked to write a website, I am often troubled by how to layout it,
In fact, it is not difficult. If you can use Bootstrap proficiently and have a specific set of methods,
then you can still quickly and easily hand in homework for ordinary needs.
Although there are a lot of page templates to search on the Internet, the key is to be able to understand the creation process of these page templates.
Once these downloaded templates are incompatible with the browser and cannot be modified, you will be in big trouble.
1. Basic goal
Use BootstrapV3 to create the following page:
The homepage is as shown above. The first thing hanging at the top of the page is the navigation of this website, which is the three buttons left, middle, and right and the dropdown menu. The essence here is a button group, and the navigation bar component provided by Bootstrap cannot be used because this navigation bar component is not compatible with IE8. For details, see: "[Bootstrap] Navigation bar navbar defects and solutions on IE8" article (click to open the link )
After that, under the giant screen, there are three columns and two corresponding buttons,
Here you can place the most important parts of the website,
The last one is copyright information as usual.
The inner page looks like this:
It is also the top navigation bar,
Then the title of this inner page and content. The title of the inner page is actually a giant screen, but it is smaller than the size of the home page.
The next step is the copyright information.
2. Production process
1. First open photoshop and create a new 1024x1 image with any width, as wide as possible. The image is 1 That’s it. The foreground color is dark green R:0 G:140 B:0, and the background color is light green R:100 G:200 B:100. Use the gradient tool to pull out the following image. You can pull it to the left or right no matter how you pull it. You can pull it from the middle to the sides, it depends on your personal preference:
This is the only image we need to prepare. You can close photoshop, put it aside, and put this The image is saved in the website project folder.
This image is only about 6k, which does not affect loading at all.
2. Home page
The specific code is as follows, and then the code is explained one by one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <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> <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> <body> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-success"> Left </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success"> Middle </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success"> Right </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> <div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> <br /> <br /> <br /> <br /> <br /> </div> <div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "> <div class="panel panel-default"> <div class="panel-body"> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div> </div> </body></html>(1)
section <head> <!--网站编码，标题，自适应屏幕等--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--需要使用的js与css样式--> <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> <!--这是唯一需要我们自己定义的css样式，用来解决win7系统下，微软雅黑字体无法正常显示，而显示宋体的bug--> <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>Due to the navigation bar provided by bootstrap not applicable , we have to use the button group provided by bootstrap to write the navigation bar ourselves
<!--首先导航栏必必须挂在网页头--> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <!--定义一个按钮组--> <div class="btn-group btn-group-justified"> <div class="btn-group"> <!--导航栏中单个按钮，也就是没有下拉菜单的按钮的超级链接写作方式需要注意，是使用a标签，然后加上class样式的，而不是官网提供的button标签--> <a href="#" class="btn btn-success"> Left </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Middle </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Right </a> </div> <!--下拉菜单的写法如下：--> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div>
(3) Giant screen part
The giant screen is written as follows. The key is to introduce the background we just drew with photoshop
The reason why here The reason for adding so many
carriage returns is to enlarge the size of this giant screen
<div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> <br /> <br /> <br /> <br /> <br /> </div>
Bootstrap is used here Grid organization, layout of three columns
For details, please refer to my article "[Bootstrap] Automatically adapt to the Bootstrap grid system for PCs, tablets, and mobile phones" (click to open the link),
Divide the 12 cells of the entire web page into 3 parts, each of 4 cells is just fine
And each column is a panel without a panel header, with an h3 title inside, and then a paragraph of p Text, and two buttons
It is worth noting that these things must be placed within a container, otherwise these three things will occupy the entire page:
<div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "> <div class="panel panel-default"> <div class="panel-body"> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div>
There is nothing to say, it is just a panel
<div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div>
3. If the inner page
can be used as the homepage, then the idea of the inner page will be exactly the same, so I won’t repeat it. Similarly, the code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <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> <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> <body> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <a href="#" class="btn btn-success"> Left </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Middle </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Right </a> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> <div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat;"> <h1> <font color="#ffffff">Title</font> </h1> </div> <div class="container-fluid"> <div class="panel panel-default"> <div class="panel-body"> Content </div> </div> <div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div> </div> </body></html>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
