CSS的综合应用

来源：互联网发布：开淘宝店的诈骗案编辑：程序博客网时间：2024/05/16 02:11

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 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 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>

</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>

0 0