在製作主體區域需要用到的知識點：
1. 如何使標籤元素文字垂直顯示。
標籤元素文字垂直顯示
首先將內聯標籤設置爲塊級標籤
在設置標籤寬度不能大於或等於 2*文字大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
a {
display: block;
color: white;
background-color: black;
width: 22px;
text-decoration: none;
font-size: 12px;
text-align: center;
line-height: 15px;
border-bottom:1px solid red;
padding:10px 0px 20px 0px;
}
.i_car {
display:block;
width:22px;
height:30px;
background-image:url(http://s17.mogucdn.com/p1/151013/upload_iezdmoldgm2tmnrtgqzdambqmmyde_30x220.png);
background-repeat:no-repeat;
background-position:-4px 0;
}
</style>
</head>
<body>
<a><i class="i_car"></i>購物車</a>
<a><i class="i_car"></i>購物車</a>
</body>
</html>
源碼
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蘑菇街</title>
<link href="css/global.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<div class="header_warpper">
<a href="javascript:;" class="ft_black home">蘑菇街首頁</a>
<ul class="header_top">
<li><a href="javascript:;">註冊</a></li>
<li><a href="javascript:;" class="has_right_line">登錄</a></li>
<li><a href="javascript:;" class="myorder has_right_line">我的訂單</a></li>
<li><a href="javascript:;" class="shopping_car has_right_line">購物車</a></li>
<li><a href="javascript:;" class="custom_item has_right_line">客服服務</a></li>
<li><a href="javascript:;" class="myxiaodian">我的小店</a></li>
</ul>
</div>
</div>
<!--右邊側邊欄-->
<div id="rightbar">
<div class="element"><a href="javascript:;"><i class="i_shopingcar i_icon"></i>購物車</a></div>
<div class="element"><a href="javascript:;"><i class="i_coupon i_icon"></i>優惠券</a></div>
<div class="element"><a href="javascript:;"><i class="i_wallet i_icon"></i>錢包</a></div>
<div class="element"><a href="javascript:;"><i class="i_footprint i_icon"></i>足跡</a></div>
<div class="element returntop"><a href="javascript:;"><i class="i_returntop i_icon"></i></a></div>
</div>
<!--搜索區-->
<div id="header_search">
<div class="header_search_warpper">
<a href="javasctipt:;" class="logo"><img src="http://s17.mogucdn.com/p2/160811/upload_8c33je43c5fj80c276h940793i6i8_240x90.png" width="240" height="90" /></a>
<div class="search">
<div class="from_search">
<form action="/" method="post">
<span class="ft_12_f07 search_tip">搜商品</span><input class="ipt_search" type="text" placeholder="360行車記錄儀" /><input type="submit" value="搜 索" class="btn_search" />
</form>
</div>
<div class="hotwords">
<a href="javascript:;">韓範棉服</a>
<a href="javascript:;">范德薩</a>
<a href="javascript:;">接口</a>
<a href="javascript:;">黑寡婦</a>
<a href="javascript:;">衛衣</a>
<a href="javascript:;">吧才</a>
<a href="javascript:;">規範</a>
<a href="javascript:;">核桃仁</a>
<a href="javascript:;">韓國房價高</a>
</div>
</div>
<a href="javasctipt:;" class="logo1"><img src="http://s16.mogucdn.com/p2/161115/upload_13e082af9kk5fk9b40i0h50a36b66_440x180.png" width="220" height="90" /></a>
</div>
</div>
<div id="body_warpper">
<!--橫幅區-->
<div class="banner">
<!--商品分類區-->
<div class="shpping_nav">
<ul class="nav_list">
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
<li>
<dl class="nav_warp">
<dt><a href="javascript:;">上衣</a></dt>
<dd>
<a href="javascript:;">初冬上新</a><a href="javascript:;">毛衣外套</a><a href="javascript:;">棉服</a>
</dd>
</dl>
</li>
</ul>
</div>
<!--輪播圖-->
<div class="slider">
<a href="javascript:;"><img src="http://s7.mogucdn.com/p2/161221/260_83lbc2jdade54c0dg6kj0c0b183jl_778x480.jpg_999x999.v1c0.webp" width="778" height="480" /></a>
<div class="dot">
<ul class="slider_dot">
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
<li>
<a href="javascript:;"><img src="http://s8.mogucdn.com/pic/140829/o61vu_ieydmm3bmi2geodgmiytambqgiyde_40x40.png" width="20" height="20" /></a>
</li>
</ul>
</div>
</div>
<!--用戶中心-->
<div class="user_info">
<a href="javascript:;" class="user_headportrait"></a>
<span class="ft_12">菇涼好</span><br /><br />
<span class="ft_14_bold">歡迎來逛蘑菇街~</span><br /><br />
<a href="javascript:;" class="btn_login">登錄</a><br />
<span class="ft_12">上萬網紅在APP教</span><br />
<span class="ft_12">你搭配和化妝</span><br /><br />
<a href="javascript:;"><img src="http://s17.mogucdn.com/p2/160927/upload_7bljgc5jh4hbe8l9fef47h69ggcd1_126x126.gif" width="126" height="126" /></a><br /><br />
<span class="ft_12">手機專屬功能</span>
</div>
</div>
<!---->
</div>
<div id="footer"></div>
</body>
</html>index.css
#header {
background-color: #F2F2F2;
border-bottom: 1px solid #ddd;
height: 31px;
}
#header > .header_warpper {
width: 1200px;
height: 100%;
margin: 0 auto;
line-height: 31px;
}
#header > .header_warpper > .home {
background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat 0 -5px;
display: inline-block;
padding-left: 20px;
float: left;
}
#header > .header_warpper > .header_top {
float: right;
height: 31px;
}
#header > .header_warpper > .header_top > li {
float: left;
margin-right: 15px;
line-height: 31px;
height: 31px;
}
#header > .header_warpper > .header_top > li > a {
margin-top: 8px; /*IE8以下，不支持內聯塊狀元素使用line-hight居中*/
}
#header > .header_warpper > .header_top .myorder {
background: url(http://s17.mogucdn.com/p1/150923/upload_ie2wmzdehazwkztdgmzdambqhayde_100x400.png) no-repeat;
display: inline-block;
background-position: 0px -220px;
padding-left: 20px;
height: 16px;
line-height: 16px;
}
#header > .header_warpper > .header_top .shopping_car {
background: url(http://s17.mogucdn.com/p1/150923/upload_ie2wmzdehazwkztdgmzdambqhayde_100x400.png) no-repeat;
display: inline-block;
background-position: 0px -112px;
padding-left: 20px;
height: 16px;
line-height: 16px;
}
#header > .header_warpper > .header_top .custom_item {
background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat;
display: inline-block;
background-position: 50px 7px;
padding-right: 20px;
height: 16px;
line-height: 16px;
}
#header > .header_warpper > .header_top .myxiaodian {
background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat;
display: inline-block;
background-position: 50px 7px;
padding-right: 10px;
height: 16px;
line-height: 16px;
}
/*側邊欄開始*/
#rightbar {
background-color: #000;
height: 100%;
width: 30px;
position: fixed;
right: 0px;
top: 0px;
color: white;
padding-top: 82px;
}
#rightbar .element:hover {
background-color: red;
}
#rightbar a {
text-align: center;
color: white;
display: block;
margin: 0 auto;
width: 20px;
padding: 10px 0px;
border-bottom: 1px solid white;
}
#rightbar a .i_icon {
display: block;
width: 20px;
height: 30px;
background-repeat: no-repeat;
background-image: url(http://s17.mogucdn.com/p1/151013/upload_iezdmoldgm2tmnrtgqzdambqmmyde_30x220.png);
}
#rightbar a .i_shopingcar {
background-position: -5px 0;
}
#rightbar a .i_coupon {
background-position: -5px -30px;
}
#rightbar a .i_wallet {
background-position: -5px -90px;
}
#rightbar a .i_footprint {
background-position: -5px -60px;
}
#rightbar a .i_returntop {
background-position: -5px -150px;
}
#rightbar .returntop {
position: fixed;
bottom: 20px;
width: 30px;
}
#rightbar .returntop a {
border-top: 1px solid white;
border-bottom: 0px;
padding: 0px;
}
/*頭部搜索區開始*/
#header_search {
height: 90px;
}
#header_search .header_search_warpper {
width: 1200px;
height: 90px;
margin: 0 auto;
position: relative;
}
#header_search .header_search_warpper .logo {
position: absolute;
left: 0px;
}
#header_search .header_search_warpper .logo1 {
position: absolute;
right: 0px;
}
#header_search .header_search_warpper .search {
position: absolute;
left: 240px;
right: 220px;
height: 100%;
}
#header_search .header_search_warpper .search .from_search {
border: 1px solid #f07;
height: 34px;
width: 482px;
margin: auto;
margin-top: 28px;
line-height: 34px;
padding-left: 15px;
}
#header_search .header_search_warpper .search .from_search .search_tip {
background-image: url(http://s16.mogucdn.com/p2/160811/upload_3a8188da5hkdk76cj936afck6l19a_8x4.png);
background-repeat: no-repeat;
background-position: 40px 3px;
padding-right: 12px;
}
#header_search .header_search_warpper .search .from_search .ipt_search {
width: 315px;
height: 28px;
padding: 2px 10px;
border: 0px;
}
#header_search .header_search_warpper .search .from_search .btn_search {
height: 34px;
border: 0px;
width: 99px;
background-color: #f07;
color: white;
font-size: 16px;
cursor: pointer;
}
#header_search .header_search_warpper .search .hotwords {
height: 20px;
width: 500px;
margin: auto;
margin-top: 5px;
}
#header_search .header_search_warpper .search .hotwords a {
margin-right: 8px;
}
/*橫幅區開始*/
#body_warpper {
height: 480px;
margin-top: 10px;
}
#body_warpper .banner {
height: 100%;
width: 1200px;
margin: 0 auto;
position: relative;
}
#body_warpper .banner .shpping_nav {
width: 256px;
background-color: rgb(51, 51, 51);
border-radius:10px 0px 0px 10px;
position: absolute;
left: 0;
}
#body_warpper .banner .user_info {
width: 200px;
background-color: rgb(229, 216, 216);
border-radius:0px 10px 10px 0px;
position: absolute;
right: 0;
top: 0;
height:100%;
text-align:center;
}
#body_warpper .banner .slider {
position: absolute;
left: 256px;
right: 200px;
top: 0;
}
#body_warpper .banner .slider .dot { /*使用相對定位居中技巧*/
position: relative;
left: 50%;
float: left;
height: 23px;
bottom: 30px;
}
#body_warpper .banner .slider .slider_dot {
position: relative;
left: -50%;
}
#body_warpper .banner .slider .slider_dot li {
float: left;
margin-right: 3px;
}
#body_warpper .banner .nav_list {
padding: 20px 0 0 0;
height: 100%;
}
#body_warpper .banner .nav_list li {
height: 32px;
padding-left:20px;
border-bottom:1px solid rgb(58,58,58);
}
#body_warpper .banner .nav_list li:last-child {
border:0px;
}
#body_warpper .banner .nav_list li .nav_warp a {
color: white;
margin-right: 10px;
}
#body_warpper .banner .nav_list li .nav_warp a:hover {
color: #f37;
}
#body_warpper .banner .nav_list li .nav_warp dt {
float:left;
line-height:32px;
padding-right:20px;
}
#body_warpper .banner .nav_list li .nav_warp dd {
line-height:32px;
}
#body_warpper .banner .nav_list li .nav_warp dt a {
font-size: 16px;
font-weight: 600;
}
#body_warpper .banner .user_info .user_headportrait {
display:block;
margin:40px auto 10px auto;
width:72px;
height:72px;
background-color:#FF94C6;
background-image:url(http://s17.mogucdn.com/p2/160826/upload_7a9719cl61k83h5cbkc9fl1330i5c_60x64.png);
background-repeat:no-repeat;
background-size:30px 30px;
background-position:22px 15px;
border-radius:100%;
}
#body_warpper .banner .user_info .btn_login {
display:block;
width:102px;
height:32px;
margin:0px auto 10px auto;
background-color:#F7517E;
line-height:32px;
font-size:14px;
font-weight:bold;
color:white;
border-radius:20px;
}
#body_warpper .banner .user_info .btn_login:hover {
background-color:#F10E4C;
}global.css
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
*:focus {
outline: none;
}
/*主要針對谷歌等獲得焦點時的border*/
ul, ol, img, dl {
margin: 0px;
padding: 0px;
border: 0px;
}
a {
text-decoration: none;
font-size: 12px;
color: #666;
}
a:hover {
color: #f07;
}
ul, ol {
list-style: none;
}
.has_left_line {
padding-left: 15px;
border-left: 1px solid #ddd;
}
.has_right_line {
padding-right: 15px;
border-right: 1px solid #ccc;
}
.ft_black {
color: black;
}
.ft_12_f07 {
font-size: 12px;
color: #f07;
}
.ft_12 {
font-size: 12px;
}
.ft_14 {
font-size: 14px;
}
.ft_14_bold {
font-size: 14px;
font-weight: bold;
}效果圖
