收藏
批改狀態(tài)：合格
老師批語：指教談不上, 教學相長, 從你們身上我也在進步, 布局寫得不錯的, 畢竟是初學
網站簡單布局
布局格式參考目前單位的一個樣式，簡單了點，抱歉，大致是這個樣子，圖片有鏈接到各個生產區(qū)域等等，主要提供給生產部門，方便查看實時信息與交互信息等等。
以下是源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<style type="text/css">
/*設置全局邊框距離*/
body {
margin: 0;
}
.head {
/* background: #cccccc;*/
}
.head .head_content {
width:70%;
background-color: black;
margin: 0 auto;
height: 50px;
}
.head .head_content .nav {
margin: 0;
padding: 0;
}
.head .head_content .nav .item, .body_left_ul li {
list-style: none;
}
.head .head_content .nav .item a {
float: left;
min-width: 100px;
min-height: 50px;
text-align: center;
line-height: 50px;
color: white;
padding: 0 5px;
text-decoration: none;
}
.head .head_content .nav .item a:hover {
background-color: coral;
font-size: 1.1rem;
}
/*主要內容*/
.body {
width: 70%;
min-height: 800px;
background-color: lightgray;
margin: 0 auto;
}
.body_left {
width: 20%;
height: 800px;
background-color: lightgray;
float: left;
}
.body_content {
width: 80%;
height: 800px;
background-color: cornflowerblue;
float: left;
}
.body_left_ul {
width: 100px;
line-height: 80px;
font-size: 18px;
}
.body_left_ul li a:hover {
color: white;
}
.body_left_ul li a {
text-decoration: none;
}
.body_content_1,.body_content_2,.body_content_3
{
width: 320px;
height: 240px;
margin-left: 30px;
margin-top: 20px;
float: left;
}
.body_content_m {
width: 95%;
height: 480px;
margin: 20px auto;
}
.body_content_m img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.body_content_1 img,.body_content_2 img,.body_content_3 img
{
width: 100%;
height: 100%;
border-radius: 10px;
}
.footer {
/* background-color: #cccccc;*/
}
.footer .footer_content {
width:70%;
height: 50px;
margin: 0 auto;
background-color: gray;
}
.footer .footer_content p {
text-align: center;
line-height: 50px;
}
.footer .footer_content p a {
text-decoration: none;
color: #999999;
}
.footer .footer_content p a:hover {
color: white;
}
/* 底部*/
</style>
</head>
<body>
<!--頭部內容-->
<div class="head">
<div class="head_content">
<ul class="nav">
<li class="item"><a href="">首頁</a></li>
<li class="item"><a href="">生產早會</a></li>
<li class="item"><a href="">KPI查詢</a></li>
<li class="item"><a href="">實時監(jiān)控</a></li>
<li class="item"><a href="">報告信息</a></li>
</ul>
</div>
</div>
<!--主體內容-->
<div class="body">
<div class="body_left">
<ul class="body_left_ul">
<li class="body_left_ul_1"><a href="">生產控制</a></li>
<li class="body_left_ul_2"><a href="">質量反饋</a></li>
<li class="body_left_ul_3"><a href="">技術支持</a></li>
<li class="body_left_ul_4"><a href="">IPSL/IPST</a></li>
<li class="body_left_ul_5"><a href="">前處理</a></li>
</ul>
</div>
<div class="body_content">
<div class="body_content_m"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567957860013&di=9668e9a429da86b0fa76d78507e217da&imgtype=0&src=http%3A%2F%2Fwww1.pcauto.com.cn%2Ffenzhan%2Fnn%2F201410%2Fbenchi%2Fimages%2F21.jpg" alt=""></div>
<div class="body_content_1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567957655265&di=1b62ee41cf2f114f03cd0008cf385b55&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20140409%2FImg397934455.jpg" alt=""></div>
<div class="body_content_2"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567957676483&di=ca4618490c5f38e80f5fda9aa4deae27&imgtype=0&src=http%3A%2F%2Fimage.bitauto.com%2Fdealer%2Fnews%2F100001340%2Fecfe941e-c95d-4ced-96f7-1b0af4141dc6.jpg" alt=""></div>
<div class="body_content_3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567957691463&di=4eb5747117c3c8132008f045f91fed81&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20170515%2FImg493102434.jpg" alt=""></div>
</div>
</div>
<!--尾部內容-->
<div class="footer">
<!--底部-->
<div class="footer_content">
<p>
<a href="">? 寶馬中國</a>
</p>
</div>
</div>
</body>點擊 "運行實例" 按鈕查看在線實例
外觀樣式一般，可以有很多改進，多謝老師指點不足
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
