CSS综合练习（学校官网静态网页）
如何设置一个官网网页？
运行代码如下：
<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>
- 在设置类似于这种网页时，可以将元素放在盒模型中，通过设置盒子的属性（内容、内边距、边框、外边距），以及对盒子进行定位（相对定位、绝对定位、固定定位-相对于浏览器窗口进行定位），完成页面的布局。也可以利用浮动和清除浮动对盒子进行排列。
【注】相关知识点可参照前面的博客！
原文地址：https://blog.csdn.net/2302_80916083/article/details/143373189
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！