web前端第三天作业

最新推荐文章于 2024-10-09 20:10:15 发布
最新推荐文章于 2024-10-09 20:10:15 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： Web前端开发技术 文章标签： 前端 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50589028/article/details/127849777
版权

文章目录

笔记

3.4 多媒体标签

img标签
        ⽬前在⽹⻚中使⽤的图⽚主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使⽤居多。GIF ⽀持动画和背景透明，同时图⽚通常⽐较⼩，但仅⽀持 256 ⾊以内的图像，因此⾊彩不够丰富。JPEG ⽀持 1670 万种颜⾊，但不⽀持动画和背景透明。当想要背景透明的时候，⼀般会使⽤PNG格式的图⽚，所以我们可以根据两者的优缺点来选择图像的格式。

 <!DOCTYPE html>
 <html >
 <head>
 <meta charset="UTF-8">
 <title>在⽹⻚中插⼊图⽚</title>
 </head>
 <body><!--
 img标签⽤来引⼊图⽚到⻚⾯中 src是⼀个必须的属性，该属性表示图⽚的地址 如下⾯的就是表示在当前⽂件夹下
有个images⽂件夹，⾥⾯有个图⽚， 名称叫做rose.jpg，这种叫做相对路径寻找法
 -->
 <img src="images/rose.jpg"> <!-- 当然也可以这样写，和上⾯⼀个意思 -->
 <img src="./images/rose.jpg"> <!--
 这样写表示绝对路径查找，⼀般很少这样写，因为这个路径只是这台电脑的路径， 换⼀台电脑就没有这张图⽚了
 -->
 <img src="c://images/rose.jpg"> <!-- 如果路径是⽹络路径也可以滴哦~~ -->
 <img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png"
alt="⽆法正常显示" title="李⽩">
 </body>
 </html>

alt：当图⽚⽆法正常显示时，显示的⽂本内容
title：当⿏标悬停在图⽚上会弹出的⽂字提示，如果alt本身没有赋值的话，那么alt=title

⾳频标签和视频标签（audio，video）语法结构

<audio src="资源路径" autoplay="autoplay" controls = "controls">
<video src="资源路径" autoplay="autoplay" muted="muted" controls = "controls">

audio和video在主流浏览器上不⽀持⾃动播放，video想要进⾏⾃动播放的话需要添加静⾳muted。
autoplay：⾃动播放。
controls：显示操作界⾯。
布尔型属性：只要你将属性写出来那么她就默认是true并且⽆法修改，除⾮移除属性。

3.5 表格标签

表格通过table标签创建。它包含的⼦元素有 thead、 tbody 、tfoot 、tr、 td。
thead 、tbody、 tfoot：
        这三个标签可以进⾏分批显示表格 不⾄于完全加载才能显示。
        ⽆论这三个标签的书写顺序如何，都会按照 头 躯⼲ 尾的顺序进⾏输出

table⽀持的属性有：
width/height：⽤于空难告知表格的宽⾼，指数具体的像素输⼊，也⽀持百分⽐输⼊。
align：控制表格在⻚⾯中的位置 可以是 左对⻬ 右对⻬ 剧中 left right center。
表格的合并
rowspan：所填数字为要合并的单元格个数，并且是由上⾄下进⾏合并。
colspan：所填数字为要合并的单元格个数，合并顺序从左⾄右。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <!-- row表示⾏ column列-->
 <body>
 <div>
 <table border="1" cellspacing=0 cellpadding=10 align="left">
 <tr>
 <td>学⽣名字</td>
 <td>学⽣学号</td>
 <td>学⽣年龄</td>
 <td>学⽣身⾼</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>1</td>
 <td rowspan="3">20</td>
 <td>180</td>
 </tr>
 <tr>
 <td>李四</td>
 <td>2</td>
 <td>180</td>
 </tr>
 <tr>
 <td>王五</td>
 <td>3</td>
 <td>180</td>
 </tr>
 <tr>
 <td colspan="4">合计:3⼈</td>
 </tr>
 </table>
 </div>
 </body>
</html>

3.6 超链接标签

超连接标签是H5的重要组成部分之⼀，它通过超链接实现跳转其他⽹⻚的⽬的，超连接标签是 a。

  • ⽂字超链接
    语法结构
