CSS练习题

最新推荐文章于 2024-03-18 11:28:08 发布
最新推荐文章于 2024-03-18 11:28:08 发布
阅读量586 收藏 4
点赞数 1
分类专栏： 【CSS3】 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46374969/article/details/114528351
版权

CSS练习题

1、margin——控制网页元素的位置，页面效果如下：
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>控制网页元素的位置</title>
<link href="style/2-7.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="box">
  <div id="pic"><img  class="pic1" src="images/2702.jpg" alt="" /></div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px;
}
body{
	background-color:#917e67;
}
#box{
	width:820px;
	height:687px;
	background-image:url(../images/2701.jpg);
	background-repeat:no-repeat;
	background-position: left 20px;
	margin:0px auto;
	padding-top: 20px;
}
.box{
		background-image: url(images/2701.jpg)
	}
	.pic1{
		
margin:180px 80px 30px 80px;
	}

2、border——为网页元素添加边框，页面效果如下：
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>为网页元素添加边框</title>
<link href="style/2-8.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box">
  <div id="logo"><img src="images/2803.png" width="269" height="37" alt="" /></div>
  <div id="main">
  	<img class="pic1" src="images/2804.jpg" alt="" width="210" height="190" />
  	<img class="pic2" src="images/2805.jpg" alt="" width="210" height="190" />
  	<img class="pic3"  src="images/2806.jpg" alt="" width="210" height="190" />
  	<img class="pic4"  src="images/2807.jpg" alt="" width="210" height="190" />
  	<img class="pic1"  src="images/2808.jpg" alt="" width="210" height="190" />
  	<img class="pic2"  src="images/2809.jpg" alt="" width="210" height="190" />
  	<img class="pic3"  src="images/2810.jpg" alt="" width="210" height="190" />
  	<img class="pic4"  src="images/2811.jpg" alt="" width="210" height="190" />
  </div>
</div>
<p>&nbsp;</p>
</body>
</html>


@charset "utf-8";
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: 微软雅黑;
	font-size: 14px;
	color: #FFF;
	line-height: 30px;
	background-image: url(../images/21001.jpg);
	background-repeat: no-repeat;
	background-position: center -100px;
}
#box {
	width: 575px;
	height: 359px;
	margin: 90px auto 0px auto;
	background-image: url(../images/21002.png);
	background-repeat: no-repeat;
	padding: 28px 92px 128px 92px;
}

#pic01 {
	position:relative;
	top:-235px;
	left:250px;
}

3、padding——控制Div中内容的位置，页面效果如下：
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>控制Div中内容的位置</title>
<link href="style/2-9.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box">
	<img src="images/2902.png" alt="" />
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px;
}
body{
	background-image:url(../images/2901.gif);
	background-repeat:repeat-x;
}
#box{
	width: 917px;
	height: 552px;
	margin: 0px auto;
}
#box {
	padding-top: 60px;
}

4、相对定位、绝对定位、浮动定位、页面效果如下：
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页元素叠加显示</title>
<link href="style/2-10.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box"><img src="images/21003.jpg" width="575" height="359"  alt=""/>
  <div id="pic01">
  	<img src="images/21004.png" alt="" />
  </div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: 微软雅黑;
	font-size: 14px;
	color: #FFF;
	line-height: 30px;
	background-image: url(../images/21001.jpg);
	background-repeat: no-repeat;
	background-position: center -100px;
}
#box {
	width: 575px;
	height: 359px;
	margin: 90px auto 0px auto;
	background-image: url(../images/21002.png);
	background-repeat: no-repeat;
	padding: 28px 92px 128px 92px;
}

#pic01 {
	position:relative;
	top:-235px;
	left:265px;
}

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页元素固定在右侧显示</title>
<link href="style/2-11.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box">我们的作品<br>
  <img src="images/21102.png" width="600" height="400"  alt=""/>
</div>

<div id="pic">
	<img src="images/21103.png" alt="" />
</div>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页元素固定在右侧显示</title>
<link href="style/2-11.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box">我们的作品<br>
  <img src="images/21102.png" width="600" height="400"  alt=""/>
</div>

<div id="pic">
	<img src="images/21103.png" alt="" />
