HTML/CSS学习笔记：11月课程内容回顾-CSDN博客

本文链接：https://blog.csdn.net/m0_73968036/article/details/134485761

2023.11.18学习了12，13，14章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box{font-size:x-large;}
        .content{font-family: 宋体;font-weight: normal;}
        #father1 p{font-style: oblique;}
        h3,h4{color: brown;}
        p{text-indent: 2em;line-height: 40px;}
        #q{text-align: left;text-decoration: underline;text-transform: uppercase;}
        #w{text-align: center;text-decoration: overline;text-transform: lowercase;}
        #e{text-align: right;text-decoration: line-through;text-transform: capitalize;}
        #r{word-spacing: 20px;}
        #t{letter-spacing: 7px;}
    </style>
</head>
<body>
    <div class="content">divdivdivdivdivdiv</div>
    <p class="content">happiness</p>
    <div id="box">warm gun</div>
    <div id="father1">
        <p>ijsiouofiehdafioeujhwaieofjd</p>
        <span>tititititititititititi</span>
    </div>
    <h3>ljijljlljijk</h3>
    <h4>iu9pjiop90u90u</h4>
    <p>学校办学历史溯源于1898年清末湖广总督张之洞奏请清朝政府批准成立的工艺学堂，历经湖北中等工业学堂、中南钢铁工业学校等传承与发展，1958年组建为武汉钢铁学院，开办本科教育。1995年隶属于原冶金工业部的武汉钢铁学院、武汉建筑高等专科学校、武汉冶金医学高等专科学校合并组建为武汉冶金科技大学。1998年根据国家高等教育管理体制改革需要，成为第一批实行“中央与地方共建，以湖北省人民政府管理为主”的划转院校。1999年更名为武汉科技大学。百余年来，学校为国家和社会培养了各类专门人才25余万人。一大批杰出校友成长为院士、专家学者、党政领导、大型钢铁企业掌门人，学校被誉为“冶金高层次人才的摇篮”。</p>
    <p>学校现有青山、黄家湖和洪山三个校区，校园总面积171.43万平方米，校舍建筑面积129万平方米。固定资产32.50亿元；教学科研仪器设备总值7.96亿元；图书馆馆藏纸质图书283.31万册，电子图书102.42万册。全日制普通本科生25000余人，博士、硕士研究生9500余人。校园依湖览江、风景优美，教学设施齐备，办学条件完善，是“湖北省生态园林式学校”“全国绿化模范单位”。</p>
    <div id="q">lsjkilij</div>
    <div id="w">iwdJHHIUo</div>
    <div id="e">idkwjsioj</div>
    <div id="r">Lonely wanna blues know</div>
    <div id="t">万岁万岁万万岁</div>
</body>
</html>

知识点：id属性，选择器前缀是#，class属性前缀是.后代选择器父子元素之间是空格，群组选择器中间是逗号，font-family是字体类型，font-size是字体大小，font-weight 是字体粗细，font-style是字体风格，italic,oblique是斜体,color是字体颜色，text-indent是首行缩进，text-align是水平对齐，left左对齐，center中间对齐，right右对齐，text-docoration是文本修饰，underline是下划线，line-through是中划线，overline是顶划线,text-transform是大小写capitalize把首字母大写line-height是行高，letter-spacing,word-spacing是词间距

2023.11.20 学习了15，16，17章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style  type="text/css">
        #div1{border-style: dashed;border-color: blue;border-top: 0px;}
        #div2{border-style: solid;border-left: 0px;}
        ol{list-style-type: lower-roman;}
        ul{list-style-image: url(../素材/素材/img/news_logo.png);}
        #table1{caption-side: bottom;border-collapse:collapse;border:1px solid red;}
        #table2{border-spacing: 100px;border:1px solid brown;}
    </style>
</head>
<body>
    <div id="div1">123456789</div>
    <br>
    <div id="div2">124567</div>
    <h3>有序列表</h3>
    <ol>
        <li>QWERTU</li>
        <li>oijhoiuh</li>
        <li>huiohuiouio;ui</li>
    </ol>
    <h3>无序列表</h3>
    <ul>
        <li>w43efrw4rf3et</li>
        <li>uigyh8f6ytgu7</li>
        <li>h7ui9og</li>
    </ul>
    <table id="table1">
        <caption>标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>表格1</td>
            <td>表格2</td>
        </tr>
    </table>
    <table id="table2">
        <caption>标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>表格1</td>
            <td>表格2</td>
        </tr>
    </table>
</body>
</html>

2023.11.22 学习了1819章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style type="text/css">
        img{width:60px;}
        #img1{vertical-align: top;}
        #img2{vertical-align: middle;}
        #img3{vertical-align: bottom;}
        #img4{vertical-align: baseline;}
        #img5{float:left;}
        p{background-color: blue;}
        #div1{background-image: url(../素材/素材/img/news_logo.png` );width: 300px;height: 20px;}
        #div2{background-image: url(../素材/素材/img/news_logo.png);width: 200px;height:200px;background-repeat:  repeat-y;}
        #div3{width: 300px;height: 200px;background-position: center right;background-repeat:no-repeat;background-image:  url(../素材/素材/img/news_logo.png);}
    </style>
    <title>Document</title>
</head>
<body>
    123112233<img id="img1" src="../素材/素材/img/huawei.jpg"/>123123(top)
    <hr></hr>
    123112233<img id="img2" src="../素材/素材/img/huawei.jpg"/>123123(middle)
    <hr></hr>
    123112233<img id="img3" src="../素材/素材/img/huawei.jpg"/>123123(bottom)
    <hr/>
    123112233<img id="img4" src="../素材/素材/img/huawei.jpg"/>123123(baseline)
    <hr></hr>
    <img id="img5" src="../1/logo_original.png">
    <p>学校办学历史溯源于1898年清末湖广总督张之洞奏请清朝政府批准成立的工艺学堂，历经湖北中等工业学堂、中南钢铁工业学校等传承与发展，1958年组建为武汉钢铁学院，开办本科教育。1995年隶属于原冶金工业部的武汉钢铁学院、武汉建筑高等专科学校、武汉冶金医学高等专科学校合并组建为武汉冶金科技大学。1998年根据国家高等教育管理体制改革需要，成为第一批实行“中央与地方共建，以湖北省人民政府管理为主”的划转院校。1999年更名为武汉科技大学。百余年来，学校为国家和社会培养了各类专门人才25余万人。一大批杰出校友成长为院士、专家学者、党政领导、大型钢铁企业掌门人，学校被誉为“冶
        ————————————————
        版权声明：本文为CSDN博主「m0_73968036」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        原文链接：https://blog.csdn.net/m0_73968036/article/details/134485761</p>
    <div id="div1">wqdqdwdwqwqddwq</div>
    <div id="div2">fewr3eftg4w3</div>
    <div id="div3"></div>
</body>
</html>

第三周网页设计