2013-11-18 html第一课

1、设置字符集、边框间距与内部文字距边框距离

<meta charset="utf-8"><!--字符编码方式-->

<table width="800px" height="300px" align="center" border="1" cellspacing="15px" cellpadding="15px">

margin/cellspacing 外边框距离  padding/cellpadding内框边距

2、合并行列

<td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">
         合并行
 </td>
<td colspan="2">
合并列
</td>


3、设置外边框合并

<style type="text/css">
        table{
            border-collapse: collapse;
        }
</style>


4、style属性

table{}对所有table应用

.table{} 对class="table"的生效

#table{} 对 id="table"的生效

也可以在里面直接添加:

<td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">

图片添加方式:

background-image: url("../images/image.jpg")


5、页面中增加按钮与按钮事件

添加按钮:

<input type="button" value="点我" οnclick="test()" />

事件:

<script type="text/javascript">
        /*function test(){
            if(confirm("你饿了吗?")){
                alert("饿了就吃士力架!");
            }*/
</script>


6、可以在工程中新建一个*.css文件引用style



在前面先用以下代码引用.js .css文件内容

<link type="text/css" href="css/style.css" rel="stylesheet">
<script src="js/test.js" type="text/javascript"></script>



源代码:

01.html

<!DOCTYPE html>
<html>
<head>
    <title>就不告诉你,就不告诉你</title>
    <meta charset="UTF-8">


    <link type="text/css" href="css/style.css" rel="stylesheet">
    <script src="js/test.js" type="text/javascript"></script>


    <style type="text/css">
              /* .style1{font-family:    serif;font-weight: bold;}
                #style2{font-family: sans-serif}*/
    </style>


    <script type="text/javascript">
        /*function test(){
            if(confirm("这是第一个JavaScript程序!")){
                alert("饿了就吃士力架!");
            }*/


    </script>


    <style type="text/css">
        table{
            /*border-collapse: collapse;*/
        }
    </style>
</head>                                                                 <!--margin padding-->
<body>                                                                     <!-- utf-8 gbk gb18030 gb2312 IOS8859-1-->
    <table width="800px" height="300px" align="center" border="1" cellspacing="15px" cellpadding="15px">
        <tr>
            <td class="style1">
                交大京颐交大京颐交大京颐交大京颐
            </td>
            <td id="style2">
                交大京颐交大京颐交大京颐交大京颐
            </td>
            <td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">
                交大京颐交大京颐交大京颐交大京颐
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td colspan="2">

            </td>
            <td>

            </td>
        </tr>
    </table>
       <input type="button" value="点我" οnclick="test()" />
</body>
</html>

style.css

    .style1{font-family: serif;font-weight: bold;
        background-color: darkred;background-repeat: no-repeat;}
    #style2{font-family: sans-serif;font-weight: bold;
        background-image: url("../images/image.jpg")}

test.js

/**
 * Created with JetBrains WebStorm.
 * User: KIMI
 * Date: 13-11-18
 * Time: 下午6:46
 * To change this template use File | Settings | File Templates.
 */
function test(){
    if(confirm("这是第一个JavaScript程序!")){
        alert("饿了就吃士力架!");
    }
}

以上为第一天所学的所有内容,今后将随着学习的深入继续进行记录。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值