2015-09-22CSS:border、background、表格、超链接、overflow、firebug_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:35:59
원래의
1021명이 탐색했습니다.

 

1、CSS的border属性

⑴定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

border-width

border-style

border-color

如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。

 

描述

border-width

规定边框的宽度。

border-style

规定边框的样式。例如,solid、dashed、dotted、none。

border-color

规定边框的颜色。

      width:200px;      height:200px;      border:1px dashed red;
로그인 후 복사

  

⑵分别设置border的上、下、左、右

      width:200px;      height:200px;      border-right:1px dashed red;      border-left:1px dashed red;      border-top:1px solid red;      border-bottom:1px dotted red;
로그인 후 복사

  

2、CSS的background属性

⑴背景颜色

background-color:#0000FF;
로그인 후 복사

  

⑵背景图片

background-image:url("../image/clear.png");
로그인 후 복사

  

⑶背景图片重复

background-repeat:repeat;/*默认值*/
로그인 후 복사

  

background-repeat:repeat-x;
로그인 후 복사

  

background-repeat:repeat-y;
로그인 후 복사

  

background-repeat:no-repeat;
로그인 후 복사

  

⑷背景图片位置

background-position:50px 100px;
로그인 후 복사

  

⑸拉伸背景图片

      background-repeat:no-repeat;      background-size:cover;
로그인 후 복사

  

⑹背景图片固定

body{      background-image:url("../image/clear.png");      background-repeat:no-repeat;      background-attachment:fixed;}
로그인 후 복사

  

3、表格样式

⑴表格的标题

<table border=“1”>    <caption>2004~2007年度收入</caption>    <tr><th>2004</th><th>2005</th><th>2006</th><th>2007</th></tr>    <tr><td>1234</td><td>2345</td><td>3456</td><td>4567</td></tr></table>
로그인 후 복사

  

table{      caption-side:bottom;}
로그인 후 복사

  

⑵表格的边框

table{      border:1px solid red;}
로그인 후 복사

  

⑶边框重叠

th,td{      border:1px solid red;}
로그인 후 복사

  

th,td{      border:1px solid red;}table{      border-collapse:collapse;}
로그인 후 복사

  

⑷行的表头、列的表头

th scope="col"th scope="row"
로그인 후 복사

  

示例代码:

<table summary="This table shows the yearly income for years 2004 through 2007" border="1">      <caption>年度收入 2004 - 2007</caption>      <tr>           <th></th>           <th scope="col">2004</th>           <th scope="col">2005</th>           <th scope="col">2006</th>           <th scope="col">2007</th>      </tr>      <tr>           <th scope="row">拨款</th>           <td>11,980</td>           <td>12,650</td>           <td>9,700</td>           <td>10,600</td>      </tr>      <tr>           <th scope="row">捐款</th>           <td>4,780</td>           <td>4,989</td>           <td>6,700</td>           <td>6,590</td>      </tr>      <tr>           <th scope="row">投资</th>           <td>8,000</td>           <td>8,100</td>           <td>8,760</td>           <td>8,490</td>      </tr>      <tr>           <th scope="row">募捐</th>           <td>3,200</td>           <td>3,120</td>           <td>3,700</td>           <td>4,210</td>      </tr>      <tr>           <th scope="row">销售</th>           <td>28,400</td>           <td>27,100</td>           <td>27,950</td>           <td>29,050</td>      </tr>      <tr>           <th scope="row">杂费</th>           <td>2,100</td>           <td>1,900</td>           <td>1,300</td>           <td>1,760</td>      </tr>      <tr>           <th scope="row">总计</th>           <td>58,460</td>           <td>57,859</td>           <td>58,110</td>           <td>60,700</td>      </tr></table>
로그인 후 복사

  

4、超链接

⑴去掉超链接的下划线

a{      text-decoration:none;}
로그인 후 복사

  

⑵效果

a:link{      color:red;/*未访问时的颜色*/} a:visited{      color:green;/*已经访问过的颜色*/} a:hover{      color:blue;/*鼠标悬停的颜色*/      cursor:pointer;} a:active{      color:orange;/*鼠标点击时的颜色*/}
로그인 후 복사

  

 

 

5、CSS的 overflow 属性

所有主流浏览器都支持 overflow 属性。overflow 属性规定当内容溢出元素框时发生的事情。

 

描述

visible

默认值。内容不会被修剪,会呈现在元素框之外。

hidden

内容会被修剪,并且其余内容是不可见的。

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

 

 

 

 

 

 

 

 

 

 

6、一个工具

FireFox浏览器的插件Firebug

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!