界面：
CSS+DIV源码：
css练手 body{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFD8D9;}#container{ position:relative; margin:0px auto 0px auto; width:700px; text-align:left;}#navigation{ width:700px; height:33px; margin:0px; padding:0px;}#navigation ul{ list-style:none; margin:0px; padding:0px;}#navigation ul li{ text-align:center; float:left; margin:0px; padding:0px; width:100px;}#navigation ul li a{ display:block; background:url(button1.jpg) no-repeat; padding:9px 6px 11px 6px;}#navigation ul li a:link,#navigation ul li a:visited{ color:black; text-decoration:none;}#navigation ul li a:hover{ background:url(button1_bg.jpg) no-repeat; color:white;}#left{ width:180px; float:left; background:#FFFFFF url(https://www.gxlcms.com/leftbottom.jpg) no-repeat bottom; /* 下端圆角 */ margin:1px 0px 0px 0px;}#login{ background:#FFFFFF url(login.jpg) no-repeat; padding:55px 0px 10px 0px;}#login form{ padding:0px; margin:0px;}#login p { margin: 0px; text-align: left; padding: 5px 0px 0px 25px;}#login p input{ font-family:Arial, Helvetica, sans-serif; font-size:12px;}#login .text{ border:none; border-bottom:1px solid black; padding: 0px; width: 90px;}#login .btn{ border: 1px solid black; background-color: #FFEFF0; height: 17px; padding: 0px;}#login p a:link, #login p a:visited{ color:#333333; text-decoration:none;}#login p a:hover{ color:#000088; text-decoration:underline;}#category{ background:#FFFFFF url(category.jpg) no-repeat; padding: 55px 0px 40px 0px;}#category h4{ margin: 0px 18px 0px 18px; padding: 3px 0px 1px 5px; background-color: #FFD1D1; font-size:12px;}#category ul{ margin: 0px; padding: 5px 22px 15px 22px; list-style:none;}#category ul li{ padding: 2px 0px 2px 16px; border-bottom: 1px dashed #999; background: url(icon1.gif) no-repeat 5px 7px;}#category ul li a:link, #category ul li a:visited{ color:#000000; text-decoration:none;}#category ul li a:hover{ color:#666666; text-decoration:underline;}#main{ float:left; width:518px; margin:1px 0px 0px 2px;}#news{ background:url(latest.jpg) no-repeat; padding:35px 0px 0px 0px;}#news img{ border:none; padding-left:1px;}#recommend{ background:url(recommend.jpg) no-repeat; margin:3px 0px 0px 0px; padding:35px 0px 0px 0px; background-color:#FFFFFF;}#recommend br,#new br, #guid br{ display:block; clear:both; margin:0px; padding:0px;}#recommend ul, #new ul{ list-style:none; margin:0px; padding:5px 5px 5px 8px;}#recommend ul li, #new ul li{ text-align:center; float:left; width:125px;}#recommend ul li img, #new ul li img{ border:none; margin:5px 0px 3px 0px; padding:0px;}#new{ background:url(new.jpg) no-repeat; margin:3px 0px 0px 0px; padding:35px 0px 0px 0px; background-color:#FFFFFF;}#guid{ background:url(tips.jpg) no-repeat; margin:3px 0px 0px 0px; padding:35px 0px 0px 0px; background-color:#FFFFFF;}#guid ul{ list-style:none; margin:0px; padding:5px 5px 5px 30px;}#guid ul li{ background:url(icon2.gif) no-repeat 5px 6px; padding:1px 0px 1px 12px; float:left; width:220px; }
查看更多关于CSS+DIV练手?鲜花展_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did102296