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

发布网友发布时间：2022-04-26 18:57

共3个回答

热心网友时间：2022-04-06 14:41

在前端代码中，通常使用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: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}

热心网友时间：2022-04-06 15:59

前端代码div+css，就是现在一种网页设计的一种实现方式，通过div+css，

可以现在对一些杂乱无章的图片和文字，进行排版和使用，

从而实现了人们通常看到的漂亮的网页。

具体看下代码：

<head>

<title>宽度的学习</title>

</head>

<body>

导航条

</div>

店铺图片

</div>

左侧目录

</div>

右侧内容

</div>

尾区

</div>

尾招

</div>

</body>

</html>

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

热心网友时间：2022-04-06 17:34

前端代码div+css，就是现在一种网页设计的一种实现方式，通过div+css，可以现在对一些杂乱无章的图片和文字，进行排版和使用，从而实现了人们通常看到的漂亮的网页，具体看下代码：

<head>

<link rel="stylesheet" type="text/css" href="CSS-kuai.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>
这就是一个网页的布局框架，内容就只需要自己去添加就可以了。