网页设计练习第二周-初涉CSS（包括第1次课后练习焦点访谈网页内容）

本文链接：https://blog.csdn.net/2302_80868896/article/details/134364742

2023.11.10 HTML框架的学习

内容比较简单，用上一节表单学习的代码简单练习了一下

知识点：

1、iframe标签实现内嵌框架，可以嵌入多个页面；

<iframe src="链接地址" width="宽度" height="长度"></iframe>

2023.11.11 初识css（第十一章css简介和第十二章CSS选择器）

<!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">
        #father1 div{color: red;}
        #father2 span{color: blue;}
    </style>
    <title>后代选择器和群组选择器的应用</title>
</head>
<body>
    <h1>后代选择器</h1>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p>绿叶学习网</p>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
    </div>
    <!--#father1 div{color: red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色。
    #father2 span{color: blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们的文本颜色为蓝色。-->

</body>
</html>

<!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">
        #father1 div {
            color: red;
        }

        #father2 span {
            color: blue;
        }

        h3,p {color: yellow;}

        #lvye,.lv {color: green;}
    </style>
    <title>后代选择器和群组选择器的应用</title>
</head>

<body>
    <h1>后代选择器</h1>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p>绿叶学习网</p>
        <p>绿叶学习网</p>
        <span>绿叶学习网</span>
    </div>
    <!--#father1 div{color: red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色。
    #father2 span{color: blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们的文本颜色为蓝色。-->

    <h1>群组选择器</h1>
    <h2>eg.1</h2>
    <h3>绿叶学习网</h3>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
    <!--h3,div,p,span{...}表示选中所有的h3元素、div元素、p元素、span元素-->
    <h2>eg.2</h2>
    <div id="lvye">绿叶学习网</div>
    <p>绿叶学习网</p>
    <p class="lv">绿叶学习网</p>
    <span>绿叶学习网</span>
    <!--#lvye,.lv,span{...}表示选中id="lvye"的元素、class="lv"的元素以及所有的span元素-->
</body>

</html>

知识点：

1、css（cascading style sheet（层叠样式表）），“HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为”；

2、css引入方式：外部样式表、内部样式表、行内样式表；

3、外部样式表：在单独文件中定义，然后在html文件中的head标签中用link标签来引用；

<link rel="stylesheet" type="text/css" href="文件路径" />

4、内部样式表：css代码和html代码放在同一个文件中，css代码放在style标签内，style标签放在head标签内；id属性具有唯一性，即同一页面中不允许出现两个id相同的元素；class属性是一个类，相同class的元素具有相同的css样式

<style type="text/css">
    /*
    #id名{}  --id选择器（单个
    .类名{}  --class选择器（多个
    标签（元素）{} --元素选择器（用于所有同名标签
    */
</style>

5、行内样式表（较麻烦）：在body中各个标签的style属性中去定义；

<div style="color:red;">这一句话是红色</div>

6、选择器：元素选择器，即选择相同的元素（标签）具有相同css样式；id选择器，即为元素设置一个id属性，针对设置这个id的元素定义css样式，同一页面中不能出现相同id，id名前要加前缀“#”；claa选择器，即为相同或不同的元素设置一个class属性，针对拥有同一个class的元素进行css样式操作，class名前要加前缀（.）；后代选择器，即选择元素内部中某一种元素的所有元素，包括子元素和其他后代元素，父元素和后代元素须用空格隔开；群组选择器，即同时对几个选择器进行相同的操作；

2023.11.12 css属性-字体样式的学习

<!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">
        p{
            font-family: 楷体,微软雅黑,宋体;
            font-size: 14px;
            font-weight: bold;
            color: blue;
        }
    </style>
    <title>字体样式</title>
</head>
<body>
    <p>有规划的人生叫蓝图，没规划的人生叫拼图。</p>
</body>
</html>

知识点：

