CSS练习四之导航栏及弹窗示例

最新推荐文章于 2024-04-04 12:04:33 发布
最新推荐文章于 2024-04-04 12:04:33 发布
阅读量671 收藏 2
点赞数
分类专栏： CSS基础 文章标签： css html 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andone_hsx/article/details/54296119
版权 

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			body{
				font-size:12px;
			}
			
			#discuss{
				width:990px;
				margin:0 auto;
			}
			#mt{
				/*高度：30px，边框，上边框，背景颜色*/
				height:30px;
				border:1px solid #ddd;
				border-top:2px solid #9d9d9d;
				background:#F7F7F7;
			}
			#discuss-content{
				border-bottom:1px solid #ddd;
				padding-bottom:2px;
			}

			#discuss-datas{
				width:990px;
			}

			#discuss-datas thead td{
				/*加粗，上下内边距，下边框，文本居中对齐*/
				font-weight:bold;
				padding:5px 0;
				border-bottom:1px solid #ddd;
				text-align:center;
				color:#666;
			}

			/*处理 .col1 的样式 (每行第一列的效果)*/
			#discuss-datas td.col1{
				width:620px;
				text-align:left;
			}
			
			/*内容行中所有的列*/
			#discuss-datas tbody td{
				/*虚线下边框，上下内边距，文本水平居中对齐，文本颜色*/
				border-bottom:1px dotted #ddd;
				padding:5px 0;
				text-align:center;
				color:#9c9a9c;
			}

			/*处理所有超链接*/
			#discuss a{
				color:#005aa0;
				text-decoration:none;
			}
			#discuss a:hover{
				text-decoration:underline;
			}

			/*晒，论 两幅图*/
			#discuss-datas b{
				/*宽度，高度，背景属性*/
				padding-left:21px;
				padding-bottom:2px;
				padding-top:3px;
				background-image:url(../Images/iconlist_1.png);
				background-repeat:no-repeat;
				margin-right:5px;
			}
			b.shai{
				background-position:-110px -220px;
			}
			b.lun{
				background-position:-152px -220px;
			}

			/*2017-01-09 浮动练习*/
			#mt a{
				float:left;
				width:100px;
				height:30px;
				text-align:center;
				line-height:30px;
			}
			#mt a.current{
				/*左右上边框，背景颜色，文本颜色*/
				border:1px solid #ddd;
				border-bottom:none;
				border-top:2px solid #E4393C;
				background-color:#fff;
				color:#E4393C;
				/*位置上调:margin-top 给负值*/
				margin-top:-6px;
				height:35px;
				line-height:35px;
			}
			#extra p{margin:0;}
			/*方案1*/
			/*#extra p.new{
				float:left;
			}
			#extra p.total{
				float:right;
			}
			#extra{
				overflow:hidden;
			}*/

			/*方案2*/
			#extra p.total{
				float:right;
			}
		</style>
	</head>
	<body>
		<!-- 练习 -->
		<!-- #discuss : width:990px -->
		<div id="discuss">
			<!-- 页签 #mt : height:30px; ,边框，背景 -->
			<div id="mt">
				<a href="#">网友讨论圈</a>
				<a href="#" class="current">晒单帖</a>
				<a href="#">讨论帖</a>
				<a href="#">圈子帖</a>
				<a href="#">问答帖</a>
			</div>
			<!-- 内容 #discuss-content : 下边框 -->
			<div id="discuss-content">
				<!-- 表格 -->
				<table id="discuss-datas">
					<thead>
						<tr>
							<td class="col1">主题</td>
							<td>回复/浏览</td>
							<td>作者</td>
							<td>时间</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="col1">
								<b class="shai"></b>
								<a href="#">
									好大一瓶，不错
								</a>
							</td>
							<td>0/0</td>
							<td>
								<a href="#">2001年冬天</a>
							</td>
							<td>
								2011-11-11 11:11:11
							</td>
						</tr>
						<tr>
							<td class="col1">
								<b class="lun"></b>
								<a href="#">
									好大一瓶，不错
								</a>
							</td>
							<td>0/0</td>
							<td>
								<a href="#">2001年冬天</a>
							</td>
							<td>
								2011-11-11 11:11:11
							</td>
						</tr>
						<tr>
							<td class="col1">
								<b class="shai"></b>
								<a href="#">
									好大一瓶，不错
								</a>
							</td>
							<td>0/0</td>
							<td>
								<a href="#">2001年冬天</a>
							</td>
							<td>
								2011-11-11 11:11:11
							</td>
						</tr>
						<tr>
							<td class="col1">
								<b class="lun"></b>
								<a href="#">
									好大一瓶，不错
								</a>
							</td>
							<td>0/0</td>
							<td>
								<a href="#">2001年冬天</a>
							</td>
							<td>
								2011-11-11 11:11:11
							</td>
						</tr>
					</tbody>
				</table>
				<!-- 其他内容(略) -->
				<div id="extra">
					<p class="total">
						共900个话题
						<a href="#">浏览全部话题</a>
					</p>
					<p class="new">
						有问题与其他用户讨论
						<a href="#">[发表帖子]</a>
					</p>
				</div>
			</div>
		</div>
	</body>
