html + css 淘宝网实战

之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。

在进行html + css编写之前先了解下网页的组成和网页元素的尺寸吧

1.网页的组成

一个网页从主要由页头，正文，页尾、布局排版、交互元素组成的。

淘宝网页的页头，正文就是中间的部分，页尾是最底部关于导航、网页版权备案信息那部分，交互元素是用户在网页上的可以干什么事，比如链接跳转，搜索按钮，输入框等；布局排版是网页设计最重要的部分，就是指网页要长成个什么样子。

2. 网页元素尺寸

1.电脑端的网页尺寸：

宽度：通常在1024px到1920px之间，主流分辨率为1920px。简单的理解就是网页我们可以看到部分的宽度尺寸。电脑的屏幕有大有小，所以选择合适的尺寸来适应不同大小屏幕。

高度：没有固定标准，但一般每个屏幕的高度大约为900px（考虑到1080px的屏幕需要减去浏览器头部和底部的高度）
2.字体设计：

中文常用字体：宋体、微软雅黑或苹果系统黑体。

导航文字：14px、16px、18px、20px。

本文内容：12px、14px。

标题：22px、24px、26px、28px、30px。

3.html + css排版

头部导航

网页元素都是由一个一个区域组成的，我们把这个区域叫做块元素，也就是一个<div>标签，在头部导航中有背景区域，可以把这个区域的宽度设为100% ，这样无论屏幕多大背景色都会保持不变。其实就是中间文字部分，由一个大的<div>作为容器将他们包裹起来，这个区域是可视区域，宽度也就是网页的尺寸，要保持居中显示。最后就是用2个<div>将左右2边的文字分别包裹起来进行显示了.

由于<div>是块，一个<div>独占一行,所以采用的浮动属性float来布局的。这里当然也可以用到flex容器布局的

搜索及导航区

上面画的红色框框就是一个个的<div>标签，他们的关系是包含和被包含的关系。排版这里主要也是用到css float浮动属性，需要注意的是在浮动元素后面的元素中需要使用 clear:both 清除浮动带来的影响 .

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网</title>
<link rel="stylesheet" href="style/taobao.css">
</head>
<body>
	<div class="header">
        <div class="header-top">
            <div class="header-top-l">
                <ul>
                    <li class="active">中国大陆</li>
                    <li>用户名</li>
                    <li>网页无障碍</li>
                    <li>切换企业版</li>
                    <li>选择主题</li>
                </ul>
            </div>
            <div class="header-top-r">
                <ul>
                    <li>已买到的宝贝</li>
                    <li>我的淘宝</li>
                    <li>购物车</li>
                    <li>收藏夹</li>
                    <li>商品分类</li>
                    <li>免费开店</li>
                    <li>千牛卖家中心</li>
                    <li>帮助中心</li>
                </ul>
            </div>
        </div>
        <div class="header-gg">
            <div class="header-gg-cc">
                <img src="images/header-gg.png" alt="">
            </div> 
        </div>
        <div class="header-sr">
            <div class="logo"></div>
            <div class="search-cc">
                <div class="search-ii">
                    <div class="search-select">
                        <select name="" id="">
                            <option value="">宝贝</option>
                            <option value="">天猫</option>
                            <option value="">店铺</option>
                        </select>
                    </div>
                    <div class="fg">|</div>
                    <div class="search-input">
                        <input type="text" placeholder="九号mzmix后视镜">
                    </div>
                    <div class="search-button">搜索</div>
                </div>
                <div class="search-tk">
                    <div class="camera"></div>
                    <div class="search-tk-t">搜同款</div>
                </div>
                <div class="search-keyword">
                    <ul>
                        <li><a class="hot">打牌钜惠倒计时</a></li>
                        <li><a class="hot">零食1元秒杀</a></li>
                        <li><a class="hot">爆款低至9.9元</a></li>
                        <li>mtplay小牛</li>
                        <li>儿童羽绒服</li>
                        <li>妈妈外套冬季羽绒服</li>
                        <li>赤兔7Pro跑步鞋</li>
                        <li>全顺四代纪念版</li>
                    </ul>
                </div>
            </div>
            <div class="red-packet"></div>
        </div> 
    </div>
    <div class="nav">
        <ul>
            <li><div class="nav-title first-title"><a>天猫</a</li>
            <li>
                <div class="nav-icon"></div>
                <div class="nav-title"><a>淘宝直播</a</div>
            </li>
            <li>
                <div class="nav-icon nav-icon2"></div>
                <div class="nav-title"><a>淘宝企业购</a</div>
            </li>
            <li><div class="nav-title"><a>司法拍卖</a</li>
            <li><div class="nav-title green"><a>天猫超市</a</li>
            <li><div class="nav-icon nav-icon3"></div>
                <div class="nav-title"><a>闲鱼集市</a</div>
            </li>
            <li><div class="nav-title"><a>天猫国际</a</li>
        </ul>
    </div>
