html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/css.css">
<body>
<div style="background: rgb(255, 255, 255);" id="t">
<div>
<img src="./image/logo_cn.png" alt="">
<div>
<p style="color: rgb(192, 193, 194);">中文|English|加入收藏|设为首页</p> <br>
<input style="padding: 8px; background: rgb(238, 236, 236);" type="text" placeholder="Google站内搜索">
</div>
</div>
<br>
</div>
<div id="dh">
<div>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">首页</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">公司简介</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">展品展示</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">企业展示</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">新闻中心</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">科瑞文稿</a></li>
<li><a style="color: rgb(255, 255, 255);" href="./web.html">联系我们</a></li>
</div>
</div>
<div id="lb">
<br>
<div>
<img width="100%" src="./image/slide_cn_2.jpg" alt="">
</div>
</div>
<div id="zj">
<br>
<div>
<li style="padding: 15px; background: rgb(1, 90, 170); color: rgb(255, 255, 255);">
新闻中心
</li>
<span style="padding: 15px; background: rgb(244, 244, 244);color: rgb(34, 34, 34);">[2014-03-06] <span
style="color: rgb(92, 92, 92);">江西科睿新材料有限公司网站正式上线:通过不懈努力,江西科睿新材料有限公司网站正式上线了
</span>
</span>
</div>
</div>
<br>
<div id="sz">
<div>
<div style="height: 90%; width: 30%;">
<li style="color: rgb(120, 45, 190);">公司简介
<span style="color: rgb(136, 135, 135);">More></span>
</li>
<br>
<ul style="background: rgb(244, 244, 244); padding: 9px;">
<img width="100%" src="./image/slide_cn_1.jpg" alt="">
<br>
江西科睿新材料有限公司成立于 2014年初,是一家专业从<br>
事有机硅系列产品的研发﹑生产及销售的高新技术企业。公<br>
司位于江西昌九工业走廊中段﹑古有“洪都之门”的江西永<br>
修云山经济开发区星火工业园,东靠京九铁路、西临昌九高<br>
速公路,距南昌45公里、昌北机场25公里,交通十分便利…<br>
</ul>
</div>
<div style="height: 100%; width: 42%;">
<li style="color: rgb(120, 45, 190);">产品推荐
<span style="color: rgb(136, 135, 135);">More></span>
</li>
<br>
<ul style="background: rgb(244, 244, 244);">
<li>> 六甲基二硅氧烷
(CAS No.:107-46-0) </li><br>
<li>> 1,1,3,3-四甲基二硅氧烷
(CAS No.:3277-26-7)</li><br>
<li> > 1,1,1,3,5,5,5-七甲基三硅氧烷
(CAS No.:1873-88-7)</li><br>
<li>> 硅油封头剂(MDM);
(CAS No.:63148-62-9 )</li><br>
<li>> 四甲基二乙烯基二硅氧烷 (CAS No.:2627-95-4)</li>
<br>
<li>> 含氢硅油
(CAS
No.:63148-57-2 )</li>
<li>> 六甲基二硅氮烷
(CAS No.:999-97-3)</li><br>
</ul>
</div>
<div style="height: 100%; width: 28%;">
<li style="color: rgb(120, 45, 190);">联系我们
</li>
<br>
<li style="background: rgb(244, 244, 244); padding: 9px;">
饶先生<br>
<br>
江西省永修县<br>
星火工业园希望大道7号<br>
330319 <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</li>
</div>
</div>
</div>
</div>
<br>
<br>
<div id="db">
<div style="padding: 10px;">
<span style="size : 20px; color: rgb(143, 33, 247);"> 企业展示</span>
</div>
<div id="ss" style="color: rgb(255, 255, 255);">
<ul style="width: 100%; height: 100%;">
<img src="./image/8.jpg" alt="">
<img src="./image/9.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/4.jpg" alt="">
<img src="./image/6.jpg" alt="">
</ul>
</div>
</div>
</body>
</html>
css
*{
margin: 0%;
padding: 0%;
list-style-type: none;
text-decoration: none;
}
@media screen and(max-width:1300px) {
html,
body {
height: 100%;
width: 1200px;
}
}
body{ background: rgb(234, 233, 231);}
#t>div {
display: flex;
margin: auto;
justify-content: space-between;
width: 80%;
align-items: center;
}
#dh{background: rgb(1, 90, 170) ; padding: 17px;}
#dh>div{display: flex; margin: auto; width: 80%; justify-content: space-around;
}
#dh>li{padding: 12px 20px;}
#dh{padding: 18 px 14px 18px 14px;}
#dh>div>li:hover{background: rgb(250, 143, 36); padding: 18px 14px 18px 14px;}
#lb>div{display: flex; margin: auto; width: 80%;}
#zj>div{display: flex; margin: auto; width: 80%; justify-content: center; align-items: center; justify-items: center;}
#sz>div{display: flex; margin: auto; width: 80%; ;}
#db>div{display: flex; margin: auto; width: 80%; align-items: center; }
#ss{justify-content: space-around}