这个博客展示了如何建立一个包含导航菜单和自动轮播图片的网页。网页设计包括一个可隐藏显示的产品列表和新闻列表，以及响应式布局，提供良好的用户体验。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>卢浮宫</title>
<style type="text/css">
body{ text-align: center;}
div{ margin:0auto;}
#additiona{ text-decoration:none;}
#headerulli{ float:left; list-style:none; text-align: center; height:37px; line-height:37px; width:15%;}
#headerdivul{ background-color:#880B1B;}
#headerdivullia{ color: white; text-decoration:none;}
#headerdivulliul{ background-color:#C4022E; width:85%; position:relative;z-index:1;}
#headerdivulliulli{ margin:0px;padding:0px; width:100%;position:relative;left:-30px; background-color:#C4022E;}
#headerdivulliullia{ text-decoration:none;text-align: center;}
#guidea:hover{ color: orange;}
.select{ background-image: url(img/navChose.png);}
#guideli:hover{ background-image: url(img/navChose.png);background:cover;background-repeat:no-repeat;background-position: center;}
#guideliulli:hover{ background-image:none;}
#retateli{ float:left;margin:20px;background-color: orange;width:25px;}
#retatelia{ text-decoration:none;color: white;}
#retateli:hover{ background-image: url(img/navBg.png);background-position:center;}
#addition{ position:absolute; top:0px; right:0px;}
#guide{ position:relative; top:-20px; margin:0px; padding:0px; width:100%; background-color:#880B1B;}
#content{ width:100%; height:500px; background-color: ;position:relative;top:-35px; margin:0px; padding:0px;z-index:0;}
.public{ float:left; width:25%; height:500px; position:relative; top:-53px;}
.contentimg{ float:left;width:30%; height:auto;}
.contentp{ text-align:left;}
.public
最低0.47元/天 解锁文章
扫一扫
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