<a href = "要跳转的⻚⾯url" target = "跳转⽅式">

target：如果不写，target默认是self，将会通过⾃身选项卡进⾏加载⻚⾯，target如果是_blank那么它将新建⼀个选项卡进⾏⻚⾯跳转。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <!-- row表示⾏ column列-->
 <body>
 <a href="https://www.baidu.com">点击这⾥进⾏跳转</a>
 </body>
</html>
  • 锚链接

制作⽹⻚时，如果⽹⻚巨⻓，可在顶部位置创建⼀个a标签让它绑定底部标签的id（#id），然后点击a标签即可达到跳转的⽬的。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <!-- row表示⾏ column列-->
 <body>
 <a href="#bottom">直达底部</a>
 <div id="top" style="height: 2000px; border: 1px solid red;"></div>
 <div style="height: 2000px; border: 1px dotted green;"></div>
 <div id="bottom" style="height: 2000px; border: 1px solid blue;"></div>
 <a href="#top">回到顶部</a>
 </body>
</html>
  • 图⽚超链接

就是在a标签中填⼊img标签，这样既可达到点击图⽚跳转url的⽬的。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <!-- row表示⾏ column列-->
 <body>
 <a href="http://www.baidu.com" target="_blank">
 <img src="./pic/李⽩.jpg" alt="">
 </a>
 </body>
</html>
  • 热区超连接

将⼀个图⽚分隔为多个区域，这些区域可以是矩形、原型、多边形，通过点击不同的区域进⾏不同的跳转。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <img src="./pic/李⽩.jpg" usemap="#map">
 <map id="map">
 <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">
 <area shape="circle" coords="100,50,50" href="http://www.baidu.com" alt="">
 <area shape="poly" coords="200,100,300,0,400,100"
href="http://www.baidu.com" alt="">
 </map>
 </body>
</html>

3.7 表单标签

列表标签是⽤来给⽤进⾏数据提交的标签，是⼀种交互标签，这⾥我们学习三个表单标签。
form：通过form标签可以创建⼀个表单，它拥有三个较重要的属性：
            action它要需要填⼊⼀个直线哪个服务器的url，这个url指向转为处理表单的接⼝函数。
            method:也就是http的请求⽅式，这⾥咱们主要使⽤get和post。
input：最常⽤的输⼊标签，它有多重输⼊类型，详⻅代码。
**select：**下拉框，multiple存在时，它是⼀个列表。
**textarea：**多⾏⽂输⼊框

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <form action="#" method="get" enctype="multipart/form-data">
 ⽤户昵称:<input type="text" name="username" value="123"><br>
⼀些⽐较重要的属性:
3.8 列表标签
现在的⼀个商业级别的⻚⾯，数据⼀般都是分组呈现的，以列表组的形式出现（显得⻚⾯整⻬），所以在⻚⾯上，
列表标签是出现频率较⾼的标签。
列表标签主要⽤三种--有序、⽆ 序、数据列表。
3.6.1 有序列表
有序列表使⽤ol标签，数据是呈现为有顺序的
 ⽤户密码:<input type="password" name="password" id="" value="" /><br>
 ⽤户性别:<input type="radio" name="sex" id="" value="1" />
 <input type="radio" name="sex" id="" value="2" />⼥
 <input type="radio" name="sex" id="" value="3" />跨性别<br>
 ⽤户爱好:<input type="checkbox" name="fav" id="" value="" />lol
 <input type="checkbox" name="fav" id="" value="" />王者荣耀
 <input type="checkbox" name="fav" id="" value="" />漂亮的⼩哥哥/⼩姐姐
 <input type="checkbox" name="fav" id="" value="" />唱跳rap <br>
 <input type="email"><br>
 <input type="file"><br>
 <input type="submit">
 <!-- <button>注册</button> -->
 <br><br><br>
 <input type="date"><br>
 <input type="datetime-local"><br>
 <input type="url">
 <input type="range" min="20" max="40" value="30"><br>
 </form>
 </body>
</html>

3.8 列表标签

现在的⼀个商业级别的⻚⾯，数据⼀般都是分组呈现的，以列表组的形式出现（显得⻚⾯整⻬），所以在⻚⾯上，
列表标签是出现频率较⾼的标签。
列表标签主要⽤三种–有序、⽆ 序、数据列表。

