网页设计问题

html-css021

网页设计问题,第1张

您好， 用css可以实现六边形蜂窝，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" mrc="text/html charset=gb2312" />

<title>index</title>

<style type="text/css">

#outer {

background:width:730px text-align:center padding-top:20px height:330px border:1px solid #000 position:relative}

* html #outer {height:350px height:330px}

#hex {padding:0 margin:0 auto list-style:none width:325px}

#hex li {display:block float:left width:104px margin-right:4px  height:120px}

#hex li.p1 {padding-left:54px}

#hex li.p2 {margin-top:-26px}

#hex li a {text-decoration:none color:#000 cursor:pointer}

#hex li a b {display:block width:0 height:0 overflow:hidden border-bottom:30px solid #ec0 border-left:52px dotted 

transparent border-right:52px dotted transparent}

#hex li a span {display:block width:104px height:60px line-height:59px text-align:center background:#ec0 

font-size:11px font-family: arial, veradana, sans-serif}

#hex li a em {display:block width:0 height:0 overflow:hidden border-top:30px solid #ec0 border-left:52px dotted 

transparent border-right:52px dotted transparent}

* html #hex li a b, * html #hex li a em {width:104px height:30px w\idth:0 he\ight:0}

#hex li a.inner b {border-bottom-color:#c60}

#hex li a.inner span {background:#c60}

#hex li a.inner em {border-top-color:#c60}

#hex li a:hover {white-space:normal color:#fff}

#hex li a:hover b {border-bottom-color:#c90}

#hex li a:hover span {background:#c90}

#hex li a:hover em {border-top-color:#c90}

#hex li a.inner:hover b {border-bottom-color:#a40}

#hex li a.inner:hover span {background:#a40}

#hex li a.inner:hover em {border-top-color:#a40}

#flower {width:100px height:100px position:absolute left:45px top:110px background:transparent}

#flower b {display:block width:0 height:0 overflow:hidden border-top:23px dotted transparent border-bottom:23px 

dotted transparent position:absolute cursor:pointer}

/* hack for IE5.5 */

* html #flower b {width:39px height:46px w\idth:0 he\ight:0}

#flower a, #flower a:visited {text-decoration:none}

#flower b.p1 {border-right:39px solid #ec0}

#flower b.p2 {border-left:39px solid #c60}

#flower b.a1 {top:1px left:9px}

#flower b.a2 {top:1px right:9px}

#flower b.a3 {top:27px left:7px}

#flower b.a4 {top:27px left:54px}

#flower b.a5 {top:53px left:9px}

#flower b.a6 {top:53px right:9px}

#flower a:hover {white-space:normal cursor:pointer}

#flower a:hover b.p1 {border-right:39px solid #c60}

#flower a:hover b.p2 {border-left:39px solid #ec0}

</style>

</head>

<body>

<!-- the menu -->

<ul id="hex">

<li class="p1"><a href="/"><b></b><span>教学资源</span><em></em></a></li>

<li><a href="/"><b></b><span>财务查询</span><em></em></a></li>

<li class="p2"><a href="/"><b></b><span>图书馆</span><em></em></a></li>

<li class="p2"><a class="inner" href="/"><b></b><span>校领导邮箱</span><em></em></a></li>

<li class="p2"><a href="/"><b></b><span>信息查询</span><em></em></a></li>

<li class="p1 p2"><a href="/"><b></b><span>招标公示</span><em></em></a></li>

<li class="p2"><a href="/"><b></b><span>校园一卡通</span><em></em></a></li>

</ul>

</div>

</body>

</html>

list-styleCSS1IE4+ , NS4+有复合属性。设置列表项目相关内容list-style-imageCSS1IE4+ , NS6+有设置或检索作为对象的列表项标记的图像list-style-positionCSS1IE4+ , NS6+有设置或检索作为对象的列表项标记如何根据文本排列list-style-typeCSS1/CSS2IE4+ , NS4+有设置或检索对象的列表项所使用的预设标记marker-offsetCSS2NONE无设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距

1、用list-style属性就可去掉点。操作方法是首先打开html编辑器，新建一个html文档，里面新建一个无序列表：

2、然后在上方引入style标签，在里面设置样式，这里设置一下背景色和字体方便观察效果，再设置li标签的list-style属性的值为none，设置完保存打开浏览器：

3、最后在浏览器中就可以看到效果了，此时出现的就是没有点的列表了：