HTML的基础知识.关于css样式表和样式属性的详细介绍

这次给大家带来html基础知识.关于css样式表和样式属性的详细介绍,使用html的基础知识css样式表和样式属性的注意事项有哪些,下面就是实战案例,一起来看一下。

一、position:fixed

    锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

二、position:absolute

    绝对位置:

立即学习“前端免费学习笔记(深入)”;

    1.外层没有position:absolute(或relative);那么p相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

    2.外层有position:absolute(或relative);那么p相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

三、position:relative

相对位置:

如下图,相对于把此p包含住的p的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

四、分层(z-index)

    在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa。如下:

五、float:left、right

      Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部p的除去一行的位置的左上或右上显示。

附加:1、

overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;

//截断流

         2、cursor:pointer   鼠标指到上面时的形状;

         3、半透明效果:

    

透明区域

在样式表中的代码为: .box { opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50) }

        无标题文档    .a   {       border:5px solid blue;       width:1000px;       height:100px;       margin:10px;       left:150px;       top:80px;       position:absolute;}   .b   {       border:5px solid blue;       width:240px;       height:200px;       margin:10px;       left:150px;       top:200px;       position:absolute;}   .c   {       border:5px solid blue;       width:740px;       height:300px;       margin:10px;       left:410px;       top:200px;       position:absolute;}   .d   {       border:5px solid blue;       width:740px;       height:200px;       margin:10px;       left:410px;       top:520px;       position:absolute;}   .e   {       border:5px solid blue;       width:240px;       height:1500px;       margin:10px;       left:150px;       top:420px;       position:absolute;}   .f   {       border:5px solid blue;       width:240px;       height:150px;       margin:10px;       left:150px;       top:1940px;       position:absolute;}   .g   {       border:5px solid blue;       width:740px;       height:1350px;       margin:10px;       left:410px;       top:740px;       position:absolute;}       .h   {       border:5px solid blue;       width:1000px;       height:200px;       margin:10px;       left:150px;       top:2110px;       position:absolute;}   .i   {       border:5px solid blue;       width:1000px;       height:200px;       margin:10px;       left:150px;       top:2330px;       position:absolute;}           

a

b

c

d

e

f

g

h

i

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

HTML Form表单元素的详解

HTML文本格式化的实例详解

html的特殊字符-css3 content:”特殊符号”应该如何使用

以上就是HTML的基础知识.关于css样式表和样式属性的详细介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545606.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:08:49
下一篇 2025年12月21日 17:09:06

