css背景定位及表格

<!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>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</td>

    <td>1722436324</td>

  </tr>

  <tr>

    <td>runless</td>

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

    <td>[email protected]</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，也将被选择。

背景颜色 背景图像 边框

时间： 2024-08-01 10:11:04

css背景定位及表格的相关文章

css背景定位

日期:2015-12-05 背景定位算是才弄明白: background-position:50% 50%; 图片水平和垂直居中.与 background-position:center center;效果等同. 等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏.等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏.

web前端入门到实战：Css背景定位

同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色. 1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置 2.格式:background-position:值1 值2: 值1的取值范围:left center right 值1代表背景图片的水平位置 值2的取值范围:top center bottom 值2代表背景图片的垂直位置 值1和值2也可以设置像素值,来分别表示距离最左边和最上边的像素值(注意可以接受负值,也

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

第3天：CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

[css]《css揭秘》学习（三）-灵活的背景定位

一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>灵活的背景定位</title> 5 <style type="text/css"> 6 div{ 7

CSS Sprites技术(将背景图整合到一张图中，再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css 背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设