html css 项目实例 常用样式 浮动 背景图

最新推荐文章于 2023-12-23 11:40:45 发布
最新推荐文章于 2023-12-23 11:40:45 发布
阅读量210 收藏
点赞数
分类专栏： Mac开发 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rockandrollman/article/details/128546492
版权 
*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #f3f0eb;
}
li{
	list-style: none;
}
.header-wrap{
	width: 100%;
	min-width: 1180px;
	position: fixed;
	top: 0px;
	z-index: 10;
}
.header-top{
	width: 100%;
	min-width: 1180px;
	height: 70px;
	background-color: #2a2a2d;
}
.header-content{
	width: 1180px;
	margin: 0 auto;
	height: 70px;
}
.search{
	width: 285px;
	padding: 15px 0;
	margin: 0 auto;
}
.search-wrap{
	width: 285px;
	height: 40px;
	border-radius: 20px;
	background-color: white;
}
.search-keyword{
	width: 190px;
	height: 20px;
	border: 0;
	padding: 10px;
	box-sizing: content-box;/*search框默认的盒子模型是border-box，border和padding是算在宽度和高度里面的*/
	margin-left: 20px;
	float: left; 
}
.search-submit{
	width: 50px;
	height: 40px;
	border-radius: 0 20px 20px 0;
	border: 0;
	margin-left: 5px;
	background: url(../img/tips_tz.png) no-repeat -190px -64px;
	background-color: #ffdc35;
	 
}
.header-submenu{
	width: 100%;
	height: 60px;
	min-width: 1180px;
	background-color: #fff;
}
.header-submenu-wrap{
	width: 1180px;
	margin: 0 auto;
}
.header-submenu-list>li{
	float: left;
	list-style: none;
	margin: 15px;
	font-size: 18px/30px;
}
.header-submenu-list>li>a{
	text-decoration: none;
	color: black;
	
}
.header-submenu-list>li>a:hover{
	color: red;	
}
.clearfix::after{
	content:"";
	display: block;
	height: 0;
	clear: both; 
}

.gift_wrap{
	width: 1180px;
	margin: 0 auto;
	margin-top: 130px;
}
.gift_ad{
	width: 100%;
	height: 500px;
	margin-top: 10px;
	background-color: #ffdc35;
}
.gift_content{
	width: 1140px;
	background-color: white;
	padding: 0 20px;
}
.gift_location{
	height: 34px;
	line-height: 34px;
	font-size: 14px;
	color: #a6a6a6;
}
.gift_location>a{
	color: #a6a6a6;
	text-decoration: none;
}
.gift_location>a:hover{
	color: red;
	text-decoration: underline;
}
.gift_filter{
	font-size: 14px;
	color: #000;
}
.gift_filter_count{
	border-bottom: 1px solid #e5e5e5;
}
.gift_filter_count .s1{
	font-size: 18px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid red;
	margin-right: 20px;
}
.gift_filter_count .s2{
	color: red;
}
.gift_filter_category{
	margin-top: 13px;
}

.gift_filter_category li{
	list-style: none;
	border-bottom: 1px dashed #e5e5e5  ;
	display: flex;
	flex-direction: row;
	height: 35px;
	line-height: 35px;
}
.category_wrap{
	margin-left: 30px;
}
.category_wrap a{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	border: 1px solid #e5e5e5;
	padding: 0 15px;
	margin-right: 30px;
	text-decoration: none;
	color: #000;
}

.category_wrap .focus >a{
	background-color: #000;
	color: white;
}
.category_wrap a:hover{
	background-color: red;
	color: wheat;
}
.chanel{
	margin-top: 22px;
}
.chanel_list{
	border: 1px solid #e5e5e5;
	height: 40px;
}
/* .chanel_list  li{
	padding: 0 20px;
	list-style: none;
	height: 40px;
	line-height: 40px;
} */
.chanel_list .top{
	float: left;
	border-right: 1px solid #e5e5e5;
}
.chanel_list .update{
	float: left;
	border-right: 1px solid #e5e5e5;
}
.chanel_list .count{
	float: right;
	border-left: 1px solid #e5e5e5;
}

