企业网站制作之头部制作（一）

最新推荐文章于 2023-07-11 11:00:44 发布

罗彬桦

最新推荐文章于 2023-07-11 11:00:44 发布

阅读量557

点赞数

分类专栏：前端文章标签： html css js

本文链接：https://blog.csdn.net/weixin_45647118/article/details/112856611

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

企业网站综合布局实战笔记

在这里插入图片描述

思路： 利用了两个盒子嵌套，一个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>

在这里插入图片描述

罗彬桦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
企业网站制作之头部制作（一）

慕课企业网站综合布局实战思路：利用了两个盒子嵌套，一个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: 12p
复制链接

扫一扫