怎样使用DIV+CSS做格子广告位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样使用DIV+CSS做格子广告位相关的知识，希望对你有一定的参考价值。
<div><ul><li></li></ul></div>我要让每个<li>都做成一个75x26的虚线小格子，每个<ul>有几个<li>，请问我该怎么定义CSS样式呢.是<div class="">还是<ul class="">样式该怎么写/
参考技术A <style type="text/css">.boxborder:1px solid #000; padding:2px; overflow:hidden; width:316px;
.box lifloat:left; display:inline; margin:0 2px 2px 0; border:1px #dedede dashed; width:75px; height:25px; list-style:none;
.box2border:1px solid #000; padding:2px;width:75px;
.box2 limargin-top:2px; border:1px #dedede dashed; width:75px; height:25px; list-style:none;
</style>
<body>
<ul class="box">
<li>广告一</li>
<li>广告二</li>
<li>广告三</li>
<li class="last">广告四</li>
</ul>
<ul class="box2">
<li>广告一</li>
<li>广告二</li>
<li>广告三</li>
<li>广告四</li>
</ul>
自己挑下看要哪种的 参考技术B ul padding:0; margin:0
.boxborder-top:1px dashed #e4e4e4; border-left:1px dashed #e4e4e4; width:305px; margin:20px; overflow:hidden;
.box li float:left;width:75px; height:26px; line-height:26px; border-right:1px dashed #e4e4e4; border-bottom:1px dashed #e4e4e4; list-style:none; font-size:12px; text-align:center;
不知道你说的是不是这种 <ul class="box">
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
<li>广告位</li>
</ul> 参考技术C 你可以这样写css：liwidth:75px; height:26px; border:1px dashed #f00; overflow:hidden;此代码将li定义为75px*26px大小，1px红色虚线边框，且溢出部分隐藏！ 参考技术D CSS:
.ad
.ad ullist-style:none
.ad ul li width:75px; height:26px; border:1px #000; float:left
html:
<div class="ad">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div> 第5个回答 2013-03-27 div 里写css样式
利用CSS怎样写出三角形利用CSS+DIV怎样写
参考技术A <!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.a
border-bottom:1px solid #aaa;
height:50px;
width:100px;
position:relative;
overflow:hidden;
.b
position:absolute;
display:block;
top:0px;
left:0px;
width:100px;
height:50px;
.b i,.b em
position:absolute;
left:0px;
bottom:0px;
border-color:transparent;
border-color:rgba(255,255,255,0);
border-style:solid;
border-width:0 50px 50px 50px;
.b i
border-bottom-color:#aaa;
.b em
border-bottom-color:#FFF;
bottom:-1px;
.text
position:absolute;
bottom:10px;
background:none;
border:none;
outline:none;
text-align:center;
width:100%;
</style>
</head>
<body>
<div class = "a">
<span class = "b">
<i></i>
<em></em>
</span>
</div>
</body>
</html> 参考技术B 用after尾类，在你要设置剪头的快后面设置after尾类样式
div
position：relative
div:after
content:"";
position：absolute；
top：“”；
left：“”；
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
参考技术C 在网上搜一下会有很多的介绍
以上是关于怎样使用DIV+CSS做格子广告位的主要内容，如果未能解决你的问题，请参考以下文章