• Javaweb实训-宠物医院-社区宠物医院的页面样式


        /* CSS Document */  
        /* 
           对于CSS来说  每一个元素默认的margin和padding就是0px。但是不同的浏览器会有一个默认的浏览器样式修改默认的margin padding。所以在使用自定义样式编程前加上  *{ }重新设置margin和padding为0px,覆盖浏览器样式使得各个浏览器下统一。 
        */  
        *{  
            margin:0px;  
            padding:0px;  
            font-weight: bold;  
        }  
        /*a {*/  
            /*color:black;*/  
            /*text-decoration: none;*/  
        /*}*/  
          
        a:link,  
        a:visited     {  
            color:#FF0000;  
            text-decoration:underline;  
        }  
        a:hover,  
        a:active    {  
            color: #5cffeb;  
            text-decoration:none;  
        }  
        /* 
           ID选择器   以#开始  用来匹配元素的id值 
        */  
        #header{  
            height:160px;  
            background-color:#0033FF;  
            position:relative;  
        }  
          
        /*后代选择器  在多个选择器之间加入空格表示后代选择器 用来匹配元素的包含关系 
           标签选择器  直接使用标签本身来匹配元素 
        */  
          
        #header h1{  
            color:#FFFF00;  
            font-size:48px;  
            padding-top:40px;  
            300px;/*  通过设置margin的左右为auto可以实现居中,前提是被居中元素指定宽度*/  
            margin:0px auto;  
        }  
          
        /*   #header  a:first-child   #header 里面所有是一个子元素的链接 
         
           #header > a:first-child  #header的直接子元素中的第一个a 
         
        */  
          
        #header > a:first-child{  
            /*float:right;*/  
          
            position:absolute;  
            right:15px;  
            top:10px;  
        }  
        /* 
           所有元素默认的postion是static,其特点按照在文档中的先后顺序进行排列 
           position:absolute  绝对布局,其特点相对于最近一个已定位(absolute/relative )父元素进行定位,如果没有这样的父元素就相对于body。通过top bottom left right控制 
           position:relative  相对布局  其特点是相对于元素本来的位置进行位移  。通过top bottom left right控制,如果吗,没有位移量,其显示还是在原来的位置,但是性质已经变成定位元素。 
        */  
          
          
          
        #header .menu{  
            position:absolute;  
            bottom:5px;  
        }  
          
        #header .menu li{  
            float: left;  
            margin-left:15px;  
            list-style-type:none  
        }  
        #main{  
            min-height:500px;  
            background-color:#CCCCCC;  
        }  
          
          
          
        #main table ,#main h4{  
            360px;  
            margin:0px auto;  
        }  
          
        .minWidth{  
            min-240px;  
        }  
          
        #main table{  
            padding-top:60px;  
        }  
        #main table .result{  
            background-color: white;  
            text-align: center;  
        }  
        #main input,#main img[src='CheckCode']{  
            150px;  
            height:24px;  
        }  
          
        #main textarea{  
            150px;  
            height: 96px;  
        }  
        /* 
           每个id选择器算100 类 伪类算10  标签选择器算1  将所有的值相加就是优先级 
        */  
        #main tr:last-child input{  
            auto;  
            padding:0 10px;  
        }  
          
          
        #footer{  
            background-color:#0033FF;  
            height:80px;  
        }  
  • 相关阅读:
    注解的作用(一)
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---13
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---12
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---11
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---7
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---10
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---6
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---5
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---4
    《Linux命令行与shell脚本编程大全 第3版》Linux命令行---3
  • 原文地址:https://www.cnblogs.com/Black-YeJing/p/9131132.html
Copyright © 2020-2023  润新知