2018.7.1 css項目之模仿滿屋花首頁css+idv布局實現
阿新 • • 發佈：2018-07-01
log 註冊 align set 生日 lac color 會員中心 size
可以分開寫
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>滿屋花</title> <style type="text/css"> body{ background-color: #FFD8D9; text-align:center; font-size:12px; margin:10px 0px 0px 0px; padding:0px; } #title img{ width:700px ; } .container{ position:relative; margin:0px auto; width:800px; text-align:left; } #bar{ margin:0px; padding:0px; } #bar ul{ list-style:none; padding:0px; margin:0px; } #bar li{ text-align:center; float:left; width:100px; } #bar a{ display:block; padding:9px 6px 11px 6px; /*background:url(img/button_bar.jpg) no-repeat; */ /*漸變色*/ background: linear-gradient(180deg,#FFCED2,#FFF6F7,#FFFFFF); margin:0px; } #bar a:link,#bar a:visited{ color:black; text-decoration:none; } #bar a:hover{ color:blueviolet; text-decoration:underline; font-size: 12px; } #left{ width:180px; float:left; background:#FFFFFF url(leftbottom.jpg) no-repeat; margin:10px 0px 0px 0px; border-radius:20px ; } #login{ background:url(img/login.jpg) no-repeat; padding:38px 0px 10px 0px; } #login form{ padding:0px; margin:0px; } #login p{ margin:1px; text-align:left; padding:5px 0px 0px 25px; } #login form input.text{ border-bottom:1px solid black; /*設置文本框的左右上的線沒有*/ border-left:none; border-right:none; border-top:none; padding:0px; width:90px; } #login form input.btn{ border:1px solid #000000; background-color:#FFEFF0; height:17px; padding:0px; } #login p a:link,#login p a:visited{ color:#333333; text-decoration:none; } #login p a:hover{ color:#000088; texe-decoration:underline; } #category{ background:url(img/fenlei.jpg) no-repeat; padding:50px 0px 35px 0px; } #category h4{ margin:0px 18px; padding:3px 0px 1px 5px; background-color: #FFD1D1; font-size:12px; } #category ul{ list-style:none; margin:0px; padding:5px 22px 15px 22px; } #category ul li{ padding:2px 0px 2px 16px; border-bottom:1px dashed red; background:url(img/dian.gif) no-repeat 5px 7px; } #category ul li a:link , #category ul li a:visited{ color:black; text-decoration:none; } #category ul li a:hover{ color:blue; text-decoration:underline; } #right{ float:left; width:520px; margin:0px 0px 0px 1px; } #top{ border-radius:21px ; background:pink url(img/new.jpg) no-repeat; padding:20px 0px 0px 1px; margin-left:0px; margin-top: 10px; margin-bottom: 10px; } #top img{ border:none; padding-left:0px; } #top ul li{ /*去點*/ display: inline; } #top ul li img{ /*圖片太大就需要設置寬度*/ width: 157px; } #recommend{ border-radius:21px ; background:url(img/recommend.jpg) no-repeat; margin:5px 0px 0px 0px; padding:35px 0px 0px 0px; background-color:#ffffff; margin-bottom: 20px; } #recommend br, #new br,#buttom br{ display:block; clear:both; margin:0px; padding:0px; } #recommend ul , #new ul{ list-style:none; margin:0px; padding:5px 5px 5px 8px; } #recommend ul li,#new ul li{ text-align:center; float:left; width:125px; } #recommend ul li img , #new ul li img{ border:none; margin:5px 0px 3px 0px; padding:0px; } #recommend ul li a:link, #recommend ul li a:visited , #new ul li a:link,#new ul li a:visited{ color:#666666; text-decoration:none; } #recommend ul li a:hover , #new ul li a:hover{ color:#D20005; text-decoration:underline; } #new{ border-radius:21px ; background:url(img/new.jpg) no-repeat; margin:5px 0px 0px 0px; padding:35px 0px 0px 0px; background-color:#FFFFFF; } #buttom{ border-radius:25px ; background:url(img/daogou.jpg) no-repeat; margin:5px 0px 10px 0px; padding:45px 0px 35px 0px; background-color:#FFFFFF; font-size: 15px; margin-top: 10px; } #buttom ul{ list-style:none; margin:0px; padding:5px 5px 5px 30px; } #buttom ul li{ /*設置文字前面的箭頭 通過添加圖片來處理 */ background:url(img/jiantou.jpg) no-repeat 5px 6px; padding:1px 0px 1px 12px; float:left; width:220px; } #buttom ul li a:link,#buttom ul li a:visited{ color:#222222; text-decoration:none; } #buttom ul li a:hover{ color:#8A2BE2; /*當鼠標放在文本上面的時候會顯示一根線*/ text-decoration:underline; } </style> </head> <body> <div class="container"> <div id="title"> <img src="img/title.jpg"> </div> <!--導航欄--> <div id="bar"> <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> <li> <a href="#">聯系我們</a> </li> <li> <a href="#">支付方式</a> </li> </ul> </div> <!--左邊的一列--> <div id="left"> <!--登錄表單--> <div id="login"> <form> <p> 用戶：<input type="text" name="" value="" class="text"> </p> <p> 密碼：<input type="text" name="" value="" class="text"/> </p> <p> <input type="button" class="btn" value="登錄"/> <input type="button" class="btn" value="註冊"/><a href="#">忘記密碼</a> </p> </form> </div> <!--鮮花分類--> <div id="category"> <h4><span>用途</span></h4> <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> <li> <a href="#">道歉鮮花</a> </li> <li> <a href="#">探望祝福</a> </li> <li> <a href="#">開業花籃</a> </li> <li> <a href="#">會議用花</a> </li> </ul> <!--花材--> <h4><span>花材</span></h4> <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> <li> <a href="#">馬蹄蘭</a> </li> <li> <a href="#">扶朗</a> </li> <li> <a href="#">劍蘭</a> </li> </ul> <!--價格--> <h4><span>價格</span></h4> <ul> <li> <a href="#">100~200元</a> </li> <li> <a href="#">200~300元</a> </li> <li> <a href="#">300~400元</a> </li> <li> <a href="#">400~500元</a> </li> <li> <a href="#">500~600元</a> </li> <li> <a href="#">600~800元</a> </li> <li> <a href="#">800元以上</a> </li> </ul> </div> </div> <!--右邊部分--> <div id="right"> <!--上面--> <div id="top"> <ul> <li><a href="#"><img src="img/new1.jpg"></a></li> <li><a href="#"><img src="img/new2.jpg"></a></li> <li><a href="#"><img src="img/new3.jpg"></a></li> </ul> </div> <!--推薦部分--> <div id="recommend"> <ul> <li> <a href="#"><img src="img/flower1.jpg"><br/>幸福的味道</a><br/>￥288元></li> <li> <a href="#"><img src="img/flower2.jpg"><br/>陽光守護你</a><br/>￥300元</li> <li> <a href="#"><img src="img/flower3.jpg"><br/>溫情永遠</a><br/>￥268元</li> <li> <a href="#"><img src="img/flower4.jpg"><br/>愛無界</a><br/>￥318元></li> <li> <a href="#"><img src="img/flower5.jpg"><br/>親親寶貝</a><br/>￥368元</li> <li> <a href="#"><img src="img/flower6.jpg"><br/>相信是緣</a><br/>￥188元</li> <li> <a href="#"><img src="img/flower7.jpg"><br/>水晶童話</a><br/>￥198元></li> <li> <a href="#"><img src="img/flower8.jpg"><br/>天使之愛</a><br/>￥268元</li> </ul> <br/> </div> <div id="new"> <ul> <li> <a href="#"><img src="img/flower9.jpg"><br/>粉色迷情</a> </li> <li> <a href="#"><img src="img/flower10.jpg"><br/>海岸的優雅</a> </li> <li> <a href="#"><img src="img/flower11.jpg"><br/>百年地中海</a> </li> <li> <a href="#"><img src="img/flower12.jpg"><br/>愛要說出口</a> </li> </ul> <br> </div> <div id="buttom"> <ul> <li> <a href="">各種鮮花所代表的含義</a> </li> <li> <a href="#">花的喜怒哀樂與人的各種感覺</li> <li> <a href="#">養花與養生之道</li> <li> <a href="#">每天清晨的第一縷陽光</li> <li> <a href="#">花香的味道</li> <li> <a href="#">世界各地關於送花的習俗</li> <li> <a href="#">手捧一束鮮花的等待</li> </ul> <br> </div> </div> </div> </body> </html>
2018.7.1 css項目之模仿滿屋花首頁css+idv布局實現