如何使我的网页响应并在所有页面中使用相同的网页设计 [英] How can I make my web page responsive and have the same webdesign in all the pages
本文介绍了如何使我的网页响应并在所有页面中使用相同的网页设计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Below are my css code which i am using in my master page to apply the same in all my content pages,the main problem is it is not a responsive web design and the second issue is the design gets varied from one page to another page that is if my page consists of textboxes and gridview it occupies the complete webpage and if there in no gridview in another page the design gets displayed in only half of the web page.How can i make it responsive and how can i make it to occupy the complete web page even i have more no of controls in my webpage or even i have less number of controls
<pre>style.css
* {
margin: 0;
padding: 0;
}
a {
text-decoration: underline;
color: #0F8C8C;
}
a:hover {
text-decoration: none;
}
body {
font-size: 11.5pt;
color: #5C5B5B;
line-height: 1.75em;
background: #E0DCDC url(images/img01.gif) repeat-x top left;
}
body, input {
font-family: Georgia, serif;
}
strong {
color: #2C2B2B;
}
br.clearfix {
clear: both;
}
h1, h2, h3, h4 {
font-weight: normal;
letter-spacing: -1px;
}
h2 {
font-size: 2.25em;
}
h2, h3, h4 {
color: #2C2B2B;
margin-bottom: 1em;
}
h3 {
font-size: 1.75em;
}
h4 {
font-size: 1.5em;
}
img.alignleft {
margin: 5px 20px 20px 0;
float: left;
}
img.aligntop {
margin: 5px 0 20px 0;
}
img.pic {
padding: 5px;
border: solid 1px #D4D4D4;
}
p {
margin-bottom: 1.5em;
}
ul {
margin-bottom: 1.5em;
}
ul h4 {
margin-bottom: 0.35em;
}
.box {
overflow: hidden;
margin-bottom: 1em;
width:100%; /*950px*/
}
.date {
background: #6E6E6E;
padding: 5px 6px 5px 6px;
margin: 0 6px 0 0;
color: #FFFFFF;
font-size: 0.8em;
border-radius: 2px;
}
#content {
width: 100%;
float: left;
padding: 0;
}
#content-box1 {
width: 950px;
float: left;
}
#content-box2 {
margin: 0 0 0 345px;
width: 320px;
}
#footer {
margin: 10px 0 12px 0;
text-align: center;
color: #8C8B8B;
text-shadow: 0 1px 0 #FFFFFF;
}
#footer a {
color: #8C8B8B;
}
#header {
height: 20px;
position: relative;
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
padding: 45px;
color: #FFFFFF;
width: 888px;
min-width: 888px;
border: solid 1px #7E7E7E;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#logo {
line-height: 80px;
height: 100px;
padding: 5px 0 0 0;
position: absolute;
top: -1px;
left: 50px;
width: 225px;
right: 703px;
}
/*#logo a {
text-decoration: none;
color: #FFFFFF;
text-shadow: 0 1px 1px #3E3E300px;
padding: 5px 0 0 0;
position: absolute;
top: 0;
left: 45px;
}*/
#logo a {
text-decoration: none;
color: #FFFFFF;
text-shadow: 0 1px 1px #3E3E3E;
}
#logo h1 {
font-size: 3.25em;
}
#slogan1 {
line-height: 160px;
height: 160px;
width:200px;
padding: 5px 0 0 0;
position: absolute;
/*right: 45px;*/
left: 700px;
top: 0;
}
#slogan {
line-height: 160px;
height: 160px;
padding: 5px 0 0 0;
position: absolute;
right: 45px;
/*left: 805px;*/
top: 0;
}
#slogan2 {
line-height: 160px;
height: 160px;
padding: 5px 0 0 0;
position: absolute;
right: -48px;
/*left: 50px;*/
top: 0;
width: 288px;
}
#slogan h2 {
color: #BEBEBE;
font-size: 1.25em;
text-shadow: 0 1px 1px #3E3E3E;
}
/* menu */
#menu {
clear: both;
padding-left: 0px;
margin: 0;
position: relative;
background: #0073e5 url(images/img02.gif) repeat-x top left;
}
#menu ul {
list-style: none;
padding-left:0px;
}
#menu ul li {
padding: 0px;
padding-left:0px;
display: inline-block;
}
#menu ul li a, #menu ul li span {
text-decoration: none;
color: #FFFFFF;
font-size: 1.25em;
display: block;
float: left;
font-size: 17px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
outline: none;
border: none;
}
#menu ul li a:hover, #menu ul li .current {
color: #fec823;}
#menu ul li span b {
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid #1C7575;
margin-left: 8px;
position: relative;
top: -1px;
}
#menu ul li.active span b {
border-top-color: #165E5E;
}
#menu ul li.active {
background: #1C7575;
border-top: solid 1px #1A6B6B;
border-bottom: solid 1px #5AD7D7;
border-radius: 3px;
padding-top: 4px;
padding-bottom: 4px;
}
/* end of menu */
/*#menu {
padding: 0 45px 0 45px;
position: relative;
/*background: #209D9D url(images/img02.gif) repeat-x top left;*
background: #0073e5 url(images/img02.gif) repeat-x top left;
margin: 0;
height: 60px;
width: 890px;
/*border-top: solid 1px #5AD7D7;
border-bottom: solid 1px #1C7575;*
text-shadow: 0 1px 1px #007D7D;
}
#menu ul {
list-style: none;
padding-top: 12px;
position: relative;
left: -15px;
}
#menu ul li {
padding: 5px 15px 5px 15px;
margin-right: 10px;
display: inline-block;
}
#menu ul li a, #menu ul li span {
text-decoration: none;
color: #FFFFFF;
letter-spacing: -1px;
font-size: 1.25em;
}
#menu ul li span b {
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid #1C7575;
margin-left: 8px;
position: relative;
top: -1px;
}
#menu ul li.active {
background: #1C7575;
border-top: solid 1px #1A6B6B;
border-bottom: solid 1px #5AD7D7;
border-radius: 3px;
padding-top: 4px;
padding-bottom: 4px;
}
#menu ul li.active span b {
border-top-color: #165E5E;
}*/
.dropotron {
background: rgba(32,157,157,0.9);
border-top: solid 1px #5AD7D7;
border-bottom: solid 1px #1C7575;
text-shadow: 0 1px 1px #007D7D;
list-style: none;
margin: 0;
padding: 15px 10px 15px 10px;
min-width: 200px;
border-radius: 6px;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}
.dropotron a, .dropotron span {
color: #FFFFFF;
text-decoration: none;
letter-spacing: -1px;
display: block;
width: 100%;
position: relative;
}
.dropotron span b {
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 7px solid #1C7575;
position: absolute;
right: 0px;
top: 7px;
}
.dropotron li:hover span b {
border-left-color: #165E5E;
}
.dropotron li {
padding: 3px 10px 3px 10px;
margin: 2px 0 2px 0;
border-radius: 3px;
}
.dropotron li:hover, .dropotron li.active {
padding-top: 2px;
padding-bottom: 2px;
background: rgba(28,117,117,0.9);
border-top: solid 1px #1A6B6B;
border-bottom: solid 1px #5AD7D7;
}
.dropotron-level-1 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#page {
/*padding: 45px 45px 15px 45px;*/
position: relative;
width: 100%;
margin: 0;
}
#page .section-list {
list-style: none;
padding-left: 0;
}
#page .section-list li {
clear: both;
padding: 30px 0 30px 0;
}
#page ul {
list-style: none;
}
/* #page ul li {
border-top: dotted 1px #C4C4C4;
padding: 15px 0 15px 0;
background-color:red;
}*/
#page ul li.first {
padding-top: 0;
border-top: 0;
}
#page-bottom {
position: relative;
margin: 0;
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
border: solid 1px #7E7E7E;
width: 888px;
padding: 25px 45px 0 45px;
color: #DCDCDC;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-shadow: 0 1px 1px #444444;
}
#page-bottom a {
color: #F5F5F5;
}
#page-bottom h2, #page-bottom h3, #page-bottom h4 {
color: #FFFFFF;
}
#page-bottom ul {
list-style: none;
}
#page-bottom ul li {
border-top: dotted 1px #8F8F8F;
padding: 15px 0 15px 0;
}
#page-bottom ul li.first {
padding-top: 0;
border-top: 0;
}
#page-bottom-content {
width: 665px;
float: left;
}
#page-bottom-sidebar {
width: 200px;
margin: 0 0 0 690px;
}
#search input.form-submit {
margin-left: 1em;
color: #FFFFFF;
padding: 10px;
background: #2FACAC;
border: 0;
}
#search input.form-text {
border: solid 1px #8F8F8F;
padding: 10px;
}
#sidebar {
width: 200px;
padding: 0;
margin: 0 0 0 690px;
}
#slider {
position: relative;
margin: 45px 45px 0px 45px;
width: 890px;
}
#slider .viewer {
width: 890px;
height: 250px;
border: solid 1px #D4D4D4;
border-radius: 3px;
}
#slider .slide {
width: 890px;
height: 250px;
padding: 10px;
}
#slider .indicator {
position: relative;
z-index: 1;
text-align: center;
margin: 20px 0 0 0;
}
#slider .indicator span {
display: inline-block;
text-indent: -9999em;
width: 12px;
height: 12px;
background: #E3DFDF;
border-radius: 6px;
margin: 0 2px 0 2px;
}
#slider .indicator span.active {
background: #6E6E6E;
}
#wrapper {
position: relative;
width: 980px;
margin: 10px auto 0 auto;
background: #FFFFFF;
border-radius: 6px;
box-shadow: 0px 5px 20px 2px rgba(0,0,0,0.1);
}
/*For tab Style*/
.fancy-green .ajax__tab_header
{
background: url(green_bg_Tab.gif) repeat-x;
cursor:pointer;
}
.fancy-green .ajax__tab_hover .ajax__tab_outer, .fancy-green .ajax__tab_active .ajax__tab_outer
{
background: url(green_left_Tab.gif) no-repeat left top;
}
.fancy-green .ajax__tab_hover .ajax__tab_inner, .fancy-green .ajax__tab_active .ajax__tab_inner
{
background: url(green_right_Tab.gif) no-repeat right top;
}
.fancy .ajax__tab_header
{
font-size: 13px;
font-weight: bold;
color: #000;
font-family: sans-serif;
}
.fancy .ajax__tab_active .ajax__tab_outer, .fancy .ajax__tab_header .ajax__tab_outer, .fancy .ajax__tab_hover .ajax__tab_outer
{
height: 46px;
}
.fancy .ajax__tab_active .ajax__tab_inner, .fancy .ajax__tab_header .ajax__tab_inner, .fancy .ajax__tab_hover .ajax__tab_inner
{
height: 46px;
margin-left: 16px; /* offset the width of the left image */
}
.fancy .ajax__tab_active .ajax__tab_tab, .fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_header .ajax__tab_tab
{
margin: 16px 16px 0px 0px;
outline:none;
}
.fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_active .ajax__tab_tab
{
color: #fff;
}
.fancy .ajax__tab_body
{
font-family: Arial;
font-size: 10pt;
border-top: 0;
border:1px solid #999999;
padding: 8px;
background-color: #ffffff;
}
Menudropdown.css
.dropbtn {
/*background-color: #4CAF50;*/
background-color: #6E6E6E;
color: white;
padding: 16px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropdown {
/*position: relative;*/
/*display: inline-block;*/
position: absolute;
/*line-height: 30px;*/
line-height: 18px;
height: 160px;
/*height: 100px;*/
padding: 50px 0 0 0;
position: absolute;
right: 45px;
/*left: 805px;*/
top: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
/*background-color: #99ccff;*/
/*min-width: 160px;*/
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: #f1f1f1;*/
background-color: #00ffcc;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
background-color: #6E6E6E;
/*background-color: #00ffcc;*/
}
Grid.css
.Grid {
background-color: #fff;
/*margin: 5px 0 10px 0;*/
margin: 0px 0 0px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-family: Calibri;
color: #474747;
}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1;
}
.Grid th {
/*padding : 4px 2px;*/
padding: 2px 2px;
color: #fff;
background: #006699 url(Images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
/*.Grid .alt { background: #fff url(Images/grid-alt.png) repeat-x top; }*/
.Grid .pgr {
background: #006699 url(Images/grid-pgr.png) repeat-x top;
}
.Grid .pgr table {
margin: 3px 0;
}
.Grid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid .pgr a {
color: Gray;
text-decoration: none;
}
.Grid .pgr a:hover {
color: #000;
text-decoration: none;
}
.grid tr:nth-child(even) {
background-color: #ffffff;
}
.grid tr:nth-child(odd) {
background-color: #cccccc;
}
Menu.css
.ddsmoothmenu{
/*font: bold 12px Verdana;*/
font: bold 12px Georgia, serif;
background: red #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
/*background: #414141;*/ /*background of menu items (default state)*/
background: #0073e5;
color: white;
padding: 8px 10px;
/*border-right: 1px solid #778;*/
border-right: 1px solid #0073e5;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
/*background: black;
color: white;*/
}
.ddsmoothmenu ul li a:hover{
background: #99c9ff; /*background of menu items during onmouseover (hover state)*/
color: black;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}
splitbuttons.css
.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 8px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: darkred; /* default color of menu button */
position: absolute;
display: inline-block;
z-index:9999;
}
.downtoggler
{
padding-left:8px;
padding-right:8px;
}
.splitmenubutton span.innerspan, .downtoggler span.innerspan{ /* span.innerspan element dynamically added by script inside menu button */
display: block;
padding: 8px;
line-height: 1em;
/* the following CSS3 gradients add a white to transparent linear gradient to the buttons, to give them a more beveled look */
background: -moz-linear-gradient(top, rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */
}
.dedicatedtoggler{ /* CSS to apply to toggler when it's a seperate element (instead of being the main menu button itself) */
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-left: 1px solid #f5f5f5;
}
a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
background: #b13f33; /* default hover background color of menu */
}
.downarrow, rightarrow{
cursor: pointer;
}
span.innerspan.downarrow::after{ /* Down arrow (hex value) */
content: '\25be';
}
.splitmenubutton span.innerspan.downarrow:after{ /* Down arrow with space before the arrow */
content: '\00a0\25be';
}
.rightarrow:after{ /* CSS for right arrow inside splitdropdown */
content: '\25b8'; /* Add HTML entity based right arrow */
position: absolute;
right: 5px;
font-size: 16px;
height: 100%;
}
/* ##### CSS for UL Drop Down Menus of script ###### */
ul.splitdropdown, ul.splitdropdown ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 200px;
top: 0;
list-style: none;
background: white; /* background color of drop down */
border: 1px solid lightgray;
border-bottom-width: 0;
box-shadow: 0 0 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 0 0 8px #818181;
-moz-box-shadow: 0 0 8px #818181;
z-index:10010;
}
ul.splitdropdown li{
position: relative;
}
ul.splitdropdown li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: white;
text-decoration: none;
padding: 8px 4px;
text-align:left;
}
* html ul.splitdropdown li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
ul.splitdropdown li a:hover, .splitdropdown li.selected>a{
background: #eee;
}
ul.splitdropdown li.separator{
border-bottom: 1px solid #dedddd;
}
html code
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="~/Apprule.ascx" TagName="MTR" TagPrefix="UC" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>E-PRoTM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="Grid.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/MenuDropdown.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="Menu.css" rel="stylesheet" />
<%-- <script src="Scripts/menu.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "smoothmenu1", orientation: 'h', classname: 'ddsmoothmenu', contentsource: "markup" })</script>
<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.1.js"></script>--%>
<link rel="stylesheet" type="text/css" href="css/splitmenubuttons.css" />
<%-- <script type="text/javascript" src="js/splitmenubuttons.js"></script>--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("body").on('click keypress', function () {
ResetThisSession();
});
});
var timeInSecondsAfterSessionOut = 1200; // change this to change session time out (in seconds).
var secondTick = 0;
function ResetThisSession() {
secondTick = 0;
}
function StartThisSessionTimer() {
secondTick++;
var timeLeft = ((timeInSecondsAfterSessionOut - secondTick) / 60).toFixed(0); // in minutes
timeLeft = timeInSecondsAfterSessionOut - secondTick; // override, we have 30 secs only
var minutes = Math.floor(timeLeft / 60);
var m = Math.floor(timeLeft % 3600 / 60);
var s = Math.floor(timeLeft % 3600 % 60);
$("#spanTimeLeft").html(m +":"+s);
if (secondTick > timeInSecondsAfterSessionOut) {
clearTimeout(tick);
window.location = "Logout.aspx";
return;
}
tick = setTimeout("StartThisSessionTimer()", 1000);
}
StartThisSessionTimer();
</script>
<script type="text/javascript">
var clicked = false;
function CheckBrowser() {
if (clicked == false) {
//Browser closed
} else {
//redirected
clicked = false;
}
}
function bodyUnload() {
if (clicked == false)//browser is closed
{
var request = GetRequest();
request.open("POST", "/Logout.aspx", false);
request.send();
}
}
function GetRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
<%-- <style>
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
</style>--%>
<script type = "text/javascript" >
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
</head>
<body onunload="bodyUnload();" onclick="clicked=true;"> <div id="wrapper">
<div id="header">
<div id="logo">
<%-- <h1><a>E-Soft</a></h1>--%>
<h1><a>E-PR<a style="font-size:smaller">O</a>TM</a></h1>
<div id="slogan2" style="text-align: center; font-family: Garamond;">
<a>Elico Projects & Task Management</a>
</div>
</div>
<div class="dropdown">
<a href="#">
<asp:Label ID="lblUserName" ForeColor="Turquoise" Font-Size="Large" runat="server"></asp:Label></a>
<%-- <td style="text-align:right;color:black"><span id="spanTimeLeft"></span> seconds left</td>--%>
<div class="dropdown-content">
<a href="ChangePassword.aspx">Change Password</a>
<a href="UserDetails.aspx">My Profile</a>
<hr />
<a href="Logout.aspx">Log Out</a>
</div>
</div>
</div>
<div id="menu">
<UC:MTR ID="Apprule" runat="server" />
</div>
<div id="page">
<div id="content">
<div class="box">
<form id="form1" runat="server">
<%--<div style="height:450px">--%>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<%-- </div>--%>
</form>
</div>
<br class="clearfix" />
</div>
<br class="clearfix" />
</div>
<div id="page-bottom">
<%-- <br class="clearfix" />--%>
<a href="#">
<img src="Image/logo.png" alt="" style="vertical-align: top; top: 0; padding-right: 25px;" /></a>© Elico Healthcare Services. All rights reserved.
</div>
</div>
<div id="footer"><%--© Elico Healthcare Services. All rights reserved. <a href="#"><img src="Image/logo.png" alt="" /></a>--%></div>
</body>
</html>
What I have tried:
What I have tried:
my above code is not having responsive nature and it is not having same design in all the pages推荐答案
(function () {
(\"body\").on('click keypress', function () {
ResetThisSession();
}）;
}）;
var timeInSecondsAfterSessionOut = 1200; // change this to change session time out (in seconds).
var secondTick = 0;
function ResetThisSession() {
secondTick = 0;
}
function StartThisSessionTimer() {
secondTick++;
var timeLeft = ((timeInSecondsAfterSessionOut - secondTick) / 60).toFixed(0); // in minutes
timeLeft = timeInSecondsAfterSessionOut - secondTick; // override, we have 30 secs only
var minutes = Math.floor(timeLeft / 60);
var m = Math.floor(timeLeft % 3600 / 60);
var s = Math.floor(timeLeft % 3600 % 60);
("body").on('click keypress', function () { ResetThisSession(); }); }); var timeInSecondsAfterSessionOut = 1200; // change this to change session time out (in seconds). var secondTick = 0; function ResetThisSession() { secondTick = 0; } function StartThisSessionTimer() { secondTick++; var timeLeft = ((timeInSecondsAfterSessionOut - secondTick) / 60).toFixed(0); // in minutes timeLeft = timeInSecondsAfterSessionOut - secondTick; // override, we have 30 secs only var minutes = Math.floor(timeLeft / 60); var m = Math.floor(timeLeft % 3600 / 60); var s = Math.floor(timeLeft % 3600 % 60);
(\"#spanTimeLeft\").html(m +\":\"+s);
if (secondTick > timeInSecondsAfterSessionOut) {
clearTimeout(tick);
window.location = \"Logout.aspx\";
return ;
}
tick = setTimeout(\"StartThisSessionTimer()\", 1000);
}
StartThisSessionTimer();
</script>
<script type=\"text/javascript\">
var clicked = false;
function CheckBrowser() {
if (clicked == false) {
//Browser closed
} else {
//redirected
clicked = false;
}
}
function bodyUnload() {
if (clicked == false)//browser is closed
{
var request = GetRequest();
request.open(\"POST\", \"/Logout.aspx\", false);
request.send();
}
}
function GetRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
return xmlhttp;
}
</script>
<%-- <style>
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
宽度：100％;
background:#999;
}
</style>--%>
<script type = \"text/javascript\" >
function preventBack() {
window.history.forward();
}
setTimeout(\"preventBack()\", 0);
window.onunload = function () { null };
</script>
</head>
<body onunload=\"bodyUnload();\" onclick=\"clicked=true;\"> <div id=\"wrapper\">
<div id=\"header\">
<div id=\"logo\">
<%-- <h1><a>E-Soft</a></h1>--%>
<h1><a>E-PR<a style=\"font-size:smaller\">O</a>TM</a></h1>
<div id=\"slogan2\"style=\"text-align: center; font-family: Garamond;\">
<a>Elico Projects & Task Management</a>
</div>
</div>
<div class=\"dropdown\">
<a href=\"#\">
<asp:Label ID=\"lblUserName\" ForeColor=\"Turquoise\" Font-Size=\"Large\" runat=\"server\"></asp:Label></a>
<%-- <td style=\"text-align:right;color:black\"><span id=\"spanTimeLeft\"></span> seconds left</td>--%>
<div class=\"dropdown-content\">
<a href=\"ChangePassword.aspx\">Change Password</a>
<a href=\"UserDetails.aspx\">My Profile</a>
<hr />
<a href=\"Logout.aspx\">Log Out</a>
</div>
</div>
</div>
<div id=\"menu\">
<UC:MTR ID=\"Apprule\" run at=\"server\" />
</div>
<div id=\"page\">
<div id=\"content\">
<div class=\"box\">
<form id=\"form1\" runat=\"server\">
<%--<div style=\"height:450px\">--%>
<asp:ContentPlaceHolder ID=\"ContentPlaceHolder1\" runat=\"server\">
</asp:ContentPlaceHolder>
<%-- </div>--%>
</form>
</div>
<br class=\"clearfix\" />
</div>
<br class=\"clearfix\" />
</div>
<div id=\"page-bottom\">
<%-- <br class=\"clearfix\" />--%>
<a href=\"#\">
<img src=\"Image/logo.png\" alt=\"\" style=\"vertical-align: top;顶部：0; padding-right: 25px;\" /></a>© Elico Healthcare Services. All rights reserved.
</div>
</div>
<div id=\"footer\"><%--© Elico Healthcare Services. All rights reserved. <a href=\"#\"&g t;<img src=\"Image/logo.png\" alt=\"\" /></a>--%></div>
</body>
</html>
("#spanTimeLeft").html(m +":"+s); if (secondTick > timeInSecondsAfterSessionOut) { clearTimeout(tick); window.location = "Logout.aspx"; return; } tick = setTimeout("StartThisSessionTimer()", 1000); } StartThisSessionTimer(); </script> <script type="text/javascript"> var clicked = false; function CheckBrowser() { if (clicked == false) { //Browser closed } else { //redirected clicked = false; } } function bodyUnload() { if (clicked == false)//browser is closed { var request = GetRequest(); request.open("POST", "/Logout.aspx", false); request.send(); } } function GetRequest() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } </script> <%-- <style> #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } </style>--%> <script type = "text/javascript" > function preventBack() { window.history.forward(); } setTimeout("preventBack()", 0); window.onunload = function () { null }; </script> </head> <body onunload="bodyUnload();" onclick="clicked=true;"> <div id="wrapper"> <div id="header"> <div id="logo"> <%-- <h1><a>E-Soft</a></h1>--%> <h1><a>E-PR<a style="font-size:smaller">O</a>TM</a></h1> <div id="slogan2" style="text-align: center; font-family: Garamond;"> <a>Elico Projects & Task Management</a> </div> </div> <div class="dropdown"> <a href="#"> <asp:Label ID="lblUserName" ForeColor="Turquoise" Font-Size="Large" runat="server"></asp:Label></a> <%-- <td style="text-align:right;color:black"><span id="spanTimeLeft"></span> seconds left</td>--%> <div class="dropdown-content"> <a href="ChangePassword.aspx">Change Password</a> <a href="UserDetails.aspx">My Profile</a> <hr /> <a href="Logout.aspx">Log Out</a> </div> </div> </div> <div id="menu"> <UC:MTR ID="Apprule" runat="server" /> </div> <div id="page"> <div id="content"> <div class="box"> <form id="form1" runat="server"> <%--<div style="height:450px">--%> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <%-- </div>--%> </form> </div> <br class="clearfix" /> </div> <br class="clearfix" /> </div> <div id="page-bottom"> <%-- <br class="clearfix" />--%> <a href="#"> <img src="Image/logo.png" alt="" style="vertical-align: top; top: 0; padding-right: 25px;" /></a>© Elico Healthcare Services. All rights reserved. </div> </div> <div id="footer"><%--© Elico Healthcare Services. All rights reserved. <a href="#"><img src="Image/logo.png" alt="" /></a>--%></div> </body> </html>
What I have tried:
What I have tried:
my above code is not having responsive nature and it is not having same design in all the pages这篇关于如何使我的网页响应并在所有页面中使用相同的网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
