初识前端开发
position定位
position特性
cssposition属性用于指定一个元素在文档中的定位方式。top、right、
bottom、left 属性则决定了该元素的最终位置。
relative相对定位
- 如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流不影响其他元素布局
- left、top、right、bottom是相对于当前元素自身进行偏移的
<style>
#box1{width: 100px;height:100px;background-color: black;}
#box2{width: 100px;height:100px;background-color: grey;position: relative;left: 100px;top: 100px;}
#box3{width: 100px;height:100px;background-color: #23238e;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
效果展示
absolute绝对定位
- 使元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联的特性)
- 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
当div进行嵌套时，可以利用相对定位和绝对定位改变块的相对位置
<style>
#box1{width: 300px;height:300px;border: black 1px solid;position: relative;margin: 200px;}
#box2{width: 100px;height:100px;background-color: grey;position: absolute;left: 0px;top: 0px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
效果展示
fixed固定定位
- 使元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联的特性)
- 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位
在指定的位置，进行黏性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题
练习：定位实现下拉菜单
<!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>Test</title>
<style>
*{margin: 0;
padding: 0;}
ul{
list-style: none;
}
#menu{
width: 100px;
height: 30px;
margin: 20px auto;
border: 1px black solid;
position: relative;
background-color: #0573B8;
text-align: center;
line-height: 30px;
}
#menu ul{
width: 100px;
border: 1px black solid;
position: absolute;
left: -1px;
top: 30px;
background: white;
display: none;
}
#menu:hover ul{display: block;}
#menu ul li:hover{
background-color: #4F9CEE;
}
</style>
</head>
<body>
<div id="menu">
综合服务
<ul>
<li>学院校历</li>
<li>作息时间</li>
<li>班车信息</li>
<li>地理交通</li>
</ul>
</div>
</body>
</html>
效果展示
练习：定位实现元素居中
<style>
.box1{
width: 300px;
height: 300px;
border: 1px black solid;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: gray;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
效果展示
练习：定位实现列表装饰点
#box{font-weight: bold;
color:#B7B8B7;
margin-right: 25px;
padding-left: 10px;
position: relative;}
#box::before{
content: "";
display: block;
width: 3px;
height: 3px;
background-color: black;
position: absolute;
left: 2px;
top:50%;
margin-top: -2px;
}
效果展示
CSS添加省略号
- width
必须有一个固定的宽 - white-space:nowrap
不让内容折行 - overflow:hidden
隐藏溢出的内容 - text-overflow: ellipsis
添加省略号
效果展示
CSS Sprite
- 特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页
面涉及到的所有零星图片都包含到一张大图中去加载。 - 好处
可以减少图片的质量，网页的图片加载速度快减少图片的请求的次数，加快网页的打开
<style>
.pic{
width: 500px;
height: 500px;
background: url("./LCF.jpg") no-repeat left -270px
}
</style>
</head>
<body>
<div class="pic"></div>
</body>
效果展示
CSS圆角
- border-radius
给标签添加圆角
设置半圆
<style>
.semicircle{
width: 300px;
height: 150px;
background-color: gray;
border-radius: 150px 150px 0 0;
}
</style>
</head>
<body>
<div class="semicircle"></div>
</body>
效果展示
博文尚美首页
- 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>HomePage</title>
<link rel="stylesheet" href="./HomePage.css">
</head>
<body>
<div id="head" class="container">
<div class="head_logo l">
<a href="">
<img src="./logo.png" alt="" title="">
</a>
</div>
<div>
<ul class="head_menu r">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PROTFOLIO</a></li>
<li><a href="">SERVICE</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div id="banner" class="container-fluid" style="background-image:url(./banner.png) ;">
<ul class="banner_list">
<li class="active">
<a href=""></a>
</li>
<li>
<a href="" ></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
<ol class="banner_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="container-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="./20141121095216750.png" alt=""></a>
</li>
<li>
<a href=""><img src="./20141121095528549.png" alt=""></a>
</li>
<li>
<a href=""><img src="./20141121105856226.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="" style="padding-bottom: 36px;">view more</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="new_pic">
<img src="./xs1.png" alt="">
</dt>
<dd>
<ul class="new_list">
<li class="new_list">
<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 class="new_list">
<div class="news_date l">
<i>08</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="">flash网站制作的优缺点</a></h3>
<p>虽然HTML5程序语言大量出现，大有逐渐代替Flash网站的意味，但是过于生硬的HTML5动画效果，始终...</p>
</div>
</li>
<li class="new_list">
<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 class="new_list">
<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;
}
ul,ol{
list-style: none;
}
img{
display: block;
}
a{
text-decoration: none;
color: #646464;
}
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%;
}
#head{
height: 81px;
}
#head .head_logo {
width: 162px;
height: 44px;
margin-top: 19px;
margin-right: 0;
}
#head .head_menu{
font-size: 14px;
height: 81px;
}
#head .head_menu li{
float: left;
margin-left: 52px;
line-height: 81px;
}
#banner{
position: relative;
width: 1352px;
margin: 0 auto;
}
#banner .banner_list{
width: 100%;
height: 469px;
position: relative;
}
#banner.banner_list li{
width: 100%;
height: 100%;
background: center 0 no-repeat;
background-size: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 1;
}
#banner.banner_list li a{
display: block;
width: 100%;
height: 100%;
}
#banner.banner_list li :active{
opacity: 1;
z-index: 10;
}
#banner.banner_btn{
width: 100%;
position: absolute;
bottom: 19px;
z-index: 20;
font-size: 0;
text-align: center;
}
#banner.banner_btn li{
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid white;
border-radius: 100%;
}
#banner.banner_btn li.active{
background: white;
}
.area_title{
margin-top: 60px;
text-align: center;
}
.area_title h2{
height: 20px;
line-height: 20px;
font-size: 20px;
color: #363636;
background: url(./title_bg.png) no-repeat center;
}
.area_title p{
color: #9F9F9F;
font-size: 14px;
line-height: 34px;
}
#service{
overflow: hidden;
min-height: 470px;
}
#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(./web1.png);
}
#service .service_list li:nth-of-type(2) div{
background-image: url(./mail1.png);
}
#service .service_list li:nth-of-type(3) div{
background-image: url(./graphic1.png);
}
#service .service_list li:nth-of-type(4) div{
background-image: url(./e-bussiness1.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;
}
#case .container{
min-height: 400px;
overflow: hidden;
background-color: #F9F8F9;
}
#case .area_title{
margin-top: 55px;
}
#case .new_pic{
position: absolute;
}
#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;
background:#66C5B4;
margin: 0 auto;
border-radius: 25px;
line-height: 37px;
text-align: center;
font-size: 14px;
margin-top: 21.5px;
}
#case .case_btn a{
display: block;
width: 100%;
height: 100%;
color: white;
}
#news{
min-height: 450px;
overflow: hidden;
}
#news .new_pic{
float: left;
}
#news .area_title{
margin-top: 65px;
}
#news dl{
margin-top: 48px;
}
#news dt{
width: 234px;
}
#news dd{
width: 846px;
float: left;
}
#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;
margin-left: 20px;
}
#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: 300px;
margin-left: 20px;
margin-bottom: 48px;
}
#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;
line-height: 21px;
margin-top: 17px;
}
#foot{
background: #66C5B4;
}
#foot .container{
height: 54px;
line-height: 54px;
font-size: 12px;
color: white;
}
#foot div a{
color: white;
margin: 0 10px;
}
效果展示
扫一扫
2235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