1、font-family属性：字体类型；定义多种字体的作用是使电脑可以从左到右按顺序选择已有的字体使用；

定义一种字体
{font-family:"微软雅黑";}
定义多种字体
{font-family:Arial,Verdana,Georgia;}

2、font-size属性：字体大小（像素值：以px为单位）；font-weight属性：字体粗细（100~900/关键字lighter细、normal默认、bold粗、bolder很粗）；font-style属性：字体风格（normal默认、italic斜体、oblique斜体）；

3、color：字体颜色；关键字blue、red等；十六进制RGB值“#FBF9D0”形式，可以用在线调色板取色，#000000是黑色，#FFFFFF是白色；

4、/*CSS注释*/；

2023.11.13 本周主要计划于完成两周的作业，一边学习一边运用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">
        #first {
            line-height: 37px;
            letter-spacing: 2px;
            padding-top: 20px;
            margin-left: 120px;
            margin-right: 120px;
        }

        #title {
            color: #4B4B4B;
            font-size: 38px;
            line-height: 70px;
        }

        #name{
            color: #4B4B4B;
            text-align:right;
            font-family: "微软雅黑";
            font-size: 20px;
            width: 990px;
        }

        .time {
            color: gray;
            line-height: 50px;
        }

        .para {
            font-family: "微软雅黑";
            font-size: 20px;
            width: 990px;
            text-align: justify;
        }

        .img {
            margin-left: 150px;
            margin-right: 150px;
        }
        /*去掉默认样式中的下划线*/
        a{text-decoration: none;}
        a:link{color: black;}
        a:hover{color: red;}
    </style>
</head>


<body>
    <div id="first">

        <a href="https://news.sina.com.cn/" target="_blank"><img src="../img/news_logo.png"></a>
        <a href="http://gov.sina.com.cn/" target="_blank"><small>&nbsp;&nbsp;&nbsp;&nbsp;新浪政务</a>>正文</small>
        <p>
        <h1 id="title">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
        </p>
        <hr class="time" />
        <span class="time">2023年03月02日 21:50 </span>
        <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">&nbsp;&nbsp;&nbsp;央视网</a>
        <hr class="time" />

        
        <p id="name">责任编辑：王树淼 SN242</p>
    </div>
</body>

</html>

不知道审核哪里有问题，我把正文的代码都删去了。

知识点：

1、插入视频；controls使视频可操作；

<video class="img" src="../video/1.mp4" controls width="630"></video>

2、text-align属性：水平对齐（text-align：justify两端对齐）；line-height属性：行高；letter-spacing属性：字母间距；text-decoration文本修饰；

3、盒子模型：内边距padding；外边距margin；

4、去掉超链接默认样式中的下划线；

/*去掉默认样式中的下划线*/
        a{text-decoration: none;}

2023.11.14 css属性-文本样式的学习

<!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">
        #letter{
            letter-spacing: 5px;
        }
        #word{
            word-spacing: 5px;
        }
        .p{
            font-size: 14px;
            text-indent: 28px;
            text-transform: uppercase;
        }
        span{
            font-weight: bold;
            text-decoration: underline;
        }
    </style>
    <title>文本样式</title>
</head>
<body>
    <p id="letter">Rome wasn't built in a day.罗马不是一天建成的。</p>
    <p id="word">Rome wasn't built in a day.罗马不是一天建成的。</p>

    <p class="p">很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种"<span>低水平的勤奋</span>"远远比懒惰可怕。</p>
    <p class="p">Remember:no pain,no gain!</p>
</body>
</html>

知识点：

1、text-indent属性：首行缩进（一般是font-siaze的像素值x2）；text-align属性：水平对齐（text-align：justify是两端对齐、left左对齐、right右对齐、center居中对齐）；text-decoration属性：文本修饰（none去除所有划线效果、underline下划线、line-through中划线、overline顶划线）；text-transform属性：大小写转换（none无转换、uppercase转换为大写、lowercase转换为小写、capitalize只将每个英文单词首字母转换为大写）；

