其他一些零碎知识

最新推荐文章于 2024-08-30 18:03:56 发布

原创最新推荐文章于 2024-08-30 18:03:56 发布 · 293 阅读

CC 4.0 BY-SA版权

123321

本文介绍如何使用CSS绘制圆形、三角形、V形等图形，并详细解释了logo设置、版心设置及精灵图的运用，提供了丰富的代码实例。

在css中画圆,例如:

<style type="text/css">

div{

width: 200px;

height: 200px;

background-color: #000;

/*border-top-left-radius: 100px;

border-bottom-left-radius: 100px;

border-top-right-radius: 100px;

border-bottom-right-radius: 100px;*/

border-radius: 100px;

}

</style>

在css中画三角形,例如:

<style type="text/css">

*{

margin: 0;

padding: 0;

}

div{

width: 0px;

height: 0px;

/*border-width: 100px;*/

border-left-color:transparent;

border-right-color: transparent;

border-top-color: transparent;

border-bottom-color: red;

border-width: 100px;

border-style: solid;

margin-top:-100px;

}

</style>

logo的设置

给定一个div.添加背景图片,并将a标签中的文字进行缩进(text-indent:-9999px;)

版心

/*版心*/

.w{

width:980px ;

margin:0 auto;

/*border:1px solid;*/

}

精灵图

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>精灵图讲解</title>

<style type="text/css">

div{

width: 24px;

height: 22px;

background-image: url(images/fly.png);

background-position: 0 -102px;

/*

1 左右

2 上下

*/

}

</style>

</head>

<body>

<!-- 精灵图的优点

将多个小图片在同一个图片上显示，加快的图片的加载效率，减少了占用的空间和内存

-->

<div></div>

</body>

</html>

V的制作

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>xiaojian</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

i,s{

text-decoration: none;

font-style: normal;

}

i{

display: inline-block;

width: 16px;

height: 8px;

/*border: 1px solid red;*/

overflow: hidden;

position: relative;

overflow: hidden;

}

s{

position: absolute;

top: -11px;

}

</style>

</head>

<body>

<i>

<s>◇</s>

</i>

</body>

</html>

写网页的注意点:

1． 固定的文件夹存放网页的位置

2． 必备：效果图，存放图片的文件夹，存放css的文件夹

3． 创建base.css文件

a) css初始化 

i. 目的：清空某些标签默认的一些属性

ii. 初始化的代码示例:*{margin:0;padding:0}

iii. 注意：不建议使用*，建议换为:div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dd,dt

b) 页面的公共代码base

4． 创建主页面(index.html)或者登陆（login.html），注册页面（register.html）

5． 在当前页面中导入base.css文件