第六天-网页的head制作——明天继续写下面的

来源：互联网发布：nginx body filter 编辑：程序博客网时间：2024/04/30 13:33

<!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="main1.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="first"> 
<div id="head"> 
<div id="head1"> 
<img src="cangjian.png"/> <span>藏剑山庄</span>
</div>
<div id="head2"> 
<span>登陆 注册</span>
</div>
<div id="head3"> 
<a href="http://www.baidu.com" id="ha1" target="_blank">百度</a> <a href="http://www.sina.com.cn/" target="_blank">新浪</a>
<a href="http://www.sohu.com" target="_blank">搜狐</a> <a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://www.163.com" target="_blank">网易</a> <a href="http://www.youku.com" target="_blank">优酷</a>
<a href="http://www.ifeng.com" target="_blank">凤凰</a> <a href="https://www.taobao.com/" target="_blank">淘宝</a>
<a href="http://www.douyu.com" target="_blank">斗鱼</a> <a href="https://www.huya.com/" target="_blank">虎牙</a>
<a href="http://www.jd.com" target="_blank">京东</a> <a href="https://www.suning.com/" target="_blank">苏宁</a>
<a href="http://www.iqiyi.com" target="_blank">爱奇艺</a> <a href="http://sports.cctv.com//" target="_blank">CCTV5</a>
<a href="http://gs.hubu.edu.cn/" target="_blank">湖北大学研究生院</a> <a href="https://www.youku.com/" target="_blank">优酷</a>
</div>
</div>
<div id="article"> 
<div id="article1"> 
</div>
<div class="v"> 
</div>
<div id="article2"> 
</div>
<div id="article3"> 
</div>
</div>
<div class="a"> 
</div>
<div id="boot"> 
<div id="boot1"> 
</div>
<div class="a"> 
</div>
<div id="boot2"> 
</div>
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{
padding:0;
margin:0;
}
#first{
width:1366px; /* 外框*/
margin:0 auto;
}
#head{
width:100%;
height:200px;
text-align:center;
}

#head1{
width:678px;
height:130px;
background-color:#FFF;
float:left
}
#head1 span{
font-size:80px;
line-height:130px;
color:#FC3;
font-family:微软雅黑;
float:right;
padding-right:110px;
}
#head2{
width:678px;
height:130px;
background-color:#FFF;
float:right;
}
#head2 span{
font-size:24px;
float:right;
padding-right:20px;
}
#head3{
width:1366px;
height:50px;
background-color:#09F;
float:left;
margin-top:10px;
text-align:center;
}

a{
font-size:30px;
color:#FFF;
line-height:50px;
}
.a{
width:100%;
height:10px;
background-color:#FFF;
}
#article{
width:100%;
height:700px;
}
#article1{
width:333px;
height:700px;
background-color:#999;
float:left;
}
#article2{
width:680px;
height:700px;
background-color:#999;
float:left;
}
.v{
width:10px;
height:100%;
background-color:#FFF;
float:left;
}
#article3{
width:333px;
height:700px;
background-color:#999;
float:right
}
#boot{
width:100%;
height:200px;
background-color:#99F;
}
#boot1{
width:100%;
height:50px;
background-color:#000;
}
#boot2{
width:100%;
height:140px;
background-color:#000;
}

0 0