css 模拟百度+伪类设计样式

骑猪看日落 2021-07-24 21:18 411阅读 0赞

**伪类给标签添加样式**
    	hover鼠标悬停显示样式
    		选择器:hover{样式:样式值;}
    			input[type=text]:hover{border:solid 1px #4992FF;}

**css文件**

/*设置页面的基本样式*/
    *{ margin:0px;padding:0px;}
    /*设置header头部的大小*/
    #header{ width:100%;height:45px;background-color:;}
    #header_u{ position:absolute; top:15px;right:92px;}
    #header_u li{ float:left; list-style-type:none;margin-right:24px;}
    #header_u li a{ color:#555;font-size:13px; font-weight:700;line-height:2px;}
    /*设置main主体部分的大小*/
    #main{ width:100%;height:619px;background-color:;text-align:center;}
    #logo{ margin-top:60px;margin-bottom: 21px;}
    input[type=text]{ 
    	width:539px;
    	height:34px;
    	border:solid 1px #999999;
    	background-image: url(img2/百度小相机.jpg);
    	background-repeat: no-repeat;
    	background-position-x: 500px;   /*设置背景图片位置x左右，y上下*/
    	background-position-y:3px;    /*y方向上正数为下，负数为上*/
    }
    input[type=submit]{ 
    	width:100px;
    	height:34px;
    	font-size:15px;
    	color:#fff;
    	background-color: #2d78f4;
    	letter-spacing:1px;
    	border:solid 1px #2D78F4;
    	position:relative;
    	right:5px;
    }
    /*设置footer低部的大小*/
    #footer{ width:100%;height:64px;background-color:;text-align:center;background-color:#F9F9FA ;}
    
    /*伪类添加样式*/
    #header_u li a:hover{ color:blue;}
    input[type=text]:hover{ border:solid 1px #4992FF;}

**html文件**