web基础2

最新推荐文章于 2022-10-16 22:39:07 发布
最新推荐文章于 2022-10-16 22:39:07 发布
阅读量73 收藏
点赞数
分类专栏： web基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/return_min/article/details/103832751
版权

02-display属性–元素互相转换
代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*<!--通常会去掉标签自带的内外边距， *表示所有标签-->*/
        *{margin: 0;padding: 0}

        .box01{
            width: 100px;
            height: 100px;
            border: 1px solid red;

            /*1. 把div转为行内块*/
            display: inline-block;

            /*转为行内元素*/
            /*display: inline;*/

            font-size: 16px;
        }

        /*2. 把span转为行内块*/
        span{

            /*转为行内块*/
            display: inline-block;

            /*转为块元素*/
            /*display: block;*/

            /*隐藏*/
            /*display: none;*/


            width: 100px;
            height: 100px;
            border: 1px solid red;

            font-size: 16px;
        }

        .box{
            /*font-size: 0;*/
            letter-spacing: 0;
        }





    </style>

</head>
<body>

<div class="box">


<!--解决行内块，外边距去不掉问题-->
<!--由换行符引起的，把换行符变成了空格-->
<!--解决方式一：不换行-->
<!--解决方式一：把父元素字体大小设为0，子元素重新设置字体大小-->
<div class="box01">1111</div>
<span>2222</span>

</div>



</body>
</html>

运行结果
在这里插入图片描述
03-标签转换–布局练习


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐网站</title>

    <style>
        *{
            margin: 0;padding: 0;
            /*去掉li标签样式*/
            list-style: none;
        }

        ul{
            width: 400px;
            border: 1px solid red;

            /*去掉行内块之间的空格*/
            font-size: 0;

            /*利用外边距margin，实现水平居中，并且窗口缩放，任然居中*/
            margin: 0px auto;

        }

        ul>li{
            width: 100px;
            height: 50px;
            border: 1px solid red;

            /*转为行内块*/
            display: inline-block;

            font-size: 16px;

            /*保证盒子大小，不受边框和padding影响*/
            box-sizing: border-box;

            /*设置行高等于父元素高度，实现垂直居中*/
            line-height: 50px;

            /*设置文本，水平居中*/
            text-align: center;
        }

        /*伪类选择器，鼠标进入时，改变样式*/
        ul>li:hover{
            background-color: #5e5e5e;
        }


        .box{
            width: 600px;
            height: 100px;
            background-color: #5bc0de;

            /*默认隐藏*/
            display: none;
        }

        /*鼠标进入后，显示隐藏的块*/
        ul>li:hover .box{
            display: block;
        }



    </style>

</head>
<body>


<ul>

    <li>欧美
        <div class="box"></div>
    </li>

    <li>日韩
        <div class="box"></div>
    </li>

    <li>港台
        <div class="box"></div>
    </li>

    <li>大陆
        <div class="box"></div>
    </li>

</ul>


</body>
</html>

在这里插入图片描述

04-overflow处理溢出


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>

        .box{
            width: 150px;
            height: 150px;
            border: 1px solid red;

            /*图片溢出，清除内部元素对外部元素的影响*/

            /*设置hidden隐藏， 把溢出部分剪切*/
            overflow: hidden;

            /*设置为auto自动，判断是否溢出，有溢出则添加滚动条*/
            /*overflow: auto;*/

            /*设置scroll滚动，添加滚动*/
            /*overflow: scroll;*/

            /*默认值visible，可见*/
            /*overflow: visible;*/

        }

    </style>




</head>
<body>


<div class="box">
    <img src="./images/timg.jpg" alt="">
    <!--<img src="./images/111.jpg" alt="">-->
</div>




</body>
</html>

在这里插入图片描述

05-浮动float


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box01{
            width: 400px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;
        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: #a94442;

            /*添加浮动*/
            /*1.可以设置左浮动，或者右浮动*/
            /*2.浮动会脱离文档流，会将后面的元素覆盖*/
            /*3.不会覆盖文字*/
            /*4.碰到父元素或者前面右浮动元素，则停止浮动*/
            /*5.浮动元素排在一行，总宽度超过父元素，则自动换一行*/
            /*6.如果前面有未浮动的元素 会另起一行进行浮动*/
            float: left;
        }

        .box03{
            width: 110px;
            height: 110px;
            background-color: #5bc0de;

            float: left;
        }

        .box04{
            width: 110px;
            height: 110px;
            background-color: red;

            float: left;
        }



    </style>

</head>
<body>


<div class="box01">
    <div class="box02">1111</div>
    <div class="box03">2222aeehtsrjytuyg</div>

    <div class="box04">3333</div>
