CSS+DIV练手?鲜花展_html/css_WEB-ITnose

PHP中文网 • 2025年3月28日 09:18:53 • 编程技术 • 阅读 1

这是第四个了，没有别的，高兴了就练练手，积累积累技巧。

界面：

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.php.cn/faq/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;}     @@##@@    
         鲜花礼品
            自助订花
        绿色植物
            花之物语
            会员中心
            联系我们
            支付方式
        

    用户: 
密码: 
忘记密码
用途
生日送花
生日送花
生日送花
生日送花
生日送花
生日送花
生日送花
生日送花
花材
百合花
百合花
百合花
百合花
百合花
百合花
百合花
百合花
 
价格
100～200元
200～300元
300～400元
400～500元
500～600元
600～800元
800元以上
        @@##@@
                     @@##@@@@##@@@@##@@       
                @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
              @@##@@幸福的味道$288元
          

        
                @@##@@
粉色迷情
            @@##@@
粉色迷情
              @@##@@
粉色迷情
               @@##@@
粉色迷情
      

        
          花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
                花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉
花的喜怒哀乐与人的各种感觉