.chanel_list li>a{
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color: #000;
}
.chanel_list li>a:hover{
	background-color: red;
	color: white;
}
.game_list_wrap{
	font-size: 14px;
	color: #d6d6d6;
}
.game_list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.game{
	width: 570px;
	display: flex;
	flex-direction: row;
	padding: 45px 0;
	border-bottom: 1px solid #a6a6a6;
}
.game_img{
	height: 120px;
	width: 120px;
	border-radius: 30px;
	background-color: greenyellow;
}
.game_info{
	margin-left: 20px;
}
.game_name{
	color: black;
	font-size: 18px;
	font-weight: bold;
	margin-right: 10px;
}
.game_info p:first-child{
	color: #000;
}
.game_info p:nth-child(2) span{
	color: #000;
}
.game_info p{
	height: 30px;
	line-height: 30px;
}
.game_info p:last-child a{
	display: inline-block;
	width: 85px;
	height: 30px;
	border: 1px solid #e5e5e5;
	font-size: 14px;
	color: #e5e5e5;
	text-decoration: none;
	text-indent: 24px;
}
.a1{
	background: url(../img/tips_tz.png) no-repeat -15px -9px;
}
.a2{
	background: url(../img/tips_tz.png) no-repeat -15px -43px;
}
.a3{
	background: url(../img/tips_tz.png) no-repeat -15px -80px;
}
.a4{
	background: url(../img/tips_tz.png) no-repeat -15px -122px;
}