相关推荐

  • HTML基础知识,关于超链接设置的样式的详细介绍

    这次给大家带来html基础知识,关于超链接设置的样式的详细介绍,设置html的超链接样式的注意事项有哪些,下面就是实战案例,一起来看一下。 ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 立即学习“前端免费学习笔记(…

    好文分享 2025年12月21日
    000
  • html如何制作细线表格

    这次给大家带来html如何制作细线表格,用html制作细线表格的注意事项有哪些,下面就是实战案例,一起来看一下。 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border=”0″ cellspacing=”1″…

    好文分享 2025年12月21日
    000
  • html块级标签,行内标签,行内块标签的显示模式有哪些

    这次给大家带来html块级标签,行内标签,行内块标签的显示模式有哪些,使用html块级标签,行内标签,行内块标签显示模式的注意事项有哪些,下面就是实战案例,一起来看一下。 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标…

    好文分享 2025年12月21日
    000
  • 关于HTML操作滚动条的方法

    这次给大家带来关于html操作滚动条的方法,用html操作滚动条的注意事项有哪些,下面就是实战案例,一起来看一下。 html 标签加属性     2.body中加入以下代码 html{ overflow-x: hidden; overflow-y: hidden; } html页面去除滚动条的方法 …

    好文分享 2025年12月21日
    000
  • HTML的语法详解

    这次给大家带来html的语法详解,怎么使用html的语法?使用html语法的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是HTML标记语言? HTML是表示网页信息的符号标记语言。 2.HTML的标记和他的属性 1.HTML文档的保存格式:.html、.htm、.xhtml 立即学习“前端…

    好文分享 2025年12月21日
    000
  • css怎样固定div或者table在指定位置

    这次给大家带来css怎样固定div或者table在指定位置,用css固定div或者table在指定位置的注意事项有哪些,下面就是实战案例,一起来看一下。 .bottomTable{ background-color: rgb(249,249,249); z-index:99999999; posit…

    好文分享 2025年12月21日
    000
  • HTML的编辑基础(新手必看篇)

    这次给大家带来html的编辑基础(新手必看篇),下面就是实战案例,一起来看一下。 打开DREAMWEAVER,新建HTML。。 body的属性: bgcolor                页面背景色 background            背景壁纸、图片 立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月21日
    000
  • html的特殊字符-css3 content:”特殊符号”应该如何使用

    这次给大家带来html的特殊字符-css3 content:”特殊符号”应该如何使用,使用html的特殊符号应该如何使用的注意事项有哪些,下面就是实战案例,一起来看一下。 项目中用到的一些特殊字符和图标 html代码 css代码.cross{ width: 20px; hei…

    好文分享 2025年12月21日
    000
  • html里的列表标签有哪些?

    这次给大家带来html里的列表标签有哪些?,使用html里的列表标签的注意事项有哪些,下面就是实战案例,一起来看一下。 dl>定义列表, 定义列表中的项目,对项目的描述 无序列表,列表项 有序列表,列表项 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 立即学习“前端免费…

    好文分享 2025年12月21日
    000
  • html中频繁用的标签总结

    这次给大家带来html中频繁用的标签总结,哪些是html中频繁用的标签,下面就是实战案例,一起来看一下。 内容详细标签: ~ 标题标签 格式化文本下划线(underline)斜体字(italics)引用,通常为斜体强调文本通常为斜体加重文本,通常为黑体设置字体、字体大小、颜色等字体变大和字体变小加删…

    好文分享 2025年12月21日
    000
  • HTML文本格式化的实例详解

    这次给大家带来html文本格式化的实例详解,html文本格式化的注意事项有哪些,下面就是实战案例,一起来看一下。 一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化 This text is bold This text is strong This text is big Thi…

    好文分享 2025年12月21日
    000
  • html页面公共样式有哪些

    这次给大家带来html页面公共样式有哪些,使用html页面公共样式的注意事项有哪些,下面就是实战案例,一起来看一下。 body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td…

    好文分享 2025年12月21日
    000
  • CSS3的文本阴影text-shadow属性应该如何使用

    这次给大家带来css3的文本阴影text-shadow属性应该如何使用,使用css3的文本阴影text-shadow的注意事项有哪些,下面就是实战案例,一起来看一下。 文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 text-shadow p{ text…

    好文分享 2025年12月21日
    000
  • 语义化的HTML结构有哪些对于对网站的优化

    这次给大家带来语义化的html结构有哪些对于对网站的优化,语义化的html结构的注意事项有哪些,下面就是实战案例,一起来看一下。 一: 1. 语义化标签只是HTML,CSS不存在语义化。HTML是标签,CSS是属性。 2. 语义化标签简历在文档化页面的基础上面,将网页当做是一个文档,DOM中的D(d…

    好文分享 2025年12月21日
    000
  • HTML的基本结构有哪些

    这次给大家带来html的基本结构有哪些,设计html基本结构的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML简介 HyperText Markup Language:超文本标记语言 HyperText:超文本(文本 + 图片 + 视频 + 音频 + 链接) Markup Language…

    好文分享 2025年12月21日
    000
  • html代码在编写过程中的一定要注意的三点

    这次给大家带来html代码在编写过程中的一定要注意的三点,编写html代码的注意事项有哪些,下面就是实战案例,一起来看一下。 本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里。 1.内联标签…

    好文分享 2025年12月21日
    000
  • html以及css的常用用法

    这次给大家带来html以及css的常用用法,html以及css用法的注意事项有哪些,下面就是实战案例,一起来看一下。 我将利用三天的时间来完成制作京东首页的静态页面效果,其中包含的内容有html以及css。 1、在开发进行之前,首先要配置开发环境:我们需要安装sublime  webstorm  v…

    好文分享 2025年12月21日
    000
  • HTML中的meta设置方法

    这次给大家带来html中的meta设置方法,html中设置meta的注意事项有哪些,下面就是实战案例,一起来看一下。 立即学习“前端免费学习笔记(深入)”; <!– –> <!– –> <!– –&…

    好文分享 2025年12月21日
    000
  • 在HTML元素中如何嵌入图像

    这次给大家带来在html元素中如何嵌入图像,在html元素中嵌入图像的注意事项有哪些,下面就是实战案例,一起来看一下。 1 在超链接里嵌入图像 img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下: @@##@@ 浏览器显示这张图片的方式没有什么不同。因此,重要的一点事要向用户提供…

    好文分享 2025年12月21日
    000
  • HTML的标记文字详解

    这次给大家带来html的标记文字详解,html的标记文字的注意事项有哪些,下面就是实战案例,一起来看一下。 .用基本的文字元素标记内容 对应HTML代码: Learn4Font 元素 b —— I am the example. 元素 em —— I am the example.立即学习“前端免费…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信