站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
MolyX 动态转换
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__NOTOC__ <span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[MolyX CSS教程|上一页]] | {{Template:MolyX导航}}</span> <div style="clear:both;"></div> 通过在[[CSS]]中设置属性,我们可以准确的定义一个页面的样式,如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感。 另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。 实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表(见下图): <div> [[Image:mx23.png]] </div> 我们在下面举一个例子,其中带了一点Script的内容,我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧,通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下: <pre> <html> <head> <title>dingwei css</title> <style type=“text/css”> <!-- #container1{position:absolute;top:100} //*定义container1 为绝对位置*// #container2{position:absolute;top:100;visibility:hidden;} //*定义container2为绝对定位,初始可见度为hidden(隐藏)*// p{font-size:12pt;}//*定义p的字体*// --> </style> </head> <body> <p style=“font-family:行书体;font-size:15pt;color:#cc33cc”> 请选择一幅图片: </p>//*设置字体大小、名称、颜色*// <div id=“container1”> <dd><img src=“ss01065.jpg” width=“185”height=“280”> //*导入一张图片,标识符为container1*// <p style=“font-family:行书体;color:#cc9933;font-size:12pt”> 名称:大漠</p>//*设置字体名称、颜色、大小*// </dd> </div> <div id=“container2”> <dd><img src=“ss01095.jpg” width=“185”height=“280”> //*导入另一种图片,标识符为container2*// <p style=“font-family:行书体;color:#3366cc;font-size:12pt”> 名称: 大海</p> </dd> </div> <form name=“myform”>//*定义两个按钮*// <p><input type=“button” value=“大漠” onclick=“container1.style.visibility=‘visible’; container2.style.visibility=‘hidden’”> //*定义鼠标点击事件图片1为可见,图片2为不可见*// <input type=“button” value=“大海”; container1.style.visibility=‘hidden’; onclick=“container2.style.visibility=‘visible’; container1.style.visibility=‘hidden’”></p> //*定义鼠标点击事件图片1为不可见,图片2为可见*// </form> </body> </html> </pre> 代码虽然长了一些,但结构很简单,您只要用心看注释,很容易理解的。 [[category:MolyX手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:MolyX导航
(
编辑
)