网页设计第三次课后练习（div+css）_网页设计与制作大一第九章上机练习-CSDN博客

本文链接：https://blog.csdn.net/2301_79602950/article/details/134280975

第八章超链接练习

主要是练习页面跳转

第九章表单练习

包含单行文本框，多行文本框，check，value，复选框，按钮，文件上传多项内容

第十章框架

嵌入页面

第一次网页设计作业

提问：为什么新浪微博的标签不能显示，视频不能播放

在head里面增加的标签为什么直接显示出来了没发挥上课讲的作用

十一月十一号css选择器联系

十一月十二号

选择器课后练习

字体样式练习（字体大小，粗细，类型，颜色）

文本样式练习（首行缩进，文本修饰，划线用法，大小写，）

十一月十三日

文本样式练习词间距，行高，水平对齐，首行缩进

今日练习边框样式 +列表样式

表格样式（表格标题位置，表格边框合并，表格边框间距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <style type="text/css">
        table,th,td{border: 1px solid silver;}
        table{caption-side:bottom;border-collapse:separate;border-spacing: 8px;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表尾-->
        <tfoot>
            <tr>
                <td>表尾单元格1</td>
                <td>表位单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

图片样式（图片大小，图片边框，图片对齐，文字环绕）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平对齐</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 100px;
            border: 1px solid greenyellow;
        }
        .div1{text-align: left;}
        .div2{text-align: center;}
        .div3{text-align: right;}
        img{width: 100px;height: 60px;}
        #img1{vertical-align: top;}
        #img2{vertical-align: middle;}
        #img3{vertical-align:bottom;}
        #img4{vertical-align:baseline;}
        #img5{float:left}
        p{
            font-family: 'Courier New', Courier, monospace;
            font-size: medium;
        }

    </style>
</head>
<body>
    <div class="div1">
        <img src="../../img/news_logo.png">
    </div>
    <div class="div2">
        <img src="../../img/news_logo.png">
    </div>
    <div class="div3">
        <img src="../../img/news_logo.png">
    </div>
    新闻网<img src="../../img/news_logo.png">新闻网
    <hr/>
    新闻网<img src="../../img/news_logo.png">新闻网
    <hr/>
    新闻网<img src="../../img/news_logo.png">新闻网
    <hr/>
    新闻网<img src="../../img/news_logo.png">新闻网
    <hr/>
    <img src="../../img/news_logo.png">
    <P>新浪（NASDAQ：SINA），即新浪公司，是一家服务于中国及全球华人社群的网络媒体公司，成立于1998年12月，由王志东创立，现任董事长曹国伟，服务大中华地区与海外华人，新浪拥有多家地区性网站。
        新浪通过门户网站新浪网、新浪移动和社交媒体微博，帮助广大用户通过电脑和移动设备获得专业媒体和用户自生成的多媒体内容（UGC）并与友人进行兴趣分享。
        2012年11月新浪注册用户已突破4亿。截至2016年12月31日的第四季度，营收为3.13亿美元，同比增长22%；净利润为1990万美元，同比增长37%；合摊薄后每股利润为0.27美元，同比增长29%；截至2016年12月31日的2016年全年，营收为10.309亿美元，同比增长17%；净利润为2.251亿美元合每股摊薄净收益3.01美元。</P>

</body>
</html>