如何设置一个官网网页？
运行代码如下：
<style>body{margin: 0px;}.container1{background:url(./top_proc.jpg);width: 100%;height: 150px;}.div1{width: 100%;height: 150px;}#img1{width: 40%;height: 90%;position: relative;top: 3%;left: 10%;}#img2{position: relative;top: 10%;left: 25%;}section div p{font-size: 30px;position: absolute;top: 10px;left: 70%;}nav ul{height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/background-color: rgb(54, 178, 54);margin-bottom: 0px;margin-top: 0px;}nav ul li{margin-right: 50px;float:left;padding-left: 50px;}.clear_ele a:link{color: white;text-decoration: none; /* 取消链接下划线 */}#div2{width: 20%;height: 600px;background-color: green;float: left;}#div3{width: 20%;height: 600px;background-color: green;float: right;}#div4{width: 60%;height: 600px;background-color: gray;margin-left: 20%;margin-right: 20%;}.img9{width: 20%;height: 30%;margin-top: 5%;margin-left: 2%;border: 2px red solid;}#div8{width: 200px;height: 200px;border: 2px black solid;background-color: pink;position: fixed;top: 550px;right: 100px;}footer{width: 100%;height: 25px;margin-top: -100px;background-color: rgb(54, 178, 54);clear: both;}</style>
</head>
<body>
<header><section class="container1"> <div class="div1"><img src="./logo.png" id="img1"><img src="./logo2.png" id="img2"><p><b>计算机学院</b></p></div></section>
</header>
<nav><ul class="clear_ele" type="none"> <li><a href="https://gdyfvccm.edu.cn/">学校首页</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> <li><a href="#">招生就业</a></li></ul>
</nav>
<article><div id="div6"><div id="div2"><b>学院新闻</b></div><div id="div3"><b>友情链接</b></div><div id="div4"><b>文章</b><br><br><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"><img src="./photo2.jpg" class="img9"></div><footer><p style="text-align: center;">版权所有 © 2024 广东云浮中医药职业学院计算机学院</p> </footer></div>
</article>
<aside><div id="div8"><h3>联系我们</h3>姓名：<input type="text"><br>邮箱：<input type="text"><br><input type="button" value="提交"></div>
</aside></body>
- 在设置类似于这种网页时，可以将元素放在盒模型中，通过设置盒子的属性（内容、内边距、边框、外边距），以及对盒子进行定位（相对定位、绝对定位、固定定位-相对于浏览器窗口进行定位），完成页面的布局。也可以利用浮动和清除浮动对盒子进行排列。
【注】相关知识点可参照前面的博客！
