中关村在线平台简单的网页界面设计

最新推荐文章于 2024-06-05 08:45:00 发布

努力的小航子

最新推荐文章于 2024-06-05 08:45:00 发布

阅读量302

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_42893577/article/details/106995069

版权

网页设计专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 350px;height: 600px;float: left;position: relative;
}
.box1 li{
width: 23px;height: 4px;background: darkgray;list-style: none;margin: 0 10px;float: left;
}
.box1 li:hover{background: dodgerblue;}
.box1 ul li:hover img{
display: block;position:absolute;top: 0px;left: 0px;
}
.box1 ul li img{
display: none;
}
.pic1{
width: 350px;height: 260px;
}
.box1 a{color: black;text-decoration: none;font-size: 18px;margin-top: -2px}
.box1 a:hover{
padding-bottom: 10px;
border-bottom: 2px solid blue;
}
.pic2{
width: 170px;float: left;margin-right: 10px;
}
.pic3{
width: 170px;float: left;
}
.word{
font-size: 14px;color: gray;
}
.box2{
width: 350px;height: 600px;float: left;position: inherit;margin-left: 25px;
}
.box2 a{
color: black;text-decoration: none;font-size: 18px;margin-left: 10px;margin-right: 10px;
}
.box2 a:hover{
padding-bottom: 8px;
border-bottom: 2px solid blue;
}
.box2 h3{
font-size: 18px;color: red;text-align: center;margin-top: 5px;
}
.box2 h6{
font-size: 12px;color: gray;text-align: center;margin-top: -10px;
}
.box2 li{
font-size: 13px;color: steelblue;width: 350px;height: 25px;text-decoration: none;margin-top: 7px;list-style: none;
}
.dian{
width: 500px;line-height: 13px; color: darkgray; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.boxkuai{
width: 50px; height:30px;background: url("img/pic.PNG");text-align: center;color: deepskyblue;
}
.pur{
color: mediumpurple;
}
.box2 strong{
font-size: 16px;color: steelblue;
}
.box3{
width: 240px;height: 600px;margin-left: 25px;float: left;
}
.wo1{
font-size: 16px;color: black;
}
.wo2{
font-size: 12px;color: darkgray;
}
.box4{
width: 240px;height: 170px;border-top: 2px solid dodgerblue;border-left: 1px solid darkgray;border-right: 1px solid darkgray;
}
.box4 h1{
font-size: 14px;color:darkblue;padding-left: 10px;
}
.box4 a{
font-size: 12px;color: gray;padding-left: 10px;padding-right: 3px;padding-bottom:3px;text-decoration: none;
}
.box5{
width: 240px;height:90px;border-bottom:1px solid white;
}
.box4 hr{
width: 218px;color: darkgray;text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1.jpg" class="pic1">
<ul>
<li><img src="img/1.jpg" class="pic1"> </li>
<li><img src="img/2.jpg" class="pic1"> </li>
<li><img src="img/3.jpg" class="pic1"> </li>
<li><img src="img/4.jpg" class="pic1"> </li>
<li><img src="img/5.jpg" class="pic1"> </li>
<li><img src="img/6.jpg" class="pic1"> </li>
</ul>
<br/><br/>
<a href="#">视频精选</a>
<hr color="gray"/>
<a href="#"><img src="img/huawei.jpg" class="pic2"></a>
<a href="#"><img src="img/chabie.jpg" class="pic3"></a>
<span class="word">华为畅享7 plus做工如何？   你能看出差别吗？</span>
</div>
<div class="box2">
<a href="#">今日焦点</a>
<a href="#">本地行情</a>
<img src="img/calc.PNG" width="18px">
<a href="#">视频精选</a>
<hr color="gray"/>
<h3>掌握了这些DIY小技巧装机从此再无新手</h3>
<h6>[正确涂硅脂的方法要这样] [最全跳线教程]</h6>
<li style="font-size: 10px"><span class="dian">•  </span><span class="boxkuai">  快讯 </span> Meto五道口店火爆异常 负责人道出原委     <span style="color: darkgray">09:42</span> </li>
<li><span class="dian">•  </span>早报：苹果发WWDC邀请函坚果Pro售1499起</li>
<li><span class="dian">•  </span>Win10 RTM结束官方支持三星等将推eSIM手机</li>
<li><span class="dian">•  </span>苹果iOS11将支持点对点支付 <span class="pur"> 东芝与西数要闹掰</span></li>
<li><span class="dian">•  </span><span class="pur">比特币要涨到4千美元</span> WhatsApp发力视频通话</li><br/>
<li><span class="dian">•  </span><strong>广受好评 AMD Ryzen 5当选近10年最佳CPU</strong></li>
<li><span class="dian">•  </span>旗舰机这么买能省一大笔骁龙660将坚果Pro踩脚下</li>
<li><span class="dian">•  </span>魅族魅蓝E2拆解图赏锤子坚果Pro上手尝鲜评测</li>
<li><span class="dian">•  </span>379元买傲腾还是SSD 机械键盘笔记本这样酷炫</li>
<li><span class="dian">•  </span>全球最壮观的大坝世界颜值最高的斑马线</li>
<li><span class="dian">•  </span>激光电视这两大特点你得服爱谱王B131双动圈耳</li>
</div>
<div class="box3">
<img src="img/guanggao.jpg" width="240px"/><br/><br/>
<span class="wo1">产品报价</span>  <span class="wo2">产品入库</span><br/><br/>
<div class="box4">
<div class="box5">
<h1>智能手机、通讯产品</h1>
<a href="#">iPhone 7</a><a href="#">华为P10</a><a href="#">OPPO R9s</a><br/>
<a href="#">三星S8</a><a href="#">vivo X9</a><a href="#">华为Mate9</a><hr/>
</div>
<h1>笔记本、二合一、台式电脑</h1>
<a href="#">联系</a><a href="#">华硕</a><a href="#">惠普</a><a href="#">神舟</a><a href="#">戴尔</a>
<hr/>
</div>
</div>
</body>
</html>