CSS+DIV练手-公司
这是第三个了,感觉兴致来了,就做一个练练手。呵呵
界面:
CSS+DIV源码:
<!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=utf-8" /> <title>css练手</title> <style type="text/css"> body{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#cad7df url(bg.jpg) repeat-x;/* 背景色、水平重复的背景图片 */ } #container{ width:758px; } #banner{ background:url(logo.jpg) no-repeat; height:62px; margin:0px 0px 1px 0px; padding-top:0px; } #banner ul{ list-style:none; position: absolute; left: 540px; top: 4px; padding: 0px; margin: 0px; } #banner li{ float:left; text-align:center; padding:0px 0px 0px 25px; } #banner a:link, #banner a:visited { color: #4A6F87; text-decoration: none; } #banner a:hover { color: white; text-decoration: none; } #left{ width:158px; float:left; } #left #navigation{ width:158px; margin:0px 0px 10px 0px; padding:0px; } #left #navigation ul{ margin: 0px; padding: 0px; border-top: 5px solid #CAD7DF; list-style:none; } #left #navigation ul li{ border-bottom: 1px solid #CAD7DF; } #left #navigation ul li a{ display:block; /*以块区模式显示a,然后设置icon为背景,并规定其位置,然后再设置文字位置*/ background:url(icon1.gif) no-repeat 13px 11px; padding:5px 0px 2px 25px; } #left #navigation li a:link,#left #navigation li a:visited { background-color: #7591A3; color: white; text-decoration:none; } #left #navigation li a:hover{ /* 鼠标经过时 */ color:#003e66; /* 改变文字颜色 */ background:#aacbe0 url(icon2.gif) no-repeat 13px 11px;/* 改变背景图片颜色 */ } #left #search .text{ width:80px; background:transparent; border:1px solid #7591A3; } #left #search .btn{ border: 1px solid #7591A3; background: transparent; font-size: 12px; height: 19px; } #main{ float:left; width:600px; margin:0px; padding:0px; background-color:white; } #main #news h3{ margin:20px 0px 0px 20px; padding:0px; font-size:16px; } #main #news h3 a{ display:block; background:url(icon3.gif) no-repeat 1px 7px; padding:0px 0px 0px 10px; } #main #news h3 a:link, #main #news h3 a:visited { color: black; text-decoration: none; } #main #news h3 a:hover{ color:#7591a3; text-decoration:underline; } #main #list{ float:left; margin:7px 0px 4px 0px; width:340px; padding:0px 0px 0px 28px; } #main #list h4{ font-size: 12px; background: #E0E7EC url(icon4.gif) no-repeat 7px 8px; padding: 3px 0px 2px 17px; margin-bottom:5px; } #main #list p.date{ padding: 0px 0px 5px 2px; font-weight: bold; color: #014E68; margin:0px; } #list ul{ margin:0px 0px 6px 40px; padding:0px; list-style-type:disc; } #main #list ul li a:link,#main #list ul li a:visited,#main #list p.more a:link,#main #list p.more a:visited { color: #333; text-decoration: none; } #main #list ul li a:hover,#main #list p.more a:hover { color: #00A9E7; text-decoration: underline; } #main #list p.more{ display:block; background:url(icon5.gif) no-repeat 5px 5px; padding:0px 0px 0px 13px; } #main #right{ float: left; width: 180px; margin: 23px 0px 5px 30px; padding: 0px; border-left: 1px solid #7591A3; } #main #right h3{ margin:0px; padding:1px 0px 1px 15px; background:url(right_right.gif) no-repeat; color:white; } #main #right p.date2{ background: #E0E7EC url(icon6.gif) no-repeat 5px 7px; margin: 7px 15px 3px 7px; padding: 1px 0px 1px 15px; font-weight: bold; } #main #right p.content{ margin: 0px 15px 3px 7px; padding: 0px 0px 1px 0px; } #main #right p.more2{ background: url(icon5.gif) no-repeat 5px 5px; margin: 0px 15px 3px 7px; padding: 0px 0px 1px 15px; } #main #right p.more2 a:link,#main #right p.more2 a:visited { color: #333; text-decoration: none; } #main #right p.more2 a:hover { color: #00A9E7; text-decoration: underline; } </style> </head> <body> <div id="container"> <div id="banner"> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">英文版</a></li> </ul> </div> <div id="left"> <div id="navigation"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">产品信息</a></li> <li><a href="#">服务条款</a></li> <li><a href="#">新闻快递</a></li> <li><a href="#">友情链接</a></li> <li><a href="#">投诉建议</a></li> <li><a href="#">合作伙伴</a></li> <li><a href="#">项目介绍</a></li> <li><a href="#">日程安排</a></li> </ul> </div> <div id="search"> <form> 查找:<input type="text" class="text"> <input type="button" class="btn" value="搜"> </form> </div> </div> <div id="main"> <div id="top"> <img src="banner.jpg"> </div> <div id="news"> <h3><a href="#">新闻快递:公司股票于昨日在美国纳斯达克上市</a></h3> </div> <div id="list"> <h4><span>公告栏</span></h4> <p class="date">2012.12.12</p> <ul> <li><a href="#">公司例会确定了新的项目筹备组</a></li> <li><a href="#">i、g、t三人当选公司新任董事会骨干</a></li> <li><a href="#">对股票的运作做了详细的规划</a></li> <li><a href="#">lh担任办公室重要职务,茁壮成长</a></li> </ul> <p class="date">2012.12.12</p> <ul> <li><a href="#">公司成立25周年纪念,领导发表重要讲话</a></li> <li><a href="#">新一轮项目筹备工作开始启动</a></li> </ul> <p class="more"><a href="#">more</a></p> <h4><span>前沿技术</span></h4> <p class="date">2012.12.12</p> <ul> <li><a href="#">清华大学电子工程系牛人做报告,气氛融洽</a></li> <li><a href="#">晾衣杆实现高增益、高信噪比波束自动成形天线</a></li> </ul> <p class="more"><a href="#">more</a></p> <h4><span>资源下载</span></h4> <p class="date">2012.12.12</p> <ul> <li><a href="#">时时语音和图象处理功能的纸箱</a></li> <li><a href="#">自动收发装置更新,电力充足</a></li> </ul> <p class="more"><a href="#">more</a></p> </div> <div id="right"> <h3>English Letter</h3> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> <p class="date2">2012.12.12</p> <p class="content">Auditorium Stage</p> <p class="more2"><a href="#">more</a></p> </div> </div> </div> </body> </html>