初识html+css 第五天

最新推荐文章于 2023-05-06 17:28:34 发布
最新推荐文章于 2023-05-06 17:28:34 发布
阅读量139 收藏
点赞数
分类专栏： html 文章标签： html5 css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46087833/article/details/108294107
版权

初识html+css 5

1. 相对定位

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /* position: static; */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            left: 200px;
            /* top: 200px; */
            /* margin-left: 200px;
            margin-top: 200px; */
            /* margin-top: ; */
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: green;
            /* margin-top: -200px; */
        }
    /* 
            定位：默认值  static   没有定位
            相对定位  relative  相对于自身的位置进行定位  设置偏移量是使用 top left  right bottom  
                不脱离文档流
                不影响其他的元素
            绝对定位 absolute
            固定定位 fixed
     */
    </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

一般到后期盒子未定义大小里面的字体直接通过padding 来进行水平垂直居中对齐
2. 绝对定位

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            /* left: 0px;
            top: 0px; */
            /* top: 200px; 
             left: 200px; */
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .box4 {
            width: 300px;
            height: 300px;
            background-color: pink;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box5 {
            width: 500px;
            height: 600px;
            background-color: skyblue;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<!-- 绝对定位 absolute  相对于 最近的已经定位的祖先元素进行定位，
    如果所有的祖先元素都没有定位的话，就相对于浏览器进行定位 
    设置了绝对定位的元素脱离标准流，同时也无法继承父元素的宽高100%
-->
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box5">
        <div class="box4">
            <div class="box3"></div>
        </div>
    </div>
</body>

3. fixed
一般用在至顶部还有一些功能键

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            width: 1200px;
            height: 2000px;
            margin:0 auto;
            border:2px solid #000;
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            margin:20px ;
            background-color: pink;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
            <div class="box1">

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

4. hover
hover是鼠标移动到某一位置出现什么现象，之前a链接标签伪类有提到过，这主要介绍父子之间的hover现象，以及兄弟之间的hover现象

  • 父子hover
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fa{
            width: 500px;
            height: 500px;
            background-color: royalblue;
            display: none;
            
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
        .fa:hover .son{
            display: block;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son">

        </div>
    </div>
</body>
  • 兄弟hover
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            /* display: inline-block; */
            display: none; 
            /* opacity: 0; 改变盒子的透明度 还在文档流当中*/
            /* opacity: 0;  */
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            display: none;
        }
        .box1:hover+.box2{ 
            /* 只能对紧挨这的后面的兄弟元素设置hover */
            display: block;
        }
        .box1:hover~.box3{
            /*对后面的兄弟元素设置hover */
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

    <div class="box2"></div>
    
    <div class="box3"></div>
</body>
ʚ骑牛小道士εﾟ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
web前端零基础html5 +css3+前端项目视频教程笔记、源码第一章初识HTML
11-12
搭配专栏笔记的资源
＜meta＞＜/meta＞设置
weixin_49232311的博客
11-10 492
但是事情并不都是完美的，总有个别奇葩的出现，比如uc9。在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度。总结 ： 把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。
HTML基础--CSS3（三）
m0_50315078的博客
08-11 522
HTML基础之CSS3（三）
freeMarker 中宏＜#macro ＞解析
qq_27009517的博客
12-15 3458
用户定义指令－使用@符合来调用 有两种不同的类型：Macro(宏)和transform(传递器)，Macro是在模板中使用macro指令定义，而transform是在模板外由程序定义(基本上都是基于Java的)，这里通过Macro来介绍自定义指令。 1：在介绍宏<#macro >之前我们先了解一下html中<meta>标签： 1.1、name= viewport <meta name="viewport" content="width=device...
css3的练习题
zyz00000000的博客
09-27 3140
练习题：（1）css3选项卡功能、（2）钟表、（3）旋转木马 1. 用css3实现选项卡功能： 原理：每一个选项后紧跟着内容标签，用 + 选择器来绑定选项和内容，当选中某一个时，对应的内容display：inline-block展现出来。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta chars...
【HTML、CSS练习题3】
m0_46312303的博客
07-20 2822
HTML、CSS练习题（三）
第一章之初识Bootstrap
11-26
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。 2010 年...
html语言学习
08-03
第一章初识HTML；第二章添加各种网页元素；第3 章表格的使用；第4 章框架结构页面的制作；第5 章使用表单；第6 章CSS 技术；
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
(5)\\python全栈day41-50\\python全栈s3 day41；目录中文件数:10个 ├─(1) 01 python s3 day41 JS的历史以及引入方式.avi ├─(2) 02 python s3 day41 JS的基础规范.avi ├─(3) 03 python s3 day41 JS的基本数据...
前端基础-01-HTML
gemoumou的python学习实记
05-19 611
一个完整的网页是由 >html:完成页面各组成部分的搭建;css：进行页面修饰；js：让html页面具有很多的功能 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是标题</title>.
CSS面试题：20道含答案和代码示例的练习题
三拾的博客
05-06 1483
如何水平居中一个元素？ 答案：可以使用text-align属性设置父元素的文本对齐方式为center，也可以使用margin属性设置元素的左右margin为auto。 如何垂直居中一个元素？ 答案：可以使用display:flex和align-items:center属性将元素垂直居中，也可以使用绝对定位和top属性结合父元素的高度将元素垂直居中。 什么是盒子模型？ 答案：盒子模型是CSS中用来描述元素大小和位置的模型，它将每个元素看作一个矩形框，包含内容区域、内边距区域、边框区域和外边距区域。 如何设置
CSS3 animation 练习
weixin_34223655的博客
01-03 183
css3 的动画让 html 页面变得生机勃勃，但是如何用好动画是一门艺术，接下来我来以一个demo为例，来练习css3 animation。 我们先详细了解一下animation 这个属性。 animation-name 这是一个必填的选项，否则无法指定要执行哪一个动画。 animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计，如果...
HTML5+css3课后习题【一】
缘友一世的博客
11-04 7981
因为静态网页的访问速度快，所以现在互联网上的所有网站都是静态网页组成的。（✖️）大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。（✔️ ）在Web标准中，表现是指网页展示给访问者的外在样式。（ ✔️）在网页中，层叠样式表指的是JavaScript。（✖️ ）CSS所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。（ ✖️）结果不一样。
Web前端基础知识之 CSS3 特性合集-shadow&animation&transition
Three_ST的博客
07-29 661
CSS3是在CSS2的基础上做了升级，最近在学习一下前端的基础知识，因此对学习过程做个一个记录 1.1由于CSS3在不同的浏览器中效果不一致（表示该CSS属性或者规则尚未成为W3C标准的一部分，是浏览器的私有属性） 需要添加特定的浏览器前缀 前缀 || 浏览器 -webkit | chrome /safari -moz | firefox -ms | IE -o ...
css3餐厅练习题
cheng5055251的博客
04-12 736
餐厅练习链接 http://flukeout.github.io/ 以下答案都是我自己边做边写的，如果有错误欢迎指出 第1题 Select the plates 答案：plate 第2题Select the bento boxes 答案：bento 第3题Select the fancy plate 答案：#fancy 第4题Select the apple on the plate 答案：plate apple 第5题Select the pickle on the fancy plate 答案：plat
前端学习（42）：边框样式
歌谣的博客
12-08 298
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
css3基础-切换背景图像综合练习题
superjunjin的专栏
06-28 1029
https://www.imooc.com/code/1882 任务 给每个列表定义不同的背景颜色 提示：使用结构伪类选择器:nth-of-type() 设置缩略图外形效果 提示：使用伪元素::after制作圆形效果 1、给每个缩略图设置不同的图片 提示：使用伪结构选择器:nth-of-type()，并且配合::after 2、给每个缩略图添加透明度蒙板效果 提示：使用伪类选择器...
CSS练习题——3.时钟
qq1722377628的博客
10-23 164
1.需求： 2.分析 时钟分为表框，12个刻度，时分秒针。 ① 表框可以用大的box。 ② 刻度可以先写好一根刻度，剩下5根只需要进行旋转30°，60°....再用一个白色的cover覆盖中间位置，就把表框和刻度做完了。 ③ 时分秒针，中间圆点都是一个div，只需要用left,margin,tranform进行定位就行了。 3.完整代码（注释详细） ...
初识html：简单的hello world网页制作
最新发布
06-28
### 回答1： Hello World网页制作是HTML编程的入门级别。以下是制作Hello World网页的步骤： 1. 打开文本编辑器，如记事本或Sublime Text等。 2. 在文本编辑器中输入以下代码： <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html> 3. 保存文件，文件名为“helloworld.html”，确保文件类型为“所有文件”。 4. 在浏览器中打开“helloworld.html”文件，即可看到“Hello World!”的标题。 这个简单的网页由HTML标记组成，其中包括文档类型声明、HTML标签、标题标签和正文标签。HTML标记告诉浏览器如何显示网 ### 回答2： HTML是超文本标记语言的英文缩写，是用来制作网页的一门标记语言。在网页制作中，HTML主要用来编写网页的内容和结构，决定网页中各个元素的排列和位置。 制作HTML网页的第一步，是编写一个简单的“hello world”网页。这个网页的基本结构如下所示： <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>Hello World！</h1> </body> </html> 该网页有三个部分组成： 1.头部（head）：用于描述文档的基本属性，包括文档类型声明、字符编码、文档title等。文档title会在浏览器的标题栏中显示。 2.主体（body）：用于展示文档内容。在body中，可以添加文本、图片、链接、表格等各种元素。 3.文本（text）：在该网页中，<h1>标签表示网页的标题，这里的标题是“Hello World！”。 当我们在编辑器中输入以上代码，保存为一个html文件，使用浏览器打开它，就可以看到“Hello World！”这个简单的网页了。 尽管这只是一个简单的网页，但它展示了HTML的基本属性，如何在HTML中描述文档的结构和展示内容，为之后学习其他更加复杂的HTML网页制作奠定了基础。 ### 回答3： HTML 是一种标记语言，是网页制作的基础。在制作网页时，首先需要创建一个 HTML 文件，并在文件中编写 HTML 代码。最简单的 HTML 代码就是 Hello World 网页。下面我来介绍一下如何制作这个网页。 首先，我们需要创建一个 HTML 文件。可以使用文本编辑器（如 Notepad++、Sublime Text 等）来创建 HTML 文件。以 Notepad++ 为例，创建一个新文本文件，将文件后缀名改为 .html，这样我们就创建了一个 HTML 文件。接下来，我们需要在 HTML 文件中编写代码。 HTML 代码由标签和内容组成。标签用来标记 HTML 文档中的不同部分，内容则是标签所包含的文本、图片、链接等等。以 Hello World 网页为例，我们可以编写以下代码： ``` <!DOCTYPE html> <!-- 文档类型声明 --> <html> <!-- html 根标签 --> <head> <!-- head 标签 --> <title>Hello World</title> <!-- title 标签，设置网页标题 --> </head> <body> <!-- body 标签，设置网页的 body 部分 --> <h1>Hello World</h1> <!-- h1 标题标签，设置网页主标题 --> <p>This is my first HTML web page.</p> <!-- p 标签，设置网页主要内容 --> </body> </html> ``` 上述代码中，第一行 ``<!DOCTYPE html>`` 是文档类型声明，告诉浏览器这是一个 HTML5 文档。接下来的 ``<html>`` 标签是 HTML 文档的根标签，所有其他标签都嵌套在它内部。``<head>`` 标签用于设置网页的头部内容，例如网页标题、样式表等等。标签内部的 ``<title>`` 标签用于设置网页标题。``<body>`` 标签用于设置网页的 body 部分，即网页中显示的内容。``<h1>`` 标签用于设置网页主标题，“Hello World” 就是我们的主标题。``<p>`` 标签是段落标签，用于设置网页主要内容。 将上述代码保存为 .html 后，我们就可以用浏览器打开它，看到我们刚刚编写的 Hello World 网页了。这是一个非常简单的网页，但它包含了 HTML 的基础标签和使用方法，对于初学者来说是非常有帮助的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值