3.6.1 有序列表

有序列表使⽤ol标签，数据是呈现为有顺序的

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <title>有序列表</title>
 </head>
 <body>
 <ol type="1" start="1" reversed>
 <li>软件开发概论</li>
 <li>数据库技术基础</li>
 <li>控制台开发</li>
 <li>WEB ⽹⻚编程</li>
 <li>图形界⾯开发</li>
 </ol>
 </body>
</html>

type：序号类型，有三种可选（1,a,i）
start：第⼀个序号的起始数字
reversed：序号逆序

3.6.2 ⽆序列表

⽆序列表使⽤ul标签。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <title>有序列表</title>
 </head>
 <body>
 //circle 空⼼圆 disc 实⼼圆 square ⽅块
 <ul type="circle">
 <li>软件开发概论</li>
 <li>数据库技术基础</li>
 <li>控制台开发</li>
 <li>WEB ⽹⻚编程</li>
 <li>图形界⾯开发</li>
 </ul>
 </body>
</html>

typed：设置序号的种类, ⽆序列表序号种类有三种（circle 空⼼圆 disc 实⼼圆 square⽅块）
注意：在真正的编程中，我们很少使⽤ul提供的type类型，我们会使⽤css去掉默认样式，由我们⾃⼰添加，这样⻚⾯好看很多。

3.6.3 数据列表 dl

数据列表主要⽤来描述存在标题的列表组

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <title>有序列表</title>
 </head>
 <body>
dl标签 ：数据列表标签
dt标签：列表标题
dd标签：列表内容
HTML5 允许在⼀个dl标签中，存在多个dt组。
第四章 层叠样式表CSS
Cascading style sheet 层叠样式表。
语法结构
4.1 CSS的⼏种写法
⾏内样式（标签样式）:写在标签内部。
内嵌样式(⻚⾯样式)：他是写在style标签中的。
外部链接样式：他是通过link标签将已经写好的CSS⽂档引⼊到当前的⻚⾯中。
import导⼊式：他是通过CSS提供的import功能进⾏导⼊的。
import和link的区别：
1.归属性区别：import属于CSS提供，link是html⾃带的标签。
 <dl>
 <dt>地⽅新闻</dt>
 <dd>地⽅新闻1</dd>
 <dd>地⽅新闻2</dd>
 <dd>地⽅新闻3</dd>
 
 <dt>国内新闻</dt>
 <dd>国内新闻2</dd>
 <dd>国内新闻3</dd>
 <dd>国内新闻4</dd>
 
 <dt>国际新闻</dt>
 <dd>国际新闻1</dd>
 <dd>国际新闻2</dd>
 <dd>国际新闻3</dd>
 </dl>
 </body>
</html>

dl标签 ：数据列表标签
dt标签：列表标题
dd标签：列表内容
HTML5 允许在⼀个dl标签中，存在多个dt组。

第四章 层叠样式表CSS

Cascading style sheet 层叠样式表。
语法结构

element/class/id{
 样式属性:值
}

4.1 CSS的⼏种写法

  • ⾏内样式（标签样式）:写在标签内部。 内嵌样式(⻚⾯样式)：他是写在style标签中的。

  • 外部链接样式：他是通过link标签将已经写好的CSS⽂档引⼊到当前的⻚⾯中。

  • import导⼊式：他是通过CSS提供的import功能进⾏导⼊的。

import和link的区别：
1.归属性区别：import属于CSS提供，link是html⾃带的标签。
2.加载顺序的区别：link会在⻚⾯加载时同时进⾏加载，⽽import会在⻚⾯加载完毕后进⾏加载。
3.兼容性的区别：link是html⾃带的所以不存在兼容性问题，⽽import是CSS2.1版本才提供的，对应IE 5.0以上的浏览器才可以使⽤。
4.使⽤DOM控制的区别：如果使⽤的是import，js代码是没有办法获取到CSS的相关数据，⽽link不存在此问题。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* ⻚⾯样式 */
 div{
 border: 1px solid red;
 }
 /* import导⼊式 */
 @import url(index.css);
 </style>
 <!-- 外链样式 -->
 <link rel="stylesheet" href="./index.css">
 </head>
 <body>
 <!-- 标签样式 -->
 <div style="border: 1px solid red;">123123</div>
 </body>
