其他一些零碎知识

最新推荐文章于 2022-08-27 17:12:22 发布

有梦想的小胖孩

最新推荐文章于 2022-08-27 17:12:22 发布

阅读量237

点赞数

123321

本文链接：https://blog.csdn.net/FGH_123321/article/details/78450187

版权

 
 在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 
 ），注册页面（ 
 r 
 egister 
 .html 
 ） 

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

关注