网页设计第三次课后练习

信管2202陈安志

已于 2023-11-26 00:50:41 修改

阅读量1.6k

点赞数 46

文章标签： html 前端

于 2023-11-24 01:38:53 首次发布

本文链接：https://blog.csdn.net/2301_80812728/article/details/134587632

版权

11.19 第十八章图片样式

1、图片大小 width,height

2、图片边框 border:1px solid red;

3、图片对齐

水平对齐：text-align：left（默认）、center、right
垂直对齐:vertical-align:top（顶部）、middle（中部）、baseline（基线）、bottom（底部），vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式。
文字环绕 float：left（元素向左浮动）、right（向右）

11.20 第十九章背景样式

1.背景颜色 background-color:颜色值；color用于定义“文本颜色”，background-color用于定义“背景颜色”。

2.背景图片样式 background-image：url（图片路径）；

3.背景图片重复：background-repeat：

repeat，在水平方向和垂直方向上同时平铺（默认）
repeat-x:只在水平方向上平铺
repeat-y:只在垂直方向上平铺
no-repeat:不平铺

4.背景图片位置 background-position 像素值/关键字

像素值 background-position：水平距离垂直距离；（相对该元素的左上角）
关键字，此时水平和垂直方向的两个值用关键字代替

top left,top center,top right,left center,center center,right center,bottom left,bottom center,bottom right

5.背景图片固定 background-attachment：scroll（随元素一起滚动，默认）、fixed（固定）

6.课后习题

11.21 第二十章超链接样式

一、超链接伪类简介

a:link{……}：定义元素a未访问时的样式
a:visited{……}：定义元素a访问后的样式
a:hover{……}：定义鼠标经过元素a时的样式
a:active{……}：定义鼠标单击激活时的样式

其中，hover伪类可以定义任何一个元素在鼠标经过时的样式。

二、鼠标样式

1、浏览器鼠标样式 cursor：default（三角箭头）、pointer（手指）、text（文本输入）等

2、自定义鼠标样式 cursor：url（图片地址），属性值；其中鼠标图片后缀名一般是“.cur”

三、课后编程题

<!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">
    
    
    a{color: red;text-decoration: none;}
    a:hover{color:blue;text-decoration: underline;}

    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">我是一段文字</a>
</body>
</html>

11.22 第二十一章盒子模型

1、CSS盒子模型

盒子模型由四个属性组成：content（内容），padding（内边距），margin（外边距），border（边框）；还有宽度width和高height两大辅助属性（块元素可设置，行内元素不行，其宽高只能由内容区撑起）。所有的元素都可以看成一个盒子

2、display: inline-block;将元素转换为inline-block元素，让元素的宽度由内容区撑起来，以便观察

3、padding“补白”。padding-top、padding-bottom、padding-left和padding-right指定内容区与各方向边框之间的距离。padding的三种写法：

padding:20px;/*表示4个方向内边距都是20px*/
padding:20px 40px;/*表示top和bottom是20px，right和left是40px*/
padding:20px 40px 60px 80px;/*表示top20px，right40px，bottom60px，left80px(顺时针)*/

4、浏览器审查元素；①将鼠标移至元素上，右键单击“审查”，或快捷键“Ctrl+Shift+I”；②在弹出的控制台中可以找到该元素的盒子模型。

11.23 第22章浮动布局

使元素脱离正常文档流

给box1设置右浮动时

设置相同的浮动方向时：


<!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">
        /*定义父元素样式*/
        #father{
            width: 300px;
            background-color: #0C6A9D;
            border: 1px solid silver;
        }
        /*定义子元素样式*/
        #father div{
            padding: 10px;
            margin: 15px;
        }
        #son1{
            background-color: hotpink;
            float: right;
        }
        #son2{
            background-color: #FCD568;
            float: right;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
    </div>
</body>

浮动属性float；left、right属性值；清除浮动，clear：取值；left、right、both属性值

<!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">
        #father{
            border: 2px solid silver;
            width: 820px;
            height: 620px;
        }
        #son1{
            background-color: aqua;
            height: 100px;
            margin:10px;
        }
        #son2{
            background-color: hotpink;
            height: 380px;
            width: 595px;
            float: left;
            margin:0px 10px;
           
        }
        #son3{
            background-color: hotpink;
            height: 380px;
            width: 195px;
            float: left;
           margin-right: 10px;
           
        }
        #son4{
            background-color: bisque;
            height: 100px;
           width: 800px;
           float: left;
           margin: 10px;
        }
       
    </style>
</head>
<body>
    <div id="father">
    <div id="son1"></div>
    <div id="son2"></div>
    <div id="son3"></div>
    <div id="son4"></div>
    </div>
</body>
</html>

11.24 第二十三章定位布局

一、fixed固定定位（相对浏览器）

position: fixed;

top: 像素值;

bottom: 像素值;

left: 像素值;

right: 像素值;

2、relative相对定位（相对原始位置）

position: relative;

top: 像素值;

bottom: 像素值;

left: 像素值;

right: 像素值;

<!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">
        #father{
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: lightblue;
        }
        #father div{
            width: 100px;
            height: 60px;
            margin: 10px;
            background-color: hotpink;
            color: white;
            border: 1px solid white;
        }
        #son2{
            position: relative;
            top: 20px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>
</html>