CSS+DIV练手-公司

最新推荐文章于 2024-04-13 15:54:34 发布

shan9liang

最新推荐文章于 2024-04-13 15:54:34 发布

阅读量1.5k

点赞数 3

分类专栏： Web开发

本文链接：https://blog.csdn.net/shan9liang/article/details/7736911

版权

Web开发专栏收录该内容

119 篇文章 2 订阅

订阅专栏

这是第三个了，感觉兴致来了，就做一个练练手。呵呵

界面：

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>

shan9liang

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
CSS+DIV练手-公司

这是第三个了，感觉兴致来了，就做一个练练手。呵呵界面：CSS+DIV源码：css练手body{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#cad7df url(bg.jpg)
复制链接

扫一扫