企业网站综合布局实战笔记
思路: 利用了两个盒子嵌套,一个ul嵌套3个li即可。
具体思路:
- 先创建外层次top盒子
<div class="top">
- 再创建内层top_content盒子
<div class="top_content">
- 后面创建ul,ul里面嵌套3个li标签。
3-1企业网站制作之头部制作(一)
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
background-color: #F5F5F5;
}
.top
{
width:100%;
height:27px;
background: url(../images/top_bg.jpg) repeat-x;
}
.top_content
{
width:1000px;
margin:0 auto; //居中
}
.top_content li
{
list-style-image: url(../images/li_bg.gif);
float: right;
width:70px;
line-height:27px; // li在盒子里的高度居中
}
//未访问和已访问的选择器
.top_content a:link,.top_content a:visited
{
color:#8E8E8E;
text-decoration:none; //去掉下划线
}
.top_content a:hover, .top_content a:active
{
color:#900;
text-decoration:none;
}
<!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>无标题文档</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</li>
</ul>
</div>
</div>
</body>
3-1企业网站制作之头部制作(二)
思路:
- 创建一个wrap最外层div盒子
- 里面创建一个logo盒子
- logo盒子里面创建左右两个盒子。 左边放logo,右边放电话。
注意:之前的.top_content与.wrap是一样宽的哦!
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
background-color: #F5F5F5;
}
.top
{
width:100%;
height:27px;
background: url(../images/top_bg.jpg) repeat-x;
}
.top_content
{
width:1000px;
margin:0 auto;
}
.top_content li
{
list-style-image: url(../images/li_bg.gif);
float: right;
width:70px;
line-height:27px;
}
.top_content a:link,.top_content a:visited
{
color:#817d7d;
text-decoration:none;
}
.top_content a:hover, .top_content a:active
{
color:#900;
text-decoration:none;
}
.wrap
{
width:1000px;
margin:0 auto;
}
.logo
{
height:80px;
background-color: #FFF;
}
.logo_left
{
width:200px;
float:left;
}
.logo_right
{
width:300px;
float:right;
height:28px;
margin-top:30px;
color:#8E8E8E;
}
.logo_right img
{
vertical-align:middle; //vertical-align 属性设置元素的垂直对齐方式。
margin-right:10px;
}
.tel
{
font-family:"微软雅黑";
font-size:16px;
color:#C00;
}
<!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>无标题文档</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</li>
</ul>
</div>
</div><!--top结束-->
<div class="wrap">
<div class="logo">
<div class="logo_left">
<img src="images/logo.jpg" alt="慕课网">
</div>
<div class="logo_right">
<img src="images/tel.jpg" alt="服务热线"/> 24小时服务热线:<span class="tel">123-456-7890</span>
</div>
</div><!--logo结束-->
</div><!--wrap结束-->
</body>