小程序 微網站南寧網站關鍵詞推廣
之前有小伙伴說，淘寶那么牛逼你會寫代碼，能幫我做一個一樣的淘寶網站嗎，好呀，看我接下來如何給你做一個淘寶首頁。hahh,開個玩笑。。。學習而已。
在進行html + css編寫之前 先了解下網頁的組成和網頁元素的尺寸吧
1.網頁的組成
一個網頁從主要由頁頭，正文，頁尾、布局排版、交互元素組成的。
淘寶網頁的頁頭，正文就是中間的部分，頁尾是最底部關于導航、網頁版權備案信息那部分，交互元素是用戶在網頁上的可以干什么事，比如鏈接跳轉，搜索按鈕，輸入框等；布局排版是網頁設計最重要的部分，就是指網頁要長成個什么樣子。
2. 網頁元素尺寸
1.電腦端的網頁尺寸：
寬度：通常在1024px到1920px之間，主流分辨率為1920px。簡單的理解就是網頁我們可以看到部分的寬度尺寸。電腦的屏幕有大有小，所以選擇合適的尺寸來適應不同大小屏幕。
高度：沒有固定標準，但一般每個屏幕的高度大約為900px（考慮到1080px的屏幕需要減去瀏覽器頭部和底部的高度）
2.字體設計：
中文常用字體：宋體、微軟雅黑或蘋果系統(tǒng)黑體。
導航文字：14px、16px、18px、20px。
本文內容：12px、14px。
標題：22px、24px、26px、28px、30px。
3.html + css排版
頭部導航
網頁元素都是由一個一個區(qū)域組成的，我們把這個區(qū)域叫做 塊元素，也就是一個<div>標簽，在頭部導航中有背景區(qū)域，可以把這個區(qū)域的寬度設為100% ，這樣無論屏幕多大背景色都會保持不變。其實就是中間文字部分，由一個大的<div>作為容器將他們包裹起來，這個區(qū)域是可視區(qū)域，寬度也就是網頁的尺寸，要保持居中顯示。最后就是用2個<div>將左右2邊的文字分別包裹起來進行顯示了.
由于<div>是塊，一個<div>獨占一行,所以采用的浮動屬性float來布局的。這里當然也可以用到flex容器布局的
搜索及導航區(qū)
上面畫的紅色框框就是一個個的<div>標簽，他們的關系是包含和被包含的關系。排版這里主要也是用到css float浮動屬性，需要注意的是在浮動元素后面的元素中需要使用 clear:both 清除浮動帶來的影響 .
<!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>切換企業(yè)版</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>淘寶企業(yè)購</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>*{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
}
瀏覽器效果：
后面的內容區(qū)域有興趣可以下載下來接著完成啦，如果有問題的地方歡迎留言！