第三次网页设计课后作业

已于 2023-12-18 17:31:26 修改
阅读量64 收藏 1
点赞数 1
文章标签： css3 css 前端
于 2023-11-19 21:26:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1939273302/article/details/134494292
版权

2023.11.16 完成第十五章 边框样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第十五章 边框样式</title>
        <style type="text/css">
            div{
                width:100px;
                height: 30px;
            }
            #div1{
                border-width: 1px;
                border-style: dashed;
                border-color: red;
            }
            #div2{border: 1px solid rgb(13, 0, 255);}

            img{
                border-width: 2px;
                border-style: solid;
                border-color: aqua;
            }
            #div3{border-top: 1px solid blueviolet;
                border-bottom: 1px solid red;
                border-right: 2px solid yellow;
                border-left:0;}
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <img src="../../素材/img/1.jpg" alt="图片">
        <div id="div3"></div>
    </body>
</html>

知识点：

  1.  整体样式：宽度、外观、颜色

  2. 简写形式

  3. 局部样式：上下左右边框及其属性

 2023.11.16 完成第十六章 列表样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第十六章 列表样式</title>
        <style type="text/css">
            ol{list-style-type: lower-roman;}
            ul{list-style-type: circle;}
            #olul{list-style-type: none;}
            #ou1{list-style-image: url(../../素材/img/alibaba.jpg);}
        </style>
    </head>
    <body>
        <h3>有序列表</h3>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
        <h3>无序列表</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <ol id="olul">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>       
        </ol>
        <ul id="ou1">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>        
        </ul>
    </body>
</html>

知识点：

  1. 定义、去除列表项符号 

  2. 列表项图片

 2023.11.16 完成第十七章 表格样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第十七章 表格样式</title>
        <style type="text/css">
            table,th,td{border: 1px solid silver;}
            #table1{border-collapse: collapse;}
            #table2{border-spacing: 10px;}
            table{caption-side: bottom;}
        </style>
    </head>
    <body>
        <table id="table1">
            <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>表行单元格5</td>
                    <td>表行单元格6</td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <table id="table2">
            <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>表行单元格5</td>
                    <td>表行单元格6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

知识点：

  1. 表格标题位置
  2. 表格边框合并
  3. 表格边框间距 

2023.11.16 完成第十八章 图片样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第十八章 图片样式</title>
        <style type="text/css">
            img{
                width:60px;
                height: 60px;
                border: 1px solid red;
            }

            .div1{text-align: left;}
            .div2{text-align: center;}
            .div3{text-align: right;}

            #img1{vertical-align: top;}
            #img2{vertical-align: middle;}
            #img3{vertical-align: bottom;}
            #img4{vertical-align: baseline;}

            #img5{float: left;}
            #img6{float: right;}

        </style>

    </head>
    <body>
        <div class="div1">
            <img src="../../素材/img/1.jpg" alt="tupian">
        </div>
        <div class="div2">
            <img src="../../素材/img/1.jpg" alt="tupian">
        </div>
        <div class="div3">
            <img src="../../素材/img/1.jpg" alt="tupian">
        </div>
        <hr>
        这是一句话<img id="img1" src="../../素材/img/1.jpg" alt="tupian">这是一句话(top)
        <hr>
        这是一句话<img id="img2" src="../../素材/img/1.jpg" alt="tupian">这是一句话(middle)
        <hr>
        这是一句话<img id="img3" src="../../素材/img/1.jpg" alt="tupian">这是一句话(bottom)
        <hr>
        这是一句话<img id="img4" src="../../素材/img/1.jpg" alt="tupian">这是一句话(baseline)
        <hr>
        <div>
        <img id="img5" src="../../素材/img/1.jpg" alt="tupian"><p>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话</p>
    </div>
    <div>
        <img id="img6" src="../../素材/img/1.jpg" alt="tupian"><p>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话<br>这是一句话这是一句话这是一句话这是一句话这是一句话</p>
    </div>
    </body>
</html>

知识点：

  1.  图片大小
  2. 图片边框
  3. 图片对齐：水平对齐、垂直对齐
  4. 文字环绕

2023.11.19 完成第十九章 背景样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第十九章 背景样式</title>
        <style type="text/css">
            div{
                width:100px;
                height: 60px;
            }
            #div1{color: blue; background-color: hotpink;}
            #div2{background-image: url(../../素材/img/1.jpg);}
            #div3{width: 500px; height: 300px; border: 1px solid seagreen; background-image:url(../../素材/img/屏幕截图\ 2023-11-19\ 203751.png);}
            .div4{background-repeat: repeat-x;}
            .div5{background-repeat: repeat-y;}
            .div6{background-repeat: no-repeat; background-position: 40px 20px;}
            .div7{background-repeat: no-repeat; background-position:center right;}

        </style>
    </head>
    <body>
        <div id="div1">字体颜色为blue，背景颜色为hotpink</div>
        <div id="div2">这句话有图片背景</div>
        <div id="div3"></div>
        <div id="div3" class="div4"></div>
        <div id="div3" class="div5"></div>
        <div id="div3" class="div6"></div>
        <div id="div3" class="div7"></div>


    </body>
