一个Web布局实例
2015-07-26 20:39
316 查看
[code]<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //让所有链接加上默认样式 $("#nav ul li a").addClass("linkstyle"); $("#nav ul li ul").css("display","none"); $("#nav ul li").each(function() { //为每一个#menu中每一个li元素绑定click事件 $(this).bind( "mouseover", function() { $("#menu li a").addClass("curstyle");// 事件的方法为:(1)将当前li中的a加上curstyle样式, $(this).siblings("li").find("a").removeClass("curstyle");//(2)将当前li的其他所有兄弟li中的a去掉curtyle样式。 $(this).hover(function(){ $(this).find("ul:eq(0)").fadeIn(100) }, function(){ $(this).find("ul:eq(0)").fadeOut(100) }); }); }); }) </script> <style type="text/css"> /*以下为设置li自动横向排列的样式*/ #nav { margin: 0 auto; width: 80%; background-color: black; color: white; } ul,li /*这是关键,去掉ul li默认的margin padding 值*/ { margin: 0px; padding: 0px; list-style: none; } #nav ul /*这是关键*/ { display: flex; flex-direction: row; flex-wrap: wrap; } #nav ul li { max-width: 100px; /*每个元素的最大宽度*/ text-align: center; margin-top: 10px; margin-bottom: 10px; flex:auto; /*这是关键*/ } /*以下设置子菜单*/ #nav ul li ul { position:absolute; background-color: #444444; top: 50px; opacity: 0.9; } #nav ul li ul,#nav ul li ul li { margin: 0px; padding: 0px; max-width: 100px; } #nav ul li ul li { height: 40px; line-height: 40px; } #nav ul li ul li:hover { background-color: #000000; } /*以下为设置多栏div自动横向排列的样式*/ .boxes /*这是关键*/ { display: flex; flex-direction: row; flex-wrap: wrap; width: 80%; margin: 0 auto; } .box { border: 1px solid #999; border-radius: 10px; flex: auto;/*这是关键*/ margin: 5px; padding: 10px; width: 100px;/*每个元素的初始化宽度,这是关键*/ } .linkstyle { color:white; font-size:18px; text-decoration:none; } .linkstyle:hover { color:#00CED1; text-decoration:none; } .curstyle { color:#FF0000; font-size:18px; text-decoration:underline; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">AAAA</a></li> <li><a href="#">BBBB <ul> <li><a href="#">子子孙孙</a></li> <li><a href="#">bbbbbb</a></li> <li><a href="#">bbbbbb</a></li> </ul> </li> <li><a href="#">CCCC</a></li> <li><a href="#">DDDD</a></li> <li><a href="#">EEEE</a></li> <li><a href="#">FFFF</a></li> </ul> </div> <div class="boxes"> <div class="box box1"> <h2>Don't excessively interpret South China Sea drill</h2> <p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday. </p> </div> <div class="box box2"> <h2>Putin, Blatter voice mutual support at World Cup</h2> <p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p> </div> <div class="box box3"> <h2>Passenger detained for creating chaos on flight</h2> <p>A passenger attempted to damage facilities on Shenzhen Airlines flight ZH 9648, which departed from Taizhou City of east China's Zhejiang Province, when it was landing in Guangzhou Baiyun International Airport at around 1 a.m. on Sunday, according to the airport. </p> </div> </div> </body> </html>
相关文章推荐
- BZOJ 1179: [Apio2009]Atm( tarjan + 最短路 )
- 2015 HUAS Provincial Select Contest #1~D
- 人生的智慧 读书笔记
- NYOj 69 数的长度
- opendaylight中arphandler模块与routing模块的学习
- python中使用xmlrpc
- BUILD ROOT编译记录
- 【计蒜客系列】挑战难题20:跳跃游戏二
- web_custom_request
- UVA 400 Unix ls
- windows 下 redis 安装
- Uva 12436 Rip Van Winkle's Code
- 一个答案不唯一的数独问题
- UVa439(BFS最短路实现)
- HDU 3023 Dirt 踩黑白块
- mysql服务启动、停止、重启
- 八大排序总结
- UVa439(DFS实现)
- 【数据结构】1、串的模式匹配算法
- 算法学习笔记——贪婪