概述
CSS基本练习
a) 简单设计一个布局，要求能够在页面中合理显示；
b) 设计500x500大小div盒子，要求使用7种方法实现[无宽度、高度、padding、...]；(截图)
c) 要求使用div+css设计一个表格，表格中要求有自己的信息：姓名、学号、...
d) CSS精灵
1）简单设计一个布局，要求能够在页面中合理显示
步骤：1.1）通过使用CSS以及HTML表单对布局进行设计
1.2）通过使用谷歌浏览器的“检查功能”对布局进行调节
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动应用</title>
<style>
@import url("./images/header.css");
.header {
width: 970px;
height: 103px;
background-color: #e8fdff;
margin: 0px auto;
}
.header .left {
float: left;
width: 277px;
height: 103px;
background-color: skyblue;
}
.header .right .top {
float: right;
width: 137px;
height: 49px;
background-color: orange;
}
.header .right .bottom {
float: right;
width: 679px;
height: 46px;
background-color: #5c6954;
margin-top:8px;
}
/*中间部分*/
.middle {
width: 970px;
height: 435px;
background-color: #e8fdff;
margin: 0px auto;
margin-top: 10px;
}
.middle .left {
float: left;
width: 310px;
height: 435px;
background-color: orange;
}
.middle .right {
float: right;
width: 190px;
height: 400px;
background-color: darkviolet;
}
.middle .middle1 {
float: right;
width: 450px;
height: 240px;
background-color: blue;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
}
.middle .middle2 {
float: right;
width: 450px;
height: 110px;
background-color: blue;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.middle .middle3 {-
float: right;
width: 450px;
height: 30px;
background-color: blue;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.middle .middle4 {
float: right;
width: 650px;
height: 25px;
background-color: green;
margin-top: 10px;
}
.bottom {
width: 970px;
height: 35px;
background-color: navy;
margin: 0px auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<font color="black"><a1 href="1_实验.html">浮动应用</a1></font>
</li>
<li><a href="2_实验.html">div盒子</a></li>
<li><a href="3_表格.html">个人信息</a></li>
<li><a href="4_CSS精灵.html">CSS精灵</a></li>
</ul>
</div>
<div class="header">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<div class="middle">
<div class="left"></div>
<div class="right"></div>
<div class="middle1"></div>
<div class="middle2"></div>
<div class="middle3"></div>
<div class="middle4"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2)设计500x500大小div盒子，要求使用7种方法实现[无宽度、高度、padding、...]；
步骤：1.1）通过使用CSS以及HTML表单对盒子进行设计，并使用七种方法进行实现
1.2）通过使用谷歌浏览器的“检查功能”对布局进行调节
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子大小一致</title>
<style>
@import url("./images/header.css");
/*500x500*/
.top {
margin:0 auto;
}
.box1 {
width: 200px;
height: 200px;
padding: 150px;
border: 1px solid #ff2132;
}
.box2 {
width: 500px;
height: 500px;
padding: 0px;
border: 1px solid #fb41ff;
}
.box3 {
width: 300px;
height: 300px;
padding: 96px;
border: 5px solid black;
}
.box4 {
width: 350px;
height: 350px;
padding: 75px;
border: 1px solid orange;
}
.box5 {
width: 0px;
height: 0px;
padding: 250px;
border: 2px dashed darkgray;
}
.box6 {
width: 222px;
height: 222px;
padding: 140px;
border: 2px solid green;
background-color: #5dffd6;
}
.box7 {
width: 114px;
height: 114px;
padding: 193px;
border: 1px dashed blueviolet;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="1_实验.html">浮动应用</a></li>
<li>
<font color="black"><a1 href="2_实验.html">div盒子</a1></font>
</li>
<li><a href="3_表格.html">个人信息</a></li>
<li><a href="5_CSS精灵.html">CSS精灵</a></li>
</ul>
</div>
<div class="div" align="center">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<div class="box5">盒子5</div>
<div class="box6">盒子6</div>
<div class="box7">盒子7</div>
</div>
</body>
</html>
3）要求使用div+css设计一个表格，表格中要求有自己的信息：姓名、学号、...
步骤：1.1）通过使用CSS将表格设计出来
1.2）使用HTML加入个人信息
1.3）通过使用谷歌浏览器的“检查功能”对布局进行调节
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
@import url("./images/header.css");
.box {
width: 500px;
height: 250px;
border: 1px solid red;
margin: 0px auto;
}
.box .tr {
width: 500px;
height: 48px;
border: 1px solid red;
margin: 0px auto;
}
.box .tr .left{
float: left;
width: 248px;
height: 48px;
border: 1px solid red;
margin: 0px auto;
}
.box .tr .right{
float: right;
width: 248px;
height: 48px;
border: 1px solid red;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="1_实验.html">浮动应用</a></li>
<li><a href="2_实验.html">div盒子</a></li>
<li>
<font color="black"><a1 href="3_表格.html">个人信息</a1></font>
</li>
<li><a href="5_CSS精灵.html">CSS精灵</a></li>
</ul>
</div>
<div class="box">
<div class="tr">
<div class="td">
<div class="left"><h2 align="center">姓名</h2></div>
<div class="right"><h2 align="center">x'x'x</h2></div>
</div>
</div>
<div class="tr">
<div class="left"><h2 align="center">学号</h2></div>
<div class="right"><h2 align="center">xxxxxxx</h2></div>
</div>
<div class="tr">
<div class="left"><h2 align="center">班级</h2></div>
<div class="right"><h2 align="center">xxxxx</h2></div>
</div>
<div class="tr">
<div class="left"><h2 align="center">电话</h2></div>
<div class="right"><h2 align="center">xxxxxxx</h2></div>
</div>
<div class="tr">
<div class="left"><h2 align="center">E-mail</h2></div>
<div class="right"><h2 align="center">xxxxxxxx</h2></div>
</div>
</div>
</body>
</html>
4）CSS精灵
步骤：1.1）通过使用CSS对图片进行处理
1.2）通过使用谷歌浏览器的“检查功能”对图片位置进行调节，显示出想要的一个字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS精灵</title>
<style>
@import url("./images/header.css");
.box1 {
width: 180px;
height: 50px;
margin: 0px auto;
}
.box1 .sname {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -155px -193px;
}
.box1 .sname1 {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -55px -77px;
}
.box1 .sname2 {
float: right;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -220px -21px;
}
.box2 {
width: 180px;
height: 50px;
margin: 0px auto;
}
.box2 .name {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -267px -191px;
}
.box2 .name1 {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -2px -77px;
}
.box2 .name2 {
float: right;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -55px -77px;
}
.box3 {
width: 240px;
height: 50px;
margin: 0px auto;
}
.box3 .lname {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -39px -134px;
}
.box3 .lname1 {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -209px -19px;
}
.box3 .lname2 {
float: left;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -317px -77px;
}
.box3 .lname3 {
float: right;
width: 60px;
height: 50px;
background: url("./images/name.jpg") no-repeat -324px -19px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="1_实验.html">浮动应用</a></li>
<li><a href="2_实验.html">div盒子</a></li>
<li><a href="3_表格.html">个人信息</a></li>
<li>
<font color="black"><a1 href="5_CSS精灵.html">CSS精灵</a1></font>
</li>
</ul>
</div>
<div class="box1">
<div class="sname"></div>
<div class="sname1"></div>
<div class="sname2"></div>
</div>
<div class="box2">
<div class="name"></div>
<div class="name1"></div>
<div class="name2"></div>
</div>
<div class="box3">
<div class="lname"></div>
<div class="lname1"></div>
<div class="lname2"></div>
<div class="lname3"></div>
</div>
</body>
</html>
最后
以上就是淡淡大树为你收集整理的CSS的综合应用的全部内容，希望文章能够帮你解决CSS的综合应用所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复