HTMLday0614总结

浮不起来的气球

已于 2024-06-14 22:49:53 修改

阅读量353

点赞数 6

文章标签： javascript 前端开发语言 html

于 2024-06-14 22:48:58 首次发布

本文链接：https://blog.csdn.net/m0_71108047/article/details/139689891

版权

1.文字阴影

<!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>
        .con {
            font-size: 66px;
            text-shadow: 10px 10px 5px red;
        }
    </style>
</head>

<body>
    <div class="con">今天又是元气满满的一天</div>
</body>

</html>

{text-shadow :h-shadow v-shadow blur color;}h-shadow水平阴影 v-shadow垂直阴影 blur模糊半径 color阴影颜色

h 正向右 V 正向下

2.css复合选择器

1.并集选择器

<!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>
        .com1 {
            color: blue;
        }
        
        .com2 {
            color: aqua;
        }
        
        .com1,
        .com2 {
            font-size: 66px;
            font-weight: 700;
            font-family: 楷体;
        }
    </style>
</head>

<body>
    <div class="com1">微信</div>
    <span class="com2">支付宝</span>
</body>

</html>

2 后代选择器(重点)

<!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>
        ul li div span {
            color: khaki;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div><span>阿达</span></div>
        </li>
        <li><span>阿西</span></li>
    </ul>
</body>

</html>

3 子元素选择器（重点）

<!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>
        ul li>span {
            color: khaki;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div><span>阿达</span></div>
        </li>
        <li>
            <span>阿西</span>
        </li>
    </ul>
</body>

</html>

4 复合选择器

在不修改以上代码的前提下，完成以下任务：

主导航栏和侧导航栏里面文字都是18像素并且是微软雅黑。
链接登录的颜色为红色。
主导航栏里的列表中的文字颜色为深灰色。
收藏本站要求字体加粗。

<!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>
        .nav,
        .sidebar {
            font-size: 18px;
            font-family: 微软雅黑;
        }
        
        .sidebarRight a {
            color: red;
        }
        
        div ul li a {
            color: #999;
        }
        
        .nav>em {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <!-- 主导航栏 -->
    <div class="nav">
        <ul>
            <li>
                <a href="">公司首页</a>
            </li>
            <li>
                <a href="">公司简介</a>
            </li>
            <li>
                <a href="">公司产品</a>
            </li>
            <li>
                <a href="">联系我们</a>
            </li>
        </ul>
        <em> 收藏本站 </em>
        <div> 联系我们:
            <em> 1234567890</em>
        </div>
    </div>
    <!-- 侧导航栏 -->
    <div class="sidebar">
        <div class="sidebarLeft">左侧导航栏</div>
        <div class="sidebarRight"><a href="#">登录</a></div>
    </div>
</body>

</html>

3.标签的显示模式

p div span li ul ol dt dd a input img hr br em b strong i u ins h1-h6

div 块级元素独占一整行可以设置宽高

span 行内元素不独占一整行,不可以设置宽高,宽高由内容撑开

行内块元素不独占一行,可以设置宽高

块级元素 p div h1-h6 li ol hr

行内元素 span a strong b i em u ins s del

行内块元素 img input button

<!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>
        div {
            width: 200px;
            height: 200px;
        }
        
        img {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>

    <div>hello world</div>
    <div>hello world</div>

    <span>今天干什么</span>
    <span>今天干什么</span>
    <span>今天干什么</span>

    <img src="../day0612/img/1.jpg" alt="">
</body>

</html>

4.显示模式的转换

display

display :inline 行内元素

:block 块元素

:inline-block 行内块元素

注意:

标签的嵌套关系

块级元素内可以放任何元素

行内元素只能放文本或其他行内元素

p标签不能套p

a里可以放img 行内元素可以嵌套行内块元素

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
            /* 元素的转换 */
            display: inline-block;
        }
        
        span {
            display: block;
            width: 150px;
            height: 150px;
        }
        
        .q {
            background-color: aqua;
        }
        
        .w {
            background-color: #00f;
        }
    </style>
</head>

<body>

    <div>内容1</div>
    <div>内容1</div>

    <a href=""><img src="" alt=""></a>
    <span class="q">啊啊啊啊啊</span>
    <span>啊啊啊啊啊</span>
    <span class="w">啊啊啊啊啊</span>
</body>

</html>

5.背景模式

1.背景颜色

属性名 background-color

属性值合法的颜色的名，比如：red；

十六进制值，比如：#ff0000；

RGB 值，比如：rgb(255,0,0)

默认值 transparent

2.背景图片

background-image:url(地址)

3.背景图片平铺

repeat 默认。背景图像将在垂直方向和水平方向重复。

no-repeat 背景图像将仅显示一次。

repeat-x repeat-y 沿水平方向平铺, 沿垂直方向平铺

4.背景图片定位

background-position: left center right top center bottom;

<!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>
        div {
            border: 1px solid red;
            width: 2000px;
            height: 1000px;
            /* 背景颜色 */
            /* background-color: pink;
            background-color: transparent; */
            /* 背景图片 */
            background-image: url(../day0612/img/1.jpg);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-position: 20px 20px;
        }
    </style>
</head>

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

</html>

6.精灵图

background-image

background-repeat

background-position属性进行背景定位

<!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>
        div {
            width: 177px;
            height: 176px;
            background-image: url(../day0612/img/1.jpg);
            background-repeat: no-repeat;
            background-position: -510px -285px;
            display: inline-block;
        }
        
        .q {
            background-image: url(img/index.webp);
            width: 50px;
            height: 50px;
            background-repeat: no-repeat;
            background-position: 0px -89px;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <div class="q">

    </div>
</body>

</html>