Home > Web Front-end > HTML Tutorial > The use of padding and margin in div css layout, and adaptive 100% width_html/css_WEB-ITnose

The use of padding and margin in div css layout, and adaptive 100% width_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:29:50
Original
1325 people have browsed it

Overall rendering:

Not much to say, you can see for yourself, I believe it will be helpful

< div class ="cBody" > 🎜>
< div class ="cBody" >
< div class ="BabyContent" >
< div class ="lefttop" >
                                             > div class ="bName" > Anna's den
div
div class ="leftbuttom" >
      
                                                                           " >
                                                         






The following is the css style part


body { margin : 0; padding : 0 ; background : #fff ; }

div { color : #333 ; font-family : "verdana","arial", "sans-serif","宋体" ; font-size : 12px ; }

.cBody { width : 100% ; text-align : center ; margin-top : 5px ; }

.Top_Bg { width : 1002px ; border : solid 1px red ; background-color : #000000 ; color : #FFFFFF ; text-align : center ; margin : 0 auto ; }

.BabyContent { width : 1004px ; margin : 0 auto ; }

/* left part*/

.Babyleft { width : 202px ; float : left ; }

.lefttop { width : 202px ; height : 2px ; background : url(http://www.imythu.cn/images/BLeftTop.jpg) no-repeat ; overflow : hidden ; }

.leftbg { width : 196px ; background : url(http://www.imythu.cn/images/BLeftBg.jpg) repeat-y ; padding : 1px 4px 2px 2px ; }
.LbgTop { width : 100 % ; background : url(http://www.imythu.cn/images/warror.gif) no-repeat 3px 5px ; background-color : #FF6600 ; height : 20px ; }
.bName { margin-top : 10px; margin-left: 5px; margin-bottom: 5px; margin-right: 5px; border-bottom: solid 1px #ccc; text-align: left; padding-left: 10px; padding-bottom: 5px; color: # FF3300; font-size: 16px; position: static; float: inherit; }
.leftbuttom { width: 202px; height: 2px; background: url(http://www.imythu.cn/images/BLeftButtom.jpg ) no-repeat ; overflow : hidden ; }
/* Left part*/
.Babycenter { width : 328px ; float : left ; margin-left : 2px ; height : 200px ; border : solid 1px #ccc ; }
.Babyright { width : 466px ; float : left ; margin-left : 2px ; border : solid 1px #ccc ; }


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