</html>

4.2 CSS的选择器

  • 基本选择器:
           标签选择器
           语法结构：
标签{
 css内容
}

       通过标签名书写css样式，作⽤所有的标签上。
              id选择器
              语法结构

#id{
 样式内容
}

         通过#id的形式创建css样式，作⽤在被绑定的id的标签。
              class选择器
              语法结构

.类名{
 样式内容
}

        通过**.**类名的形式创建css样式，作⽤在通过属性class引⽤它的标签内
              通配符选择器（⼀般在清除浏览器样式的场景下使⽤）

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* 通配符选择器 */
 /* *{
 padding: 0;
 margin: 0;
 } */
 dl{
 border: 1px solid red;
 }
 /* id选择器 */
 #dl-first{
 border: 1px dashed red;
 }
 /* 类选择器 */
 .dl-second{
 border: 1px dashed blue;
 }
 </style>
 </head>
 <body>
 <!-- id全局唯⼀，它本身就是身份标识-->
 <dl id="dl-first" class="dl-second">
 <dt>123123</dt>
 <dd>111111</dd>
 <dd>111111</dd>
 <dd>111111</dd>
 </dl>
 <dl class="dl-second">
 <dt>123123</dt>
 <dd>111111</dd>
 <dd>111111</dd>
 <dd>111111</dd>
 </dl>
 <dl class=" dl-second">
 <dt>123123</dt>
 <dd>111111</dd>
 <dd>111111</dd>
 <dd>111111</dd>
 </dl>
 </body>
</html>
  • 包含选择器

              ⼦代选择器：他只修饰某标签的下⼀级标签,语法结构:

(标签/.类名/#id ....) > 标签 （当然你也可以是使⽤ 标签/.类名/#id .... 只是没有必要）{
 样式内容
}

              后代选择器：他修饰某标签所有⼦标签

(标签/.类名/#id ....) (这⾥是个空格) 标签 （当然你也可以是使⽤ 标签/.类名/#id .... 只是没
有必要）{
 样式内容
}

              分组选择器：通过“，”可以同时创建多种选择器。语法结构

标签,.类名，#id , ...{
 样式内容
}

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #ol-id > .box{
 border: 1px solid red;
 }
 ol , #ol-id, .box{
 border: 1px solid blue;
 }
 </style>
 </head>
 <body>
 <ol class="ol-class" id="ol-id">
 <li>⼦项1</li>
 <li>⼦项2</li>
 <li>⼦项3</li>
 <li>⼦项4</li>
 <li>⼦项5</li>
 <li>⼦项6</li>
 <li>⼦项7</li>
 <li>⼦项8</li>
 <li>⼦项9</li>
 <ul class="box">
 <li>⼦项1</li>
 <li>⼦项2</li>
 <li>⼦项3</li>
 <li>⼦项4</li>
 <li>⼦项5</li>
 <li>⼦项6</li>
 <li>⼦项7</li>
 <li>⼦项8</li>
 <li>⼦项9</li>
 </ul>
 </ol>
 </body>
</html>
  • 属性选择器

属性选择可以根据元素的属性或者属性值来进⾏选取要修饰的元素。 语法结构： [属性=值] [属性*=值]如果 属性的值
包含“值“的内容那么选择该标签 [属性^=值]如果 属性的值 是以"值"开头的那么选择该标签 [属性$=值]如果 属性的值
是以"值"结尾的那么选择该标签 [属性~=值]如果 属性的值 包含"值"并且是个完整的单词 那么选择⽽该标签 [属性|=值]如果 属性的值
包含"值"并且是个完整的单词且唯⼀ 那么选择⽽该标签

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* 包含单词 */
 [type ~= "yiuyiu"]{
 border: 1px solid red;
 }
 /* 包含且唯⼀的单词 */
 [type |= "yiuyiu"]{
 border: 1px solid red;
 }
 /* 包含某值 */
 [type *= "t"]{
 border: 1px solid red;
 }
 /* 以什么开头 */
 [type ^= "t"]{
 border: 1px solid red;
 }
 /* 以什么结尾 */
 [type $= "t"]{
 border: 1px solid red;
 }
 </style>
 </head>
 <body>
 <input type="yiuyiu font">
 </body>
