前端代码div+css是什么意思？

html-css020

前端代码div+css是什么意思？,第1张

在前端代码中，通常使用div+css来布局用户页面。通过这种组合方式，可以将网页的内容与样式分离，提高了前端开发的速度。下面就来使用div+css来实现两种导航栏的编写吧！

1.导航栏一：

<div id='menu'>

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>

</div>

*{margin:0padding: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:0padding: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.75rembackground:#00A2CA}

#menu li{display:inlineheight:3.75rem}

#menu li a{display:inline-blockpadding:0 1.25remheight:3.75remline-height:3.75rem

color:#FFFfont-weight:boldfont-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:960pxheight:700pxmargin:0 autoborder:solid 1px #999999" >

<div style="width:960pxheight:25pxborder:solid 1px #CCCCCC">

导航条

</div>

<div style="width:960pxheight:80pxborder:solid 1px #CCCCCC">

店铺图片

</div>

<div style="width:200pxheight:400pxborder:solid 1px #CCCCCCfloat:left">

左侧目录

</div>

<div style="width:750pxheight:400pxborder:solid 1px #CCCCCCfloat:right">

右侧内容

</div>

<div style="width:960pxheight:17pxborder:solid 1px #CCCCCCfloat:left">

尾区

</div>

<div style="width:960pxheight:173px border:solid 1px #CCCCCCfloat:left">

尾招

</div>

</div>

</body>

</html>

这就是一个网页的布局框架，内容就只需要自己去添加就可以了。