前端代码div+css是什么意思？
2019-09-06 · 让每一名学员高薪就业
四川源码时代科技有限公司
1.导航栏一：
<div id='menu'>
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>
</div>
*{margin:0;padding:0}
#menu{
min-width:400px;
height:20px;
background:#pink;
text-align:center;
line-height:20px;
font-size:10px;
}
#menu a{
padding:10px;
color:blue;
text-decoration:none;
font-weight:bold
}
#menu a:hover{color:red}
2.导航栏二：
<ul id="menu">
<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>
*{margin:0;padding:0}
body{min-width:500px;}
li{list-style:none}
body{text-align:center}
a{text-decoration:none}
a:hover{color:#BA2636}
#menu{ width:100%; height:3.75rem; background:#00A2CA;}
#menu li{display:inline; height:3.75rem}
#menu li a{display:inline-block; padding:0 1.25rem; height:3.75rem; line-height:3.75rem;
color:#FFF;font-weight:bold;font-size:1rem}
#menu li a:hover{background:#0095BB}
前端代码div+css，就是现在一种网页设计的一种实现方式，通过div+css，
可以现在对一些杂乱无章的图片和文字，进行排版和使用，
从而实现了人们通常看到的漂亮的网页。
具体看下代码：
<head>
<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>
<title>宽度的学习</title>
</head>
<body>
<div style="width:960px; height:700px; margin:0 auto; border:solid 1px #999999" >
<div style="width:960px; height:25px; border:solid 1px #CCCCCC;">
导航条
</div>
<div style="width:960px; height:80px; border:solid 1px #CCCCCC;">
店铺图片
</div>
<div style="width:200px; height:400px; border:solid 1px #CCCCCC; float:left;">
左侧目录
</div>
<div style="width:750px; height:400px; border:solid 1px #CCCCCC; float:right;">
右侧内容
</div>
<div style="width:960px; height:17px; border:solid 1px #CCCCCC; float:left;">
尾区
</div>
<div style="width:960px; height:173px; border:solid 1px #CCCCCC; float:left;">
尾招
</div>
</div>
</body>
</html>
这就是一个网页的布局框架，内容就只需要自己去添加就可以了。
<head>
<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>
<title>宽度的学习</title>
</head>
<body>
<div style="width:960px; height:700px; margin:0 auto; border:solid 1px #999999" >
<div style="width:960px; height:25px; border:solid 1px #CCCCCC;">
导航条
</div>
<div style="width:960px; height:80px; border:solid 1px #CCCCCC;">
店铺图片
</div>
<div style="width:200px; height:400px; border:solid 1px #CCCCCC; float:left;">
左侧目录
</div>
<div style="width:750px; height:400px; border:solid 1px #CCCCCC; float:right;">
右侧内容
</div>
<div style="width:960px; height:17px; border:solid 1px #CCCCCC; float:left;">
尾区
</div>
<div style="width:960px; height:173px; border:solid 1px #CCCCCC; float:left;">
尾招
</div>
</div>
</body>
</html>
这就是一个网页的布局框架，内容就只需要自己去添加就可以了。