.page_list{
	padding: 40px 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.page_list a{
	display: inline-block;
	height: 30px;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	border: 1px solid #a6a6a6;
	margin-right: 3px;
	color: black;
}
.page_list a:hover{
	background-color: red;
	color: white;
}




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/giftag.css"/>
	</head>
	<body>
		<header class="header-wrap">
			<div class="header-top ">
				<div class="header-content">
					<div class="search">
						<form action="" method="get">
							<div class="search-wrap">
								<input type="search" class="search-keyword"/>
								<button type="submit" class="search-submit"></button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<nav class="header-submenu">
				<div class="header-submenu-wrap">
					<ul class="header-submenu-list clearfix">
						<li class="menuItem"><a href="#">首页</a></li>
						<li class="menuItem"><a href="#">首页1</a></li>
						<li class="menuItem"><a href="#">首页2</a></li>
						<li class="menuItem"><a href="#">首页3</a></li>
						<li class="menuItem"><a href="#">首页4</a></li>
						<li class="menuItem"><a href="#">首页5</a></li>
						<li class="menuItem"><a href="#">首页6</a></li>
						<li class="menuItem"><a href="#">首页7</a></li>
						<li class="menuItem"><a href="#">首页8</a></li>
						<li class="menuItem"><a href="#">首页9</a></li>
						<li class="menuItem"><a href="#">首页10</a></li>
					</ul>
				</div>
				
			</nav>
			
		</header>
		<div class="gift_wrap">
			<div class="gift_ad">
<!-- 				<img src="img/giftcenter/13.jpg" />
 -->			</div>
			<div class="gift_content">
				<div class="gift_location">
					您的位置：<a href="">首页</a>&gt;<a href="游戏礼包">游戏礼包</a>
				</div>
				<div class="gift_filter">
					<div class="gift_filter_count">
						<span class="s1">分类筛选</span><span>共计<span class="s2">761</span>个礼包，本周新增<span class="s2">69</span>款</span>
					</div>
					<div class="gift_filter_category">
						<ul>
							<li>
								<span>联网类型</span>
								<div class="category_wrap">
									<span class="focus"><a href="">全部</a></span>
									<span><a href="">网游</a></span>
									<span><a href="">单机</a></span>
								</div>
							</li>
							<li>
								<span>游戏类型</span>
								<div class="category_wrap">
									<span class="focus"><a href="">全部</a></span>
									<span><a href="">游戏</a></span>
									<span><a href="">策略</a></span>
								</div>
							</li>
							<li>
								<span>游戏特征</span>
								<div class="category_wrap">
									<span class="focus"><a href="">全部</a></span>
									<span><a href="">魔幻</a></span>
									<span><a href="">仙侠</a></span>
								</div>
							</li>
							<li>
								<span>音序</span>
								<div class="category_wrap">
									<span class="focus"><a href="">全部</a></span>
									<span><a href="">A</a></span>
									<span><a href="">B</a></span>
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				<div class="chanel">
					<ul class="chanel_list">
						<li class="top"><a href="">人气最高</a></li>
						<li class="update"><a href="">近期更新</a></li>
						<li class="count"><a href="">共188条</a></li>
					</ul>
				</div>
				
				<div class="game_list_wrap">
					<ul class="game_list">
						<li class="game">
							<div class="game_img">
<!-- 								<img src="img/0930/1443149272415437.jpg" />
 -->							</div>
							<div class="game_info">
								<p><span class="game_name">暗黑黎明</span>丹江口市贷款计划</p>
								<p>类型：<span>角色 魔幻</span>状态：<span>公测</span>更新时间<span>2022-9-9</span></p>
								<p>简介兵临城下</p>
								<p>
									<span><a class="a1" href="">游戏专区</a></span>
									<span><a class="a2" href="">游戏专区</a></span>
									<span><a class="a3" href="">游戏专区</a></span>
									<span><a class="a4" href="">游戏专区</a></span>
								</p>
							</div>
							
						</li>
						<li class="game">
							<div class="game_img">
<!-- 								<img src="img/0930/1443149272415437.jpg" />
 -->							</div>
							<div class="game_info">
								<p><span class="game_name">暗黑黎明</span>丹江口市贷款计划</p>
								<p>类型：<span>角色 魔幻</span>状态：<span>公测</span>更新时间<span>2022-9-9</span></p>
								<p>简介兵临城下</p>
								<p>
									<span><a class="a1" href="">游戏专区</a></span>
									<span><a class="a2" href="">游戏专区</a></span>
									<span><a class="a3" href="">游戏专区</a></span>
									<span><a class="a4" href="">游戏专区</a></span>
								</p>
							</div>
							
						</li>
						<li class="game">
							<div class="game_img">
<!-- 								<img src="img/0930/1443149272415437.jpg" />
 -->							</div>
							<div class="game_info">
								<p><span class="game_name">暗黑黎明</span>丹江口市贷款计划</p>
								<p>类型：<span>角色 魔幻</span>状态：<span>公测</span>更新时间<span>2022-9-9</span></p>
								<p>简介兵临城下</p>
								<p>
									<span><a class="a1" href="">游戏专区</a></span>
									<span><a class="a2" href="">游戏专区</a></span>
									<span><a class="a3" href="">游戏专区</a></span>
									<span><a class="a4" href="">游戏专区</a></span>
								</p>
							</div>
							
						</li>
						<li class="game">
							<div class="game_img">
<!-- 								<img src="img/0930/1443149272415437.jpg" />
 -->							</div>
							<div class="game_info">
								<p><span class="game_name">暗黑黎明</span>丹江口市贷款计划</p>
								<p>类型：<span>角色 魔幻</span>状态：<span>公测</span>更新时间<span>2022-9-9</span></p>
								<p>简介兵临城下</p>
								<p>
									<span><a class="a1" href="">游戏专区</a></span>
									<span><a class="a2" href="">游戏专区</a></span>
									<span><a class="a3" href="">游戏专区</a></span>
									<span><a class="a4" href="">游戏专区</a></span>
								</p>
							</div>
							
						</li>
					</ul>
				</div>
				<div class="page_list">
					<a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a>
					<a href="">5</a><a href="">6</a><a href="">下一页</a><a href="">...305</a>
				</div>
			</div>
			
		</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在下，杨江河
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5背景图片上放按钮,html – 使用CSS将背景图像添加到按钮
weixin_30188669的博客
06-04 2167
我正在尝试将背景图像添加到已具有背景颜色的按钮(或具有相同类的链接).该按钮本身看起来很棒,但我试图这样做,以便如果我添加某个类,将调整填充并显示背景图像,但图像不显示.这是CSS / HTML：.button {padding: 10px;margin-right: 8px;margin-bottom:10px;font-family: Arial, Tahoma, Verdana, FreeS...
7.11css 背景图片与浮动小结
weixin_42416106的博客
07-11 243
初学者css小结
html图片浮动特效
congcong7267的博客
03-19 1万+
html图片浮动特效html代码：  &lt;div &gt;    &lt;table border="0" &gt;    &lt;tr &gt;    &lt;td width="200",height="300"&gt;&amp;nbsp;&lt;/td&gt;    &lt;td width="200",heigh
网页设计图片向上浮动_HTML5 背景图片漂浮/浮动特效
weixin_39830906的博客
12-19 513
JavaScript语言：JaveScriptBabelCoffeeScript确定if (typeof fac == "undefined") fac = function() {};/************************fac.delegate************************/fac.delegate = function(this_object, method, ...
html背景图片属性及浮动5
m0_65019446的博客
10-20 1605
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。两个值︰第一个值表示水平位置的值，第二个值:表示垂直的位置。background:属性值1 属性值2 属性值3;background:position：值1值2；background-position:水平垂直;repeat-x 水平重复。repeat-y 垂直重复。background-repeat:是否重复;十六进制:取值范围#0-9 a-f。no-repeat不重复。
CSS之元素浮动 (十一)：认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
Good Good Study,Day Day Up!
05-23 969
沿其容器左侧右侧文本和内联元素环绕它noneleftright。
【CSS】背景样式,背景颜色和图片的处理、浮动、盒子模型、溢出、定位
han2434的博客
11-17 188
关于背景样式,背景颜色和图片的处理、浮动、盒子模型、溢出、定位等样式相关CSS知识点
jQuery html5浮动层特效.rar
07-10
一个jquery html5浮动层特效，当向下拖动网页时，在指定位置显示浮动层，内核基于jquery.bubbleScroll.js，当向下滚动网页时弹出该浮动框，可通过自带的关闭按钮，关闭该弹层。
html&CSS-----弹性布局
m0_73633088的博客
08-14 3264
详细介绍html中的弹性布局，介绍其样式和相关特点，以及每一种语法的用法和样式，快点进来看看吧！！！
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放...
JAVA上百实例源码以及开源项目源代码
09-17
　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
JAVA上百实例源码以及开源项目
01-03
　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
div+css有实例,易学易懂
07-11
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
html5图片浮层,Div层悬浮实现HTML5 Canvas背景动画
weixin_34868242的博客
06-09 876
在日常的学习中我接触到一些HTML5 Canvas动画，在开发 tiomg.org 太美在线工具网站 的时候，想将这些震撼或小清新的动画融合到工具网站中，这样可以使原本单调的网页看起来丰富和更有设计感。网站发布后，加本习以果响近上人模达。应近上人模达。应有程序开发的小伙伴和站长询问怎么实现的，我也乐于分享将使用的开源组件和实现告诉大家。有些同学还是不太明白，我答应后面写一篇博客来的。前几个月一直f...
静态网页设计html css：关于旅游景点主题的HTML网页设计——广东名胜古迹(7页)HTML+CSS
12-15 861
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6385
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
学生HTML静态网页基础水平制作DIV+CSS+JavaScript技术制作美食网页——美食城6页面
最新发布
而风不止
12-23 369
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板
css背景图片相关样式
07-10
CSS中有几个与背景图片相关的样式，如下所示： 1. background-image：用于设置元素的背景图片。可以通过指定图片的URL来设置背景图片，例如： ```css .my-element { background-image: url("image.jpg"); } ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值