</html>

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 /* 包含单词 */
 ol > li.box[type ~= "yiuyiu"]{
 border: 1px solid red;
 }
 /* 包含且唯⼀的单词 */
 /* [type |= "yiuyiu"]{
 border: 1px solid red;
 } */
 /* 包含某值 */
 /* [type *= "t"]{
 border: 1px solid red;
 } */
 /* 以什么开头 */
 /* [type ^= "t"]{
 border: 1px solid red;
 } */
 /* 以什么结尾 */
 /* [type $= "t"]{
 border: 1px solid red;
 } */
 </style>
 </head>
 <body>
 <ol type="yiuyiu">
 <li class="box" type="yiuyiu">1231231</li>
 <li>1231232</li>
 <li>1231233</li>
 <li>1231234</li>
 <li>1231235</li>
 <li>1231236</li>
 <li>1231237</li>
 <li>1231238</li>
 <li>1231239</li>
 </ol>
 <input type="yiuyiu font">
 </body>
</html>
  • 伪类选择器

他可以修饰同⼀个标签不同那个状态的样式

：link 常规的链接样式
：visited 点击过后的样式
：hover ⿏标悬停其上的样式
：active 点击中的样式

注意！！！当你在创建伪类选择器的时候 ⼀定要按照以上顺序进⾏创建，否则选择器可能失效，love hate。

  • 伪元素选择器

通过伪元素选择器可以设置元素的指定样式。
主要是⽤来修改元素内的⽂本样式⽐如，⾸字⺟或者⾸⾏样式，或是在元素内容前后插⼊其他样式
这个选择器可以构建⼀个伪元素（JS等技术⽆法访问，存在在⻚⾯中，只能使⽤css渲染的）这样的元素使得

css的功能进⼀步的加强
::before 当前内容前⾯的部分
::after 当前内容前⾯的部分
::first-letter 当前内容⾸字⺟
::first-line 当前内容的⾸⾏
::selection 当前内容的选中部分

以下是⼀些常⻅的伪类和伪元素选择器。
选择器 示例 示例说明

:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁⽤的表单元素
:empty p:empty 选择所有没有⼦元素的p元素
:enabled input:enabled 选择所有启⽤的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其⽗元素的第⼀个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有⽆效的元素
:last-child p:last-child 选择所有p元素的最后⼀个⼦元素
:last-of-type p:last-of-type 选择每个p元素是其⺟元素的最后⼀个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2|2n- 1|odd|even) 选择所有 p 元素的⽗元素的第⼆个⼦元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第⼆个⼦元素
:nth-last-of- type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第⼆个为p的⼦元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第⼆个为p的⼦元素
:only-of-type p:only-of-type 选择所有仅有⼀个⼦元素为p的元素
:only-child p:only-child 选择所有仅有⼀个⼦元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
选择器 示例 示例说明
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择⽂档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把⿏标放在链接上的状态
:focus input:focus 选择元素输⼊后具有焦点
::first-letter p::first-letter 选择每个p 元素的第⼀个字⺟
::first-line p::first-line 选择每个p元素的第⼀⾏
::first-child p::first-child 选择器匹配属于任意元素的第⼀个⼦元素的元素
::before p::before 在每个p元素之前插⼊内容
::after p::after 在每个p元素之后插⼊内容
::selection p::selection 被⿏标选中后的样式
:lang( language ) p:lang(it) 为p元素的lang属性选择⼀个开始值

4.3 CSS的常⽤样式

  • 边框以及弧度样式

border-width：边框的线条宽度。
border-style：边框的样式，例如 solid实现 dotted 点线 dashed 虚线…
border-color：边框的颜⾊
border-radius ：可以⽤来设置边框的圆⻆ 或者将边框从矩形改为圆形 或者椭圆形。
Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的 右下⻆ 右上⻆ 左上⻆ 这⾥不再赘述。

  • 字体样式

font-family：设置字体的“字体”样式 例如 微软雅⿊ monospace。
font-size：设置字体的⼤⼩。
font-weight：设置字体粗细 常⽤的是bold
font-style：设置斜体。

  • ⽂本样式

