CSS小练习

最新推荐文章于 2024-09-10 14:41:34 发布
最新推荐文章于 2024-09-10 14:41:34 发布
阅读量313 收藏
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51985152/article/details/125363310
版权
这个系列实验展示了如何使用CSS实现不同类型的网页布局和元素美化。实验一创建了一个带下拉菜单的彩妆产品列表，实验二设计了一个带有图标分类的导航栏，实验三通过选择器为文本内容添加样式，实验四构建了多级分类的美妆商品展示，实验五则实现了具有底部装饰的公告列表。这些实验涵盖了CSS的基础应用和进阶技巧。
摘要由CSDN通过智能技术生成

CSS练习

实验要求

使用css实现下列图片内容
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实验过程

实验一
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			body {
				background-color: antiquewhite;
			}
			#container{
				background-color: white;
				width: 200px;
			}
			#title {
				background-color: deeppink;
				color: white;
				line-height: 40px;
				height: 45px;
				text-indent: 10px;
				font-weight: bold;
			}
			ul li {
				list-style: none;
				border-bottom: 1px dashed gray;
				font-size: 12px;
				padding: 5px;
			}
			ul li:last-child {
				border: none;
			}
			ul li a {
				text-decoration: none;
				color: gray;
			}
			ul li a span {
				background: url(image/dot_01.gif) no-repeat;
				display: inline-block;
				width: 30px;
				height: 24px;
				padding-left: 9px;
				padding-top: 3px;
				color: white;
			}
			ul li:hover {
				color: deeppink;
			}
			ul li:hover a {
				color: deeppink;
			}
			ul li:hover a span {
				background: url(image/dot_02.gif) no-repeat;
			}
			ul li div {
				display: none;
				text-align: center;
			}
			ul li:hover div {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">大家都喜欢的彩妆</div>
			<ul>
				<li>
					<a href="#">
						<span>1</span>ZaXXXXXXXX
					</a>
					<div>
						<img src="image/icon-1.jpg" alt="">
						<p>$679 xxxx</p>
					</div>
				</li>
				<li>
					<a href="#">
						<span>2</span>ZaXXXXXXXX
					</a>
					<div>
						<img src="image/icon-2.jpg" alt="">
						<p>$679 xxxx</p>
					</div>
				</li>
				<li>
					<a href="#">
						<span>3</span>ZaXXXXXXXX
					</a>
					<div>
						<img src="image/icon-3.jpg" alt="">
						<p>$679 xxxx</p>
					</div>
				</li>
				<li>
					<a href="#">
						<span>4</span>ZaXXXXXXXX
					</a>
					<div>
						<img src="image/icon-4.jpg" alt="">
						<p>$679 xxxx</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>
实验二
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			#container {
				border: 1px solid orange;
				margin-left: 10px;
				width: 300px;
			}
			ul li {
				list-style-type: none;
				border-bottom: 1px dotted;
				line-height: 50px;
				height: 50px;
				text-indent: 50px;
				font-weight: bold;
			}
			a {
				text-decoration: none;
				color: black;
			}
			a:hover {
				color: orange; 
			}
			li:nth-child(1) {
				background: url(图片素材/icon_01.jpg) no-repeat;
			}
			li:nth-child(2) {
				background: url(图片素材/icon_02.jpg) no-repeat;
			}
			li:nth-child(3) {
				background: url(图片素材/icon_03.jpg) no-repeat;
			}
			li:nth-child(4) {
				background: url(图片素材/icon_04.jpg) no-repeat;
			}
			li:nth-child(5) {
				background: url(图片素材/icon_05.jpg) no-repeat;
			}
			li:nth-child(6) {
				background: url(图片素材/icon_06.jpg) no-repeat;
			}
			li:nth-child(7) {
				background: url(图片素材/icon_07.jpg) no-repeat;
			}
			li:nth-child(8) {
				background: url(图片素材/icon_08.jpg) no-repeat;
			}
			li:nth-child(9) {
				background: url(图片素材/icon_09.jpg) no-repeat;
			}
			li:nth-child(10) {
				background: url(图片素材/icon_10.jpg) no-repeat;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<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>
				<li><a href="#">清洁洗涤</a></li>
				<li><a href="#">母婴、纸品</a></li>
				<li><a href="#">家居百货</a></li>
			</ul>
		</div>
	</body>
</html>
实验三
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			p{
				font-size: 18px;
			}
			h1 {
				color: cadetblue;
			}
			p span:first-child {
				color: red;
				text-decoration: underline;
			}
			p span:nth-child(2) {
				color: skyblue;
			}
			p span:nth-child(3) {
				color: orange;
			}
			p span:nth-child(4) {
				color: green;
			}
			p span:nth-child(5) {
				color: orange;
			}
		</style>
	</head>
	<body>
		<h1>花千骨</h1>
		<p>
			《花千骨》是由<span>慈文传媒集团</span>制作并发行，
			<span>林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖</span> 
			领衔主演，<span>蒋欣、杨烁</span>特别出演，
			<span>张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演
			的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说，讲述少
			女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱
			虐恋[1] 。该剧于2014年5月6日开机，9月15日杀青，8月12
			日发布中文及英文版的预告片[2] 。 该剧于2015年6月9日起
			每周二、周三晚10点在 <span>湖南卫视</span>的钻石独播剧场播出。[3]
			 2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。
			 当天零点在爱奇艺同步更新。[4]
		</p>
		<img src="img/1.jpg" alt="">
		<h1>主要演员</h1>
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
	</body>
</html>
实验四
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: lightgray;
			}
			#container {
				background-color: white;
				color: gray;
				margin: 10px 10px;
				width: 280px;
			}
			#title {
				background-color: black;
				color: white;
				line-height: 35px;
				text-indent: 20px;
				height: 40px;
				font-weight: bold;
				font-size: 24px;
			}
			dd {
				padding-left: 20px;
				border-bottom: 2px dashed gray;
			}
			dt {
				color: black;
				font-weight: bold;
				text-indent: 25px;
				height: 35px;
				line-height: 35px;
			}
			dl dt:nth-of-type(1) {
				background: url(Test1图片/icon_01.gif) no-repeat;
			}
			dl dt:nth-of-type(2) {
				background: url(Test1图片/icon_02.gif) no-repeat;
			}
			dl dt:nth-of-type(3) {
				background: url(Test1图片/icon_03.gif) no-repeat;
			}
			dl dt:nth-of-type(4) {
				background: url(Test1图片/icon_04.gif) no-repeat;
			}
			dl dt:nth-of-type(5) {
				background: url(Test1图片/icon_05.gif) no-repeat;
			}
			dl dt:nth-of-type(6) {
				background: url(Test1图片/icon_06.gif) no-repeat;
			}
			dl dt:nth-of-type(7) {
				background: url(Test1图片/icon_07.gif) no-repeat;
			}
			dl dt:nth-of-type(8) {
				background: url(Test1图片/icon_08.gif) no-repeat;
			}
			dl dt:nth-of-type(9) {
				background: url(Test1图片/icon_09.gif) no-repeat;
			}
			dl dt:nth-of-type(10) {
				background: url(Test1图片/icon_10.gif) no-repeat;
			}
			dd:last-child {
				border: none;
			}
			a {
				display: inline-block;
				text-decoration: none;
				color: gray;
				text-indent: 5px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">全部分类</div>
			<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>
				</dd>
				<dt>彩妆</dt>
				<dd>
					<a href="#">卸妆</a> <a href="#">防晒</a>
					<a href="#">隔离</a> <a href="#">BB霜</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>
				<dt>香氛</dt>
				<dd>
					<a href="#">男香</a> <a href="#">女香</a>
					<a href="#">小Q装</a> <a href="#">中性香水</a>
				</dd>
				<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>
				</dd>
				<dt>礼盒套装</dt>
				<dd>
					<a href="#">护肤套装</a> <a href="#">身体护理套装</a>
					<a href="#">彩妆套装</a> <a href="#">旅行装</a>
					<a href="#">香水套装</a> <a href="#">男士套装</a>
				</dd>
				<dt>美容工具</dt>
				<dd>
					<a href="#">护肤</a> <a href="#">彩妆</a>
					<a href="#">美发</a> <a href="#">美体</a>
					<a href="#">美甲</a> <a href="#">美容仪器</a>
					<a href="#">其他美容工具</a>
				</dd>
				<dt>母婴专区</dt>
				<dd>
					<a href="#">奶粉</a> <a href="#">尿裤湿巾</a>
					<a href="#">母婴洗护</a>
				</dd>
				<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>
				</dd>
				<dt>食品保健</dt>
				<dd>
					<a href="#">瘦身类</a> <a href="#">保健类</a>
					<a href="#">美容类</a> <a href="#">食品类</a>
				</dd>
			</dl>
		</div>
	</body>
</html>
实验五
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li {
				margin: 0px;
				padding: 0px;
			}
			#container {
				margin: 10px auto;
				background: url(图片素材/trendTopBg.gif) 2px 0px no-repeat;
				width: 205px;
				height: 170px;
			}
			#title {
				margin-top: 20px;
				height: 35px;
				line-height: 35px;
				padding-left: 50px;
				background: url(图片素材/bg.gif) 12px 4px no-repeat;
			}
			#footer {
				height: 12px;
				width: 12px;
				background: url(图片素材/trendEndBg.jpg) 2px 5px no-repeat;
			}
			ul li {
				list-style-type: none;
				padding-left: 10px;
				background: url(图片素材/dotBg.gif) -4px -9px no-repeat;
			}
			ul li a {
				color: black;
				text-decoration: none;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">
				孵化小组信息
			</div>
			<ul>
				<li><a href="#">10月30日：java精英榜</a></li>
				<li><a href="#">10月30日：java精英榜</a></li>
				<li><a href="#">10月30日：java精英榜</a></li>
				<li><a href="#">10月30日：java精英榜</a></li>
				<li><a href="#">10月30日：java精英榜</a></li>
				<li><a href="#">10月30日：java精英榜</a></li>
			</ul>
			<div id="footer">
				
			</div>
		</div>
	</body>
</html>
Keep time
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS小练习2——新闻栏的样式
surymy
11-18 1136
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test3</title> <link rel="stylesheet" href="../reset.css"> </head> <style> .box1{ margin:20px; font-.
【CSS小练习】DIV+CSS布局画图
qq_52719660的博客
10-20 337
复杂的布局算是css中的一个难点，我用DIV+CSS布局做了一个画图小练习，分享代码如下
百度1+x计算机视觉证书题库
热门推荐
qq_54129105的博客
09-24 1万+
百度1+x计算机视觉应用开发证书部分试题，想要考证不妨来看看。
HTML+JS+CSS 小练习
m0_47887988的博客
03-16 665
目标图片： 主要实现功能： 1、图片浏览 2、购物车数量加减 3、网页跳转 4、全选与全不选 5、删除购物车中物品 6、计算总价 代码（第一个页面）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中袖衬衣2015春季装新款时尚白领修身职业装</title> <style type=..
html和css小练习
m0_56713342的博客
12-06 503
彩妆热卖产品列表。
css常用demo练习
SundayGoG的博客
05-30 1815
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
CSS练习
毕业才是起点
04-09 1055
实现效果图 代码实现： <!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"> &l
CSS简单练习案例
sokoooo的博客
02-17 3973
CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; ..
CSS浮动小练习
X_starer的博客
07-01 172
CSS浮动小练习
CSS综合练习
weixin_46331127的博客
06-08 1392
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
CSS小练习02-网易产品
05-07
在本实践项目“CSS小练习02-网易产品”中，我们将聚焦于使用CSS（层叠样式表）和HTML（超文本标记语言）来模仿网易产品的网页设计。这个练习旨在帮助初学者提升对CSS布局、选择器、盒模型以及响应式设计的理解。下面...
CSS小练习01-PS提示框
05-07
在本“CSS小练习01-PS提示框”中，我们将深入探讨如何使用CSS来创建类似于Photoshop（PS）中的提示框效果。CSS，即层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的Web标准语言。这个...
老裴帮助关于CSS的小练习
03-19
在压缩包文件名称 "CssFrame.jsp" 中，".jsp" 是JavaServer Pages的扩展名，这表明可能有一个基于Java的Web应用程序用于展示或交互这个CSS练习。JSP可以结合HTML、CSS和Java代码，创建动态网页。在本例中，"CssFrame...
html css网页制作成品
A_aspectJ的博客
09-06 481
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的clss属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1650
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
tailwindcss在vue2中安装配置流程
Zeng的博客
09-03 734
【代码】tailwindcss在vue2中安装配置流程。
VitePress 自定义 CSS 指南
软考鸭
09-06 567
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
CSS“多列布局”（补充）——WEB开发系列35
最新发布
一条晒干的咸鱼的博客
09-10 556
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
Vue封装的过度与动画(transition-group、animate.css)
Bulut0907
09-05 398
Test3.vue：直接在transition-group指定属性就可以了。指定的属性可以去https://animate.style/官网去查看。想要更多可以去https://www.npmjs.com/进行搜索。还要另外两种方式引入animate.css文件。作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值