码迷，mamicode.com
首页 > Web开发 > 详细

css背景定位及表格

时间：2015-04-02 13:03:16      阅读：203      评论：0      收藏：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，也将被选择。

背景颜色 背景图像 边框

css背景定位及表格

标签：

原文地址：http://www.cnblogs.com/lsr111/p/4386493.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！