怎么用DIV+CSS编写下图效果
发布网友
发布时间：2022-04-22 05:41
共2个回答
热心网友
时间：2022-04-22 07:11
<strong>快速导航</strong>
<ul>
<li><a><img src="1.jpg" /></a></li>
<li><a><img src="2.jpg" /></a></li>
.....
</ul>
<a>更多>></a>
</div>
1.外面div设宽度、边框、相对定位
2.里面strong给背景图
3.ul里面的li全部浮动，设外边距
4.更多>> 绝对定位，定位到大div的右上角
实现时你主要会遇到下面几个问题：
ie双倍浮动边
最后一个li有外边距，浮动时div宽度不够会被挤到下一行
各种依靠内外、边距调整各元素位置
有可能产生错误的外边距自动合并
自己动手，不要找人要代码，就按我上面的思路自己做，弄懂了你就长进了一大截，直接给你代码你永远学不好。
热心网友
时间：2022-04-22 08:29
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.hyal{
width:auto;
height:auto;
margin-top:10px;
padding-left:2px;
text-align:left;
overflow:hidden;
}
.hyaltitle{
width:auto;
height:27px;
text-align:left;
border-bottom:solid 2px #900;
margin-bottom:5px;
}
.proctkj{
height:160px;
width:320px;
float: left;
margin:3px;
text-align:center;
padding:5px;
overflow:hidden;
}
.proctimage{
height:150px;
width:130px;
border: 1px solid #CCC;
float:left;
}
</style>
<body>
<div class="hyal">
<div class="hyaltitle">
<span class="title1">公司产品:</span></div>
<div class="proctkj">
<div class="proctimage">
</div>
</div>
</div>
</div>
</body>
</html>
