css背景定位及表格

Posted on 2015-04-02 11:49  小蕊同学  阅读(127)  评论(0)  编辑  收藏  举报 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
	    /*  ^开头  $结尾  */
        img[alt*=m]{
			width:200px;
			padding:5px;
			
			/* 对象透明度样式属性 是css3新增加的样式 */
			filter:alpha(opacity=50); /* for IE8 and earlier */
			opacity:0.5;/* for IE9 and other browsers */
			border:1px dashed gray;
		}
		img[alt*=m]:hover{
			cursor:pointer;
			filter:alpha(opacity=100); /* for IE8 and earlier */
			opacity:1;
		    border:1px dashed red;	
		}
		
		h1:hover{color:red;cursor:pointer;}
	</style>
</head>

<body>
<img src="images/img2.jpg" alt="my pic">
<img src="images/img3.jpg" alt="mypic2m">
<img src="images/img3.jpg" alt="aphhimc2">
<h1>aaaaaaaaaaaa</h1>
</body>
</html>

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
	/* 链接标签的正常效果 */
	.nav a:link{
		display:block;
		float:left;
	        color:red;
		text-decoration:none;
		font-size:14px;	
		padding:15px;
		margin:5px;
		border:1px solid gray;
	}
	.nav a:visited {color:black;}
    .nav a:hover {color:#fff;background-color:red;}
    .nav a:active {color:yellow;}
	</style>
</head>

<body>
<div class="nav">
    <a href="aa.html">公司简介</a>
    <a href="aa.html">产品中心</a>
    <a href="aa.html">联系我们</a>
    <a href="aa.html">在线客服</a>
    <a href="http://www.baidu.com/">百度推广</a>
</div>
<hr style="clear:both;">
<a href="http://www.taobao.com">友情链接</a>

</body>
</html>

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    /*  控制表格效果 */
    .t{
        width:80%;
        text-align:center;
        margin:0 auto; /*控制表格居中*/
        background-color:#c9c9c9;
        border:0;
        border-spacing:1px;
        border-radius:2px;
        font-size:12px;
    }
    .t tr:nth-child(2n){background-color:#fff;} 
    .t tr:nth-child(2n+1){background-color:#f3f3f3;} 
    .t tr:first-child{font-weight:800;line-height:35px;background-color:#e9e9e9;font-size:15px;}
    .t tr:hover{background-color:#FCE7C4;color:red;}
    .t tr td{padding:10px;}
    </style>
</head>

<body>
<table class="t">
    <tr><td>学号</td><td>姓名</td><td>成绩</td><td>专业</td><td>出生日期</td><td>操作</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
</table>
<br><br><br><hr>
<table align="center" class="t">
    <tr><td>学号</td><td>姓名</td><td>成绩</td><td>专业</td><td>出生日期</td><td>操作</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
    <tr><td>201501</td><td>张三丰</td><td>90</td><td>计算机科学</td><td>1985-12-10</td><td>删除</td></tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
        /*  ^开头  $结尾  */
        img[alt*=m]{
            width:200px;
            padding:5px;
            
            /* 对象透明度样式属性 是css3新增加的样式 */
            filter:alpha(opacity=50); /* for IE8 and earlier */
            opacity:0.5;/* for IE9 and other browsers */
            border:1px dashed gray;
        }
        img[alt*=m]:hover{
            cursor:pointer;
            filter:alpha(opacity=100); /* for IE8 and earlier */
            opacity:1;
            border:1px dashed red;    
        }
        
        h1:hover{color:red;cursor:pointer;}
    </style>
</head>

<body>
<img src="images/img2.jpg" alt="my pic">
<img src="images/img3.jpg" alt="mypic2m">
<img src="images/img3.jpg" alt="aphhimc2">
<h1>aaaaaaaaaaaa</h1>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
     input:focus{color:red;}
     input[type=checkbox]:checked + span {color: #f00;}

    </style>
</head>

<body>
<input type="text" value="1111"><br>
<input type="text" value="1111"><br>
<input type="text" value="1111"><br>
<input type="text" value="1111"><br>
<hr>
<h3>请选择兴趣爱好</h3>
<label><input type="checkbox" name="love[]" value="音乐"><span>音乐</span></label><br>
<label><input type="checkbox" name="love[]" value="游戏"><span>游戏</span></label><br>
<label><input type="checkbox" name="love[]" value="运动"><span>运动</span></label><br>
<label><input type="checkbox" name="love[]" value="看电影"><span>看电影</span></label><br>
<label><input type="checkbox" name="love[]" value="计算机网络"><span>计算机网络</span></label><br>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
        p:first-child{color:red;}
        p:last-child{color:yellow;}
        p:nth-child(2n){background-color:#0ff;} 
        p:nth-child(2n+1){background-color:#00f;} 
    </style>
</head>

<body>
    <div>
        <p>ppp1</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp2</p>
        <p>ppp3</p>
    </div>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    div.face{
        width:600px;
        height:300px;
        /*border-radius:150px;*/
        border-radius:150px;
        background-image:url(images/img2.jpg);    
    }
        div{
            width:300px;
            height:300px;
            margin:20px auto;
            border:1px solid red;
            /*border:none;
            border-bottom:1px dashed gray;*/
            border-radius:150px;
        }
        .my{
            border:none;
            border-bottom:1px solid gray;
            background-color:#f9f9f9;
            padding:5px;
        }
    </style>
</head>

<body>
<div class="face"></div>
<hr>
    <div>ddddddddddddddd1</div>
    <div>ddddddddddddddd1</div>
    <div>ddddddddddddddd1</div>
    <div>ddddddddddddddd1</div>
    <div>ddddddddddddddd1</div>
    姓名:<input type="text" class="my" autofocus placeholder="填写姓名">
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    /*
    body{
        background-image:url(images/img2.jpg);
        background-size:100% auto;
    }
    */
    
    div.face{
        width:300px;
        height:200px;
        /*background-image:url(images/img2.jpg);    */
        /*  rgba(255,0,0,0.9) 透明颜色，是css3 新增功能 */
        /*background-color:rgba(255,0,0,0.9);*/
        /*opacity: 控制对象透明的*/
        /*background-image: linear-gradient(red,rgba(255,237,0,0.55));*/
        /* background-image: linear-gradient(270deg,yellow 5%,red 8%,red 80%,yellow);*/
        /*background-image:radial-gradient(red,yellow,green,blue);*/
        background-image:url(images/img2.jpg);
        background-size:300px 200px;
        
    }
    
    .xl{
        width:44px;
        height:44px;
        background-image:url(images/xl.png);
        background-repeat:no-repeat;
        background-position:-177px -125px;
    }
    
    </style>
</head>

<body>
<div class="xl"></div>
<hr>
<div class="aa">asdfasdfasf</div>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    div.myd{
        width:480px;
        height:50px;
        margin:0 auto;    
    }
    input.search{
        display:block;
        float:left;
        border:none;
        width:376px;
        height:35px;
        background-image:url(images/xl.png);
        padding-left:10px;
        outline:none;
    }
    input.btn{
        display:block;
        float:left;
        width:69px;
        height:35px;
        background-image:url(images/xl.png);
        background-position:-386px 0;
        border:none;
        cursor:pointer;
    }
    </style>
</head>

<body>
<form action="search.php" method="post">
<div class="myd">
    <input type="text" class="search">
    <input type="submit" value="" class="btn">
</div>
</form>
</body>
</html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    /*
    body{
        background-image:url(images/img2.jpg);
        background-size:100% auto;
    }
    */
    
    div.face{
        width:300px;
        height:200px;
        /*background-image:url(images/img2.jpg);    */
        /*  rgba(255,0,0,0.9) 透明颜色，是css3 新增功能 */
        /*background-color:rgba(255,0,0,0.9);*/
        /*opacity: 控制对象透明的*/
        /*background-image: linear-gradient(red,rgba(255,237,0,0.55));*/
        /* background-image: linear-gradient(270deg,yellow 5%,red 8%,red 80%,yellow);*/
        /*background-image:radial-gradient(red,yellow,green,blue);*/
        background-image:url(images/img2.jpg);
        background-size:300px 200px;
        
    }
    
    .xl{
        width:44px;
        height:44px;
        background-image:url(images/xl.png);
        background-repeat:no-repeat;
        background-position:-177px -125px;
    }
    
    </style>
</head>

<body>
<div class="xl"></div>
<hr>
<div class="aa">asdfasdfasf</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

.t {

    margin: auto;

    text-align: center;

    border: 0px;

    background-color: #CBCACA;

    border-spacing: 1px;

    width: 80%;

    font-size: 12px;

    border_raidus: 2px;

    color: #292828;

}

.t tr td {

    padding: 15px;

}

.t tr:first-child {

    line-height: 25px;

    letter-spacing: 3PX;

    background-color: #E9E9E9;

    font-weight: 800;

    font-size: 13px;

}

.t tr:nth-child(2n) {

    background-color: #fff;

}

.t tr:nth-child(2n+1) {

    background-color: #F3F3F3;

}

.t tr:hover {

    background-color: #B5F199;

    color: RED;

}

</style>
</head>

<body>

<table class="t">

  <tr>

    <td>网名</td>

    <td>博客地址</td>

    <td>邮箱地址</td>

    <td>qq账号</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

    <td>http://www.cnblogs.com/lsr111</td>

    <td>1722436324@qq.com</td>

    <td>1722436324</td>

  </tr>
</table>
</body>
</html>

选择符写法  /* 包含选择符(E F) */  /* .demo div { border:1px solid #f00; }*/  /* 子选择符(E>F) */  .demo > div { border:1px solid #f00; }

 /* 相邻选择符(E+F) */  /*h1+p{color:#f00;}*/  /* 兄弟选择符(E~F) */  h1~p{color:#f00;}

属性选择符 E[att]   E = Element 元素 我们叫标签

E[att] CSS2 选择具有att属性的E元素。 E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。 ~=  E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 ^= E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。 E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

背景颜色 背景图像 边框

Copyright © 2024 小蕊同学
Powered by .NET 9.0 on Kubernetes