Home > Article > Web Front-end > Web standard layout example tutorial, use positioning to easily solve complex CSS layout_CSS/HTML

Web standard layout example tutorial, use positioning to easily solve complex CSS layout_CSS/HTML

WBOYOriginal: 2016-05-16 12:12:301481browse

I believe that 99% of the friends who come to the classic forum to learn standards are not going to join W3C or become professional researchers. So what is the purpose of everyone coming? It's very simple. In fact, I just want to add one more skill to myself through standard learning, so that when I look for a job, I won't be stumped by "you need to be proficient in web standards". In the following example, xhtml does not What is the semantics? The purpose of this article is just to let everyone better understand the usage of relative and absolute positioning in CSS (there are indeed many newbies asking this question), and how to effectively combine the background to achieve a more complex layout.I hope the seniors can give me some pointers on the shortcomings, thank you!

-------------------------------------------------- ------first step----------------------------------------- --

First, let’s design a demo with a complicated layout (irregular layout):

---------- ----------------------------------------Step 2------ ------------------------------------
Let's write the code
< HTML>

model

---------------------------- -- -------実際のページ効果: ------------ --- ----------

<title>モデル</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> 
html,body{ 
    margin:0; 
    padding:0; 
    background:#A1A9B6 url(http://www.okrmt.com/demo7.8/images/allbg.jpg); 
    text-align:center; 
    } 
#main{ 
    margin:0 auto; 
    position:relative; 
    width:780px; 
    height:659px; 
    background:url(http://www.okrmt.com/demo7.8/images/model.jpg) no-repeat; 
    } 
#main #menu{ 
    position:absolute; 
    right:12px; 
    width:354px; 
    height:115px; 
    background:url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; 
    } 
#main #menu a,#main #menu a#page{ 
    float:left; 
    width:112px; 
    height:30px; 
    } 
#main #menu a#about{ 
    width:80px; 
    height:55px; 
    } 
#main #menu a#services{ 
    width:70px; 
    height:80px; 
    } 
#main #menu a#contacts{ 
    width:80px; 
    height:115px; 
    } 
#main #menu a:hover{ 
    background: url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; 
    } 
#main #menu a#page:hover{ 
    background-position: 0px -115px; 
    } 
#main #menu a#about:hover{ 
    background-position: -112px -115px; 
    } 
#main #menu a#services:hover{ 
    background-position: -192px -115px; 
    } 
#main #menu a#contacts:hover{ 
    background-position: -262px -115px; 
    } 
#main h1{ 
    position:absolute; 
    top:0;left:1px; 
    width:151px; 
    height:56px; 
    background:url(http://www.okrmt.com/demo7.8/images/logo.jpg) no-repeat; 
    } 
#main h2{ 
    position:absolute; 
    top:133px; 
    right:7px; 
    width:404px; 
    height:190px; 
    background:url(http://www.okrmt.com/demo7.8/images/about.gif) no-repeat; 
    } 
#main h6{ 
    position:absolute; 
    bottom:75px; 
    right:10px; 
    width:265px; 
    height:44px; 
    background:url(http://www.okrmt.com/demo7.8/images/cars-logo.gif) no-repeat; 
    } 
</style>

Statement：

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

Previous article：CSS tips_CSS/HTMLNext article：CSS tips_CSS/HTML

See more

Web standard layout example tutorial, use positioning to easily solve complex CSS layout_CSS/HTML

Related articles