中国教程网论坛's Archiver

shunshui 发表于 2007-3-21 20:04

最近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]

寅生 发表于 2007-3-25 14:22

进步的很快,这个效果不错!(^#@$%^

shunshui 发表于 2007-3-25 16:17

请问,能不能象经典论坛一样,直接有个内置框架,可以运行这个代码啊.

惭愧..目前基本还是风格方面的样式,至于运用样式表进行布局.经常出现毛病.

寅生 发表于 2007-3-25 16:20

我也在想这个问题,但是运行代码的话可能会带来安全问题!

javen1827 发表于 2008-4-16 14:07

现在的教程混乱不堪,而且又都是要下载下来才能够学习的,有点麻烦,如果可以改善下学习环境的话就太好了

dreamdesign 发表于 2008-5-4 23:06

不错啊,就是有点不够灵活

我爱她爱我 发表于 2008-5-15 15:33

效果不错啊``我新建了个文档试了下``` 不知道自己什么时候可以看的懂这些东西``

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.