</body>
</html>

css 复制代码

*{
    margin:0;
    padding:0;
}
body,button,input,select,textarea {
    font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,PingFang TC,PingFang HK,Microsoft Yahei,Microsoft JhengHei
}

.header{
    width:100%;
    height:35px;
    background-color: #f5f5f5;
}
.header-top{
    width: 1200px;
    height:35px;
    margin: 0 auto;  /*居中*/
    color:#6d6b70;
}

.header-top ul{
    padding-top:15px;
}

.header-top-l{
    float: left; 
    width:420px;
    height:35px;
    line-height: 6px;
}
.header-top-l .active{
   color:#000000;
}

.header-top-r{
    float: left;
    padding-left: 80px;
    width:670px;
    height:35px;
    line-height: 6px;
}
.header-top-l ul li{
    list-style: none;
    float: left;
    font-size: 13px;
    margin-right: 20px;
}

.header-top-r ul li{
    list-style: none;
    float: left;
    font-size: 13px;
    margin-right: 20px;
}

.header-gg{
    width: 100%;
    height: 60px;
    background-color: #19814e;
}
.header-gg-cc{
    width: 1200px;
    height: 60px;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.header-gg img{
    width:3840px;
    height:60px;
    position: absolute;
    left: -112%;
}
.header-sr{
    width:1530px;
    height: 100px;
    height: auto;
    margin: 0 auto;
    margin-top:14px;
}
.logo{
    width:120px;
    height: 75px;
    background: url(../images/logo.png) no-repeat 50% / cover;
    float: left;
}
.search-cc{
    width:1070px;
    height:83px;
    float: left;
    margin-left:85px;
}
.search-ii{
    width: 950px;
    height:45px;
    border:2px solid #df5a1f;
    border-radius: 12px;
    float: left;
}
.search-select select{
    border: none;
    font-size: 15px;
    margin:15px 0 15px 18px;
    color:#313138;
    float: left;
}
.fg{
    float: left;
    margin:8px;
    color:#d7d7da;
}
.search-input{
    float: left;
}
.search-input input{
    border:none;
    margin:5px;
    width:760px;
    height: 35px;
}
.search-input input:focus{
    outline: none;
}
.search-button{
    width:74px;
    height: 38px;
    background-color: #ff5000;
    float: left;
    color:white;
    border-radius: 10px;
    margin-top:3px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
}
.search-tk{
    width: 100px;
    height: 45px;
    background-color: #fff2ec;
    border-radius: 10px;
    float: left;
    margin-left:10px;
}
.camera{
    width:25px;
    height: 25px;
    background: url("../images/camera.png") no-repeat 50% / cover;
    margin:10px 0 0 10px;
    float: left;
}
.search-tk-t{
    width: 55px;
    height:20px;
    line-height: 43px;
    float: left;
    color: #ef550f;
}
.search-keyword{
    clear: both;
    margin-left:5px;
}
.search-keyword ul li{ 
    list-style: none;
    float: left;
    margin-left: 10px;
    font-size: 12px;
    color:#96979c;
    padding-top:6px;
}
.hot{
    color:#f1334d;
}
.red-packet{
    width:240px;
    height:72px;
    background: url(../images/red-packet.gif) no-repeat 50% / cover;
    float: left;
    margin-left:15px;
}
.nav{
    clear: both;
    width:990px;
    height:35px;
    margin: 0 auto;
    padding-top:20px;
}
.nav ul li{
    list-style: none;
    float: left;
    margin-left:15px;
    font-size:16px;
    font-weight: 600;
}
.nav ul li:nth-child(-n+4){
    color:#f60c3d;
}

.green{
    color:#50d44f;
}
.nav-icon, nav-title{
    float: left;
}
.nav-title{
    width: 120px;
}
.first-title{
    width: 80px;
}
.nav-icon{
    width: 20px;
    height:20px;
    background: url(../images/icon1.gif) no-repeat 50% /cover;
    margin: 1px 5px -2px 0
}
.nav-icon2{
    width: 20px;
    height:20px;
    background: url(../images/icon2.png) no-repeat 50% /cover;
    margin: 1px 5px -2px 0
}
.nav-icon2{
    width: 20px;
    height:20px;
    background: url(../images/icon3.gif) no-repeat 50% /cover;
    margin: 1px 5px -2px 0
}

浏览器效果：

后面的内容区域有兴趣可以下载下来接着完成啦，如果有问题的地方欢迎留言！