</div>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作作品列表</title>
<link href="style/2-13.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="box">
  <div id="menu"><img src="images/21303.png" width="124" height="50" alt="" /><img src="images/21304.png" width="124" height="50" alt="" /><img src="images/21305.png" width="124" height="50" alt="" /><img src="images/21306.png" width="124" height="50" alt="" /><img src="images/21307.png" width="124" height="50" alt="" /></div>
  <div id="bottom">
    <div id="pic"><img src="images/21309.jpg" width="180" height="96" alt="" /></div>
    <div id="pic01"><img src="images/21310.jpg" width="180" height="96" alt="" /></div>
    <div id="pic02"><img src="images/21311.jpg" width="180" height="96" alt="" /></div>
    <div id="pic"><img src="images/21312.jpg" width="180" height="96" alt="" /></div>
    <div id="pic01"><img src="images/21313.jpg" width="180" height="96" alt="" /></div>
    <div id="pic02"><img src="images/21314.jpg" width="180" height="96" alt="" /></div>
  </div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px;
}
body{
	background-color:#dde1e4;
	background-image:url(../images/21301.jpg);
	background-repeat:no-repeat;
	background-position:center top;
}
#box{
	width:1100px;
	height:auto;
	overflow:hidden;
	margin:0px auto;
}
#menu{
	width:100%;
	height:270px;
	background-image:url(../images/21302.png);
	background-repeat:no-repeat;
	background-position:30px 30px;
	text-align:right;
}
#bottom{
	width:616px;
	height:340px;
	background-image:url(../images/21308.jpg);
	background-repeat:no-repeat;
	padding:10px;
	margin-left:20px;
	margin-bottom:20px;
}
#pic{
	width: 180px;
	height: 96px;
	margin: 4px;
	background-color: #CCC;
	padding: 8px;
	float:left;
}
#pic01{
	width: 180px;
	height: 96px;
	margin: 4px;
	background-color: #CCC;
	padding: 8px;
	float:left;
}
#pic02{
	width: 180px;
	height: 96px;
	margin: 4px;
	background-color: #CCC;
	padding: 8px;
	float:left;
}
王同学要努力
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端学习记录(八)
fakerth的博客
03-21 482
前言： 七和八首先要感谢一下陈同学，感谢他提供的援助，疯狂示爱。 css优化的注册界面 预览如下： register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht...
css常用demo练习
SundayGoG的博客
05-30 1583
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.弹性布局，水平均匀间
html+css布局综合练习
最新发布
借风拥你
03-18 960
一、准备工作 1.引入reset.css 主要是消除一些默认的样式 /* 基础设置 */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { /* 底部留白 */ display:
CSS练习
Null
04-09 960
实现效果图 代码实现： <!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
前端技术——4——CSS练习
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-01 1803
仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad
html+css网页练习四
qq_52108058的博客
02-07 4009
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
300道HTML、CSS习题及面试题（含答案）
09-18
最全面的300道HTML、CSS习题及面试题（含答案），希望对你用帮助
html css 练习素材
01-02
html css 练习素材
DIV_CSS测试题
04-20
div+css测试题
html+css定位练习
08-05
这是我自己学习html和css定位（position）时做的练习，仅供初学者学习参考，特别是对定位理解不熟悉的可以参考一下！
CSS——浮动布局改错题
流楚丶格念的博客
07-03 4251
文章目录题目错误代码解析正确代码 题目 错误代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1306
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
css的练习
2301_76602495的博客
06-07 177
子项22</li><li id="item23">子项23</li><li id="item1">子项1</li><li id="item2">子项2</li><a href="#">这是一个a链接</a><P class="P">这是一个省略号</P><li id="item3">子项3。<span>哈哈哈哈</span><li>子项31</li><li>子项32
CSS详细介绍+练习
m0_46152474的博客
02-20 254
CSS渲染
CSS简单练习案例
sokoooo的博客
02-17 3887
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基础练习
yfy0308的博客
12-24 89
【代码】css基础练习。
CSS面试题：30道含答案和代码示例的练习题
三拾的博客
05-08 1125
【代码】CSS面试题：30道含答案和代码示例的练习题。
css 习题练习
一个字，学
04-27 273
css 习题练习 style样式代码可以单独放在新的.css脚本中，也可以直接写在.html脚本里: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
css盒子模型网页练习题
09-10
当涉及到CSS盒子模型的练习题时，以下是一些可以考虑的问题： 1. 创建一个具有特定宽度和高度的固定大小的盒子。 2. 创建一个具有自适应宽度和高度的盒子，以适应其内容。 3. 创建一个具有指定外边距和内边距的盒子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王同学要努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值