</html>

知识点：

  1. 背景颜色
  2. 背景图片样式
  3. 背景图片重复
  4. 背景图片位置 
  5. 背景图片固定
     

 2023.11.19 完成第二十章 超链接样式 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第二十章 超链接样式</title>
        <style type="text/css">
            a{text-decoration: none;}
            a:link{color: red;}
            a:visited{color: purple;}
            a:hover{color: yellow;}
            a:active{color: blue;}

            div{
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: white;
                background-color: lightskyblue;
                font-size: 14px;
            }
            div:hover{
                background-color: hotpink;
            }
            #div_default{cursor:default ;}
            #div_pointer{cursor: pointer;}
            #zidingyi{cursor: url(../../素材/img/屏幕截图\ 2023-11-19\ 203751.png),default;}
        </style>

    </head>
    <body>
        <a href="https://blog.csdn.net/s1939273302?type=blog" target="_blank">点这里</a>
        <div>这是一句话</div>
        <div id="div_default">鼠标默认样式</div>
        <div id="div_pointer">鼠标手状样式</div>
        <div id="zidingyi">自定义鼠标样式</div>
    </body>
</html>

 

知识点：

  1. 超链接伪类
  2. 深入了解：hover
  3. 鼠标样式：浏览器鼠标样式、自定义鼠标样式

2023.11.20 完成第二十一章 盒子模型 的练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第二十一章 盒子模型</title>
        <style type="text/css">
            .div1{
                display: inline-block;
                padding: 20px 40px 60px 80px;
                margin: 40px 80px;
                border: 2px solid red;
                background-color: #FFDEAD;
            }
            .div2{
                width: 100px;
                height: 40px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">这是一句话</div>
        <div class="div2">这是一句话</div>

    </body>
</html>

 知识点：

  1. CSS盒子模型：宽高、边框、内边距、外边距

2023.11.20 完成第二十二章 浮动布局 的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第二十二章 浮动布局</title>
        <style type="text/css">
            /*定义父元素样式*/
            #father{
                width: 300px;
                background-color: #0c6a9d;
                border: 1px solid silver;
            }
            /*定义子元素样式*/
            #father div{
                padding: 10px;
                margin: 15px;
                border: 2px dashed red;
                background-color: #fcd568;
            }
            #son1{
                background-color: hotpink;
                float: left;
            }
            #son2{
                background-color: #fcd568;
                float: left;
            }
            .clear{clear:both}
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div class="clear"></div>

            <div id="son3">box3</div>

        </div>
    </body>
</html>

知识点：

  1. 正常文本流、脱离文本流

  2. 浮动

  3. 清楚浮动 

2023.11.21 完成第二十三章 定位布局 的练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第二十三章 定位布局</title>
        <style type="text/css">
            #first{
                width: 120px;
                height: 1800px;
                border: 1px solid gray;
                line-height: 600px;
                background-color: #b7f1ff;
            }
            #second{
                position: fixed;
                top: 30px;
                left: 160px;
                width: 60px;
                height: 60px;
                border: 1px solid silver;
                background-color: hotpink;
            }
            #father{
                margin-top: 30px;
                margin-left: 30px;
                border: 1px solid silver;
                background-color: lightskyblue;
            }
            #father div{
                width: 100px;
                height: 60px;
                margin: 10px;
                background-color: hotpink;
                color: white;
                border: 1px solid whitesmoke;
            }
            #son2{
                position: relative;
                top: 20px;
                left: 40px;
            }
            #son3{
                position: absolute;
                top:20px;
                right: 40px;
            }
        </style>
    </head>
    <body>
        <div id="first">无定位的div元素</div>
        <div id="second">固定定位的div元素</div>
        <hr>
        <div id="father">
            <div id="son1">第一个无定位的div元素</div>
            <div id="son2">相对定位的div元素</div>
            <div id="son3">绝对定位定位的div元素</div>

        </div>
    </body>
</html>

 

知识点：

  1. 定位布局：固定定位、相对定位、绝对定位、静态定位 