text-align：设置⽂本对⻬⽅式
text-decoration：修饰⽂本主要使⽤上下中划线。
text-transform：⼤⼩写转换
text-overflow：设置超出⽂本部分已省略号的形式电视配合overflow：hidden使⽤。
overflow:auto⾃动可以显示滑动条。hidden会隐藏超出的内容。
overflow-x： 显示横向滑动条。同理overflow-y纵向滑动条。

  • 阴影效果

text-shadow：给⽂本添加阴影。
box-shadow：给标签添加阴影。

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 border: 1px solid red;
 font-family: monospace;
 font-size: 20px;
 width: 150px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 border-radius: 20px;
 color: red;
 transition: 2s;
 }
 div:hover{
 color: white;
 background-color: red;
 box-shadow: 2px 2px 10px red,
 -2px 2px 10px red,
 2px -2px 10px red,
 -2px -2px 10px red;
 }
 </style>
 </head>
 <body>
 <!-- 通过name插件那个键键值对中的键名 -->
 
 <div>
 阴影效果<br>
 123123
 </div>
 </body>
</html>
  • display 属性

display：none 隐藏标签 标签将失去原本来的占位已经对应属性样式，visibility：hidden只是隐形了标签
display：inline-block 将⾏内标签设置为⾏内块标签 使其⽀持宽⾼设置。
display：block将⾏内标签设置为块标签。
display：inline将块标签设置为⾏内标签。

  • 背景样式

Background:color/url（详细可以参考mdn，通按键f1访问）
background-url：填写图⽚链接
background-color：填写图⽚颜⾊
background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复制（no-repeat）。
background-position：可以设置图⽚的位置，多⽤于截取精灵图的图⽚
精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。

一、题目要求：利用第三天所学制作按钮或者一个网页

