Home > Web Front-end > HTML Tutorial > Click on the menu on the left to see how the corresponding content appears in the area on the right_html/css_WEB-ITnose

Click on the menu on the left to see how the corresponding content appears in the area on the right_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:17:56
Original
2931 people have browsed it




Stylevantage











  
  
  

    
    
 

  

  






#wrap {
margin: 0 auto;
    width: 1150px;
text-align: left;
background: #FFF;
}
#content-wrap {
clear:both;
    margin: 0; padding:0;
width: 1150px;
}

/* header */
#header {
position: relative;
background: url(../images/headerbg-green.gif) repeat-x 0 0;
height: 84px;
}
#header h1#logo {
position: absolute;
margin: 0; padding: 20px 0 0 300px;
font: bold 3.5em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -3px;
color: #CCC;
text-transform: lowercase;
/* change the values of top and Left to adjust the position of the logo*/
top: 0; left: 5px;
}
#header h2#slogan {
position: absolute;
margin: 0; padding: 0;
font: bold 11px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;
/* change the values of top and Left to adjust the position of the slogan*/
top: 48px; left:70px;
}
#header .searchform {
position: absolute;
top: 5px; right: 3px;
}

/* main column */
#main {
float: left;
    margin-left: 15px;
padding: 10px 0 0 5px;
width: 900px;
border-left: 1px solid #f2f2f2;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin-top: 20px;
font-size: .9em;
border: 1px solid #f2f2f2;
}
.post-footer .date {
background: url(../images/clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(../images/comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(../images/page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* sideabar */
#sidebar {
float: left;
width: 15%;
margin: 0; padding: 10px 0 0 0;
display: inline;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 0 0 8px 0;
padding: 0;
text-decoration: none;
    font-size: 12px;
    border-top: 1px solid #EFF0F1;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #EFF0F1;
background: url(../images/arrow.gif) no-repeat 2px 9px;
padding: 3px 5px 3px 18px;
}

* html body #sidebar ul.sidemenu li { height: 1%; }

#sidebar ul.sidemenu a {
font-weight: bold;
background-image: none;
text-decoration: none;
}

/* footer */
#footer {
clear: both;
background: #FFF url(../images/footerbg.gif) repeat-x left top;
border-top: 1px solid #F2F2F2;
text-align: center;
height: 80px;
    font-size: .9em;
}

#footer a { text-decoration: none; }


/* Alignment classes */
.float-left   { float: left;}

.align-left   { text-align: left; }
.align-right  { text-align: right; }
.align-center { text-align: center; }

/* display classes */
.clear  { clear: both; }
.block  { display: block; }
.hide { display: none; }
.green { color: #32CD32; }

I want to achieve the effect of clicking the refresh on the right side of the left menu. It seems that I can do it with the frame framework, but I don’t know how to write it. Please help me



Reply to the discussion (solution)

Just use frame directly







In left.html write

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template