</html>
最后效果图：

商城导航：


<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			#nav{
				/*宽度，高度，背景颜色，水平居中对齐*/
				width:990px;
				height:40px;
				background-color:#E64346;
				margin:0 auto;
			}
			#nav p{
				/*取消默认margin，宽度，高度，背景颜色*/
				margin:0;
				width:210px;
				height:40px;
				background-color:#CD2A2C;
			}
			#nav>p>a{
				/*左浮动，高度，行高，文字：加粗，大小，颜色，取消下划线*/
				float:left;
				height:40px;
				line-height:40px;
				font-weight:bold;
				font-size:14px;
				color:#fff;
				text-decoration:none;
				padding-left:15px;
			}
			#nav>p>b{
				/*右浮动，宽度，高度，背景，位置*/
				float:right;
				width:20px;
				height:20px;
				background:url(../Images/iconlist_2.png) no-repeat -65px 0;
				margin:10px 10px 0 0;
			}

			#nav>p{
				float:left;
			}
			#nav>ul{
				float:left;
				margin:0;
				padding:0;
				list-style:none;
			}
			#nav>ul li{
				float:left;
			}
			#nav>ul li a{
				/*宽度，高度，行高，文本：水平居中，大小，颜色，下划线，加粗*/
				float:left;
				width:100px;
				height:40px;
				line-height:40px;
				text-align:center;
				font-size:14px;
				color:#fff;
				text-decoration:none;
				font-weight:bold;
			}
			#nav>ul li a:hover{
				background-color:#BD2A2C;
			}

			#container{
				width:990px;
				min-height:200px;
				margin:0 auto;
			}

			#cate_box{
				margin:0;
				padding:0;
				list-style:none;

				/*宽度，高度，背景颜色，左右下边框*/
				width:210px;
				min-height:400px;
				background-color:#FAFAFA;
				border:2px solid #CD2A2C;
				border-top:none;
				box-sizing:border-box;
				/*上内边距*/
				padding-top:5px;
			}
			#cate_box>li{
				/*左内边距，上下内边距，宽度，下边框(白色)*/
				padding:5px 0 5px 10px;
				width:196px;
				box-sizing:border-box;
				border-bottom:1px solid #fff;
				border-top:1px solid transparent;
			}
			#cate_box li:hover{
				border-top-color:#ddd;
				border-bottom-color:#ddd;
				background-color:#fff;
			}
			#cate_box li>a{
				color:#333;
				text-decoration:none;
				font-size:14px;
			}
		</style>
	</head>
	<body>
		<nav id="nav">
			<p>
				<a href="#">全部商品分类</a>
				<b></b>
			</p>
			<ul>
				<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>
		</nav>
		<div id="container">
			<ul id="cate_box">
				<li>
					<a href="#">图书、音像、数字商品</a>
				</li>
				<li>
					<a href="#">家用电器</a>
				</li>
			</ul>
		</div>
	</body>
</html>

导航列表弹框效果：

初始状态：


鼠标悬停时：


