1.padding的练习
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
/* 外围只设置背景颜色 */
#navWrapper{
background: #2e2e2e;
}
/* 设置版心的宽高 */
#nav{
width: 962px;
height: 58px;
background: red;
/* 有宽高的块状元素水平居中浏览器 */
margin:0 auto;
/* 注意 建议给父元素设置行高 因为超链接就一行 想要单行文字垂直居中 设置行高=高度值 */
line-height: 58px;
}
#nav a{
/* 代表选中了id名字为nav的元素 里面所有超链接 */
/* 文字大小 */
font-size: 12px;
/* 文字颜色 */
color:#ffffff;
/* 去除超链接下划线 */
text-decoration: none;
/* 我先设置一个背景颜色 方便我们看 */
background: #f90;
/* 设置右边框 */
border-right: 1px solid #474747;
/* 文字内容到边界之间的距离 使用padding */
padding-left: 31px;
padding-right: 32px;
}
#nav .noborder{
/* 去除边框 */
border:0;
}
</style>
</head>
<body>
<div id="navWrapper"><!-- 外围 -->
<div id="nav"> <!-- 版心 -->
<a href="javascript:;">集团介绍</a>
<a href="javascript:;">集团介绍</a>
<a href="javascript:;">集团介绍</a>
<a href="javascript:;">集团介绍</a>
<a href="javascript:;">集团介绍</a>
<a href="javascript:;">投资者关系</a>
<a href="javascript:;">集团介绍</a>
<a href="javascript:;" class="noborder">集团介绍</a>
</div>
</div>
</body>
2.padding的练习
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
/* 外围只需要设置背景颜色 因为块状元素默认宽度独占一行 也就是width:100%可以省略 高度由版心撑开 */
#navWrapper{
background: #232323;
}
/* 设置版心宽高 */
#nav{
width: 993px;
height: 60px;
/* 有宽高的块状元素水平居中 */
margin:0 auto;
/* 单行文本 垂直居中 设置行高=高度值 */
line-height: 60px;
}
#nav a{
/* 文字大小 */
font-size: 14px;
/* 文字颜色 */
color:#ffffff;
/* 去除超链接下划线 */
text-decoration: none;
background: url(../images/1.png) no-repeat right center;
/* 距离左右各有15px的补白区 */
padding:0 15px; /* 代表上下为0 左右为15px */
}
#nav a:hover{
background: #f15a23;
}
</style>
</head>
<body>
<!-- 因为外围有颜色 所以写外围+版心 -->
<div id="navWrapper"><!-- 外围 -->
<div id="nav"><!-- 版心 -->
<a href="javacsript:;">首页</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">APP外包</a>
<a href="javacsript:;">创业孵化</a>
<a href="javacsript:;">创业孵化</a>
</div>
</div>
</body>
3.头部的练习
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
#header{
width: 962px;
height: 100px;
background: pink;
/* 有宽高的块状元素水平居中浏览器 */
margin:0 auto;
}
#header img{
/* 注意 图片img和输入框input可以设置上下padding border margin 还可以设置宽高 */
margin-top: 33px;
}
input{
/* 靠右呢 就是右浮 */
float: right;
margin-top: 37px;
width: 223px;
height: 26px;
border:1px solid #e5e5e5;
background: #f1f1f1 url(../images/4.png) no-repeat 203px center;
/* 注意 扩展 去除聚焦线 */
outline: 0;
/* 首行缩进 */
text-indent: 2em;
}
</style>
</head>
<body>
<!-- 因为外围是白色 所以直接写版心 -->
<div id="header">
<img src="../images/3.png" alt="">
<input type="text" placeholder="SEARCH...">
</div>
</body>
4.行内元素设置浮动后可设置宽高
<!-- 内部样式表的创建 -->
<style type="text/css">
#nav{
width: 1200px;
height: 80px;
background: #333;
/* 有宽高的块状元素水平居中浏览器 */
margin:0 auto;
/* 单行文本垂直居中 设置行高=高度值 */
line-height: 80px;
}
a{
color:#FFF;
/* 去除超链接下划线 */
text-decoration: none;
/* background: red; */
/* 设置右边框 */
border-right: 2px solid #ff0;
padding:0 20px;
/* 设置左浮 */
float: left;
}
a:hover{
background: #f90;
}
</style>
</head>
<body>
<div id="nav">
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
<a href="javascript:;">产品中心</a>
</div>
</body>
5.色块
<!-- 内部样式表的创建 -->
<style type="text/css">
.big{
width: 962px;
height: 500px;
background: pink;
}
.son{
width: 210px;
height: 400px;
background: cyan;
/* 横向展现 */
float: left;
margin-right: 40px;
}
.son4{
margin-right: 0;
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son son4"></div>
</div>
</body>
6.练习1
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:180px;(240-25-37)
height: 240px;
background:#fbfbfb url(../images/2.png) no-repeat right bottom;
/* 设置内填充 会将里面的内容 往里挤一挤 */
padding-left: 25px;
padding-right: 37px;
overflow: hidden;;/* 因为h2设置margin-top 会带着父元素box一起下移 设置这行代码来解决该问题 */
}
h2{
font-size: 18px;/* 文字大小 */
color:#222;/* 文字颜色 */
font-weight: normal;/* 取消加粗 */
/* 距离上方的间距 */
margin-top: 36px;
/* 距离下方的距离 */
margin-bottom: 21px;
}
p{
font-size: 12px;
color:#5a5a5a;
line-height: 24px;
}
.more{
width: 66px;
height: 19px;
background: #b0b0b0;
color:#FCFCFC;
/* 我们英文其实有字体 今天了解一下 */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
/* 文字在色快里水平居中 */
text-align: center;
/* 单行文本垂直居中 设置 行高=高度值 */
line-height: 19px;
/* 距离上方22 */
margin-top: 22px;
/* 圆角 */
/* border-radius: 可以写数值 4px 也可以写百分比; */
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<h2>人才招聘</h2>
<p>培养一流的人才，铸造一流的工程 实现员工与企业的共同发展</p>
<div class="more">more--></div>
</div>
</body>
7.练习2
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
.box{
/* width: 240px-padding多出来的48; */
width: 192px;
height: 240px;
background: #f1f1f1;
/* 给父元素设置内填充 这样子就会把文字往里挤 */
padding-left: 25px;
padding-right: 23px;
overflow: hidden;
}
h2{
color:#40444f;/* 文字颜色 */
font-size: 18px;/* 文字大小 */
font-weight: normal;/* 取消较粗 */
padding-top: 36px;/* 距离上方的间距 */
margin-bottom: 33px;/* 距离下方的距离 */
}
.font12{
font-size: 12px;/* 文字颜色 */
color:#4e4e4e;/* 文字大小 */
line-height: 25px;/* 设置行高 */
}
.p3{
font-size: 12px;/* 文字颜色 */
color:#909090;/* 文字大小 */
line-height: 24px;/* 设置行高 */
margin-top: 15px;/* 距离上方间距 */
}
</style>
</head>
<body>
<div class="box">
<h2>公司介绍</h2>
<p class="font12">公司成立于1984年,</p>
<p class="font12">经过近30年的发展</p>
<p class="p3">已成为电器制造、房地产开发和金融投资三业并举的综合性跨国...</p>
</div>
</body>
8.浮动 float:left;左浮
float:right;右浮
float：none;不浮
浮动元素脱离文档流了 不占据位置
注意！！任何元素都可以设置浮动 任何元素设置浮动之后 都可以设置宽高 都可以设置上下左右padding border margin
注意 元素设置了浮动 没有写高度 那么行高就是他的高度
在周四 周五 周六这三天 子元素设置浮动 父元素一定要写高度！！！
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5移动端获奖无缝滚动动画实现