前端页面开发流程
1、创建页面项目目录
2、使用Photoshop对效果图切图，切出网页制作中需要的小图片
3、将装饰类图像合并，制作成雪碧图
4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面
新建项目
新建index.html
<!-- html:xt + tab(需安装emmet 插件) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
reset.css （公共属性）
/* 将标签默认的间距设为0 */
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{
margin:0;
padding:0;
}
/* 去掉默认的小圆点 */
ul{
list-style:none;
}
/* 去掉默认的下划线 */
a{
text-decoration:none;
}
/* 设置不倾斜 */
em{
font-style:normal;
}
/* 去掉在IE下图片做链接时生成的边框 */
img{
border:0px;
}
/* 让h标签继承body中的字体大小的设置 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
/* 清除浮动、解决margin-top塌陷 */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float:left;
}
.fr{
float:right;
}
首页头部制作
效果图
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-首页</title>
<!-- 引入CSS文件 注意先后顺序 -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- 页面顶部 -->
<div class="header_con">
<div class="header">
<!--调用公共属性 fl fr 左右浮动 -->
<div class="welcome fl">欢迎来到天天生鲜!</div>
<div class="user_con fr">
<!--登录前的状态 ul.login_btns>(li>a)*2 -->
<ul class="login_btns fl" style="display:none">
<li><a href="#">登录</a></li>
<li><span>|</span></li>
<li><a href="#">注册</a></li>
</ul>
<!--登录后的状态 -->
<div class="user_info fl" style="display:block ">
欢迎您：<em>张山</em>
</div>
<!-- ul.user_btns>(li>a)*2 -->
<ul class="user_btns fl">
<li><span>|</span></li>
<li><a href="#">我的购物车</a></li>
<li><span>|</span></li>
<li><a href="#">我的订单</a></li>
</ul>
</div>
</div>
</div>
main.css
/* 页面顶部的样式 */
body{
font-family:'Microsoft Yahei';
font-size:14px;
}
.header_con{
height:29px;
background-color:#f7f7f7;
border-bottom:1px solid #ddd;
}
.header{
width:1200px;
height:29px;
margin:0 auto;
}
.welcome{
font-size:12px;
color:#666;
line-height:29px;
}
.user_con{
/* background-color:gold; */
}
.user_info{
display:none;
font-size:12px;
line-height:29px;
color:#666;
}
.user_info em{
color: #f80
}
.login_btns li,.user_btns li{
float:left;
height:29px;
}
.login_btns a,.login_btns span,.user_btns a,.user_btns span{
display:block;
line-height:29px;
font-size:12px;
color:#666;
}
.login_btns span,.user_btns span{
color:#cecece;
margin:0 10px;
}
.login_btns a:hover,.user_btns a:hover{
color:#f80;
}
logo 搜索框 购物车
效果图
html
<!-- logo、搜索框、购物车 -->
<div class="center_con">
<a href="index.html" class="logo fl"><img src="images/logo.png" alt="天天生鲜网站logo"></a>
<div class="search_con fl">
<form>
<input type="text" name="" class="input_txt fl" placeholder="搜索">
<input type="submit" name="" class="input_sub fl" value="搜索">
</form>
</div>
<div class="chart_con fr">
<a href="#" class="chart_link fl">我的购物车</a>
<div class="chart_num fl">5</div>
</div>
</div>
main.css
/* logo、搜索框、购物车的样式 */
.center_con{
width:1200px;
height:115px;
margin:0 auto;
}
.logo{
margin:29px 0 0 17px;
}
.search_con{
width:616px;
height:38px;
margin:34px 0 0 124px;
border:1px solid #37ab40;
background:url(../images/icons.png) 10px 10px no-repeat;
}
.search_con .input_txt{
margin-left:36px;
width:480px;
height:38px;
border:0px;
/* 去掉获得焦点时显示的蓝色的框 */
outline:none;
}
.search_con .input_sub{
width:100px;
height:38px;
background-color:#37ab40;
border:0px;
font-size:14px;
color:#fff;
/* 将鼠标的形状设置为手型 */
cursor:pointer;
}
.chart_con{
width:200px;
height:40px;
margin-top:34px;
}
.chart_link{
width:158px;
height:38px;
border:1px solid #ddd;
background:url(../images/icons.png) 12px -42px no-repeat #f7f7f7;
text-indent:56px;
line-height:38px;
font-size:14px;
color:#37ab40
}
.chart_num{
width:40px;
height:40px;
background-color:#f80;
text-align:center;
font:bold 18px/40px 'Microsft Yahei';
color:#fff;
}
主菜单
效果图
html
<!-- 主菜单 -->
<!-- .main_menu_con -->
<div class="main_menu_con">
<div class="center_con02">
<h2>全部商品分类</h2>
<!-- ul>(li>a{首页})*3 -->
<ul>
<li><a href="">首页</a></li>
<li><a href="">手机生鲜</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
mian.css
.main_menu_con{
height:40px;
border-bottom:2px solid #39a93e;
}
.center_con02{
width:1200px;
height:40px;
margin:0 auto;
}
.center_con02 h2{
float:left;
width:200px;
height:40px;
background-color:#39a93e;
text-align:center;
font:normal 14px/40px 'Microsoft Yahei';
color:#fff;
}
.center_con02 li{
height:40px;
float:left;
}
.center_con02 ul{
float:left;
overflow:hidden;
}
.center_con02 li a{
display:block;
height:14px;
line-height:14px;
padding:0 20px;
margin-top:13px;
margin-left:-1px;
border-left:1px solid #666;
color:#666;
}
.center_con02 li a:hover{
color:#f80;
}
main.css
二级菜单、幻灯片、广告
效果图
html
<div class="center_con03">
<ul class="sub_menu_con fl">
<li><a href="">新鲜水果</a></li>
<li><a href="" class="icon02">新鲜水果</a></li>
<li><a href="" class="icon03">新鲜水果</a></li>
<li><a href="" class="icon04">新鲜水果</a></li>
<li><a href="" class="icon05">新鲜水果</a></li>
<li><a href="" class="icon06">新鲜水果</a></li>
</ul>
<div class="slide_con fl">
<ul class="slide">
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="advs fl">
<a href="#"><img src="images/adv01.jpg" alt="广告图片"></a>
<a href="#"><img src="images/adv02.jpg" alt="广告图片"></a>
</div>
</div>
main.css
.center_con03{
width:1200px;
height:270px;
margin:0 auto;
}
.sub_menu_con{
width:200px;
height:270px;
}
.sub_menu_con li{
width:198px;
height:44px;
border:1px solid #eee;
border-top:0px;
background:url(../images/icons.png) 178px -384px no-repeat;
}
.sub_menu_con li a{
display:block;
height:44px;
line-height:44px;
text-indent:71px;
color:#333;
background:url(../images/icons.png) 33px -90px no-repeat;
}
.sub_menu_con li a:hover{
color:#f80
}
.sub_menu_con li .icon02{
background-position:31px -140px;
}
.sub_menu_con li .icon03{
background-position:33px -190px;
}
.sub_menu_con li .icon04{
background-position:35px -240px;
}
.sub_menu_con li .icon05{
background-position:33px -288px;
}
.sub_menu_con li .icon06{
background-position:33px -338px;
}
.slide_con{
width:760px;
height:270px;
background-color:pink;
position:relative;
overflow:hidden;
}
.slide_con .slide{
position:absolute;
width:4560px;
height:270px;
left:0;
top:0;
}
.slide_con .slide li{
float:left;
}
.prev,.next{
position:absolute;
width:15px;
height:24px;
background:url(../images/icons.png) left -450px no-repeat;
left:0;
top:0;
cursor:pointer;
}
.prev{
left:11px;
top:122px;
}
.next{
background-position:left -500px;
left:732px;
top:122px;
}
.advs{
width:240px;
height:270px;
background-color:lightgreen;
}
.points{
position:absolute;
/*ul为块元素，定位后转为行内块 需设置宽度100%*/
width:100%;
height:11px;
left:0;
bottom:9px;
font-size:0;
text-align:center;
}
.points li{
display:inline-block;
width:11px;
height:11px;
background-color:#9f9f9f;
margin:0 5px;
/*圆角 在低版本浏览器中仍为方块 优雅降级促使用户使用高版本浏览器*/
border-radius:50%;
cursor:pointer;
}
.points .active{
background-color:#cecece
}
/* 解决图片下3像素空白的bug */
.advs img{
display:block;
}
菜单和声明
效果
html
<div class="common_model">
<div class="common_title_con">
<h3>新鲜水果</h3>
<ul>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
</ul>
<a href="#" class="more">查看更多 ></a>
</div>
<div class="goods_banner fl"><a href="#"><img src="images/banner01.jpg" alt="banner"></a></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
</ul>
</div>
<div class="common_model">
<div class="common_title_con">
<h3>新鲜水果</h3>
<ul>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
</ul>
<a href="#" class="more">查看更多 ></a>
</div>
<div class="goods_banner fl"><a href="#"><img src="images/banner02.jpg" alt="banner"></a></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<div class="price">¥ 38.00</div>
</li>
</ul>
</div>
<div class="footer">
<div class="footer_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
</body>
</html>
main.css
.common_model{
width:1200px;
height:337px;
margin:20px auto 0;
}
.common_title_con{
height:35px;
border-bottom:2px solid #42ad46;
}
.common_title_con h3{
float:left;
font:bold 16px/35px 'Microsoft Yahei';
color:#37ab40;
}
.common_title_con ul{
float:left;
height:12px;
border-left:1px solid #666;
margin:12px 0 0 20px;
}
.common_title_con li{
float:left;
line-height:12px;
margin-left:15px;
}
.common_title_con li a{
line-height:12px;
font-size:12px;
color:#666;
}
.common_title_con li a:hover{
color:#f80
}
.common_title_con .more{
float:right;
font:normal 12px/35px 'Microsoft Yahei';
color:#666;
}
.common_title_con .more:hover{
color:#f80
}
.goods_banner{
width:200px;
height:300px;
}
.goods_list{
width:1000px;
height:300px;
}
.goods_list li{
width:249px;
height:299px;
border-right:1px solid #ededed;
border-bottom:1px solid #ededed;
float:left;
}
.goods_list li h4{
font:normal 14px/50px 'Microsoft Yahei';
text-align:center;
color:#666;
}
.goods_list li a{
display:block;
width:180px;
height:180px;
margin:0 auto;
}
.goods_list li .price{
font:bold 20px/50px 'Microsoft Yahei';
color:#c40000;
text-align: center;
margin-top:20px;
}
.footer{
border-top:2px solid #4ab14e;
margin:30px 0 40px;
}
.footer_link{
text-align:center;
margin-top:38px;
}
.footer_link a{
color:#4e4e4e;
font-size:12px;
}
.footer_link span{
color:#4e4e4e;
font-size:12px;
padding:0 10px;
}
.footer_link a:hover{
color:#f80
}
.footer p{
text-align:center;
margin-top:14px;
font-size:12px;
}
练习案例
效果
<body>
<div class="news_list_con">
<!-- .news_list>h3{新闻列表}+a{更多} -->
<div class="news_title">
<h3>新闻列表</h3>
<a href="#">更多 >></a>
</div>
<!-- ul>(li>a{新闻标题}+span{2017-4-17})*6 -->
<ul class="news_list">
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
<li><a href="#">新闻标题</a><span>2017-4-17</span></li>
</ul>
</div>
<div class="goods_list_con">
<h3>淘宝女装</h3>
<div class="banner"><img src="images/banner.jpg" alt="banner"></div>
<div class="goods_list">
<dl>
<dt><a href="#"><img src="images/cloth.jpg" alt="衣服"></a></dt>
<dd>时尚包包</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/cloth02.jpg" alt="衣服"></a></dt>
<dd>时尚包包</dd>
</dl>
<div class="links_list">
<a href="">新品上市</a>
<a href="">新品上市</a>
<a href="">新品上市</a>
<a href="">新品上市</a>
</div>
</div>
</div>
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
