首页 > 网站 > WEB开发 > 正文

css基础1

2024-04-27 15:12:11
字体:
来源:转载
供稿:网友

 使用webstorm 编辑

1. 确定项目文件夹

2. 规划好页面

    a. 首页   index.html

    b. 样式  CSS文件夹: css文件      base样式 和  global 样式

   c.  图片  images文件夹  

    d. 特效  js文件夹:js文件

3. css初始化

4. 引入css

   <link rel="stylesheet"  href="css/base.css">

5.引入favicon图标

   <link rel=""  href="favicon.ico">

6. css权重

    标签 1    ,   类 10 ,id 100 , 行内 1000 ,

7. 

网页稳定:

        Width 和height  最稳定

        其次 padding    

        最后才考虑margin

8 . 清除浮动

清除浮动的目的就是为了解决父亲盒子的高为0的问题

a.额外标签法

<div class=" cl h"></div>

.cl{clear:both}

.h{height:}

b. overflow:hidden

c. 伪元素法

.clearfix:after {          content:””;          Visibility:hidden;            Display:block;           Height:0;          Clear:both;     }    .clearfix{      Zoom:1;}

  d. 双伪元素法

.clearfix:before,.clearfix:after{    display: table;    content: "";}.clearfix:after {    clear: both;}.clearfix {    zoom: 1;}案例:

<!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" xml:lang="en"><head>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	<title>Document</title>	<style type="text/css">		*{			margin: 0px;			padding: 0px;		}		.father{			width: 600px;			border: 1px solid red;			/* overflow: hidden; */		}		.xiongda,.xionger{			width: 200px;			height: 100px;			background-color: yellow;			float: left;		}		/* 双伪元素清除浮动 */		.xiongda,.xionger{			width: 200px;			height: 100px;			background-color: yellow;			float: left;		}		.clearfix:after{			display: block;			content: "";			clear: both;			visibility: hidden;			height: 0;		}		.clearfix{			zoom:1;		}		/* 伪元素清除浮动		.clearfix:before,.clearfix:after{			display: table;			content: "";		}		.clearfix:after{			clear: both;		}		.clearfix{			zoom:1;		} */	</style></head><body>	<div class="father clearfix">		<div class="xiongda">熊大</div>		<div class="xionger">熊二</div>	</div></body></html>

   


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表