學習了一段時間的框架，最近在複習最早學的html5、css3，拿了一個小案例做了一下，整個過程還算順利，附圖：
其實頁面整體結構還是很清晰的，這裏我也是直接使用了多個div嵌套劃分的常規手段，沒有用到柵格。
附上.html代碼~~~
<!DOCTYPE html>
<html>
<head>
<title>寶貝之家</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./web.css">
<style type="text/css">
</style>
</head>
<body>
<div class = 'title_top'>
<img src="./img/title.png">
<div class = 'title_top_nav'>
<ul>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯繫方式</a></li>
<li><a href="#">意見建議</a></li>
</ul>
</div>
</div>
<div class = 'nav'>
<div class = 'nav_text'>
<ul>
<li><a href="#">網站首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">信息</a></li>
<li><a href="#">暢銷排行榜</a></li>
</ul>
</div>
<div class = 'nav_bottom'></div>
<div class = 'login_menu'><img src="./img/login.png" height = '120px'></img></div>
</div>
<script type="text/javascript">
var nav = document.getElementsByClassName('nav_text');
var text = document.querySelectorAll('li');
for(var i = 3;i < 7;i++){
text[i].onmouseover = function(){
this.style.background = '#e5bf73';
this.style.height = '25px';
}
text[i].onmouseout = function(){
this.style.background = '#448bc0';
this.style.bakcground = '20px';
}
}
</script>
<div class = 'content clearfix'>
<div class = 'content_left'>
<div class = 'title1'>
<h2>今日推薦</h2>
<img src="./img/icon.png"></img>
</div>
<div class = 'content1'>
<img src="./img/pic1.png">
<span>環保印花件套，採用超柔和進口面料，手感極其柔軟、舒適。採用高支高密精梳純棉織物作爲面料，手感柔軟舒適，經久耐用，多款圖案風格能夠和不同家居設計完美搭配</span></br><span>縮水率以及退色率均符合國家檢測標準，綠色環保。30度以下水溫洗衣機弱洗，中性洗滌劑，中溫熨燙</span>
</div>
<div class = 'title2'>
<h2>最受歡迎</h2>
<img src="./img/icon.png"></img>
</div>
<div class = 'content2'>
<span>九孔棉冬被選用優質滌綸面料，手感柔軟、花型獨特，填充料採用高科技的聚酯螺旋纖維精緻而成，該纖維細如髮，彈性極強，且飽含空氣，恆溫性強，使您倍感輕軟舒適。經特殊工藝加工後，長期保持鬆軟如新，爲您提供健康的睡眠需要</span>
<img src="./img/pic2.png" width=300px>
</div>
<div class = 'title3'>
<h2>分類推薦</h2>
<img src="./img/icon.png"></img>
</div>
<div class = 'content3'>
<img src="./img/small_pic1.png" style = 'padding-top:30px;padding-left:100px;'></img>
<img src="./img/small_pic2.png" style = 'padding-top:30px;padding-left:100px;'></img>
<img src="./img/small_pic3.png" style = 'padding-top:30px;padding-left:100px;'></img>
<div class = 'note'>
<span>休閒款式，柔軟富有彈</br>性。舒服自然，飄逸聰穎。</span>
<span>小兔子披肩，柔軟富有彈</br>性。舒服自然，飄逸聰穎。</span>
<span>精梳棉材質，不起球、不</br>變形、更透氣</span>
</div>
</div>
</div>
<div class = 'content_right'>
<div class = 'content1'>
<input type="text">
<button>查詢商品</button>
</div>
<div class = 'content2'>
<img src="./img/content_right.png"></img>
</div>
<div class = 'content3'>
<h3>特別提示</h3>
<p>新品每週三8.8折優惠，兩件8.5折優惠</p>
</div>
</div>
</div>
<div class = 'footer clearfix'>
<ul>
<li>網站首頁<span style = 'color:black;'>|</span></li>
<li>產品介紹<span style = 'color:black;'>|</span></li>
<li>信息<span style = 'color:black;'>|</span></li>
<li>暢銷暢銷榜</li>
</ul>
</div>
</body>
</html>
CSS代碼~~~~
*{
padding: 0;
margin: 0;
}
.clearfix{
content:"";
clear:both;
display:block;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}
.title_top{
width:100%;
height:70px;
background-color: #bdd6e8;
}
.title_top img{
margin-bottom:20px;
padding-left:50px;
}
.title_top .title_top_nav{
display: inline-block;
}
.title_top .title_top_nav ul{
margin-left:620px;
padding-bottom:90px;
}
.title_top .title_top_nav li{
margin-top:5px;
margin-left:2px;
width:70px;
height:20px;
float:left;
padding:0 20px;
color:#7381c4;
background-color: #fff;
border-bottom-right-radius: 10%;
border-bottom-left-radius: 10%;
text-align: center;
}
.title_top .title_top_nav li a{
color:#3d81c4;
}
.nav{
margin-top:5px;
width:100%;
height:50px;
background:linear-gradient(to bottom,#85b3d5,#448bc0);
position: relative;
}
.nav .nav_text{
padding-left:50px;
padding-top:25px;
}
.nav .nav_text ul li{
float:left;
padding: 0 20px;
background-color: ##448bc0;
}
.nav .nav_text ul li a{
color:#fff;
font-weight: bolder;
}
.nav .nav_bottom{
float:left;
width:100%;
height:30px;
background:linear-gradient(to bottom,#e3bc6c,#efd7a7);
}
.nav .login_menu{
position: absolute;
top:-30px;
left:1100px;
}
.nav .login_menu img{
cursor: pointer;
}
.content{
width:1250px;
margin:80px auto;
}
.content h2{
color:#006699;
border-bottom:1px solid #deaf50;
}
.content .content_left{
width:900px;
float:left;
}
.content .content_left .title1 h2{
float:left;
width:866px;
}
.content .content_left .title1 img{
padding-top:2px;
}
.content .content_left .content1{
margin-top:20px;
}
.content .content_left .content1 img{
float:left;
}
.content .content_left .content1 span{
font-size: 14px;
display:block;
width:500px;
margin-left:200px;
padding-left:70px;
padding-top:10px;
text-indent: 30px;
}
.content .content_left .title2 h2{
float:left;
width:866px;
margin-top:30px;
}
.content .content_left .title2 img{
padding-top:49px;
}
.content .content_left .content2 span{
font-size: 14px;
float:left;
width:500px;
text-indent: 30px;
padding-top:30px;
line-height: 3em;
}
.content .content_left .content2 img{
display: block;
padding-top:30px;
padding-left:30px;
}
.content .content_left .title3 h2{
float:left;
width:866px;
margin-top:30px;
}
.content .content_left .title3 img{
padding-top:32px;
}
.content .content_left .content3 .note span{
text-indent: 20px;
font-size: 12px;
display: inline-block;
width:170px;
}
.content .content_left .content3 .note span:nth-child(1){
padding-left:100px;
}
.content .content_left .content3 .note span:nth-child(2){
padding-left:60px;
}
.content .content_left .content3 .note span:nth-child(3){
padding-left:60px;
}
.content .content_right{
width:300px;
display:inline-block;
}
.content .content_right .content1{
float:right;
background-color: #bdd6e8;
width:200px;
height:100px;
border-radius: 20%;
}
.content .content_right .content1 input{
margin-left:12px;
margin-top:10px;
}
.content .content_right .content1 button{
margin-left:70px;
margin-top:40px;
}
.content .content_right .content2{
margin-left:110px;
margin-top:150px;
}
.content .content_right .content3{
float:right;
background-color: #bdd6e8;
width:200px;
height:120px;
margin-top:50px;
border-radius: 20%;
}
.content .content_right .content3 h3{
padding-top:20px;
padding-left:50px;
color:#0066ac;
}
.content .content_right .content3 p{
text-indent: 20px;
font-size:12px;
padding:10px 5px;
}
.footer{
display: inline-block;
margin-top: 30px;
width:100%;
height:30px;
background:linear-gradient(to bottom,#80b0d4,#448abf);
}
.footer ul{
padding-left: 550px;
}
.footer ul li{
float:left;
line-height: 30px;
color:#fff;
font-size: 12px;
}
做出來也是可以放心的繼續深入學習啦，就怕把最基礎的東西給忘了！
大佬們多多指教批評啊！！