s1939273302
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第四次网页设计课后作业
s1939273302的博客
12-18 363
bootstrap5框架学习
第一次网页设计课后作业
s1939273302的博客
11-04 96
完成HTML第三章至第八章内容。 完成一个界面。
第二次网页设计课后作业
s1939273302的博客
11-13 74
完成HTML所有内容。 完成CSS第十一章至第十四章。 继续完成界面。
网页设计--第2次课课后作业
hinxx的博客
11-15 103
文本或图片
网页设计——第一次课后作业
hinxx的博客
11-06 127
style标签（CSS)，script标签(javaScript)，link标签(CSS), base标签(无意义)2.http-equiv属性。--注释的内容-->head，body标签。3-3 body标签。3-4 HTML注释。
网页设计--第6次课后作业
wyhwust的博客
12-08 890
其中：gender=1 显示为女，gender=2显示为男。价格超过30元，显示“有点小贵”。价格少于等于30元，则显示“价格亲民”。试用Vue相关指令完成对以下json数据的显示。
网页设计--第7次课后作业
2301_80812728的博客
12-29 330
3、跟着视频对默认的vue项目做一些简单的修改。1、根据教程安装nodejJS。3.Pagination 分页。2、安装vue-cli。4.Dialog 对话框。一、配置环境的相关准备。1.Button按钮。
网页设计--第5次课后作业
wyhwust的博客
11-27 592
1、快速学习JavaScript的基本知识第1-10章。附源代码（先自己尽量自己做，然后再参考。2、使用所学的知识完成以下练习。使所有的复选框呈现被选中的状。标签的标签体内容后面加上。
网页设计--第4次课后作业
wyhwust的博客
10-18 518
2、预习JavaScript。1、完成的完整页面编写。
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
计算机操作系统（第三版)课后习题答案
05-08
计算机操作系统（第三版）课后习题答案 计算机操作系统是计算机科学中一个非常重要的领域，它涉及到计算机硬件、软件和用户之间的交互。以下是计算机操作系统（第三版）课后习题答案的摘要信息： 第1章 * 设计...
java程序设计【基于JDK6和NetBeans实现】宋波主编-课后作业答案-打印版.doc
09-30
【Java程序设计基础】 Java程序设计是开发基于Java平台的应用程序的过程，主要涉及JDK（Java Development Kit）的使用和编程环境的配置。在本案例中，提到了JDK6，这是Java的一个早期版本，提供了Java编译器、Java...
网页设计与制作.docx
12-22
二是通过课堂练习和课后作业，不断巩固和提升学生的专业技能和理论理解。 教学时数共计54学时，其中32学时用于理论授课，22学时用于实验操作。推荐教材为田博文编著的《网页设计与制作》，人民邮电出版社2004年出版...
flash课后作业关于一首小诗
05-31
Flash是一种曾经广泛用于创建交互式动画和网页内容的软件，尤其是在教学领域，教师和学生常常利用它来制作富有创意的课后作业。 在描述中，“自己做的flash小动画，希望多多指教。”暗示了这是一个个人作品，制作者...
css grid实现九宫格布局
fengchengwu2012的博客
06-22 312
常见的九宫格布局可以使用flex布局实现，但是flex布局有个致命的缺陷，比如3行3列的布局，当第不足3个元素的时候，元素依然是平局平铺的，这样就不满足九宫格的效果，这种情况，使用grid布局可以轻松搞定这个问题。
css_21_css3文本属性
最新发布
一个初学者的博客
06-28 239
注意：要使得text-overflow属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为nowrap 值。默认值：text-shadow:none 表示没有阴影。
flex属性中的flex-grow、flex-shrink、flex-basis
卿本无忧的博客
06-26 748
flex属性中的flex-grow、flex-shrink、flex-basis
CSS3 多列布局
wjs2024的博客
06-25 227
CSS3 多列布局是一种强大的布局技术，它允许开发者将内容分为多个列，类似于报纸或杂志的布局。这种布局方式不仅提高了页面设计的灵活性，还增强了用户阅读体验。本文将详细介绍 CSS3 多列布局的相关属性，并通过示例展示其应用。
html5网页设计课后作业
05-25
好的，以下是一些HTML5网页设计的课后作业建议： 1. 创建一个简单的网站页面。使用HTML5的语义标签，例如<header>、<nav>、<article>和<footer>等来组织你的内容。 2. 制作一个表单页面，包括文本框、单选框、复选框和下拉列表框等表单元素。 3. 制作一个图像库页面，包括多个图像缩略图和放大预览功能。 4. 创建一个响应式网站，使其能够适应不同大小的屏幕，例如手机、平板电脑和台式机。 5. 制作一个视频播放器页面，包括嵌入YouTube视频和自定义控件等功能。 6. 创建一个音频播放器页面，包括嵌入音频文件和自定义控件等功能。 以上是一些基本的HTML5网页设计课后作业建议，你可以根据自己的实际情况和学习进度进行选择和调整。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值