web前端基础 html5+css3（七.PS切图与项目实战（学成在线））

原创已于 2022-03-23 17:52:20 修改 · 977 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css #css3

于 2020-06-26 12:58:58 首次发布

html5+css3 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍Photoshop切图技巧，包括图层切图、切片切图及插件切图，同时分享学成在线项目的实战经验，涵盖CSS属性书写顺序、页面布局与样式设置，适合前端开发人员学习。

1.PS切图

（1）图层切图

（2）切片切图

（3）PS插件切图（cutterman）

2.项目实战（学成在线）

css属性的书写顺序

1.布局定位属性：display/position/visibility/overflow（建议display第一个写，毕竟关系到模式）

2.自身属性：width/height/margin/padding/border/background

3.文本属性：color/font/text-decoration/text-align/wetical-align/white-space/break-word

4.其他属性（CSS3）：content/cursor/border-radius/box-shadow/background:linear-gradient...

行内块元素有缝隙

浮动不会有父元素外边距合并的问题

style.css

*{padding:0;margin:0;}
.w1220{width:1220px;margin:0 auto;}
body{background: #f3f5f7;}
li{list-style:none;}
a{text-decoration:none;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}/*IE6,7专有*/
input{border:0}
/*头部start*/
.header{height: 42px;margin:30px auto;}
/*logo*/
.logo{float: left;width: 198px;height: 42px;}
/*导航*/
.nav{float: left;margin-left:60px;}
.nav ul li{float: left;margin:0 15px;}
.nav ul li a{display: block;height: 42px;padding:0 10px;line-height: 42px;color: #333;font-size: 18px;}
.nav ul li a:hover{border-bottom: 2px solid #00a4ff;color: #00a4ff;}
/*搜索*/
.search{float: left; width: 412px;height: 42px;margin-left: 70px;}
.search input{float: left;width: 345px;height: 40px;padding-left:15px; border:1px solid #00a4ff;color: #bfbfbf;font-size: 14px;}
.search button{float: left;width: 50px;height: 42px;border: 0;background:url("images/btn.png");}
.user{float: right;margin-right: 30px;height: 42px;line-height: 42px;}
.user img{vertical-align: middle;}
.user span{color: #666;font-size: 14px;line-height: 42px;}
/*头部end*/
/*banner Start*/
.banner{height: 421px;background: #1c036c;}
.banner .w1220{height: 421px;background: url("images/banner2_20190819_210028.png");}
.subnav{float: left;width:290px;height: 410px;background:rgba(0,0,0,.3);padding-top: 10px;}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;}
.subnav ul li a{display: block;color: #fff;font-size: 14px;}
.subnav ul li span{float: right;color: #fff;}
.subnav ul li a:hover{color: #00a4ff;}
.subnav ul li a:hover span{color: #00a4ff;}
.course{float: right;width: 228px;height: 300px;margin-top:50px;background: #fff;}
.course h2{height: 48px;background:#9bceea;font-weight: 700;color: #fff;line-height: 48px;text-align: center;font-size: 18px;}
.course li{padding: 15px 18px 10px;border-bottom: 1px solid #efefef;}
.course li a{display: block;}
.course li h4{color: #4e4e4e;font-size: 16px;}
.course li p{color: #a5a5a5;font-size: 12px;}
.course>a{display: block;width: 198px;height: 38px;margin: 5px 14px 0;border: 1px solid #22b0ff;color: #00a4ff;font-size: 16px;text-align: center;line-height: 38px;}
/*banner End*/
/*goods Start*/
.goods{height: 60px;margin-top: 8px;background: #fff;line-height: 60px;box-shadow: 0 2px 3px 3px rgba(0,0,0,.3);}
.goods h3{float:left;display: inline-block;margin: 0 34px 0 30px;color: #00a4ff;font-size: 16px;}
.goods .goods-items{float: left;}
.goods .goods-items li{float: left;}
.goods .goods-items li a{padding: 0 34px;border-left: 1px solid #bfbfbf;}
.goods .mod{float: right;margin-right:30px;color: #00a4ff;font-size: 14px;}
/*goods End*/
/*box Start*/
.box .box-hd{height: 64px;margin-top: 13px;line-height: 64px;}
.box .box-hd h3{float: left;color: #494949;font-size: 20px;font-weight: 400;}
.box .box-hd >a{float: right;margin-right: 32px;padding-top: 5px;color: #a5a5a5;font-size: 12px;line-height: 60px;}
.box .box-bd ul{float: left;width: 1240px;}
.box .box-bd ul li{float: left;margin: 0 15px 15px 0;padding-bottom: 20px;width: 233px;height: 270px;background: #Ffff;box-shadow: 0 0 10px 1px rgba(0,0,0,.3);}
.box .box-bd ul li h4{margin: 25px 20px 25px 25px;font-weight: 400;color: #050505;font-size: 14px;}
.box .box-bd ul li img{width: 100%;}
.box .box-bd ul li .info{margin: 0 20px 25px 25px;color: #999999;font-size: 12px;}
.box .box-bd ul li .info span{color: #ff7c2d;}
/*box End*/
/*box-nav Start*/
.box-nav{float: left;margin-left:150px;}
.box-nav li{float: left;}
.box-nav li a{padding: 0 70px;color: #868686;font-size: 16px;}
.box-nav li a:hover{color:#00a4ff;}
/*box-nav End*/
/*box2 Start*/
.boxM .left{float: left;margin-right: 15px;}
.boxM .right{float: left;width: 976px;}
.boxM .right .top{margin-bottom: 20px;width: 100%;}
.boxM .box-bd ul li{height: 245px;}
.boxM .box-bd ul li h4{margin:15px 20px 10px 25px;}
/*box2 End*/
/*footer Start*/
.footer{overflow: hidden;margin-top: 25px;height: 415px;background: #fff;}
.footer .left{float: left;}
.footer .left p{margin: 20px 0 15px;color: #666;font-size: 12px;}
.footer .left img{margin-top: 30px;}
.footer .left a{display: block;width: 118px;height: 34px;border: 1px solid #00a4ff;color: #00a4ff;font-size: 16px;text-align: center;line-height: 34px;}
.footer .right{float: right;margin-right: 30px;}
.footer .right dl{float: left;margin: 30px 0 0 140px;}
.footer .right dt{margin-bottom: 15px;color: #333;font-size: 16px;}
.footer .right dd{color: #333;font-size: 12px;line-height: 20px;}
/*footer End*/

index.html

<!DOCTYPE html>
<html lang="Zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<!--头部-->
	<div class="header w1220">
		<div class="logo">
			<img src="images/logo.png"/>
		</div>
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<div class="search">
			<input type="text" value="输入关键词"/>
			<button></button>
		</div>
		<div class="user">
			<img src="images/user.png"/>
			<span>Crystal</span>
		</div>
	</div>
	<!--banner-->
	<div class="banner">
		<div class="w1220">
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">网页设计<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">网页设计<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">网页设计<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">网页设计<span>&gt;</span></a></li>
					<li><a href="#">网页设计<span>&gt;</span></a></li>
				</ul>
			</div>
			<div class="course">
				<h2>我的课程表</h2>
				<ul>
					<li>
						<a href="#">
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</a>
					</li>
					<li>
						<a href="#">
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</a>
					</li>
					<li>
						<a href="#">
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</a>
					</li>
				</ul>
				<a href="#">全部课程</a>
			</div>
		</div>
	</div>
	<!--goods-->
	<div class="goods w1220">
		<h3>精品推荐</h3>
		<ul class="goods-items">
			<li>
				<a>JQ</a>
			</li>
			<li>
				<a>PHP</a>
			</li>
			<li>
				<a>JS</a>
			</li>
			<li>
				<a>C#</a>
			</li>
			<li>
				<a>javaWeb</a>
			</li>
			<li>
				<a>MYSQL</a>
			</li>
			<li>
				<a>SQLSERVER</a>
			</li>
		</ul>
		<a class="mod">修改兴趣</a>
	</div>
	<!--box1-->
	<div class="box w1220">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd clearfix">
			<ul>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--box2-->
	<div class="boxM box w1220">
		<div class="box-hd">
			<h3>数据分析师</h3>
			<ul class="box-nav">
				<li>
					<a>热门</a>
				</li>
				<li>
					<a>初级</a>
				</li>
				<li>
					<a>中级</a>
				</li>
				<li>
					<a>高级</a>
				</li>
			</ul>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd clearfix">
			<img class="left" src="images/left.jpg"/>
			<div class="right">
				<img class="top" src="images/right.jpg"/>
				<ul>
					<li>
						<a>
							<img src="images/box1.png"></a>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div class="info">
								<span>高级</span> •  1125人在学习
							</div>
						</a>
					</li>
					<li>
						<a>
							<img src="images/box1.png"></a>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div class="info">
								<span>高级</span> •  1125人在学习
							</div>
						</a>
					</li>
					<li>
						<a>
							<img src="images/box1.png"></a>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div class="info">
								<span>高级</span> •  1125人在学习
							</div>
						</a>
					</li>
					<li>
						<a>
							<img src="images/box1.png"></a>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div class="info">
								<span>高级</span> •  1125人在学习
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--box3-->
	<div class="box w1220">
		<div class="box-hd">
			<h3>前端开发工程师</h3>
			<ul class="box-nav">
				<li>
					<a>热门</a>
				</li>
				<li>
					<a>初级</a>
				</li>
				<li>
					<a>中级</a>
				</li>
				<li>
					<a>高级</a>
				</li>
			</ul>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd clearfix">
			<ul>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box1.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box1.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box2.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box1.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box2.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box2.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/pic.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box1.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
				<li>
					<a>
						<img src="images/box1.png"></a>
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span> •  1125人在学习
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		<div class="w1220">
			<div class="left">
				<img src="images/logo.png"/>
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</br>
	© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
				<a>下载APP</a>
			</div>
			<div class="right">
				<dl>
					<dt>关于学成网</dt>
					<dd>关于</dd>
					<dd>管理团队</dd>
					<dd>工作机会</dd>
					<dd>客户服务</dd>
					<dd>帮助</dd>
				</dl>
				<dl>
					<dt>新手指南</dt>
					<dd>如何注册</dd>
					<dd>如何选课</dd>
					<dd>如何拿到毕业证</dd>
					<dd>学分是什么</dd>
					<dd>考试未通过怎么办</dd>
				</dl>
				<dl>
					<dt>合作伙伴</dt>
					<dd>合作机构</dd>
					<dd>合作导师</dd>
				</dl>
			</div>
		</div>
	</div>
</body>
</html>