</div>


</body>
</html>

在这里插入图片描述

06-浮动后父元素高度撑不开问题–4种解决方案


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box01{
            width: 300px;

            /*1. 解决撑不开问题方案一：父元素添加高度*/
            /*缺点：高度往往不能写死*/
            /*height: 300px;*/

            border: 5px solid red;

            /*2.解决撑不开问题方案二：父元素添加 overflow: hidden;*/
            /*设置隐藏，把溢出部分剪切*/
            /*父元素没有高度，没有剪切的标准，以子元素高度去剪切*/
            /*找到子元素的高度，父元素又能撑开了*/
            /*overflow: hidden;*/

        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: #5bc0de;

            /*浮动后，如果父元素没有设置高度，则导致父元素撑不开*/
            float: left;
        }

        /*!*3.解决撑不开问题方案三：添加空白标签，清除两边浮动影响*!*/
        /*!*缺点：添加了一个多余的空标签*!*/
        /*.box03{*/
            /*!*清除2边浮动影响*!*/
            /*!*left right both*!*/
            /*clear: both;*/
        /*}*/


        /*4. 解决撑不开问题方案四：给父元素添加伪元素 after*/
        /*原理和方案3相同，但是不会添加多余的空标签*/
        .box01:after{
            /*在box01后面添加一个空字符*/
            content: '';

            /*把空字符变为块元素*/
            display: block;

            /*清除两边浮动影响*/
            clear: both;
        }


    </style>


</head>
<body>



<div class="box01">


    <div class="box02">1111</div>

    <!--<div class="box03"></div>-->


</div>



</body>
</html>

在这里插入图片描述

07-相对定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin: 0;padding: 0}

        .box01{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;
        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: gold;

            /*定位属性: 相对定位*/
            /*1.相对定位，没有脱离文档流*/
            /*2.参考点：是原来位置的起始点，相对于父元素*/
            position: relative;
            top: 50px;
            left: 20px;


        }

        .box03{
            width: 100px;
            height: 100px;
            background-color: red;

            /*添加定位属性*/
            position: relative;
            /*定位层级/权重， 值越大，显示在最上面*/
            z-index: 1;

        }


    </style>




</head>
<body>


<div class="box01">

    <div class="box02">1111</div>

    <div class="box03">2222</div>

</div>


</body>
</html>

在这里插入图片描述

08-绝对定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin: 0;padding: 0}

        .box01{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            margin-left: 100px;

            /*给父元素添加定位属性*/
            /*position: relative;*/

        }

        .box02{
            width: 100px;
            height: 100px;
            background-color: gold;

            /*绝对定位：*/
            /*1.绝对定位：脱离了文档流*/
            /*2.参考点：如果父元素有定位属性，则相对父元素的起始位置*/
            /*如果父元素没有定位属性，找父元素的上一级，找到body为止*/
            position: absolute;
            top: 20px;
            left: 50px;

        }


        .box03{
            width: 100px;
            height: 100px;
            background-color: red;

            position: relative;
            z-index: 2;

        }




    </style>




</head>
<body>


<div class="box01">

    <div class="box02">1111</div>


    <div class="box03">2222</div>


</div>


</body>
</html>

在这里插入图片描述

10-小米侧边栏练习–绝对定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{margin: 0;padding: 0;list-style: none}


        ul{
            width: 200px;
            background-color: rgba(105, 101, 101, 0.6);

            /*给ul设置定位属性，把ul作为参考点*/
            position: relative;

            margin-left: 50px;
            margin-top: 50px;

        }

        ul>li{
            width: 200px;
            height: 80px;
            border: 1px solid red;

            /*保证盒子大小不变，不受padding和border影响*/
            box-sizing: border-box;

            line-height: 80px;

            text-align: center;
        }

        .box{
            width: 500px;
            height: 320px;
            background-color: #5bc0de;

            /*绝对定位*/
            position: absolute;
            top: 0px;
            left: 200px;

            display: none;

        }

        ul>li:hover{
            background-color: green;
        }



        /*伪类选择器，显示box*/
        ul>li:hover .box{
            display: block;

        }



    </style>

</head>
<body>


<ul>

    <li>手机
        <div class="box"></div>
    </li>

    <li>电视
        <div class="box" ></div>
    </li>

    <li>空调
        <div class="box"></div>
    </li>

    <li>扫地机器人
        <div class="box"></div>
    </li>

</ul>


</body>
</html>

在这里插入图片描述

