<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
.title{
height: 5%;
width: 100%;
background-color: red;
position: relative;
}
#img{
height: 100%;
width: 30%;
float: left;
background-color: blue;
}
#text{
position: absolute;
top: 30%;
right: 10%;
background-color: gray;
}
.list{
height: 7%;
width: 100%;
background-color: black;
position: relative;
overflow: hidden;
}
.l_ul{
display: inline-block;
width: 100%;
height: 100%;
}
.l_il{
display: inline-block;
color: white;
font-size:20px ;
width: 12.1%;
height: 100%;
text-align: center;
border-right: 1px solid white;
padding-top:10px ;
}
.img{
height: 40%;
width: 100%;
background-color: green;
position: relative;
}
.ind{
width: 200px;
height: 150px;
background-color: red;
position: absolute;
bottom: 20%;
left: 3%;
}
.img_left{
width: 50px;
height: 50px;
background-color: white;
text-align: center;
font-size: 50px;
position: absolute;
bottom: 0%;
right: 3%;
}
.img_ring{
width: 50px;
height: 50px;
background-color: white;
text-align: center;
font-size: 50px;
position: absolute;
bottom: 0%;
right: 6%;
}
.news_list{
width: 100%;
height: 15%;
background-color: gray;
position: relative;
}
.market{
width: 100%;
height: 15%;
background-color: #8B4513;
position: relative;
}
.bottom{
width: 100%;
height: 18%;
background-color: gray;
position: relative;
}
.c_l_d{
height: 100%;
width: 31%;
position: absolute;
}
.c_l_d:nth-of-type(1){
background-color: aquamarine;
}
.c_l_d:nth-of-type(2){
background-color: aquamarine;
right: 34%;
}
.c_l_d:nth-of-type(3){
background-color: aquamarine;
right: 0%;
}
.market_box{
width: 20%;
height: 80%;
background-color: #000000;
position: absolute;
}
.market_box:nth-of-type(1){
left: 1%;
}
.market_box:nth-of-type(2){
left: 26%;
}
.market_box:nth-of-type(3){
right: 27%;
}
.market_box:nth-of-type(4){
right: 3%;
}
.market_p{
width: 90%;
height: auto%;
position: absolute;
background-color: white;
top: 80%;
right: 5%;
word-wrap:break-word;
word-break:break-all;
}
.market_img{
width: 100%;
height: 77%;
position: absolute;
background-color: bisque;
top: 0%;
}
.bottom_box{
position: absolute;
}
.bottom_box:nth-of-type(1){
width: 40%;
height: 100%;
}
.bottom_box:nth-of-type(2){
width: 26%;
height: 100%;
left: 44%;
}
.bottom_box:nth-of-type(3){
width: 25%;
height: 100%;
right: 0%;
}
</style>
</head>
<body>
<!--標題搜索欄-->
<div class="title">
<div id="img">這里放logo</div>
<input type="text" name="" id="text" value="" />
</div>
<!--菜單導航欄-->
<div class="list">
<ul class="l_ul">
<li class="l_il">集團介紹</li>
<li class="l_il">產品中心</li>
<li class="l_il">臥龍市場</li>
<li class="l_il">技術研發(fā)</li>
<li class="l_il">國際合作</li>
<li class="l_il">投資者關系</li>
<li class="l_il">新聞資訊</li>
<li class="l_il">人力資源</li>
</ul>
</div>
<!--圖片輪播欄-->
<div class="img">
<div class="ind">介紹</div>
<div class="img_left">></div>
<div class="img_ring"><</div>
</div>
<!--新聞欄-->
<div class="news_list">
<div class="c_l_d">新聞資訊</div>
<div class="c_l_d">臥龍介紹</div>
<div class="c_l_d">人才招聘</div>
</div>
<!--市場欄-->
<div class="market">
<div class="market_title">臥龍市場</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">圖片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">圖片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">圖片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">圖片文字</p>
</div>
</div>
<!--底部欄-->
<div class="bottom">
<div class="bottom_box">
<p>產品中心</p>
<ul>
<li>汽車電機</li>
<li>日用電機</li>
<li>特種電機</li>
<li>大功率電機</li>
<li>電工設備</li>
</ul>
<ul>
<li>工業(yè)驅動和自動化</li>
<li>系統(tǒng)繼承</li>
<li>攪拌機</li>
<li>電動車輛</li>
</ul>
</div>
<div class="bottom_box">
<p>技術研發(fā)</p>
</div>
<div class="bottom_box">
<p>營銷網絡</p>
</div>
</div>
</body>
</html>
Day3-作業(yè)
?著作權歸作者所有,轉載或內容合作請聯系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來巴粪，“玉大人通今，你說我怎么就攤上這事粥谬。” “怎么了辫塌？”我有些...
- 正文 為了忘掉前任一也，我火速辦了婚禮巢寡，結果婚禮上喉脖，老公的妹妹穿的比我還像新娘椰苟。我一直安慰自己，他們只是感情好树叽，可當我...
- 文/花漫 我一把揭開白布舆蝴。 她就那樣靜靜地躺著，像睡著了一般题诵。 火紅的嫁衣襯著肌膚如雪洁仗。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼哩俭，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了拳恋？” 一聲冷哼從身側響起凡资，我...
- 正文 年R本政府宣布，位于F島的核電站薛闪，受9級特大地震影響辛馆，放射性物質發(fā)生泄漏。R本人自食惡果不足惜豁延，卻給世界環(huán)境...
- 文/蒙蒙 一昙篙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧诱咏，春花似錦苔可、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至苟鸯，卻和暖如春同蜻，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背早处。 一陣腳步聲響...
推薦閱讀更多精彩內容
- 班級分組+作業(yè)點評+規(guī)則科普 一、班級分組 1诉儒、首月葡缰，按照戰(zhàn)友編碼，將77人的班級分成7組忱反，每組11人泛释，每組有一名...
- 曲線：自己畫得曲線太丑，嚴重影響拓展 flow&bloom：最近蚊子咬得兇注竿，所以腦洞還算比較大 曲線：最近順了點茄茁，...
- 31-Justoneheart-北京-3 1負債：房貸付燥， 2日常開支： （1）家庭吃用3000/月，給父母 （2）...
