0
点赞
收藏
分享

微信扫一扫

前端三件套遗忘基础复习（一）

白衣蓝剑冰魄 2022-02-28 阅读 86
javascripthtmlcss

目录

1、文字格式标签

2、img替换文本、标题

3、a链接 target

4、目录跳转(锚点定位)

5、表格属性

6、伪元素选择器

7、背景图片位置调整

固定背景图片

背景复合写法

8、浮动

浮动综合练习

浮动弊端

​清除浮动（添加标签法）

清除浮动（overflow）

清除浮动（伪元素法，添加标签法升级版） 

1、文字格式标签

 我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>

2、img替换文本、标题

 <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
   <img src="img1.jpg" alt="我是pink老师"/>

<h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
   <img src="img.jpg" title="我是pink老师思密达"  alt="我是pink老师"/>

 

   <h4> border 给图像设定边框:</h4>
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达"  width="500" border="15"/>

 

 3、a链接 target

 <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>

4、目录跳转(锚点定位)

	<h2>目录</h2>

	1 早年经历<br />
	2 演艺经历<br />
	3 <a href="#live">个人生活</a><br />
	4 <a href="#zuopin">主要作品</a><br />
	5 社会活动<br />
	6 获奖记录<br />
	7 人物评价<br />






   <h3 id="live">个人生活</h3>
    <p>......</p>

5、表格属性

 <!-- 这些属性要写到表格标签table 里面去 cellpadding是空白，类似padding-->
    <table align="center" border="1" cellpadding="10" cellspacing="0" width="500" height="249">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th> 年龄 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>刘德华</td>
                <td>男</td>
                <td> 56 </td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>男</td>
                <td> 58 </td>
            </tr>
            <tr>
                <td>郭富城</td>
                <td>男</td>
                <td> 51 </td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>男</td>
                <td> 57 </td>
            </tr>
        </tbody>

    </table>

  

行列合并

    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

 

6、伪元素选择器

 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }

细致链接：一些常见的伪类选择器_什么都不会做的博客-CSDN博客_伪类选择器有哪些

css中什么是伪类选择器？伪类选择器的简要介绍-css教程-PHP中文网

7、背景图片位置调整

    <title>背景图片平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>

   <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>

//center 140px. 140px顶部留白140px
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center 140px;
        }
    </style>


//精准定位
   /* 20px 50px; x轴一定是 20  y轴一定是 50 */
   /* background-position: 20px 50px; */

固定背景图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
</body>

</html>

背景复合写法

   <title>背景属性复合写法</title>
    <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>

8、浮动

   <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

 浮动综合练习

固定了父盒子的高度和宽度

 <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>


<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

 浮动弊端

如果只给了宽度，高度不给，因为里面内容高度不定，会产生如下情况

 <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

 因为子盒子浮动了，脱离了标准流，父盒子又没给高度，所以父盒子高度直接为0，所以你只能看见那个border 的蓝边框

  清除浮动（添加标签法）

 <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
         <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->

    </div>
    <div class="footer"></div>

</body>

清除浮动（overflow）

给父亲盒子添加overflow

<style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

清除浮动（伪元素法，添加标签法升级版） 

<style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

 

举报

相关推荐

前端三件套案例

htmlHTMLCSS软件研发

前端框架（三件套）

数据仓库

前端三件套-css

人工智能机器人

GO框架三件套

ORM连接池参数绑定Go语言后端开发yyds干货盘点

前端三件套之JS(1) 基础语法

前端javascript开发语言

前端三件套之一Javascript体验卡

前端javahtml5

Kubernetes的折磨（一）：三件套

架构配置K8s安装个人学习工作生活

NVIDIA三件套环境配置

linux驱动CUDAcudnn深度学习人工智能

【Web 三件套】JavaScript WebAPI 介绍

javascript前端开发语言javaeeweb

前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局

前端bootstrapjavascript
0 条评论