第二十七章HTML.CSS综合案例

1.产品介绍

效果图如下：

代码部分如下：

    
    
    
    
      
        *{ /* 通用选择器 */
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f5f5f5;
        }
        a{
            color: #333333;
            text-decoration: none;
        }
        .box{
            height: 500px;
            width: 500px;
            background-color: rgb(236, 236, 236);
            margin: 100px auto;
        }
        .box img{ 
            width: 100%;
        }
        .tushu{
            height: 50px;
            font-size: 20;
            padding: 0 15px; /* 外间距（上下  左右） */
            margin-top: 30px ;/* 内间距（上下  左右） */
            font-weight: bold; /* 字体加粗 */
        }
        .pingjia{
            font-size: 10px;
            color: #bbb;
            margin-top: 0;
            padding: 10px 25px;
        }
        .redmi{
            padding: 0px 25px;
            font-size: 10px;
            font-weight: bold; /* 字体加粗 */
        }
        .hongse{
            color: #ff0000;
            font-weight: bold; /* 字体加粗 */
        }
      
    


    
        
    图书写的真的很棒，书，人类发出的最美妙的声音。书，人类发出最美妙的声音。
    来自于152379个人的评价
    
        Redmi Air Dots真无线蓝.....    
           |   
        10元
    

    

2.表单登录页面

效果图如下：

代码如下：

    
    
60秒完成注册，幸福一辈子！
    
        

            

                
昵称：
                

                    
                
            
            

                
性别:
                

                    男
                    女
                
            
            

                
生日：
                

                    
                        请输入年份
                        1997
                        1998
                        1999
                        2000
                    
                    
                        请输入月份
                        一月
                        四月
                        九月
                    
                    
                        请输入几号
                        1
                        2
                        3
                    
                
            
            

                
婚姻状况：
                

                    未婚
                    已婚
                    离异
                
            
            

                
学历：
                

                    
                        幼儿园
                        小学
                        初中
                        高中
                        大学
                    
                
            
            

                
喜欢的类型：
                

                    妩媚的
                    帅气的
                    油腻的
                    腹肌男
                    搞笑女
                
            
            

                
自我介绍：
                

                    
                
            
            

                

                

                    
                
            
            

                

                

                    我同意注册条款和会员加入标准
                
            
            

                

                

                    我是会员立即注册