return_min
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web基础2
qq_63594215的博客
02-05 1152
也就是自己的内部检查能力不足 ，没有办法在别人正在攻击你的时候发现自己被攻击了。
Web基础1
qq_63594215的博客
02-04 1026
该文章主要介绍web基础包括几部分，Web发展史，URL，Html基础，web访问流程以及抓包操作流程。Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Web基础知识
热门推荐
AQAQian_的博客
02-04 1万+
1，Web基本概念和常识 ①web应用：网站（广义上的PC，手机app） ②浏览器（Browser）：也称用户代理，web客户端，主要有IE、Edge、Chrome、Firefox、腾讯浏览器，360浏览器等……我们在初学web的过程中最好使用chrome浏览器 ③web服务器（web server）：也称HTTP服务器（HTTP server），主要有Apache、Tomcat、Netty……我们在初学阶段主要使用tomcat 理...
WEB基础知识
程序员小章的博客
09-23 4640
WEB基础知识 什么是web web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 web发展史 起源 1989年CERN（欧洲粒子物理研究所）中由Tim Berners-Lee领导的小组提交了一个针对Interne
Web基础知识（一）
heyingcheng的博客
10-16 2572
Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户可以很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。
web编程基础.ppt
11-13
Web编程基础 Web编程基础是指在Web开发中需要了解和掌握的一些基本概念和技术，包括网站的结构、静态网页的源代码HTML、程序基础、服务器-浏览器模型、服务器端逻辑结构、客户端逻辑结构等。 网站的结构： 网站...
0100_java_web_class2.rar_JAVA WEB基础
09-14
JAVA WEB基础是编程领域中的一个重要话题，主要涵盖了如何使用Java语言进行Web应用程序的开发。这个压缩包文件"0100_java_web_class2.rar_JAVA WEB基础"显然是一个教学资源，旨在通过实例来教授初学者关于Java Web的...
python web基础
06-12
python web基础
web前端基础案例
09-30
【标题】"Web前端基础案例"是一门针对初学者的教程，主要涵盖了Web开发中三个核心技术的基础知识：HTML、CSS和JavaScript。这个教程通过实践案例的方式，帮助学习者理解和掌握这些技术的应用。 【HTML（超文本标记...
web应用基础
07-09
接着，【第2章 网站策划设计与网站运行环境设置】会涉及网站规划的重要性和设计原则，以及如何配置和设置Web服务器，比如安装和配置Apache或Nginx。此外，还会讨论域名解析、服务器托管和网站上线的步骤。 【第3章 ...
ASP外观专利图像检索平台(源代码+论文).rar
07-21
ASP外观专利图像检索平台(源代码+论文)
C++课程设计：电煤气管理系统【源码+文档】
07-21
C++课程设计：电煤气管理系统【源码+文档】 本程序是一个水电气管理信息系统，能够对高校的水电气费用进行管理, 包括了成员的基本信息，如学号、编号、姓名、成员水电气的用量等。程序的用途包括缴纳水电气费、查询一个同学水电气费用量、查看所有同学的缴费情况、增加学生信息、删除学生信息、退出系统等。在设计时也考虑到学生和教师在用水电气时的不同，学生可以免费使用一定额度的水电气，超过这个额度的以后必须付费，且付费部分水电气费的价格要高于教工的收费标准，该措施的实行是为了鼓励同学们节约资源，以免造成不必要的资源浪费。该软件主要是为了学校的管理人员提供便捷，以更快的完成水电气费用的收缴。该软件本着简洁明了，实用稳定为一体进行设计。 系统将实现以下功能： （1）实现对用户信息的录入； （2）实现水电煤气数据的录入； （3）实现计算并查询用户应缴费用，查询未缴纳费用的名单； （4）实现对人员的删除和添加；
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）.rar
07-21
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）
avaloniassification-mas笔记
07-21
avalonia
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文).rar
07-21
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文)
ASP+ACCESS在线教育系统设计(源代码+论文).rar
07-21
ASP+ACCESS在线教育系统设计(源代码+论文)
中国软件杯A8赛题.zip
07-21
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
配色识色器软件，易语言编写，非常好用
最新发布
07-21
配色识色器软件版本 编写语言：易语言 数据来源：网络 软件功能： 1、识取颜色并同时输出RGB、CMYK、16进制三种值，也可以RGB、CMYK互转； 2、可添加、导入EXCEL文件（XLS文件，配合附件中的导入工具用）的配色方案（表头：见图）； 3、可点选或搜索配色值进行配色。
java毕设&课设-ASP网络商城的设计与实现(源代码+论文).zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
Web2py中文手册：从基础到实践
Web2py 手册中文版 Web2py 是一个免费开源的Web框架，使用Python语言...通过本手册，开发者可以了解 Web2py 框架的基础知识、Python 语言基础、Web2py 框架概述、核心、模型-视图-控制器模式、安全性等方面的知识。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值