2、line-height属性：行高（像素值）；letter-spacing属性：字间距（每一个汉字或字母间距）；word-spacing属性：词间距（针对每一个英文单词间）；

2023.11.15 css属性-边框（border）样式的学习

试着用了一下外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <link rel="stylesheet" type="text/css" href="./基本结构/border.css">
</head>
<body>
    <div>边框的学习</div><br>
    <img src="../img/alibaba.jpg" title="alibaba"><br>
    <table>
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
        </tr>
    </table><br>
    <span>以上是边框样式的简单应用</span>
</body>
</html>

/*css文件内容*/
div,img,table,span {
    border-width: 5px;
    border-style: solid;
    border-right-color: red;
    border-bottom: 0;
}

知识点：

1、几乎所有元素都可以定义边框，eg.div、img、table、span...；

2、border-width属性：边框的宽度（像素值）；border-style属性：边框的外观（none无样式、dashed虚线、solid实线）；border-color属性：边框的颜色；

3、局部样式：border-top上边框、border-bottom下边框、border-left、border-right；border-bottom：0px/0/none（去掉下边框）；

#border{
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
}

/*简写形式如下*/
#border{
    border-right:1px solid red;
}

2023.11.16 css属性-列表样式的学习（list）

<!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">
        #ol1{
            list-style-image: url(../img/14.jpg);
            /*此属性列表项图片不可修改大小，只能事先裁好图片或者使用伪元素模拟列表图标的效果，此处采取第一个方法，在ul1中采取第二个方法*/
        }
        #ol2{
            list-style-type: none;
            list-style-type: upper-roman;
        }
        #ul1{
            list-style-type: none;
        }
        .li1::before{
            /*content必须使用，用于在css渲染中向元素逻辑上的头部或尾部添加内容，必须有值（可以是空字符串）*/
            content: "";
            /*修改行内块尺寸，调整大小*/
            display: inline-block;
            width: 30px;
            height: 30px;


            /*将图片作为背景图插入*/
            background: url(../img/on.gif) no-repeat center;
            /*调整背景图片的尺寸*/
            background-size: 100% 100%;
            /*设置元素的垂直对齐方式，把此元素放置在父元素的中部*/
            vertical-align: middle;
        }
        #ul2{
            list-style-type: none;
            list-style-type: square;
        }
        a{
            text-decoration: none;
            color: pink;
        }
    </style>
    <title>列表样式</title>
</head>
<body>
    <!--默认有序列表-->
    <ol>
        <li><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
        <li><a href="https://www.163.com/" target="_blank">Top4：网易</a></li>
        <li><a href="https://www.sohu.com/" target="_blank">Top5：搜狐</a></li>
    </ol>
    <ol id="ol1">
        <li><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
        <li><a href="https://www.163.com/" target="_blank">Top4：网易</a></li>
        <li><a href="https://www.sohu.com/" target="_blank">Top5：搜狐</a></li>
    </ol>
    <ol id="ol2">
        <li><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
    </ol>
    <!--默认无序列表-->
    <ul>
        <li><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
        <li><a href="https://www.163.com/" target="_blank">Top4：网易</a></li>
        <li><a href="https://www.sohu.com/" target="_blank">Top5：搜狐</a></li>
    </ul>
    <ul id="ul1">
        <li class="li1"><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li class="li1"><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li class="li1"><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
        <li class="li1"><a href="https://www.163.com/" target="_blank">Top4：网易</a></li>
        <li class="li1"><a href="https://www.sohu.com/" target="_blank">Top5：搜狐</a></li>
    </ul>
    <ul id="ul2">
        <li><a href="http://www.baidu.com/" target="_blank">Top1：百度</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">Top2：淘宝</a></li>
        <li><a href="https://www.sina.com.cn/" target="_blank">Top3：新浪</a></li>
    </ul>
</body>
</html>