渡课学习日记(2018/7/20)

一、今日学习内容:

1.学习Markdown
2.笔记日志撰写标准
3.表格、列表、表单、布局标签

二、代码编写

1.使用所学的表格标签制作一个表格代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>课程表</title>
    <style>
        #p1 b {
            position:relative;
            right:60px;
            top:10px;
            }
        #p1 strong {
            position:relative;
            left:60px;
            bottom:10px;
            }
        #p1:before {
            content: "";
            position: absolute;
            width:1px;
            height:210px;/*这里需要自己调整,根据td的宽度和高度*/
            top:89px;      /*下移*/
            left:220px;     /* 向右移*/
            background-color: black;
            display: block;
            transform: rotate(-80deg);/*这里需要自己调整,根据线的位置*/
            transform-origin: top;
            }
</style>
</head>
<body>
    <h1><center>课程表</center></h1>
    <table style="text-align:center" width="928" height="400" border="1" align="center"
text-aligm="center">
        <thead>
            <tr>
                <th colspan="2" id="p1"><b>节次</b><strong>星期</strong></th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tr>
            <td rowspan="5">上午</td>
            <td>早自习</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td></td>
        </tr>
        <tr>
            <td>第一节</td>
            <td>物理</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>第二节</td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>第三节</td>
            <td>英语</td>
            <td>生物</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>第四节</td>
            <td>化学</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>第一节</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td>化学</td>
            <td>计算机</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>第二节</td>
            <td>语文</td>
            <td>物理</td>
            <td>生物</td>
            <td>英语</td>
            <td>生物</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>第三节</td>
            <td>德育</td>
            <td>数学</td>
            <td>体育</td>
            <td>生物</td>
            <td>自习</td>
            <td></td>
        </tr>
        <tr>
            <td>晚上</td>
            <td>晚自习</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

成品如图所示:
这里写图片描述
2.两个站点的布局结构,并书写HTML代码:

<!DOCTYPE html>
<html>
<head>
    <title>w3schoo1</title>
</head>
<body>
    <!--头部布局开始-->
    <div id="header">
        <div id="h-logo">
            <a href="http://www.w3school.com.cn/index.html" title="w3school在线教程">W3shool</a>
        </div>
        <div>
            <form>
                <input type="text">
                <input type="submit" value="GO" title="搜索">
            </form>
        </div>
            <a href="http://www.w3school.com.cn/index.html" title="html 系列教程">HTML/CSS</a>
            <a href="http://www.w3school.com.cn/index.html" title="浏览器脚本教程">JavaScript</a>
            <a href="http://www.w3school.com.cn/index.html" title="服务器脚本教程">Server Side</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">ASP>NET</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>XML 系列教程">XML</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>web services 系列教程">Web Services</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">Web Building</a>
        </div>
        <!--头部内容结束-->
        <!--内容部分布局开始-->
        <div id="centent">
            <h3>HTML 教程</h3>
            <ul>
                <ol title="HTML 教程">HTML</ol>
                <ol title="HTML 教程">HTML5</ol>
                <ol title="HTML 教程">XHTML</ol>
                <ol title="HTML 教程">CSS</ol>
                <ol title="HTML 教程">CSS3</ol>
                <ol title="HTML 教程">TCP/IP</ol>
            </ul>
            </div>
        <div id="c-center">
            <h2>领先的 Web 技术教程 - 全部免费</h2><hr/>
            <p>在w3school,你可以找到你所需要的所有的网站建设教程。<br/>
                从基础的 HTML 到 CSS,乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。<br/>
                <b >从左侧的菜单选择你需要的教程!</b>
            </p>
        </div>
        <div id="c-right">
            <h3>参考手册</h3>
            <ul>
                <li>HTML/HTML5颜色</li>
                <li>HTML颜色</li>
                <li>CSS 1,2,3</li>
            </ul>
        </div>
    </div>
    <!--内容部分布局结束-->
    <!--底部布局开始-->
    <div id="buttom">
        <p style="background-color:#D8D8D8;color:white ">W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关</p>
        <p><a href="/about/about_use.asp" title="关于使用">使用条款</a><a href="/about/about_privacy.asp" title="关于隐私">隐私条款</a>。版权保留,保留一切权利。赞助商:“<a target="_blank" href="http://www.yktz.net/" title="上海赢科投资有限公司">上海赢科投资有限公司</a><a target="_blank" href="http://www.miitbeian.gov.cn/">蒙ICP备06004630号</a></p>
    </div>
    <!--底部布局结束-->
        </div>
    </div>
</body>
</html>

成品如下:
这里写图片描述

三、预习的内容

1.预习了CSS的样式的大概内容为第二天做准备

四、学习心得

经过今天的一天学习收获颇多,深刻认识了div对于布局而言的重要,以及编写列表所需的一些标签。

猜你喜欢

转载自blog.csdn.net/weixin_42707543/article/details/81138563