header link rel=stylesheet href=stylescss h1jiaochengh1 header body nav id=navbar header jiaocheng-leftheader ul lia class=nav-link href=#1tou1ali lia class=nav-link href=#2tou2ali lia class
要将nav标签和main标签改为左右结构，可以使用flexbox布局。首先，在styles.css文件中添加以下样式：
body {
display: flex;
}
#navbar {
width: 20%;
}
#main-doc {
width: 80%;
}
然后，在HTML代码中将nav标签和main标签的位置互换，并删除无用的header标签。修改后的代码如下：
<header>
<link rel="stylesheet" href="styles.css">
<h1>jiaocheng</h1>
</header>
<body>
<div id="navbar">
jiaocheng-left
<ul>
<li><a class='nav-link' href="#1">tou1</a></li>
<li><a class='nav-link' href="#2">tou2</a></li>
<li><a class='nav-link' href="#3">tou3</a></li>
<li><a class='nav-link' href="#4">tou4</a></li>
<li><a class='nav-link' href="#5">tou5</a></li>
</ul>
</div>
<div id="main-doc">
<section class='main-section' id="1">
<header>
tou1
</header>
<div>
<code> content1</code>
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</div>
</section>
<section class='main-section' id="2">
<header>
tou2
</header>
<div>
<code> content2</code>
</div>
</section>
<section class='main-section' id="3">
<header>
tou3
</header>
<div>
<code> content3</code>
</div>
</section>
<section class='main-section' id="4">
<header>
tou4
</header>
<div>
<code> content4</code>
</div>
</section>
<section class='main-section' id="5">
<header>
tou5
</header>
<div>
<code> content5</code>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
</div>
</section>
</div>
</body>
这样，nav标签和main标签就变成了左右结构
原文地址: https://www.cveoy.top/t/topic/h38G 著作权归作者所有。请勿转载和采集!