首页 > 代码库 > 10月14日笔记

10月14日笔记

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>音乐</title>

<!-- 引入css样式文件 -->

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/yinyue.css">

</head>

<body>

<div id="container">

<!-- 导航条 -->

<div id="banner" class="f1">

<!-- 导航外框 -->

<div id="bb">

<!-- 导航左 -->

<div id="dhz">

<ul>

<li class="ss"><div style="width:120px; height: 50px;margin-top: 10px; "><img class="si" src="http://www.mamicode.com/1.png" alt="logo"></div></li>

<li class="ss">发现音乐</li>

<li class="ss">我的音乐</li>

<li class="ss">朋友</li>

<li class="ss">下载客户端</li>

</ul>

</div>

<!-- 导航右 -->

<div id="dhy">

<ul>

<li class="uni"><img src="http://www.mamicode.com/2.png" alt="logo" width="150px;" height="60px;"></li>

<li class="uni">登录</li>

</ul>

</div>

</div>

</div>

<!-- 轮播 -->

<div id="wrap" class="f1">

<img src="http://www.mamicode.com/1.jpg" width="1000px;" height="400px;" alt="lunbo">

</div>

<!-- 网站主体 -->

<div id="main" class="f1">

<!--主体左部  -->

<div id="left"></div>

<!-- 主体右部 -->

<div id="right"></div>

</div>

</div>

</body>

</html>

把style剪到一个新的文件用<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/yinyue.css">引用

body,ul{


margin:0px;

padding:0px;

}

#container{

width: 1000px;

height: 2000px;

/*居中*/

margin: 0 auto;

/*background: yellow;*/

}

.f1{

width: 1000px;

}

/*导航条*/

#banner{

height: 70px;

background-color: black;

/*下外边距*/

margin-bottom: 10px;

}

/*导航外框*/

#bb{

width: 800px;

height: 70px;

margin: 0 auto;

background-color: #000000;

}

/*导航左浮*/

#dhz{

width: 500px;

height: 70px;

background-color: black;

float: left;

}

/*导航右浮*/

#dhy{

width: 200px;

height: 70px;

background: black;

float:right;

}

/*轮播*/

#wrap{

height: 350px;

background-color: blue;

margin-bottom: 10px;


}

/*网站主体*/

#main{

height: 1500px;

background-color:#00ffff;

}

/*主体左部*/

#left{

width: 600px;

height: 1500px;

background: #ff0000;

float: left;

margin-right: 5px;


}

/*主体右部*/

#right{

width: 395px;

height: 1500px;

background: #ffff00;

float: left;

}

ul{

list-style: none;

text-align: center;

}

.si{

width: 120px;

height: 50px;

line-height: 70px;

}

.ss{

color: #fff;

float: left;

margin-right: 20px;

line-height: 70px;

}

.uni{

float: left;

line-height: 70px;

color: #fff;

}


10月14日笔记