提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
七十二、ps基本操作与图片格式
快捷键：
ctrl+c:显示隐藏图标
在标尺上可以拖拽参考线
可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有参考线
图层中的小眼睛可以对当前图层进行显示隐藏
alt+滚轮：可以对图片进行放大缩小
图片格式
jpg风景图
png半透明图
gif动图
psd显示局部图层（选择移动工具，点击自动选择）
七十三、PNG等图片切图流程
一、
1、通过矩形选框工具，选择指定的区域
微调：alt减少区域
shift增加区域
上下左右键进行微调
利用参考线记录量取的位置，以便以后测量 其他的值
2、ctrl+c复制图层
ctrl+n新建图层
ctrl+v粘贴图层
存储为web格式
二、
利用切片工具
八十四、relation相对定位
<style>
#box1{width:100px;height:100px;background:red;}
#box2{width:100px;height:100px;background:blue;
position:relative;left:100px}
#box3{width:100px;height:100px;background:black}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
八十五、absolute绝对定位
1、使元素完全脱离文本
<style>
#box1{width:100px;height:100px;background:blue;
position:absolute}/*脱离文本*/
#box2{width:200px;height:200px;background:black}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
2、让内联具有宽高
<style>
span{width:100px;height:100px;
background:red;position:absolute;}
</style>
</head>
<body>
<span>这是一个内联</span>
3、让块的宽高由内容决定
<style>
div{background:blue;position:absolute }
</style>
</head>
<body>
<div>这是一个块</div>
“块”宽由字决定，长由页面决定
4、
<style>
#box1{width:300px;height:300px;
border:1px black solid;
margin:200px;position:relative;}
#box2{width:100px;height:100px;
background:red;position:absolute;
right:100px;bottom:100px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
定位子元素相对于定位祖先元素发生偏移，
没有定位祖元素相对于整个文档偏移。
（绝对、相对、固定）
八十六、fixed固定和sticky黏性固定及zIndex
1、fixed
后面要加位置
相对于整个浏览器窗口进行偏移时，不受浏览器滚动条的影响
使内联具有宽高
<style>
body{height:2000px;}
#box1{width:200px;height:200px;border:1px
red solid;position:relative;margin:200px;}
#box2{width:100px;height:100px;position:
fixed;left:0;top:0;background-color:blue;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
2、sticky黏性固定
<style>
div{background-color:red;position:sticky;top:0px;}
</style>
<body>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<div>这是一个块</div>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
3、z-index优先级
<style>
#parent{width:100px;height:100px;border:2px red solid;position:absolute;z-index:2}
#box1{width:100px;height:100px;background-color:blue;position:absolute;z-index:3}
#box2{width:200px;height:200px;background-color:black;
position:absolute;left:20px;top:20px;z-index:1}
#box3{width:150px;height:150px;background-color:aqua}
</style>
<body>
<div id="parent">
<div id="box1"></div>
</div>
<div id="box2"></div>
<div id="box3"></div>
八十七、定位实现下拉菜单
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#men{width:100px;height:30px;border:1px black solid;
margin:20px auto;position:relative}
#men ul{width:100px;height:200px;border:1px black solid;
position:absolute;left:-1px;top:30px;
background-color:aliceblue;display:none;}
#men:hover ul{display:block;}
#men ul li:hover{background-color: blueviolet;}
p{text-align:center}
</style>
<body>
<div id="men">卖家
<ul>
<li>我</li>
<li>是</li>
<li>大</li>
</ul>
</div>
<p>啦啦啦啦</p>
八十八、定位实现居中和装饰点
<style>
#box1{width:300px;height:300px;border:1px black solid;position:relative;}
#box2{width:100px;height:100px;background-color:blue;
position:absolute;margin:-50px 0 0 -50px;left:50%;top:50%;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
八十九、css添加省略号
1、width：必须有一个固定的宽
2、white-space:nowrap
不让内容折行
3、overflow:hidden
隐藏溢出的内容
4、text-overflow:ellipsis
添加省略号
<style>
div{width:100px;border:1px black solid;overflow:hidden;
white-space:nowrap;margin:auto;
text-overflow:ellipsis;}
</style>
<body>
<div>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
九十、css精灵及好处
<style>
#div1{width:20px;height:21px;
background:url(./ll.png) no-repeat left -596px;}
#div2{width:300px;height:50px;border:1px black solid;
line-height:50px;padding-left:30px;
background:url(./22.png) no-repeat -516px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
九十一、css圆角设置
<style>
#box1{width:200px;height:200px;
background:blue;border-radius:50%;}
#box2{width:300px;height:150px;
background:black ;border-radius: 150px 150px 0 0;}
#box3{width:100px;height:100px;
background:red;border-radius:50px / 100px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
PC端
加上绝对位置之后没有宽度
<!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>
<link rel="stylesheet" href="./commen.css">
<style>
#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position: relative;}
#banner .banner_list li{width: 100%;height: 100%;background:center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 10;}
#banner .banner_list a{display: block;width: 100%;height: 100%;}
#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: 50%;box-sizing: border-box;margin: 6px;}
#banner .banner_btn li.active{background-color: white;}
#service{overflow: hidden;min-height: 407px;}
#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;}
#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/web2.png);}
#service .service_list li:nth-of-type(3) div{background-image: url(./images/web3.png);}
#service .service_list li:nth-of-type(4) div{background-image: url(./images/web4.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{background: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{counter-reset: #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: 14;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;color: white;}
#news{min-height: 450px;overflow: hidden;}
#news .area_title{margin-top: 65px;}
#news dl{margin-top: 48px;}
#news dt{float: left;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;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;}
</style>
</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_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 id="banne" class="contaner-fluid">
<ul class="banner_list">
<li class="active" style="background-image: url(../images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image: url(../images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image: url(../images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image: url(../images/banner.png);">
<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="comtainer">
<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="comtainer">
<div class="area_title"></div>
<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/20141121095216750.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121095528549.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121105856226.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="#">VIEW MORE</a>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt>
<img src="./images/xs1.png" alt="">
</dt>
<dd>
<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>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>09</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>
public.css
@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{
font-size:16px;
font-family: '微软雅黑';
}
ul,ol,li{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-size:16px;
font-weight: normal;
}
b,strong{
font-weight: normal;
}
i,em{
font-style: normal;
}
a,u,ins{
text-decoration: none;
}
img{
border: none;/*取消IE浏览器里面加了超链接的图片的默认边框*/
display: block;/*取消图片的默认空隙*/
}
input,fieldset{
outline: none;/*取消input聚焦时产生的蓝色框*/
border:0;
}
.clear_fix:after{
content:'.';
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear_fix{
zoom:1;/*兼容ie6,7的高度自适应问题*/
}
博文尚美.css
.top,.banner,.service,.client,.news,.bottom{
width: 1082px;
margin:0 auto;
}
/*top区域*/
.top{
/*padding: 19px 0 18px 135px;*/
height: 81px;
}
.top .logo{
float: left;
}
.top .nav{
font-family: arial;
padding-top: 19px;
float: right;
}
.top .nav li{
float: left;
}
.top .nav a{
display: block;
color: #646464;
line-height: 44px;
padding: 0 28px 0 27px;
}
.nav .lastli a{
padding-right: 0;
}
/*banner区域*/
.bannerWrap{
width: 100%;
height: 469px;
background:black url(../img/banner-shangmei.jpg) no-repeat center top ;
}
.banner{
height: 469px;
position: relative;
}
.banner p{
width: 92px;
height: 12px;
position: absolute;
bottom: 19px;
left: 50%;
margin-left: -46px;
}
.banner p span{
float: left;
width: 8px;
height: 8px;
border:2px solid #fff ;
margin:0 6px 0 5px;
border-radius: 50%;
font-size: 0;
}
.banner p span:hover{
background: #fff;
}
/*service区域*/
.service{
height: 407px;
}
.tit{
height: 81px;
background:url(../img/bj1.png) no-repeat center 67px;
line-height: 32px;
font-size: 20px;
color: #363636;
text-align: center;
padding-top: 55px;
}
.tit span{
font-size: 14px;
line-height: 20px;
font-family: arial;
color: #9f9f9f;
display: block;
}
.service-list{
padding: 0 10px;
}
.service-list li{
width: 190px;
height: 270px;
float: left;
text-align: center;
padding: 0 37px ;
}
.service-list li img{
margin: 0 auto;
}
.service-list h4{
font-size: 14px;
line-height: 36px;
font-weight: bold;
color: #343434;
}
.service-list p{
font-size: 14px;
line-height: 22px;
color: #6d6d6d;
}
/*client区域*/
.clientWrap{
width: 100%;
height: 460px;
background: #f8f8f8;
}
.client{
height: 460px;
}
.client .tit{
height: 90px;
padding-top: 50px;
color:#66c5b4;
background: url(../img/bj1.png) no-repeat center 61px;
}
.client span{
color: #9f9f9f;
}
.client p img{
float: left;
margin: 0 7px 0 12px;
}
.client .more{
display: block;
width: 176px;
height: 37px;
font-size: 14px;
font-family: Arial;
line-height: 42px;
color: #ffffff;
text-align: center;
background:#66c5b4;
border-radius:18px ;
margin: 0 auto;
margin-top: 36px;
}
/*news区域*/
.news{
margin-bottom: 89px;
}
.news .tit{
height: 104px;
padding-top: 62px;
background: url(../img/bj1.png) no-repeat center 73px;
}
.news-content img{
width: 224px;
height: 186px;
border:5px solid #e5e5e7 ;
float: left;
}
.news-content_right{
width: 840px;
float: left;
}
.news-content_right dl{
width: 420px;
float: left;
}
.news-content_right dl:nth-child(1),.news-content_right dl:nth-child(2){
margin-bottom: 44px;
}
.news-content_right dt{
width: 72px;
height: 71px;
font-family: arial;
text-align: center;
border-right: 1px solid #dcdcdc ;
float: left;
}
.news-content_right dt .span1{
height: 50px;
font-size: 39px;
line-height: 61px;
font-weight: bold;
color: #66c5b4;
}
.news-content_right dt span{
display: block;
height: 21px;
font-size: 20px;
line-height: 30px;
color: #999999;
}
.news-content_right dd{
float: right;
width: 330px;
margin-left: 17px;
}
.news-content_right dd h4{
height: 22px;
font-size: 14px;
line-height: 24px;
color: #3f3f3f;
margin-bottom: 12px;
}
.news-content_right .special{
color: #dcdcdc;
}
.news-content_right dd p{
height: 37px;
font-size: 12px;
line-height: 21px;
color: #a4a4a4;
padding-left: 3px;
}
/*bottom区域*/
.bottomWrap{
width: 100%;
height: 54px;
background: #66c5b4;
}
.bottom{
font-size: 12px;
font-family: arial;
line-height: 54px;
color: #fff;
}
.bottom .copy{
float: left;
}
.subnav{
float: right;
}
.bottom a {
float: left;
height: 11px;
color: #fff;
}
.bottom span{
margin: 0 19px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
