网页设计问题

2023-04-18 19:20:01html-css022

网页设计问题,第1张

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

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

<head>

<title>index</title>

#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>

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

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

</ul>

</div>

</body>

</html>

用相对路径和绝对路径都是可以的，关键是在css里面写的路径要保持一致。例如 css里面如果写 images/1.jpg ，css文件与a.html在同一文件夹下是没有问题的。如果b.html与a.html不在同一文件夹下的话。那么b.html调用css文件的话一定会出问题的。css里面可以这样写“/images/1.jpg ”把images文件夹放到网站根目录下就好了。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：怎么用js显示隐藏div

# 下一篇：怎么查看电脑的显卡?