小黑子的HTML入土过程第四章

HTML+CSS系列教程第四章
- 4.1 relative相对定位
- 4.2 absolute绝对定位
- 4.3 fixed和sticky及zIndex
- - fixed固定定位
  - sticky黏性定位
  - z-index定位层级
- 4.4 定位实现下拉菜单
- 4.5 定位实现居中
- 4.6 css添加省略号
- 4.7 CSS精灵及好处
- 4.8 CSS圆角设置
- 4.9 PC端企业类型整页制作--博文尚美练习展示

HTML+CSS系列教程第四章

4.1 relative相对定位

position :static（默认)relativeabsolutefixedsticky
relative:作用如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流不影响其他元素布局left、top、right、bottom是相对于当前元素自身进行偏移的

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width:100px;height: 100px;background: red;}#box2{width:100px;height: 100px;background: blue;margin-left: 100px;margin-top: 100px;}#box3{width:100px;height: 100px;background: yellow;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
</html>

—>但是这样做有缺陷，下面的块会随上一个的块而top移动

—>改进

#box2{width:100px;height: 100px;background: blue;
position: relative;left: 100px;top: 100px;}

这样就可以让一个块动而不影响其他的块

4.2 absolute绝对定位

absolute:（1）使元素完全脱离文档流（2）使内联元素支持宽高(让内联具备块特性（3）使块元素默认宽根据内容决定（让块具备内联的特性)（4）如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位
祖先元素相对于整个文档发生偏移（绝对、相对、固定)

(1)

    <style>#box1{width: 100px;height: 100px;background: red;position: absolute;}#box2{width: 200px;height: 200px;background: blue;}</style>
<body><div id="box1"></div><div id="box2"></div>
</body>

没加position: absolute;之前时

加了position: absolute;之后脱离了文档流
—>

(2)

<style>
span{width: 100px;height: 100px;background: red;
position: absolute;}</style>
<body><span>这是一个内联的</span>
</body>

没加position: absolute;之前内联不随内容变化

加了之后随内容而变化
—>

(3)

<style>
div{background: red;position: absolute;} </style>
<body><div>这是一个块</div>
</body>

没加position: absolute;之前

加了之后块有了内联属性，随着内容而变
—>

（4）
1.蓝块绝对偏移到可视角上，不会随滚动条移动而偏移

<style>
#box1{width:300px;height: 300px;border: 3px black solid;margin: 200px;}
#box2{width:100px;height: 100px;background: blue;
position: absolute;left: 0;bottom: 0;}</style>
<body><div id="box1"><div id="box2"></div></div></div>
</body>

—>

2.relative与absolute组合出现，块围绕着嵌套的祖先元素进行相对偏移

<style>
#box1{width:300px;height: 300px;border: 3px black solid;margin: 200px;position: relative;}
#box2{width:100px;height: 100px;background: blue;
position: absolute;left: 0;bottom: 0;}</style>
<body><div id="box1"><div id="box2"></div></div></div>
</body>

—>

4.3 fixed和sticky及zIndex

fixed固定定位

fixed:使元素完全脱离文档流使内联元素支持宽高(让内联具备块特性)使块元素默认宽根据内容决定（让块具备内联的特性)
与absoulte的区别：该固定定位相对于整个浏览器窗口进行偏移，不受浏览器
滚动条的影响

范例：

<style>body{height: 2000px;}div{width: 100px;height: 100px; background: red; position: fixed;bottom: 0;right: 0;}</style>
<body><div>这是一个弹窗</div>
</body>

—>

sticky黏性定位

在指定的位置，进行黏性操作。

范例：

<style>body{height: 2000px;}div{background: red;position: sticky;top: 50px;}</style>
<body><p>aaaaaa</p><p>aaaaaa</p>   <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><div>这是一个块</div><p>bbbbbbb</p><p>bbbbbbb</p><p>bbbbbbb</p><p>bbbbbbb</p><p>bbbbbbb</p><p>bbbbbbb</p>
</body>

由

—>随滚动条滑动，块依旧与窗口保持相对位置

z-index定位层级

默认层级为0
嵌套时候的层级问题

