为什么字体重叠了？
来源：2-11 垂直菜单开发（2）
夕阳升起了
2023-06-09 13:23:22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新加坡旅游-机票、酒店</title>
<mate name="keywords" content="机票、酒店、签证、"></mate>
<mate name="description" content="新加坡旅游商城有10年行业经验，为您提供全方位的旅游服务"></mate>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<script src="../ziti/iconfont.js"></script>
<body>
<!-- 网页头部 -->
<header class="site-head">
<!-- 头部小黑条 -->
<div class="topbar">
<div class="center-wrap">
<div class="shortcut-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="c">
<a href="">社区</a>
<em>
<b></b>
<i></i>
</em>
<div class="nm xc">
<ul class="ll">
<li><a href="">机酒自由行</a></li>
<li><a href="">吃喝玩乐</a></li>
<li><a href="">签证</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车行</a></li>
<li><a href="">邮轮</a></li>
<li><a href="">铁路</a></li>
<li><a href="">私人定制</a></li>
<li><a href="">欧洲铁路</a></li>
</ul>
</div>
</li>
<li>
<a href="">行程助手</a>
</li>
<li class="c">
<a href="">商城</a>
<em>
<b></b>
<i></i>
</em>
<div class="nm nb">
<ul class="ll">
<li><a href="">夏威夷酒店</a></li>
<li><a href="">7天连锁酒店</a></li>
<li><a href="">汉庭酒店</a></li>
<li><a href="">华住酒店</a></li>
<li><a href="">首家酒店</a></li>
<li><a href="">上海金茂酒店</a></li>
<li><a href="">广州花园酒店</a></li>
<li><a href="">北京中国大酒店</a></li>
<li><a href="">美国华盛顿酒店</a></li>
<li><a href="">新加坡帆船酒店</a></li>
</ul>
</div>
</li>
<li class="c">
<a href="">酒店·民宿</a>
<em>
<b></b>
<i></i>
</em>
<div class="nm vc">
<ul class="ll">
<li><a href="">旅行问答</a></li>
<li><a href="">旅行专栏</a></li>
<li><a href="">旅行论坛</a></li>
<li><a href="">旅行生活分享平台</a></li>
<li><a href="">负责任的旅行</a></li>
<li><a href="">旅行策划</a></li>
<li><a href="">旅行生活美学</a></li>
<li><a href="">UIN伴侣</a></li>
</ul>
</div>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</div>
<div class="ji">
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Magnifier"></use>
</svg>
</a>
<a href="" class="t">|</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-douyin"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kuaishou"></use>
</svg>
</a>
<a href="" class="t">登陆</a>
<a href="" class="t">注册</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="word">
<div class="gt">
<div class="bjn">
<ul>
<li class="v"><a href="">机酒自由行</a>
<div class="klo bji">
<dl>
<dt><b>全部</b></dt>
<dd>
<a href="">美国🇺🇸</a>
<a href="">非洲🌍</a>
<a href="">南极🇦🇶</a>
</dd>
</dl>
</div>
</li>
<li><a href="">优惠机票</a></li>
<li class="v"><a href="">跟团游</a>
<div class="klo xsa">
<dl>
<dt><b>全部</b></dt>
<dd>
<a href="">跟团游</a>
<a href="">半自助游</a>
</dd>
</dl>
</div>
</li>
<li><a href="">酒店</a></li>
<li class="v"><a href="">当地玩乐</a>
<div class="klo gh">
<dl>
<dt><b>全部</b></dt>
<dd>
<a href="">日游小团</a>
<a href="">深度体验</a>
<a href="">门票优惠</a>
<a href="">购物</a>
<a href="">WIFI电话卡</a>
<a href="">餐饮美食</a>
</dd>
</dl>
</div>
</li>
<li><a href="">签证</a></li>
<li><a href="">游轮</a></li>
<li><a href="">河轮</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车自驾</a></li>
<li class="v"><a href="">深度旅游</a>
<div class="klo hj">
<dl>
<dt><b>全部</b></dt>
<dd>
<a href="">特色</a>
<a href="">美食</a>
<a href="">飞机</a>
</dd>
</dl>
</div>
</li>
<li><a href="">私人定制</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部logo -->
<div class="kl">
<div class="gy">
<h1>新加坡商城</h1>
<div class="soso">
<input type="text" placeholder="查询目的地、酒店、机票">
<a class="df">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Magnifier"></use>
</svg>
</a>
</div>
</div>
</div>
</header>
<!-- 网页bnner -->
<section class="bnner">
<img src="./images/banner5.jpg">
<div class="huj">
<div class="dao">
<a class="leftz" href="">
<xml version="1.0" encoding="UTF-8" ?>
<svg width="28px" height="45px" viewBox="0 0 28 45" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左按钮" x="-2" y="0" width="32" height="44.0479616"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsCAYAAAAEuLqPAAAABGdBTUEAALGN5fIAKQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAALAAAAABKvq3IAAABrUlEQVRYCe2YzUrDQBSF21pLAwHBmuyyqrSv4E5dBFeKbR/CvpLv0EURty0VN0J3gSAky9RNBCEqEiH+3CNtOkgXM8kkiMyFm1yGyTnf3Az9mWplHXUqzygPKHfWw1KriNTuKK8oEyhv4bKMc7qfUDZXAwXcob1PicXeQ7+GyzKw8rIi9WIBimr7pkWlXizApomFjykA1QHVAdWB/9EBwzC2p9Pp0WAwMEU/Otlvw1PRhzEf5uPx+LDb7e7Ztm15nvfo+/4bh9Y15uR6BSvzdru9C7EwDF8dx3lBzRuZAX6bLxaLqNfrzYIgeOc1x7xMALLMMwHINBcGkG0uBNBqterY7asNR+/8Ocs7hykb3HsgSZKvOI5/fslCoNFo1DRN436eNWVrboEoij76/f6t67ohBEzT1Eej0XGn09FYQdGaGwDCRUAIARQBIQwgGyITgEyIzACbIHRdb1qWJbQpcwGwEPP5/GE4HM4mk8kTxnmjyky8ZOoyyguY5O5AXlIFoDqgOqA68Kc6gEPEsiL1YjuAE8yyIvVi/xv65I4TTIOyqNNSrPyGEke1n5SVb5ZpwMklPZbCAAAAAElFTkSuQmCC">
</image>
</g>
</svg>
</a>
<a class="righty" href="">
<xml version="1.0" encoding="UTF-8" ?>
<svg width="28px" height="44px" viewBox="0 0 28 44" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="右按钮" x="-2" y="0" width="32" height="44"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsCAYAAAAEuLqPAAAABGdBTUEAALGN5fIAKQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAALAAAAABKvq3IAAAB3UlEQVRYCWNkQAAWINMPiC2AmB8hTFXWR6BpJ4B4ExD/AZnMDCKgIABIuwMxB0yABjTIbBUgBnn2Osh8JhABBSCf0wvA7UJ2AK2CHZun4HYhOwCbQpqLjTpgNARGQ2A0BIZeCIiKirIWFBQoUKuIBNVKRAOQ5Rs2bLBXVlYWEhcX56ysrATXaEQbgEUhSVFga2srKC8vLwAyJzExUbe9vV0Ti5kkCSG3B3wJ6bx+/frXt2/ffnB0dJRhYmJiNDQ0FBcWFv63d+/eN4T0YpHfAhIjyQEgDRcvXvxMJUeQ5wAqOoJ8B1DJEZQ5gAqOADuApFwAshQdLF68+NmVK1dewcTDw8M1gdmU6IYtRQ4A5gSGefPmGRsYGEiAHPDt27c/GRkZB+7evfsD5iBCNNkOgFnu4eGhjGz5rl273hGyFFmeLAdQy3KQQ0h2ADUtJ9kB1LacZAfExcVJUxrnIEuRAUlF8YULFz4DKyNmRUVFAVBqJzXBIVsMZIPLAUYkwZlIbLxMTU1NLmDF9A2vIsKS6SAlJCdCkCYqWA4yBgzIcgBMMzXoUQeMhsBoCIyGAHIIgAYR6QXgdiE7ADSCSS8Atwu5NrwNtB3UVxQFYqIblSS6GOTzg0AMGqr9B9ILAGCVwhKP7JgRAAAAAElFTkSuQmCC">
</image>
</g>
</svg>
</a>
<ul>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="18px" viewBox="0 0 22 18" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="测导航图标01" x="-1" y="-3" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACLUlEQVRIDe1Tz0tUURQ+577rGEFFIgYTTtHCRZtamG8qSWVGwT/AVRS0btkqKHDRIsJ94MJFtAlXUoto7qT4YxqCiDYu/IFvRnMhDYGTZc68ezp3ap6jeefNwpV44b177jnf+b57zjsP4HiFdABtcbeQPY1bm70Rp/nz9PmeVRsuzC9sACoWn2sfJrZ3dma711SHDRfmtwpEIvAQEX8BUKxU0jM3ViavhpEdFLcKzEb780w+YpIIoK0M5Sk3l+o+iKSezypgktoiLU+5iq9/CegMK72Le+nBeoT7Y9aPXAXGPXVbk35ZPQNgSTh4JxtLvtr1AfTSpNzOk0va73AcMZ2JJZZNPFSAiDCeUxne4wEhghYE91HinF+GJCIkuLpbBHSqQoqwduVCy6VR7CyFCpiE66vpLt/XWWCxQKSegVj4eLG/1UCkeQ3SYnPB8ya4Htkk6O5cbGDd+Cv/wo+tHl32kxzjiYKTxm9bXInHN0hLic+qmOBGrqdGiPQDdmwA4guenJtsX+PWVC5RTajdmfA7d/k9EimUTepDe99SbdzYuwL858JmcYH7eG4/qOb8m6cqwxglhUgNtCc+DSPqmvh/ZiBgIu5K6h4njwUoRC6EviCgEgJUqzw78zra+TOIN2DsEfg3MW8AaQNRvD0hnfRUtO9bAzxHGBK0aIjIAZjn5zDWZX8c0TdMwQjmc2qYv8Gjw6BHXH/CPI/3CPC0EA9t3ZFrXJy5jlejHfgDmj6+MWRuCLsAAAAASUVORK5CYII=">
</image>
</g>
</svg>
</div>
<dl class="remen">
<dt>热门出发地</dt>
<dd>
<em>香港🇭🇰</em>
<em>澳门🇲🇴</em>
<em>台湾</em>
<em>国内其它</em>
</dd>
</dl>
</li>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="21px" viewBox="0 0 18 21" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左导航图标02" x="-3" y="-1" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB4ElEQVRIDe1U3UoCURCeWS2orqMfKddXqEirmwI3yLcxUIjKJAjCwt6h3qELNeqmYqWeQSWC6AUizZ1m/OOcU6wWdFF0cN2Z+b755uyZnQX44YWD6EerpTUCSjN3ocO/Q8Cca8cv++X3LRCtFTJEmAX+08QQiX9ZN7y+r8UNxzJ8zY1ViqttcXjjHW/hqDUZHBmbAMQ0F2wIJhwtyXCChq+5vOeU7JzFM27EOVTAo1itYHkeHTKa4viVgmmm/tgdKEvUerLzavGJQ+NDAQg5M47YvVV8KE42mvDIAs8btjO1B8C1kHqEjqEVWKpeLHvUPGHWokkcxGcxN4BW8saO33b5Wg9YPP9dcRHk3GgTKN8Vl7tWQAgqKE1N2E6Am6odT4vDMcGEo+YQUUz1tQIqIDa+4FwW0bOITj9gAGeCCcfEVN+3AIGX4h3hjB3aZWJOGtq6EI9nw9M7gglHFTRtrcmLlQKfkrEQDxLheEZ2qyLypp3XSvv8Gm+rcbHLkfWebs8Q4NMCHOdBuOZZyFvD1r3wvLo3z5+OTSJYEd9cagHfQesmihALrnivzW5o4LtvDwZW8SH+F/A5nDb0x46Ih8Lt+8x9CKxRVinaEcmnVoaKR6vx9QvqkmthIKkW+P32Oz8bqgaq2395AAAAAElFTkSuQmCC">
</image>
</g>
</svg>
</div>
<dl class="gang">
<dt>港澳台🇲🇴 国内</dt>
<dd>
<em>东京</em>
<em>大板</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
</li>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="19px" viewBox="0 0 24 19" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左导航图标03" x="0" y="-2" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAABg0lEQVRIDe1UO0sDQRCeb/cgEC2s7JK7f2ATFCMIkkdppbHRysIqksY+f0FJpb2FwVrQRvCRqCGFnZ0RxM5GQSXJrbMHJ5fjLjlMCkUPjnl/3+zMskS//YP3AGWlhNf+rl4GbLfWIZh7OE61beyQUrNuYCgJuhQki3Ur03Q67nSpMjJw3ZmitE12RatiWSmpiGa0MdKPp6GxRzLzfo39E/SbjhP7mSMC4UUIrAB4H3SEgSdgkKYfRAm1XjdzBwBt+mN+uy8BAxwlzew0kxy6hSCxfW3mq9pmkj0C9t1YkAwl4DG0hBxfrQJdIcfWGKhB/ARMWRNbXqB43Nggwp3X59XDCD4MqZZqifSzTmb5FqPYopSysItU2wtwOrnwCgOFsH0EErCzdJHMN7xAZ9b8Uy2RefT6XP0qkb0N2wf0e9G6P+m4yY4EfT23Pf5BhqKehk0rZxiBNb7EwJyITqGXyEu6iZgfPQ2oORdEV0iIEi+pzrfE5tuihv0Z6xyQxejd/OnMTw4AbMQtMo5IAAAAAElFTkSuQmCC">
</image>
</g>
</svg>
</div>
<dl class="riben">
<dt>日本🇯🇵 韩国🇰🇷</dt>
<dd>
<em>泰国🇹🇭</em>
<em>新加坡🇸🇬</em>
<em>马来西亚🇲🇾</em>
<em>马尔代夫</em>
</dd>
</dl>
</li>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg class="df" width="18px" height="19px" viewBox="0 0 18 19" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左导航图标04" x="-3" y="-2" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAABqElEQVRIDe1VP0/CQBR/rwVNWBxcjFBgcTJxbVwkJAaDE4smDn4H9RPwEfwYRnaNwYTgIMHR4ORShBoXE11MEOl5D3PNtb2roiwkXtK+P7/f+71711IAZn2hPECVMUOOf+tXET1RmxAO2TOnPpLjP/j+xqey47iNBCZAA4+Zxw4A8BWSZqGdLt7GFQvMdhtrMBw1AdgCaYg8WX8UChhjaDuXJ9zbRcRH0zA20tZSjzDdcntP1sjzrnjtMpc73c5v7snPINCARMrsfv7ZcS54k4JOVJ3H5mI+v3WOKwMZjzwDIqQgUeGzdWRirM+5VBMWp5rIBELI7jcy8DFsMQYZkVNZROhDIrnezhT7KjwygSBRgWkky4D4InIRyzHi6MSJr21A4HW22DFNVuFu4FwJ42tAGHG+QvU9tgGVtKxSk29jn0/CfAkEj3JjzE+qnW8bUNlNrlTj+odCgp/7EeVEPDVrO/UhXZMI/miCSQTD3NlvoP2h7bC7ufC4D133jXLZXDoVxmq4+h7OURz4msqEruOq3v0xRYMpN6ttwD8i/r+S3Pjfn/oJfAJFUXZPBIrj/QAAAABJRU5ErkJggg==">
</image>
</g>
</svg>
</div>
<dl class="dong">
<dt> 东南亚 南亚</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>台湾</em>
<em>西南</em>
</dd>
</dl>
</li>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左导航图标05" x="-2" y="-5" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAABWUlEQVRIDWNgGAXDPgQYifWh2aM9tox///UA1f9nYGIsOSnveoQYvSzEKAKr+fdv0n8GBgMw+z/DJCBtRIxeJmIUOdzfz8H4n1EZppbxP4MKSAzGx0fjDSLrh/u0//7/m/Gf4X/0//8MgsgGMTIyvAfyl7Ewskw/Ku90FVkOmY3TAvMHu5P+//8/HaiYDVkDFvYvRkbGzJMKrvOwyDFgDSKL+7s6gYbPJcJwkJlsILUgPdgswPCB5cM9Pn///duMTTFBMUZGn1MKrluR1aFY4PBqP8+3r7+vARXIIisils3IwPiQn1NMe5eE/leYHpQg+vb9bzS5hoMMBCYG+U8/XkbCDAfRKBYw/P9vhyxJDhuYV+yR9aFnNHMGBsbfyApIZQMtsCRVD0Xq4ZFsdn/3LwZGBnQfkWf4f4Y/pxRdwfkHbiAwZ/4BpmegDykHwIz3l3JTRk0YMiEAAF0dYi0blOdVAAAAAElFTkSuQmCC">
</image>
</g>
</svg>
</div>
<dl class="ouzhou">
<dt>欧洲 美洲</dt>
<dd>
<em>英国🇬🇧</em>
<em>法国🇫🇷</em>
<em>美国🇺🇸</em>
<em>加拿大🇨🇦</em>
</dd>
</dl>
</li>
<li>
<div class="sss">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="左导航图标06" x="-3" y="-3" width="24" height="24"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAABIUlEQVRIDe1UrQ7CQAxugQyPAgTgMYQJDJZH4H14DZ4Bj5nFgMLgBwIJegtQdktK2uNg2Q+OJcu1X9vv67r0AP5PxgTQjs/p4NlYHn+Fw1jmN6QzJ6ofwyCSWF474WisEO9cpwRSEOHBwSrOn49ICUzPQS+O6Fimc6+J/U13dmKOGhvmjCMcS7+IbXMoAcRHaQGbQwkAoF+ka12jp6AECKD0FxCQ4lACQNTW3RTwCDqySgvISEW2WrTRoOXtw0u66tvBzCk+CYN0EU3uEvwb9yHxHYPJqUiu4L+2GBHJ9XKtyZVxibNtTiUgA1XZakSSdEHkFF+HgUzLtD8KJESvGzGT5UuCs8sv+blD6rIz1UT0hrlYzQ+WONfZuMz5284JPAFUcVZfN0bFHgAAAABJRU5ErkJggg==">
</image>
</g>
</svg>
</div>
<dl class="aodaliya">
<dt>澳大利亚 中东</dt>
<dd>
<em>澳大利亚🇦🇺</em>
<em>新西兰🇳🇿</em>
<em>迪拜</em>
</dd>
</dl>
</li>
</ul>
<div class="jk">
<div class="lpo">
<dl>
<dt>港澳台</dt>
<dd>
<a href="">香港</a>
<a href="">澳门</a>
<a href="">台北</a>
<a href="">高雄</a>
<a href="">香港迪士尼</a>
<a href="">香港海洋公园</a>
<a href="">交通接驳</a>
<a href="">澳门</a>
<a href="">塔新濠天地水舞间</a>
<a href="">澳门豪华自助 台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
<dl>
<dt>热门城市</dt>
<dd>
<a href="">三亚</a>
<a href="">东北雪乡</a>
<a href="">大理</a>
<a href="">丽江</a>
<a href="">昆明</a>
<a href="">西双版纳</a>
<a href="">拉萨</a>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九华山</a>
<a href="">太原</a>
<a href="">张家口</a>
</dd>
</dl>
<dl>
<dt>热门景点</dt>
<dd>
<a href="">北京故宫</a>
<a href="">东北滑雪</a>
<a href="">恭王府</a>
<a href="">长城</a>
<a href="">青城山大熊猫基地</a>
<a href="">峨眉山</a>
<a href="">都江堰</a>
<a href="">长恨歌表演</a>
<a href="">兵马俑</a>
<a href="">大唐芙蓉园</a>
<a href="">三亚日游</a>
<a href="">厦门鼓浪屿</a>
<a href="">千岛湖</a>
<a href="">呼伦贝尔草原</a>
<a href="">希拉穆仁草原</a>
<a href="">大理日游</a>
<a href="">杭州</a>
<a href="">重庆两江夜游船票</a>
</dd>
</dl>
</div>
<div class="lpo"></div>
<div class="lpo"></div>
<div class="lpo"></div>
<div class="lpo"></div>
<div class="lpo"></div>
</div>
</div>
</div>
</section>
</body>
</html>
相关代码：CSS
/* 头部小黑条 */
header {
min-width: 1200px;
height: 150px;
}
header .topbar {
height: 32px;
width: 100%;
background-color: #2A2A2A;
color: aliceblue;
line-height: 32px;
}
header .topbar .center-wrap a {
color: aliceblue;
}
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.shortcut-links {
float: left;
}
.shortcut-links ul>li {
float: left;
margin-right: 18px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FFFFFF;
text-align: justify;
line-height: 32px;
}
.shortcut-links>ul>li.c {
padding-right: 12px;
}
.shortcut-links ul>li.c {
position: relative;
}
.shortcut-links>ul>li.c em {
position: absolute;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform .2s ease 0s;
}
.shortcut-links>ul>li.c em b {
position: absolute;
top: 0px;
width: 8px;
height: 8px;
margin-left: 2px;
background-color: #FFFFFF;
transform: rotate(45deg);
font-family: android;
}
.shortcut-links>ul>li.c em i {
position: absolute;
top: -2px;
width: 8px;
height: 8px;
margin-left: 2px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.shortcut-links>ul>li.c:hover em {
transform: rotate(180deg);
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
div.ji {
float: right;
}
div.ji a.q {
display: inline;
margin-right: 20px;
font-size: 20px;
}
div.ji a.t {
display: inline;
margin-right: 20px;
font-size: 14px;
}
.shortcut-links>ul>li.c .nm {
position: absolute;
top: 32px;
width: 121px;
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
border-radius: 4px 4px 4px 4px;
}
.shortcut-links>ul>li.c:hover .nm {
display: block;
}
.shortcut-links>ul>li.c .nm a {
font-family: PingFangSC-Regular;
font-size: 15px;
color: #1C1F21;
line-height: 18px;
}
.shortcut-links>ul>li.c .nm a:hover {
color: tomato;
}
.shortcut-links>ul>li.c div.nb {
width: 130px;
}
.shortcut-links>ul>li.c div.vc {
width: 140px;
}
.shortcut-links>ul>li.c .nm {
width: 95px;
}
/* 导航栏 */
.word {
height: 40px;
width: 100%;
background: #20BD9A;
}
.word .gt {
width: 1152px;
margin: 0 auto;
}
.word .gt .bjn {
float: left;
}
.word .gt .bjn ul>li {
float: left;
line-height: 40px;
margin-right: 18px;
}
.word .gt .bjn ul>li a {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #ead8d8;
text-align: justify;
line-height: 18px;
}
.word .gt .bjn ul>li.v {
padding-right: 16px;
position: relative;
}
.word .gt .bjn ul>li.v div.klo {
width: 80px;
}
.word .gt .bjn ul>li.v div.klo {
position: absolute;
top: 38px;
right: -35px;
background: #bbbbda;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
text-align: center;
border-radius: 4px 4px 4px 4px;
}
.word .gt .bjn ul>li.v div.bji {
width: 127px;
right: -60px;
}
.word .gt .bjn ul>li.v div.xsa {
width: 100px;
right: -50px;
}
.word .gt .bjn ul>li.v div.gh {
width: 115px;
right: -65px;
}
.word .gt .bjn ul>li.v div.hj {
width: 88px;
right: -50px;
}
body header .word .gt .bjn ul li.v .klo dt {
font-weight: bold;
}
.word .gt .bjn ul>li.v .klo dl a {
font-size: 13px;
color: #1C1F21;
}
.word .gt .bjn ul>li.v:hover .klo {
display: block;
}
.word .gt .bjn ul>li.v .klo a:hover {
color: tomato
}
.word .gt .bjn ul>li.v::before {
content: '';
position: absolute;
right: -1px;
top: 64%;
margin-top: -8px;
width: 0px;
height: 0px;
border: 7px solid transparent;
border-top-color: #ead8d8;
border-bottom: none;
transition: transform .2s ease 0s;
}
.word .gt .bjn ul>li.v:hover::before {
transform: rotate(180deg);
}
/* 头部logo */
.kl {
height: 36px;
padding: 21px;
}
.gy {
width: 1152px;
margin: 0 auto;
}
.gy h1 {
float: left;
font-family: PingFangSC-Medium;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 36px;
position: relative;
}
.gy .soso {
padding-top: 3px;
}
.gy .soso input {
float: left;
width: 361px;
height: 28px;
margin-left: 26px;
opacity: 1.3;
border: 1px solid #20BD9A;
border-radius: 4px 0 0 4px;
/* 取消边框外线 */
outline: none;
}
.gy .soso a {
float: left;
display: inline;
width: 30px;
height: 30px;
background-color: #20BD9A;
border-radius: 0 4px 4px 0;
}
.soso .df {
font-family: android;
font-size: 25px;
color: #FFFFFF;
text-align: justify;
line-height: 30px;
text-align: center;
}
.bnner img {
width: 100%;
min-width: 1200px;
/* 去掉图片缝隙 */
vertical-align: middle;
}
.bnner {
position: relative;
}
.bnner div.dao {
position: absolute;
top: 0;
left: 0;
width: 1152px;
height: 100px;
left: 50%;
margin-left: -576px;
/* 不设置会导致ul不等分 */
height: 100%;
}
.bnner .huj {
height: 100%;
width: 1152px;
}
.bnner .dao ul {
/* 不设置会导致li不等分 */
height: 100%;
}
.bnner .dao ul li {
height: 16.66%;
width: 296px;
background-color:rgba(0, 0, 0, 0.50);
}
.bnner .huj a img.d {
position: absolute;
top: 0;
left: -10px;
width: 32px;
height: 44px;
}
.bnner .huj a img.f {
position: absolute;
top: 0;
left: -10px;
width: -32px;
height: 44px;
}
.bnner .huj a.leftz {
position: absolute;
left: -38px;
top: 50%;
margin-top: -22px;
border-radius: 5px 5px 5px 5px;
}
.bnner .huj a.righty {
position: absolute;
right: -38px;
top: 50%;
margin-top: -22px;
border-radius: 5px 5px 5px 5px;
}
.bnner .huj a.righty,
.bnner .huj a.leftz {
opacity: 0.8;
}
.bnner .huj a.leftz:hover {
opacity: 1;
}
.bnner .huj a.righty:hover {
opacity: 1;
}
.bnner .huj ul li{
position: relative;
border-bottom: 1px solid rgba(228, 217, 217, 0.5);
box-sizing:border-box;
}
.bnner .huj dl{
position: absolute;
/* 测量文字上下距离 */
height:48px;
left:42px;
top:50%;
margin-top:-24px;
font-size: 15px;
color: #FFFFFF;
text-align: justify;
line-height: 26px;
}
.bnner .huj dl dd{
font-size: 13px;
}
.bnner .huj ul li .sss{
position: absolute;
height: 24px;
top:50%;
margin-top:-12px;
left:12px;
}
.jk{
position: absolute;
top:0;
left:296px;
width:356px;
height:100%;
background-color: rgba(0, 0, 0, 0.58);
}写回答
1回答
-
同学你好，.bnner .huj dl这个样式影响了div.lpo中的dl。.bnner .huj dl这个样式中，设置了定位，所以div.lpo中的dl也被加上了定位样式，导致重叠在一起。调整如下：
另外，第一次跟着视频写项目，建议同学的类名、样式和讲师保持一致。这样出现问题后，可以先对照源码，自己查找问题，并思考为什么错了。这样能锻炼解决问题的能力，解决问题的能力非常重要，直接决定同学能否独立开发。
要有尝试自己解决问题的想法哈，这是一个学习技巧，提醒一下同学。
祝学习愉快！
0
相似问题