一、前端学习之HTML+CSS编写静态页面-欧莱雅首页

最新推荐文章于 2023-06-06 17:47:50 发布

码上有钱.

最新推荐文章于 2023-06-06 17:47:50 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： CSS案例 Css学习

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本人也是前端入门小白先从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感兴趣的可以加让我们共同进步

码上有钱.

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
一、前端学习之HTML+CSS编写静态页面-欧莱雅首页

本人也是前端入门小白先从HTML开始进阶到Css 注:使用Css重点的思路是将页面大体分成多个盒子,在每个盒子内调节边距、添加相应的样式、最后用div去调用定义的样式组成相应的页面对于没有学习Css的同学这样说可能是有点迷但是学完Css后写一个Demo就会明白其中的奥秘.下面就是我实际编写的案例: 注:此案例也是我从CSDN中去找的1....
复制链接

扫一扫