<style>#box1{width: 100px;height: 100px;background: red;position: absolute;z-index: 1;}#box2{width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px; z-index: 0;}</style>
<body><div id="box1"></div><div id="box2"></div>
</body>

由于蓝块是后写故蓝块优先级高

但加了z-index可用条件优先级
—>

4.4 定位实现下拉菜单

范例：

<style>*{margin:0;padding: 0;}ul{ list-style: none;}  #menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}#menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background: white;display: none;} //display: none作用于开始时隐藏下列表，不占空间p{text-align: center;}  //将p标签移动到中心文本对齐#menu:hover ul{display: block;}   //作用于鼠标移到块时显示下列表#menu ul li:hover{background: gray;} //作用于列表项指到时呈现灰色</style>
<body><div id="menu">卖家中心<ul><li>列表项1</li><li>列表项1</li><li>列表项1</li><li>列表项1</li><li>列表项1</li></ul></div><p>测试段落测试段落测试段落测试段落测试段落</p>
</body>

—>

当鼠标画到卖家中心时
—>

4.5 定位实现居中

<style>
#box1{width: 300px;height: 300px;border: 2px black
solid;position: relative;}
#box2{width: 100px;height: 100px;background: red;
position: absolute;left: 50%;top: 50%;margin:
-50px 0 0 -50px;}   //left:50%指的是块左边的对齐到中间//top:50%指的是块左上角到中间//margin: -50px 0 0 -50px;根据上面left和top由四个值上由下左实现居中     </style>
<body><div id="box1"><div id="box2"></div></div>
</body>

—>

4.6 css添加省略号

1.设置了宽度文字超过了会折行

    <style>#content{width: 200px;border: 1px black solid;}</style>
<body><div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div>

2.不让内容折行

    <style>#content{width: 200px;border: 1px black solid;white-space:nowra;}</style>

3.隐藏溢出的内容

    <style>#content{width: 200px;border: 1px black solid;white-space:nowrap;overflow: hidden;}</style>

4.添加省略号

   <style>#content{width: 200px;border: 1px black solid;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}</style>

4.7 CSS精灵及好处

在一个长条的sprite图中根据长，宽高来进行选图

no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后，你的背景图片将不会被重复，再换一种说法，你在网站上所看到的背景图片就是你所添加的图片，不会出现平铺或者重复的现象。
例如：

效果：

4.8 CSS圆角设置

实现圆角修饰
1.相切半径为20px时

<style>#box{width: 200px;height: 200px;background: red;border-radius: 20px;}</style>
</head>
<body><div id="box"></div>
</body>

—>

2.相切半径为块直径200的1/2时：100px

3.

<style>#box{width: 200px;height: 200px;background: red;border-radius:  20px（修改左上和右下） 50px（修改右上和左下;}</style>
</head>
<body><div id="box"></div>
</body>

—>

4.当border-radius有四个值时
例如：
border-radius：4px（左上） 10px（右上） 20px（右下）30px（左下）
效果：

半圆效果
border-radius: 150px 150px 0 0
—>

5.不规则形状
例：
border-radius: 70px/100px;

