【Web前端】css常见样式练习

于 2024-03-31 20:47:39 发布
阅读量188 收藏
点赞数 1
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66216073/article/details/137208712
版权

第一题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业一</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div.box1{
				/*border: 1px solid red;*/
				/*height: 500px;*/
				line-height: 500px;
				text-align: center;
				background: #4A4D4A;
				
			}
			a.download{
				text-decoration: none;
				/*border: 1px solid red;*/
				font-size: 40px;
				display: inline-block;
				height: 100px;
				width: 300px;	
				align-content: center;
				color: white;
				background: red;
				border-radius:10px ;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<a href="#" class="download">立即下载</a>
		</div>
	</body>
</html>

 显示结果

第二题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业二</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				/*border: 1px solid red;*/
				width: 1300px;
				height: 900px;
				margin: auto;
				background:ghostwhite;
			}
			ul.one{
				/*border: 1px solid red;*/
				width: 400px;
				height: 500px;
				display: inline-block;
				list-style: none;
				margin: 10px;
			}
			ul li{
				/*border: 1px solid red;*/
			}
			ul li.name{
				position: relative;
				top: 16px;
			}
			ul li.explain{
				position: relative;
				top: 32px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="one">
				<li class="pictrue"><img src="img/nn.png" width="400px"></li>
				<li class="name"><font size="5">恰到好处的简单</font></li>
				<li class="explain"> 元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框不能正常显示，父元素的兄弟元素位置布局错误等，</li>
			</ul>
			<ul class="one">
				<li class="pictrue"><img src="img/nn.png" width="400px"></li>
				<li class="name"><font size="5">恰到好处的简单</font></li>
				<li class="explain"> 元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框不能正常显示，父元素的兄弟元素位置布局错误等，</li>
			</ul>
			<ul class="one">
				<li class="pictrue"><img src="img/nn.png" width="400px"></li>
				<li class="name"><font size="5">恰到好处的简单</font></li>
				<li class="explain"> 元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框不能正常显示，父元素的兄弟元素位置布局错误等，</li>
			</ul>
			
		</div>
	</body>
</html>

显示结果

第三题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业三</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				/*border: 1px solid red;*/
			}
			ul{
				border: 1px solid red;
				width: 1300px;
				height: 60px;
				margin: auto;
				background: gray;
			}
			li{
				/*border: 1px solid red;*/
				list-style: none;
				/*display: inline-block;*/
				float: left;
				line-height: 60px;
				text-align: center;
				font-size: 20;
				background: gray;
				
			}
			a{
				color: white;
				text-decoration: none;
			}
			li:hover{
				background: black;
			}
			.nn{
				font-size: 25;
				color: white;
				width: 300px;
				height: 60px;
			}
			.xx{
				width: 200px;
				height: 60px;
			}
			.menu > li > ol{
				display: none;
			}
			.menu > li:hover ol{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="menu">
				<li class="nn">
					<strong>百度游戏</strong> | <b>乐玩</b>
				</li>
				<li class="xx"><a href="#">首页</a>
					<ol>
						<li class="xx"><a href="#">子菜单1</a></li>
						<li class="xx"><a href="#">子菜单2</a></li>
						<li class="xx"><a href="#">子菜单3</a></li>
						<li class="xx"><a href="#">子菜单4</a></li>
						<li class="xx"><a href="#">子菜单5</a></li>
					</ol>
				</li>
				<li class="xx"><a href="#">商城</a></li>
				<li class="xx"><a href="#">页游</a></li>
				<li class="xx"><a href="#">排行榜</a></li>
				<li class="xx"><a href="#">繁星计划</a></li>
			</ul>
		</div>
	</body>
</html>

显示结果

 

 第四题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业四</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 1px solid red;
				width: 1300px;
				height: 1000px;
				margin: auto;
				border-radius:30px ;
			}
			div > ul{
				border: 1px solid red;
				width: 400px;
				height: 300px;
				display: inline-block;
				margin: 13px;
				list-style: none;
			}
			ul > li{
				/*border: 1px solid red;*/
				text-align: center;
			}
			ul > li.one{
				font-size: 30px;
			}
			ul > li.two{
				position: relative;
				left: 120px;
				text-align: left;
			}
			ul > li.link{
				border: 1px solid blueviolet;
				width: 200px;
				height: 30px;
				position: relative;
				top: 100px;
				margin: auto;
				line-height: 30px;
				text-align: center;
			}
			a{
				color: blueviolet;
				text-decoration: none;
			}
			ul > li.two::before{
				content: "&";
				width: 16px;
				height: 16px;
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="mod">
				<li class="one">Bootstrap V3</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="link"><a>Bootstrap V3中文文档</a></li>
			</ul>
			<ul class="mod">
				<li class="one">Bootstrap V3</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="link"><a>Bootstrap V3中文文档</a></li>
				
			</ul>
			<ul class="mod">
				<li class="one">Bootstrap V3</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="two">支持IE8+浏览器</li>
				<li class="link"><a>Bootstrap V3中文文档</a></li>
				
			</ul>
		</div>
	</body>
</html>

显示结果

第五题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业5</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 1px solid red;
				width: 1300px;
				height: 800px;
				margin: auto;
			}
			.box1{
				border: 1px solid red;
				width: 300px;
				height: 320px;
				display: inline-block;
				margin: 8px;
				border-radius:20px ;
				text-align: center;
			}
			.box3{
				border: 1px solid red;
				width: 290px;
				height: 40px;
				margin: auto;
				position: relative;
				top: 50px;
				border-radius:5px ;
			}
			ol.box3 li{
				border-left: 1px solid red;
				width: 40px;
				line-height: 40px;
				text-align: center;
				float: left;
				list-style: none;
			}
			a{
				text-decoration: none;
				color: black;
			}
			ul.box3 >li:hover{
				background: gainsboro;
		
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
			</div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<div class="box1"></div>
			<ol class="box3">
				<li><a href="#"><<</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">>></a></li>
			</ol>
		</div>
	</body>
</html>

 

小guan想摸鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS练习题（居中五环 | 两栏布局 | 两个经典bug | BFC | 浮动元素）
m0_53222768的博客
12-14 1694
一、居中五环（html+css） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head> <body> <div class="
CSS练习题
道阻且长，行则将至。
03-08 590
CSS练习题 人们都说抖音记录美好生活，我说博客记录美好生活！随手练练CSS 1、margin——控制网页元素的位置，页面效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>控制网页元素的位置</title> <link href="style/2-7.css" rel="stylesheet" type="text/css">
CSS试题
weixin_68548138的博客
05-21 4222
[ 选择题 ]在css定位属性中， position的值为可以是（ ）。 A 绝对定位 B 相对定位 C 层叠定位 D 固定定位 正确答案：A,B,D 试题解析：在CSS中，position属性用于定义元素的定位方式，它的可能值有absolute（绝对定位），fixed（固定定位），relative（相对定位），static（静态定位，默认值）， inherit（规定应该从父元素继承 position 属性的值），因此选ABD。C不存在此种定位方式。 [ 选择题 ]下面定义背景图片的语法，正确的是.
CSS基础练习题
m0_57048774的博客
06-01 731
CSS基础练习题
css学习练习题01：css
SH_思寒的博客
09-06 220
css学习练习题01： css： 链接：https://pan.baidu.com/s/1WvmX-KpWZtr_5CSYvT4UYA 提取码：h6pg
Web前端开发基础：综合练习 .ppt
06-06
CSS层叠式样式表 CSS选择器 CSS背景属性 CSS导航菜单 布局属性 层叠式样式表的使用方法 1）内联式样式表-在body内实现 2）内嵌式样式表-在head内实现 3）外部链接式样式表-在文件外调用 4）导入外部样式表 1、背景色...
零基础如何快速学好web前端，HTML5 CSS3 3D魔方拼图网页开发源码
07-24
web前端学习教程，HTML5 CSS3 3D魔方拼图网页开发源码。web前端学习必看资料，零基础如何快速学好web前端。
Web前端开发试卷及答案.pdf
07-14
Web 前端开发试卷及答案 以下是根据给定的文件生成的相关知识点： ... 1. 常用的 WEB 标准静态页面语言是 HTML。...这个试卷涵盖了 HTML、CSS、XHTML 等 Web 前端开发基础知识，以及一些常见的问题解决方法。
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
03-19
CSS3 篇首先从 CSS3 的基础知识开始，讲解了 CSS 样式表与选择器的使用（包括 CSS3 新增选择器），并重点讲解了 CSS 中的各种属性以及 CSS3 的新属性，然后讲解了 CSS 中的盒模型、浮动、定位的相关知识，最后介绍...
基于HTML+CSS实现的可交互照片墙Web页面.zip
06-21
本次实验目为练习 HTML+CSS 的布局与样式，以及简单的交互，制作一个可交互的照片墙，照片墙可以点击照片查看大图 照片墙是一个可以将照片按照一定的顺序排列的 Web 页面，基本要求是照片要合理的地排布在页面上，且...
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
300道HTML、CSS习题及面试题（含答案）
01-14
该pdf适用于前端及javaEE页面设计方面的初学者，内容比较丰富，特此分享。
html和css的一些练习
04-10
html和css的一些练习
html+CSS考试试题
04-21
html和CSS基本知识点总结，附有答案。都是虽然不难但是很容易忽略的知识点。
CSS面试题：30道含答案和代码示例的练习题
三拾的博客
05-08 1163
【代码】CSS面试题：30道含答案和代码示例的练习题。
css习题集锦
xiaowei的博客
11-01 557
1、css中clear的作用是什么？答案：指明该元素周围不可出现浮动元素。 clear : none | left | right | both. 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
CSS综合练习
weixin_46331127的博客
06-08 1292
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
web前端基础练习题
最新发布
02-28
当然可以！以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行布局和美化。 4. 创建一个表单，包含输入框、复选框和提交按钮，并使用JavaScript验证用户输入。 5. 使用CSS实现一个响应式布局，使页面在不同设备上都能良好显示。 6. 使用JavaScript实现一个简单的图片轮播效果，使图片自动切换显示。 7. 使用HTML5的Canvas元素绘制一个简单的图形，如矩形或圆形。 8. 使用CSS3的动画效果实现一个元素的平滑过渡或旋转效果。 9. 使用JavaScript实现一个简单的计算器，能够进行基本的加减乘除运算。 10. 使用Ajax技术实现一个简单的异步加载数据的功能。 这些练习题涵盖了HTML、CSS和JavaScript的基础知识点，通过完成这些练习可以加深对前端开发的理解和实践能力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值