Home >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
- WBOYOriginal
- 2016-06-24 11:51:541834browse
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> (2) Navigation bar 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>Change btn-success in the class attribute to btn-primary, btn-danger, etc. can change the color of this button. !
(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>(4) Column part
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>( 5) Copyright information section
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>