二、代码1（多媒体）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第三天作业</title>
	<style type="text/css">
		p{font-size: 16px;font-family: 楷体;color: blue;}
		.one{background: #74F1CE;}
		.two{background: #00FF00;}
	</style>
</head>
<body>
<h1 align="center"><a href="https://www.baidu.com/">明月几时有</a></h1>
<hr color="blue"  size="5px"></hr>
<p align="center" ><marquee direction="up" behavior="scroll" >
        <center>不知天上宫阙，今夕是何年。</br></center>
        <center> 我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。</br> </center>
         <center>转朱阁，抵绮户，照无眠。</br> </center>
         <center>不应有恨，何事偏向别时圆。</br></center>    
         <center>人有悲欢离合，月有阴晴圆缺，此事古难全。 </br> </center>
         <center>但愿人长久，千里共婵娟。</br> </center>
 </p></marquee>
<hr color="red"  size="5px"></hr>
<div class="two"><center><embed src="embed/明月几时有.mp4" width="300px" height="300" autostart="true" loop="false" hspace="10"></embed><embed src="embed/蔡琴明月几时有.mp3" width="300px" height="300"  autostart="true" loop="false" hspace="10"></embed><embed src="htmlexample.mpeg" width="300px" height="300"  autostart="true" loop="false" hspace="10"></embed></center></div>
<div class="one"><marquee direction="left" onMouseOver="this.stop()"  onMouseOut="this.start()">欢迎来到我的多媒体世界！！</marquee></div>
</body>
</html>

代码2

<!DOCTYPE html>
<html lang="en">
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="2.css">
	<style type="text/css">
		img-wrap
		{
width: 200px
		}
	</style>
	<title>Gallery</title>
</head>
<h1 id="h1">Gallery</h1>
<body id="body">
	<div ="img-wrap"><p >
<ul class="ul" ><center>
<li>
	<a href="#"><img src="images/1.jpg" width="200"><img src="images/1.jpg"  class="dt">
</li></a>
<li>
	<a href="#"><img src="images/2.jpg" width="200"><img src="images/2.jpg" class="dt">
	
</li></a>
<li>
	<a href="#"><img src="images/3.jpg" width="200"><img src="images/3.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/4.jpg" width="200"><img src="images/4.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/5.jpg" width="200"><img src="images/5.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/6.jpg" width="200"><img src="images/6.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/7.jpg" width="200"><img src="images/7.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/8.jpg" width="200"><img src="images/8.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/9.jpg" width="200"><img src="images/9.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/10.jpg" width="200"><img src="images/10.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/11.jpg" width="200"><img src="images/11.jpg" class="dt">
</li></a>
<li>
	<a href="#"><img src="images/12.jpg" width="200"><img src="images/12.jpg" class="dt">
</li></a>
</ul>
<iframe src=" " frameborder="0" name="framename" width="1400x" height="1300px"> </iframe>
</p></div>
</body>
</html>

三、截图

在这里插入图片描述

在这里插入图片描述

橘子爱吃橘子
关注
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
web第二次作业.zip 表单设计，web前端
11-01
"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是...
web前端第3天作业
zztmdzz的博客
07-25 31
<style>a {.a1 {.a2 {.a3 {.a4 {.box3 {.box4 {.box2 {.box1 {</style>五彩导航<div class="box1"></div>
web前端html期末大作业实例 (1500套)
热门推荐
HTML网页设计
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web前端期末大作业（附有源码）
m0_74087268的博客
12-28 1万+
这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS和JavaScript。选用VSCode作为开发环境和工具来说有诸多优势之处，也给设计前端时带来了诸多益处。首先，是VSCode智能代码提示和补全。VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。其次，VSCode拥有丰富的扩展生态系统。
Web前端第一次作业
Fantasy543210的博客
07-08 934
这个家伙什么也没留下
web前端第三四天作业
tzsh66的博客
07-10 90
在这里插入图片描述](https://img-blog.csdnimg.cn/13606e382d624a64867d6e6247f637e2.png)
web前端html5网页作业,Web前端开发第一次作业
weixin_39957027的博客
06-21 804
(1)分别说出什么是HTML,XHTML,HTML5HTML为一种超文本标记语言,用这种语言浏览器几乎都能识别.独立于各种操作系统平台.XHTML为一种可扩展超文本标记语言,表现方式于超文本标记语言类似,不过语法比较严格.HTML5是用于取代HTMLH和XHTML的一个标准版本.(2)写出HTML的语法语法不区分字母大小写。(3)HTML中的注释和CSS中的注释HTML的注释:CSS注释:(4)C...
Web前端第三次作业
shayell的博客
07-22 166
【代码】Web前端第三次作业。
web前端第三次作业
xiaolin_ss的博客
07-18 129
【代码】web前端第三次作业。
Web前端大作业—个人网页(html+css+javascript)
weixin_61370021的博客
06-28 5万+
Web前端大作业—个人网页(html+css+javascript) 页面美观，有轮播相册，个人收藏，个人日志，天气查询，微电影页面多个页面。
web前端开发基础作业考核试题大全.pdf
07-14
Web 前端开发基础知识点总结 本资源摘要信息将对《web 前端开发基础》作业考核试题题库大全进行...本资源摘要信息涵盖了《web 前端开发基础》作业考核试题题库大全中的大部分知识点，为读者提供了一个系统的学习导航。
web前端期末大作业，附带源码以及大作业说明书
07-23
6. vendor/：第三方库或插件的目录。 7. README.md：大作业的说明书，解释项目目标、技术栈和使用方法。 8. build/：如果使用了构建工具，这里会包含编译后的文件。 9. .gitignore：用于忽略版本控制不必要的文件。 ...
Web前端—第4课实操作业.rar
11-12
"Web前端—第4课实操作业.rar" 这个标题表明了这是一个与Web前端开发相关的学习资料，具体来说是第四课的实践作业。在Web前端领域，这可能涉及到HTML、CSS、JavaScript等基础技术，或者更高级的框架如React、Vue、...
Web前端期末作业项目.rar
12-20
在这个"Web前端期末作业项目"中，学弟可能使用了HTML5的新特性来构建网页内容，用CSS3来设计炫酷的视觉效果，并借助JavaScript实现动态交互。尽管描述中提到页面还有一些空白地方待填充，这表明该项目可能尚未完全...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1166
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1199
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 777
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-09 1902
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
Web前端大作业解决方案：掌***有限公司案例分析
资源摘要信息:"Web前端大作业html+css静态页面-掌***有限公司" 一、HTML基本知识 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，通过使用HTML，我们可以创建网页并展示在浏览器上。HTML标签由尖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值