请用DIV布局把这个大致代码写出来,谢谢

发布网友发布时间：2022-05-06 14:22

共2个回答

热心网友时间：2022-05-14 09:18

教你一个最简单的
使用方便快捷。
如果需要请先采纳。以后遇到先关问题也自己能搞定
<head>
引入 jquery

引入bootstrap.js

引入bootstrap.css

</head>
<html>

<div>

<nav class="navbar navbar-default">
<div class="col-md-3"> log</div>
<div class="col-md-9"> 导航</div>
</nav>
</div>

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>

<div class="row">



<div class="col-md-4">

中间就省略了简单

</div>

<div class="col-md-6">

中间就省略了简单
</div>

<div class="col-md-2">

中间就省略了简单
</div>
</div>

</div>
<div class="row">footer</div>

</html>追问说实话，你的比较通俗易懂，给赞，大牛你也辛苦了

热心网友时间：2022-05-14 10:36

/* css */
body { padding:0; margin:0; }
.clear { clear:both; }
#main { width:1000px; margin:auto; }
#top div { height:100px; }
#logo { width:300px; background-color:#FC0; }
#nav{ float:right; width:700px; background-color:#09F; }
#middle { width:900px; margin:auto; }
#bigpic{ height:200px; background-color:#CCF; }
#left { float:left; width:290px; margin-right:15px; }
#search { height:100px; background-color:#3C3; }
#login { height:200px; background-color:#3C9; }
#infolist { height:300px; background-color:#3CC; }
#center { float:left; width:390px; margin-right:15px; }
#rollpic { height:200px; background-color:#F60; }
#newlist { height:200px; background-color:#F90; }
#staticpic { height:200px; background-color:#FC0; }
#right { float:left; width:190px; }
#right_div1 { height:200px; background-color:#06F; }
#right_div2 { height:200px; background-color:#09F; }
#right_div3 { height:200px; background-color:#0CF; }
#bottom { height:100px; background-color:#C0F }

<div id="main">
    <div id="top">
        <div id="nav">导航</div>
        <div id="logo">logo</div>
    </div>
    <div id="middle">
        <div id="bigpic">一张大图片</div>
        <div id="left">
        <div id="search">搜索</div>
        <div id="login">登录</div>
        <div id="infolist">信息</div>
        </div>
        <div id="center">
        <div id="rollpic">图片滚动条</div>
        <div id="newlist">新闻列表</div>
        <div id="staticpic">静态图片</div>
        </div>
        <div id="right">
        <div id="right_div1"></div>
        <div id="right_div2"></div>
        <div id="right_div3"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="bottom">footer</div>
</div>