扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
html 中有让隐藏又不占位的CSS样式。
创新互联是专业的文县网站建设公司,文县接单;提供成都网站建设、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行文县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
页面上有一个按钮和一个div,div默认隐藏,当按按钮的时候div居中显示,后页面变灰,按确定后,div重新隐藏,后页面显示。
超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
语言概述:
在WWW上的一个超媒体文档称之为一个页面(page)。作为一个组织或个人在万维网上开始点的页面称为主页Homepage,或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Web)。
Web页面也就是通常所说的网页,在这里不作区分。
规范标准:
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
标记语言:
HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点------就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
关于CSS的特效,大部分都是使用了hover事件,或者你再完成一些特殊要求的时候,你会使用mouseenter和mouseleave来代替hover,我就遇到过一种就是鼠标移开时,悬浮显示的元素依然占了文档流,而且你不能使用display:none;来隐藏他,这样的话,过渡效果会受到影响!
最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!
!DOCTYPE Html
html
head
title/title
!--方式一--
style
*{margin:0 auto; padding:0 inherit;}
/style
!--方式二--
link href="xxx/xxx.css" rel="stylesheet" type="text/css" /
!--方式三 不记得是不是这样写的,反正这种方式现在不用了,建议在head标签中间采用第二种方式进行样式链接,样式/脚本与页面文件分离。标准做法--
style
@import url(xxx.css);
/style
/head
body
答案无疑是 A:head/head标签内,不过你们那问题出的也太有问题了。不是驻留。是标准写法是嵌入在head/head中间,其他位置一样可以嵌入样式表或者说是样式,只是不标准的写法而已.
/body
/html
slideUp(),slideDown()这个动画的过程只是高度的改变,和宽度或者不透明度无关。收起来的时候本来就不占位置啊,你测试一下以下代码,收起来的时候下面的按钮移上去了,不是说明它不占位置吗
style type="text/css"
#box{ width:100px; height:100px; background-color:red;}
/style
div id="box"/div
button onclick="_slideUp()"向上收缩/button
button onclick="_slideDown()"向下展开/button
script type="text/javascript"
function _slideUp(){
$('#box').slideUp(3000);
}
function _slideDown(){
$('#box').slideDown(3000);
}
/script
CSS绝对定位属性:position (属性规定元素的定位类型)
绝对定位示例:
h2{position :fixed}
下面是position属性值
1、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3、relative:生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
4、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
5、inherit:规定应该从父元素继承 position 属性的值。
小案例:
html
head
style type="text/css"
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
/style
/head
body
h2 class="pos_abs"这是带有绝对定位的标题(百度知道)/h2
p通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。/p
/body
/html
案例截图:
设置div 相对位置后你可以将它邻近的盒子设置成relative相对定位,不脱标准。然后在里面加上这个盒子
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流