<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			#my_jd{
				width:100px;
				height:30px;
				text-align:center;
				line-height:30px;
				border:1px solid #000;
				background-color:#fff;
				/*相对定位：配合 #menu 的绝对定位*/
				position:relative;
				cursor:pointer;
			}
			#menu{
				width:400px;
				height:100px;
				background-color:#fff;
				border:1px solid #000;
				/*绝对定位*/
				position:absolute;
				top:30px;
				left:-1px;
				/*隐藏*/
				display:none;
				
			}
			#my_jd:hover #menu{
				display:block;
			}
			#my_jd:hover #line{
				width:100px;
				position:absolute;
				border-top:1px solid #fff;
			}
		</style>
	</head>
	<body>
		<div id="my_jd">
			我的京东
			<!-- 弹出菜单 -->
			<div id="menu">
				模拟我的京东弹出菜单
			</div>
			<div id="line"></div>
		</div>
	</body>
</html>


Andone_hsx
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS布局练习，jd顶部导航栏跟下拉框
qq_43987112的博客
05-24 437
jd顶部导航栏跟下拉框练习！
CSS（CSS3）知识点学习
于公子的博客
03-03 5222
CSS（CSS3）自我学习，知识点总结
导航栏弹出
06-10
网页左下角的菜单导航栏先变宽再变高，渐渐匀速弹出，，，，
CSS导航条练习
一李
10-16 332
首先清楚清除浏览器吗，默认的格式 设置ul的格式 子元素到父元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0...
CSS基本基础---导航条练习
chen_zan_yu_的博客
05-28 283
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ li...
css3（十）练习导航栏
qq_38904347的博客
09-01 371
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航&lt;/title&gt; &lt;style type="text/css"&gt;
css叠层_CSS层叠样式
weixin_39750598的博客
12-22 502
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。css基本语法及页面引用css基本语法css的定义方法是：选择器 { 属性:值; 属性:...
前端html+css+js常用总结快速入门
最新发布
showy0的博客
04-04 1398
学习前端全套所有技术性价比低下且容易忘记，先入门学会所有基础的语法（css+js+heml），常用示例，再根据项目上手练习，哪里不会查哪里是最好的学习方式
CSS导航栏及弹窗示例代码
09-27
本篇文章主要介绍了CSS导航栏及弹窗示例代码，导航栏和弹窗是在web中应用很广泛的，非常具有实用价值，需要的朋友可以参考下。
导航弹出层
10-18
js导航弹出层
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
纯CSS实现导航栏下划线跟随的示例代码
09-24
主要介绍了纯CSS实现导航栏下划线跟随的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
CSS 4-01 简单导航栏案例 总结
Write less，do more
06-05 524
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 1.变化样式 有大小 有一行
带弹出框的自定义导航页面
maoxiaohei_的博客
03-12 159
<template> <view> <!-- 自定义导航 --> <u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText"> <vi
CSS基础之浮动定位、显示、光标、定位
Andone_hsx的博客
01-09 2213
1、浮动定位   1、定位     简单点说，定位就是改变元素在页面上的默认位置   2、定位的分类     按照定位的效果，可以分成以下几类：     1、普通流定位（默认方式）     2、浮动定位     3、相对定位     4、绝对定位     5、固定定位   3、定位方式-普通流定位     普通流定位，又称为“文档流定位”，页面中所有元素默认定位方式    
css练习之边框、框模型、背景属性
Andone_hsx的博客
01-06 833
CSS Sprites(雪碧图，精灵图) 将若干幅小图合并到一副大图中，根据实际使用需求，改变图像的位置，从而显示出向看的图片 如何显示 雪碧图 中的某一块图像??? 1、根据要显示的图像创建一个一模一样大小的元素 2、为元素设置背景图，并且移动图像到显示区域
threejs 弹窗 示例
08-07
下面是一个示例，展示了如何在three.js中创建一个弹窗： 首先，在HTML中创建一个包含three.js场景的div容器，如下所示： ```html <!-- 在这里放置three.js场景 --> ``` 接下来，在CSS中设置弹窗的样式，使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值