HTML+CSS简单实例(一)

HTML+CSS简单实例(一)

本实例参考https://blog.csdn.net/u010871058/article/details/78511848

目的:实现简单欧莱雅网站。

  1. 代码内容:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/*重置,也就是清理不干净的标签*/
*{ font-size:12px; font-family:"宋体"; color:#444;margin:0 auto;}/*是共用的意思*/
body{ margin:0; background:#161616;}
a{ text-decoration:none; display:block; color:#FFF;}
img{ border:none; display:block}
ul li{list-style:none; margin:0; padding:0;}
input{ border:none;}
/**/
.headed{width:952px;height:140px;}  /*这个是块的整体高*/
.top{height:87px;overflow:hidden;}  /*这个top是指LOGO和top_nav,overflow是溢出的意思,这个就是子级溢出后父级的如何控制溢出部分?注:要把overflow加给父级*/
.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; padding-left:18px;}
.top_right span{ color:#FFF;
                 float:right;
                 width:52px;
                 margin-top:4px;}
.top_right .man{ 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 .mail{float:right;}

.footer_middle{  float:left; width:640px;}
.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{ float:right;}
style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>

<body>

<div class="headed">
       <div class="top">
              <div class="logo">
                           <img src="images/logo.png" />
              div>
              <div class="top_nav">
                           <div class="top_right">
                           <a href=""><img src="images/man.png" /><span class="man">型男手册span>a>
                           <a href=""><img src="images/sina.png" /><span>微博互动span>a>
                           <a href=""><img src="images/vidio.png" /><span>视频直播span>a>
                           <a href=""><img src="images/Evaluation.png" /><span>测评中心span>a>
                           div>
                           <div class="login">
                           <a href=""><span>注册span>a><a href=""><span>登录span>a>
                           div>
              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="images/buy.png" /><span class="buy">电子商城span>a>
                  <a href=""><span>品牌故事span>a>
                  <a href=""><span>会员专区span>a>
             div>
        div>
div>

<div class="product">
      <a href=""><img src="images/youthcode.png" />a>
      <a href=""><img src="images/shine.png" />a>
      <a href=""><img src="images/pure.png" />a>
      <a href=""><img src="images/brandnew.png" />a>
      <a href=""><img src="images/brand.png" />a>
      <a href=""><img src="images/beauty.png" />a>
      <a href=""><img src="images/loreal.png" />a>
div>

<div class="footer">
      
      <div class="footer_left">  
           <input><a class="mail" href=""><img src="images/infor.png" />a>
      div>
      
      <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>2013年会员积分况礼span>a>
           <a href=""><span>其它国家地区和网站span><img src="images/sanjiao.png" />a>
           div>
           <div class="footer_phone">
             <p>巴黎欧莱雅顾客关怀中心:400-821-5098  会员积分兑礼服务热线:400-820-0660p>
           div>
           <div class="footer_copyright">
             <p>沪ICP备11031739号-1p>
           div>
      div>
      
      <div class="footer_right">
          <img src="images/logoparis.png" />
      div>
div>
body>
html>

2.css放的地方:
HTML+CSS简单实例(一)_第1张图片
HTML+CSS简单实例(一)_第2张图片

你可能感兴趣的:(HTML+CSS)