最近CSS学习做的一些小东西。附上代码
最近CSS学习做的一些小东西。附上代码[code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示隐藏的标签</title>
<style>
#menu {
overflow:hidden;
background-color:#fbfef4;
width:200px;
height:700px;
overflow:hidden;
}
#menu li {
list-style-type:none;
display:block;
width:178px;
border:1px solid #739c23;
border-bottom-width:0px;
}
#menu li.end{
border-bottom-width:1px;
}
#menu li a {
display:block;
text-decoration:none;
width:100%;
padding:10px;
}
#menu li a span {
display:none;
color:#333;
font-size:12px;
padding-top:10px;
line-height: 1.5em;
text-indent:2em;
}
#menu li a:hover {
background-color: #EEFFEE;
}
#menu li a:hover span {
display:block;
cursor:hand;
}
#menu h1 {
margin:0px;
color:#739c23;
font-size:14px;
}
</style>
</head>
<body>
<ul id="menu">
<li> <a href="#">
<h1>网站页面设计</h1>
<span> 网页风格效果图设计,按钮设计,页面布局采用CSS2与结构式XHTML相结合网站重构。帮助设计师分离外观与结构,使站点的访问及维护更加容易。网页设计还包含普通动画广告,演示说明动画 等</span> </a> </li>
<li> <a href="#">
<h1>软件界面设计</h1>
<span> 应用软件,数码产品,游戏产品的一系列外观和界面都可以理解为这个领域的东西。网页其实也是一种特殊的UI设计。1.数码移动设备UI和造型
2.应用软件UI
3.Icon设计,软件LOGO等。 </span> </a> </li>
<li> <a href="#">
<h1>平面广告</h1>
<span> 这个是一个包含范围很大的领域,与我们生活也是息息相关。 随处可以见到各种各样的平面广告。企业画册,报纸,户外广告。卖场单页,招贴,宣传页,标志 地产广告,都是属于她的范围。 </span> </a> </li>
<li class="end"> <a href="#">
<h1>用户体验,习惯分析</h1>
<span> 用户体验要从著名网站。软件上面入手分析,评测,吸收其可以利用的地方.
规范,条理化,大气体现产品优点,特性力求在同类产品中获得较高地位。 </span> </a> </li>
</ul>
</body>
</html>
[/code] 进步的很快,这个效果不错!(^#@$%^ 请问,能不能象经典论坛一样,直接有个内置框架,可以运行这个代码啊.
惭愧..目前基本还是风格方面的样式,至于运用样式表进行布局.经常出现毛病. 我也在想这个问题,但是运行代码的话可能会带来安全问题! 现在的教程混乱不堪,而且又都是要下载下来才能够学习的,有点麻烦,如果可以改善下学习环境的话就太好了 不错啊,就是有点不够灵活 效果不错啊``我新建了个文档试了下``` 不知道自己什么时候可以看的懂这些东西``
页:
[1]
