IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > css基本语法及css练习(第三天)

css基本语法及css练习(第三天)

时间:2017-01-18 08:28来源:原创 作者:恪己 点击:
一、CSS 1.标准文档流 标准文档流是浏览器在解析HTML标记时,按: 块级对象垂直排列;行内对象水平排列的方式进行解析。 2.浮动定位 float 描述:设置对象浮动 语法:float:left|right; 说明: A.对
一、CSS
1.标准文档流
标准文档流是浏览器在解析HTML标记时,按:
块级对象垂直排列;行内对象水平排列的方式进行解析。
2.浮动定位
float
描述:设置对象浮动
语法:float:left|right;
说明:
A.对象设置浮动后将脱离标准文档流(也就是不占用页面空间);
B.对象设置浮动后将尽量向左/向右移动,直到遇到父对象的边界或上一个浮动对象的边界为止;
C.当某个对象的所有子对象都存在浮动属性时,父对象的高度将清除为零;
D.如果没有足够的空间容纳对象,则对象将垂直排列;
3.当某个对象的所有子对象都存在浮动属性时,父对象的高度将清除为零
方法A:为父对象设置明确的高度(局限性);
方法B:清除父对象的浮动(普遍性)
4.clear属性
描述:清除对象的浮动
语法:clear:left|right|both;
对象结构不被破坏,但仍然清除浮动,只能通过CSS样式中的:after的伪元素选择器实现。
:after伪元素选择器
描述:在指定元素之后插入内容(强调为父子关系),往往与content属性组合使用
用法:选择器:after{...}
content属性
描述:设置内容,内容为行内元素
语法:content:'内容';
display属性
描述:设置对象的显示方式
语法:display:inline|block|none;
display:none后对象在页面中将隐藏,也就是说其不占用空间;
visibility:hidden后对象在页面中将隐藏,其但其仍然占用空间;
visibility
描述:设置对象是否可见
语法:visibility:visible|hidden;
overflow
描述:设置溢出的处理
语法:overflow:visible|hidden;
 
 
练习题(网页完整代码如下) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <title>仿新浪新闻</title>
 <style>
/*Reset CSS*/
 body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,div,dl,dt,dd{
 margin: 0;
padding: 0;
}
ul,ol{
ist-style:none;
}
body{
font:12px/22px 宋体;
}

.container{
margin: 0 auto;
width: 1000px;
border:5px solid #000;
}
.clearfix:after{
display: block;
clear: both;
height: 0;
visibility: hidden;
content: '.';
}
.clearfix{
zoom:1;
}
.p_left{
float: left;
width: 340px;
}
.p_middle{
float: left;
margin: 0 20px;
width: 360px;
}
.p_right{
float:left;
width:260px;
}
.list_with_flag li{
padding-left:14px;
background-image:url(images/list_bg_blue.png);
background-repeat: no-repeat;
background-position: 0 50%;
font-size:14px;
}
.list_without_flag li{
padding-left:14px;
font-size:14px;
}
.view .image{
float: left;
width: 110px;
}
.view .txt{
float:left;
width: 130px;
margin-left:20px;
}
.focus_title li{
float: left;
}
.focus_image{
width: 340px;
height: 238px;
border: 2px solid #ff0;
overflow: hidden;
}
.xwfyt-title{
font-size: 16px;
font-weight: normal;
     font-family: "Microsoft YaHei",
}
.video-image{
float: left;
width: 160px;
margin-right: 20px;
}
.video-txt{
float: left;
width: 160px;
}
.show-title{
color: #900;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="p_left">
<div class="auto_focus">
<ul class="focus_title clearfix">
<li>热点</li>
<li>聚焦</li>
<li>天下</li>
<li>现场</li>
<li>军事</li>
</ul>
<div class="focus_image">
<img src="images/1fxycika8876974.jpg" alt="">
<img src="images/2fxycika8884377.jpg" alt="">
<img src="images/3fxyawmm3526361.jpg" alt="">
<img src="images/4fxyawmq6966993.jpg" alt="">
<img src="images/5fxyawmm3477838.gif" alt="">
</div>
</div>
<div class="xwfyt">
<h3 class="xwfyt-title">新闻放映厅</h3>
<!-- 视频开始 -->
<div class="video-info clearfix">
<div class="video-image"><img src="images/6fxxwrwk1744384.jpg" alt=""></div>

     

------分隔线----------------------------
栏目列表
推荐内容