4.9 PC端企业类型整页制作–博文尚美练习展示

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博文尚美</title><link rel="stylesheet" href="./css/common.css">
</head>
<body><!-- 网页头部部分 --><div id="head" class="container"><div class="head_logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_mean r"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOL1O</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul></div> <!--背景图部分--><div id="banner" ><ul class="list"> <li style="background-image: url(./images/banner.png);"><a href="#"></a></li><li class="active" style="background-image:url(./images/banner.png)"><a href="#"></a></li><li class="active" style="background-image:url(./images/banner.png)"><a href="#"></a></li><li class="active" style="background-image:url(./images/banner.png)"><a href="#"></a></li></ul><ol class="btn"> <!--四点切换 --><li class="active"></li><li></li><li></li><li></li></ol></div><!--服务范围部分--><div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR SERVICES</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网页制作<br>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标记logo设计/产品宣传设计<br>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p></li><li><div></div><h3>4.MAILBOXAGENTS</h3><p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制研发</p></li></ul></div><!-- 客户案例 --><div id="case" class="conntainer-fluid"><div class="container"><div class="area_title"><h2>{客户案例}</h2><p>with the best professional technology,to design the best innovative web site</p></div><ul class="case_list clear "><!--清除浮动对绿块的影响--><li><a href="#"><img src="./images/戴墨镜.png" alt=""></a></li><li><a href="#"><img src="./images/景.png" alt=""></a></li><li><a href="#"><img src="./images/蓝网页.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div><!-- 最新资讯 --><div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt class="l"><img src="./images/办公室.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优化...</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTMLS程序语言出现,大有逐渐代替Flash网站,但是过于生硬的HTMLS动画效果,始终...</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">做个网站多少钱？</a></h3><p>"做个网站多少钱?"很多客户打电话过来直接第—句就抛出来的问题。这好比买辆车多少钱，你是要..</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站,—夜出现搜索引擎首页独战鳌头。但是事实告诉我们，罗马不是一...</p></div></li></ul></dd></dl></div><!-- 网页底部部分 --><div id="foot" class="container-fluid"><div class="container"><p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p><div class="r"><a href="#">Home</a>|<a href="#"> About</a> |<a href="#"> Portfolio</a> |<a href="#"> contact</a></div></div></div>
</body>
</html>

css部分

*{margin: 0;padding: 0;box-sizing: border-box;
} /*（重置）浏览器默认样式*/ol,ul,li{list-style: none;} /*消除li列表前面的小点点*/img{display: block;
} /* display: block;令内联拥有块属性*/a{text-decoration: none;color: #646464;
}  /* text-decoration: none文本不添加任何装饰: none */h1,h2,h3{font-size: 16px;}/*修改字体类型*/body{font-family: Arial;
}.l{float:left;}
.r{float: right;}.clear:after{content:"";display: block;clear: both;}.container{width: 1080px;margin: 0 auto;position: relative;} /* 版心 */.container-fluid{width: 100%;height: 100%;}   /*通栏*//*头部部分*/
#head{height: 81px;}#head .head_logo{width: 164px;height: 44px;margin-top: 19px;}#head .head_mean li{float: left; margin-left:58px;}#head .head_mean{font-size: 14px; line-height: 81px;}/* banner部分 */#banner{position: relative;}#banner .list{position: relative;width: 100%;height: 469px;}#banner .list li {width: 100%;height: 100%;background:center 0 no-repeat;position: absolute;left: 0;top: 0;}#banner .list li .active{opacity: 1;z-index: 10;}#banner .list li a{display: block;width: 100%;height: 100%;}/* 底部圆点部分 */#banner .btn{width: 100%; position: absolute;bottom: 19px;text-align: center;}  /*底部圆点居中在下，提高优先级*/#banner .btn li{display: inline-block;width: 12px;height: 12px;border: 3px white solid;border-radius: 50%;margin: 0 6px;cursor: pointer;}/*令鼠标可点击背景*/#banner .btn .active{background: white;}/* service    */#service{overflow: hidden;min-height: 407px;} /*将margin的传递溢出隐藏并设置和上图片的最小高度*/#service .service_list{text-align:center ;margin-top: 34px;}#service .service_list li{float: left;width: 250px;margin: 0 10px;}#service .service_list div{width: 102px;height: 102px;margin: 0 auto;}#service .service_list li:nth-of-type(1) div{background-image: url(../images/web1.png);}#service .service_list li:nth-of-type(2) div{background-image: url(../images/graphic1.png);}#service .service_list li:nth-of-type(3) div{background-image: url(../images/e-bussiness1.png);}#service .service_list li:nth-of-type(4) div{background-image: url(../images/mail1.png);}#service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}#service .service_list p{font-size: 14px;color: #6D6D6D;line-height: 22px;}            .area_title{ margin-top: 60px;text-align: center;}.area_title h2{height: 20px;line-height: 20px;font-size: 20px;color: #363636;background:url(../images/title_bg.png) no-repeat center;font-weight: normal;
} /*调节服务范围和其作用图片*/.area_title p{color: #9F9F9F;font-size: 14px;list-style: 34px;} /*服务范围下面的文字调节*//* case部分 */#case{background:#f8f8f8 ;}#case .container{min-height: 460px; overflow: hidden;}#case .area_title{margin-top: 55px;}#case .area_title h2{color: #66C5B4; }#case .case_list{margin-top: 28px;}#case .case_list li{float: left;width: 340px;margin: 0 10px;}#case .case_btn{width: 176px;height: 37px;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14px;background: #66C5B4;margin-top: 36px;}#case .case_btn a{display: block;width: 100%;height: 100%;color: white;border:3px solid #66c5b4;border-radius: 40px;background-color: #66c5b4;cursor: pointer;
}
/* news部分 */
#news{min-height: 450px;overflow: hidden;}#news .area_title{margin-top: 65px;}#news dl{margin-top: 48px;}#news dt{width:234px;}#news dd{width:846px;}#news .news_list{width: 100%; }#news .news_list li{width: 50%;float: left;margin-bottom: 48px;}#news .news_date{width: 71px;height: 70px;border-right: 1px solid #DCDCDC;text-align: center;}#news .news_date i{color: #66C5B4;font-size: 39px;display: block;font-weight: bold;}#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}    #news .news_text{width: 310px;margin-left: 20px}#news .news_text h3{font-size: 14px;}#news .news_text h3 a{color: #3F3F3F;}#news .news_text p{color: #A4A4A4;font-size: 12px;line-height: 21px;margin-top: 17px;}/* foot部分 */
#foot{background: #66C5B4;}#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}#foot a{color: white;margin: 0 10px;}

