本人也是前端入门小白 先从HTML开始进阶到Css
注:使用Css重点的思路是 将页面大体分成多个盒子,在每个盒子内调节边距、添加相应的样式、最后用div去调用定义的样式组成相应的页面 对于没有学习Css的同学这样说可能是有点迷 但是学完Css后 写一个Demo就会明白其中的奥秘.
下面就是我实际编写的案例:
注:此案例也是我从CSDN中去找的
1.原图
2.图中的小图片地址如下:
链接:http://pan.baidu.com/s/1pLbYAhX 密码:fm8g
3.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欧莱雅实战</title>
<style>
/*重置/ 基本标签样式设置*/
*{font-size: 12px; font-family:"微软雅黑"; color: antiquewhite; margin: 0 auto;}
body{margin: 0;background: #161616;}
a{text-decoration: none; display: block;color: #FFF;}
img{border: none;display: block;}/*display:block; #块元素 可以将元素分开自动增加换行符*/
ul li{list-style: none; margin: 0; padding: 0;} /*list-style#移除列表前小标志*/
input{border: none;}
/**/
.headed{width: 952px; height: 140px;}/*页面整体高度*/
.top{height: 87px; overflow: hidden;}/*设置Logo的高度*/
.top_nav{width: 726px; height: 87px; float: right;}/*相对logo向右浮动*/
.logo{float: left;}/*logo相对向左浮动*/
.top_right{
width: 726px;
float: right;
margin-left: 7px;
}
.top_right a{
float: right;
width: 92px;
height: 22px;
color: #FFF;
padding-top: 10px;
}
.top_right img{
float: left; margin-left: 18px;
}
.top_right span{
color: #FFF;
float: right;
width: 52px;
margin-top: 4px;
}
.top_right .main{color: #F88c00;}
.top_right span:hover{
color: #F93;
}
.login{float: right;height: 55px;padding-top: 20px;width: 726px;}
.login a{float: right;margin-left: 5px;}
.nav{width: 952px; height: 102px;}
.navleft{float: left;width: 400px;}
.navleft ul{padding-left: 0;list-style: none;margin-left: 0;}
.navleft li{float: left; padding-right: 30px;padding-top: 20px;}
.navleft a{color: #999;}
.navright{float: right; width: 525px;padding-top: 20px;}
.navright a{float: right; margin-left: 50px;}
.navright img{float: left;}
.buy{color: #c0973d;}
/*产品系列展示*/
.product a{padding-bottom: 40px;}
.footer{height: 154px; width: 952px; margin-top: 25px;}
.footer_left{width: 173px; height: 153px; float: left;}
.footer_left input{background: #282828; width: 147px; height: 24px;}
.footer_left .main{float: right;}
.footer_middle{float: left; width: 550px;}
.footer_first{width: 480px;}
.footer_first a{float: left;width: 80px;border-right: 1px solid #FFF; color: #FFF;}
.footer_first span{ margin-left: 14px; color: #FFF;}
.footer_vip{float: left;}
.footer_vip a{padding-left: 15px; float: left;}
.footer_vip span{color: #FFF;}
.footer_vip img{float: right;}
.footer_phone{width: 480px; text-align: center; height: 12px; padding-top: 14px;}
.footer_phone{margin-top: 10px;}
.footer_copyright p{padding-top: 24px; text-align: center;}
.footer_right img{float: right; margin-top: 24px;}
</style>
</head>
<body>
<!--head-->
<div class="headed">
<div class="top">
<div class="logo">
<img src="img/logo.png" />
</div>
<div class="top_nav">
<div class="top_right">
<div class="top_right">
<a href=""><img src="img/man.png" /><span class="main">型男手册</span> </a>
<a href=""><img src="img/sina.png" /><span>微博互动</span></a>
<a href=""><img src="img/vidio.png" /><span>视频直播</span></a>
<a href=""><img src="img/Evaluation.png" /><span>测评中心</span></a>
</div>
<div class="login">
<a href=""><span>注册</span></a><a href=""><span>登录</span></a>
</div>
</div>
<div class="nav">
<div class="navleft">
<ul>
<li><a href="">护肤</a></li>
<li><a href="">护发</a></li>
<li><a href="">彩妆</a></li>
<li><a href="">染发</a></li>
<li><a href="">男士</a></li>
</ul>
</div>
<div class="navright">
<a href=""><img src="img/buy.png"/><span class="buy">电子商城</span></a>
<a href=""><span>品牌故事</span></a>
<a href=""><span>会员专区</span></a>
</div>
</div>
</div>
</div>
</div>
<!--PRODUCT--->
<div class="product">
<a href=""><img src="img/youthcode.png"/></a>
<a href=""><img src="img/shine.png"/></a>
<a href=""><img src="img/pure.png"/></a>
<a href=""><img src="img/brandnew.png"/></a>
<a href=""><img src="img/brand.png"/> </a>
<a href=""><img src="img/beauty.png"/> </a>
<a href=""><img src="img/loreal.png"/> </a>
</div>
<!--footer-->
<div class="footer">
<!--footerleft-->
<div class="footer_left">
<input/><a class="main" href=""><img src="img/infor.png" /> </a>
</div>
<!--footer_middle-->
<div class="footer_middle">
<div class="footer_first">
<a href=""><span>联系我们</span></a>
<a href=""><span>销售网点</span></a>
<a href=""><span>网站地图</span></a>
</div>
<div class="footer_vip">
<a href=""><span>2019年会员积分</span></a>
<a href=""><span>其他国家地区和网站</span><img src="img/sanjiao.png"/></a>
</div>
<!--footer_phone-->
<div class="footer_phone">
<p>巴黎欧莱雅客户关怀中心:400-821-5098 会员积分服务热线:400-820-0660</p>
</div>
<div class="footer_copyright">
<p>沪ICP备11031739</p>
</div>
<!--footer_right-->
<div class="footer_right">
<img src="img/logoparis.png" />
</div>
</div>
</div>
</body>
</html>
本人Qq:294402584 对IT感兴趣的可以加 让我们共同进步