—>效果展示

只因小黑子的HTML入土过程第四章相关推荐

只因小黑子的HTML入土过程第五章
小黑子的HTML入土过程第五章 HTML+CSS系列教程第五章 5.1 b标签与i标签 5.2 引用标签基本操作 5.3 iframe嵌套页面 5.4 br标签与wbr标签 5.5 pre标签与cod ...
只因小黑子的jquery入土过程
小黑子的jquery系列入土过程 jquery系列教程 1. 初识jquery 1.2 jquery选择器 1.2.1 基本选择器 1.2.2 选择器-特殊选择器 1.3 筛选器 2. jquery操 ...
小黑子的HTML入土过程第二章
小黑子的HTML入土过程第二章 2.HTML+CSS系列教程第二章 2.1 嵌套列表 2.2 表格标签 2.3 表格属性 2.3.1 border: 2.3.2 cellpadding: 2.3.3 ...
计算机地图制图的过程,第四章计算机地图制图过程.ppt
第四章计算机地图制图过程课件四.图幅整饰 (1)固定比例尺 2.用ArcGIS制作地图四.图幅整饰 (2)设置幅面大小 2.用ArcGIS制作地图四.图幅整饰 (3)布局地图(粗调整) 2.用A ...
利用计算机程序解决问题的基本过程,第四章第一节编制计算机程序解决问题
1.硬件基础知识: 内存:内存分成两个部分ROM(断电也能够保留数据)和RAM(断电时其中的数据就会丢失) 显卡:承担显示图形的输出声卡:实现声波/数字信号相互转换的一种硬件. 网卡:计算机与外界局 ...
小黑子—Java从入门到入土过程：第四章
Java零基础入门4.0 Java系列第四章 1. 顺序结构 2. if语句 3. switch 语句 3.1 default的位置和省略 3.2 case 穿透 3.3 switch 新特性 (jd ...
Huffman树在编码中有着广泛的应用。在这里，我们只关心Huffman树的构造过程。
Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, -, pn-1},用这列数构造Huffman树的过程如下: 1. 找到{p ...
基础练习 Huffuman树 _C语言和C++描述！（Huffman树在编码中有着广泛的应用。在这里，我们只关心Huffman树的构造过程。　　给出一列数{pi}={p0, p1, …, pn-1）
问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, -, pn-1},用这列数构造Huffman树的过程如下: 1. ...
计算机过程控制系统教材,过程控制系统-样章试读.PDF
过程控制系统-样章试读.PDF 高等院校教材过程控制系统陈夕松汪木兰主编李奇主审 KB2 北京内容简介本书以过程控制系统组成和结构为线索,介绍了过程控制的基本概念,过程控制 ...

只因小黑子的HTML入土过程第四章